Describe the bug
The textarea field of the Input field overflow from its div.

To Reproduce
Steps to reproduce the behavior:

1. Go to homepage
2. See error

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Linux
• Browser: Edge
• Version: 117

Additional context
I have fixed it and working on a PR.

rewrite the 12th point title in contributing.md file to :
When other developers update the master branch while you're working on your own branch, your branch becomes outdated and lacks the latest content. To get these changes, follow these steps.

Describe the bug
The Markdown input area is not responsive preview input area is alright.
on decreasing the size of screen it is going out of section.

I will fix it please assign me this task.

About Issue :
add the styling to the page and make all sections center. and row value for text-area is bit higher so decrease it accordingly. i.e. 25 or 20.

ScreenShot

Describe the bug
The content inside the markdown previewer overflows

To Reproduce
Steps to reproduce the behavior:

1. Go to 'WEBSITE'
2. Add content/markdown of good enough size/length on 'Markdown input area'
3. This generated a preview of markdown in the Markdown Preview section
4. See error The Generated preview overflows the preview section

Expected behavior
The Generated preview must come under the boundaries of the preview section

Screenshots
Content overflows preview section

Desktop (please complete the following information):

• OS: [Windows]
• Browser [Chrome]
• Version [22]

Smartphone (please complete the following information):

• Device: []
• OS: []
• Browser []
• Version []

Additional context

Describe the bug
Code is not properly displayed in the preview section.

To Reproduce
Steps to reproduce the behavior:

1. Add code contents using backticks ` `
2. You can see that code is not properly displayed

Expected behavior
A code block should be displayed containg the content inside backticks ` `

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu
• Browser Chrome
• Version 117

Describe the bug
markdown preview content coming out of the card

To Reproduce
Steps to reproduce the behavior:

1. Fill as much markdown code as possible
2. Check the preview card

Expected behavior
content not out from card markdown preview

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser Brave

Overall Layout and design can be improved.

Adding a theme toggling feature would be a nice thing

If you are interested, please assign me

Screenshot/image

please make sure you do all changes in css file.

Google Font Link : poppins

This issue aims to enhance the user interface of the Markdown Previewer repository by updating the Header's UI and making various UI/UX improvements. These changes will help make the Markdown Previewer more visually appealing and user-friendly.

Navbar UI Update:

• Design and implement a more modern and visually pleasing header.
• Ensure that the updated header is responsive and looks good on various screen sizes and devices.

Dark & Light Mode Button:

• Update the Dark & Light Mode button to include spacing on the left and right.

Layout Update:

• Ensure spacing between elements is uniform and visually appealing.
• Review the width of different sections or elements and adjust them to create a balanced, user-friendly layout.

Hello @hirentimbadiya, I hope u are doing great.
Hey i can update the README file for you.
Please assign me the work and give me the labels for hacktobeer fest.

we have implemented out divs in section i want them to be in center.

so use justify-content: center and align-items: stretch to make it center.

Current Behaviour :

Desired Behaviour :

add styling for text-area when we focus on text-area it should add border color and border radius.

border color should be : #e74c3c
box shadow should be : 2px 2px 10px rgba(231, 76, 60, 0.4)

Desired Solution :

Create a contributing.md file so that every contributer of the project can understand and contribute to this project.

Problem:
The current implementation of the cards lacks responsiveness, resulting in inconsistent card display across various devices with different screen widths.

Expected Behavior:
The cards should adapt to the available screen width on various devices, including desktops, tablets, and mobile phones.

Current Behavior:
The cards do not respond to changes in screen width, causing them to appear overlapped on smaller screens.

Steps to Reproduce:

• Open the application on a desktop with a large screen and observe the layout of the cards.
• Resize the browser window to simulate a smaller screen width (e.g., tablet or mobile device).

Problem

Currently, when contributors open pull requests (PRs) in this repository, there is no standardized format or template to follow for their PR descriptions. This can lead to inconsistent information, missing details, and increased friction in the code review process.

Solution

I propose that we implement a custom template for PRs in this repository. By providing a standardized template, we can achieve several benefits:

Consistency: A custom PR template ensures that every PR includes essential information such as the purpose of the change, related issues, and a checklist for reviewers.
Clarity: It helps contributors clearly communicate the purpose and impact of their changes, making it easier for reviewers to understand the context.
Efficiency: A template can prompt contributors to include necessary details upfront, reducing back-and-forth communication during code reviews.
Quality: It encourages contributors to think about tests, documentation, and adherence to coding guidelines.

Example

Description

This PR Fixes #[issue-number]

Changes Made

[Describe the changes made in your PR]

Screenshots

[If applicable]

Checklist

• I have tested the changes.
• I have updated documentation if necessary.
• I have assigned this PR to myself.
• I have added the appropriate labels.

Related Issues

[Link to related issues or discussions]

Impact

Implementing a custom PR template would streamline our contribution process and enhance the overall quality of PR submissions. It would benefit both the contributors and the reviewers, making collaboration more efficient.

• It's generally a good practice to place your <script> tags just before the closing </body> tag to ensure that your HTML content is loaded before your scripts are executed.

• Add a defer attribute to the <script> tag like this.

<script src="script.js" defer></script>

change readme file introduction to this :
A simple web application that permits users to input Markdown and instantly view a preview of the formatted text. This project encompasses HTML, CSS, and JavaScript. Novices can focus on designing the input and output layout, while slightly more experienced beginners can implement real-time updating functionalities.

• generate table of contents for the contributing.md file
  here is file : contributing.md

find any relatable favicon for markdown and add that image as a favicon in html file.