[documentation update]: README.md (#404)

Fixes: #396 

## Type of PR
- [x] Document Update

## Screenshots / videos (if applicable)
![Screenshot 2024-10-09
234803](https://github.com/user-attachments/assets/c4e767b4-b548-4639-8aa8-244797a0249d)
![Screenshot 2024-10-09
234751](https://github.com/user-attachments/assets/8ef01226-1428-4f77-b90e-9f9b2cd681c0)
![Screenshot 2024-10-09
234526](https://github.com/user-attachments/assets/1431f799-d051-4d30-9014-0f9238b30692)
![Screenshot 2024-10-09
234515](https://github.com/user-attachments/assets/3f8e8166-35b5-40d4-bfe8-0e578df3de44)

## Checklist
- [x] I have gone through the [contributing
guide](https://github.com/Anjaliavv51/Retro)
- [x] I have updated my branch and synced it with project `main` branch
before making this PR
- [x] I have tested the changes thoroughly before submitting this pull
request.
- [x] I have provided relevant issue numbers and screenshots after
making the changes.

Made the README.md file more interactive and engaging for the new
contributors.

README.md

@@ -29,17 +29,56 @@
     </tbody>
 </table>
 </div>
-<h3> <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Rocket.png" alt="Rocket" width="40" height="40" />Featured In</h3>
 
-<h3><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/tarikul-islam-anik/main/assets/images/Writing%20Hand%20Light%20Skin%20Tone.png" alt="Rocket" width="40" height="40" />Project Overview</h3>
+# Table of Contents
+
+1. [Featured In](#featured-in)
+2. [About Us](#about-us)
+3. [Tech Stack](#tech-stack)
+4. [Get Started](#get-started)
+5. [Contributing](#contributing)
+6. [Website Preview](#website-preview)
+7. [Our Contributors](#our-contributors)
+8. [Stargazers](#stargazers)
+9. [Forkers](#forkers)
+10. [Code of Conduct](#code-of-conduct)
+11. [License](#license)
+
+
+
+## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Rocket.png" alt="Rocket" width="40" height="40" />Featured In
+<table>
+
+   <tr>
+      <th>Event Logo</th>
+      <th>Event Name</th>
+      <th>Event Description</th>
+   </tr>
+   <tr>
+      <td><img src="./gssoc24.png" width="200" height="auto" loading="lazy" alt="GSSoC 24"/></td>
+      <td>GirlScript Summer of Code 2024</td>
+      <td>GirlScript Summer of Code is a three-month-long Open Source Program conducted every summer by GirlScript Foundation. It is an initiative to bring more beginners to Open-Source Software Development.</td>
+   </tr>
+    <tr>
+      <td><img src="./hacktoberfest.png" width="200" height="auto" loading="lazy" alt="Hacktoberfest 2024"/></td>
+      <td>Hacktoberfest 2024</td>
+      <td>Hacktoberfest is a month-long celebration of open source software run by DigitalOcean, GitHub, and Twilio. It encourages contributions to open source projects and promotes a global community of developers.</td>
+   </tr>
+
+</table>
+
+## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/tarikul-islam-anik/main/assets/images/Writing%20Hand%20Light%20Skin%20Tone.png" alt="Rocket" width="40" height="40" />About Us
 <p style="font-family:var(--ff-philosopher);">
+Welcome to RETRO! 🌕✨ We invite you to explore the vintage look, a unique journey through timeless designs and aesthetics. Our platform celebrates the elegance of the past, blending classic styles with modern usability to create a seamless, visually stunning experience.
+
+At Retro, we believe that beauty lies in the details, and our website reflects a passion for vintage-inspired design that transports you to a world where nostalgia meets innovation. Whether you're here for inspiration, design exploration, or simply to immerse yourself in a vintage ambiance, we aim to make your experience truly special.
+
+Discover the charm of the past and embrace a sophisticated, artistic vibe that never goes out of style. Join us, and let's relive the beauty of the bygone eras, one step at a time! 🌸🕰️
+
 It is an online platform which enables you to get information about your vintage collections and to place the orders.</p>
 
 ## <p style="font-family:var(--ff-philosopher);font-size:3rem;text-align:center;"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png" alt="High Voltage" width="40" height="40" />Tech Stack</p>
-<center><a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML5"><img src="https://img.shields.io/badge/HTML5-E34F26.svg?style=for-the-badge&logo=HTML5&logoColor=white"></a>
-<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"><img src="https://img.shields.io/badge/JavaScript-F7DF1E.svg?style=for-the-badge&logo=JavaScript&logoColor=black"></a>
-<a href="https://getbootstrap.com/"><img src="https://img.shields.io/badge/Bootstrap-7952B3.svg?style=for-the-badge&logo=Bootstrap&logoColor=black"></a>
-<a href="https://developer.mozilla.org/en-US/docs/Web/CSS"><img src="https://img.shields.io/badge/CSS3-1572B6.svg?style=for-the-badge&logo=CSS3&logoColor=black"></a></center>
+<a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML5"> <img src="https://img.shields.io/badge/HTML5-E34F26.svg?style=for-the-badge&logo=HTML5&logoColor=white" alt="HTML5"> </a> <p>HTML5 structures the website's content, enabling modern multimedia support and semantic layout.</p><br> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"> <img src="https://img.shields.io/badge/JavaScript-F7DF1E.svg?style=for-the-badge&logo=JavaScript&logoColor=black" alt="JavaScript"> </a> <p>JavaScript adds interactivity, making the site dynamic with features like form validation and real-time content updates.</p><br> <a href="https://getbootstrap.com/"> <img src="https://img.shields.io/badge/Bootstrap-7952B3.svg?style=for-the-badge&logo=Bootstrap&logoColor=black" alt="Bootstrap"> </a> <p>Bootstrap provides a responsive framework with pre-built components for consistent design across devices.</p><br> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS"> <img src="https://img.shields.io/badge/CSS3-1572B6.svg?style=for-the-badge&logo=CSS3&logoColor=black" alt="CSS3"> </a> <p>CSS3 styles the website, enhancing its appearance and ensuring an adaptive layout.</p><br>
 
 <br><br>
 
@@ -94,29 +133,57 @@ It is an online platform which enables you to get information about your vintage
 
 
 
-<p style="font-family:var(--ff-philosopher);font-size:3rem;text-align:center;"><b>Contributing
+## <p style="font-family:var(--ff-philosopher);font-size:3rem;text-align:center;"> Contributing </p>
 
-<p style="font-family:var(--ff-philosopher);font-size:2rem;">We love your input! We want to make contributing to this project as easy and transparent as possible, whether it's.
+<p style="font-family:var(--ff-philosopher);font-size:2rem;">We appreciate your feedback! Our goal is to make contribution to this project as easy and transparent as possible. Whether you're interested in:</p> <ul style="font-size:1.5rem;"> <li> <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/tarikul-islam-anik/main/assets/images/Lady%20Beetle.png" width="20" height="20"> <strong>Reporting a bug</strong> </li> <li> <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/tarikul-islam-anik/main/assets/images/Man%20Technologist%20Light%20Skin%20Tone.png" width="20" height="20"> <strong>Discussing the current state of the code</strong> </li> <li> <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Axe.png" width="20" height="20"> <strong>Submitting a fix</strong> </li> <li> <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/tarikul-islam-anik/main/assets/images/Rocket.png" width="20" height="20"> <strong>Proposing new features</strong> </li> </ul> <p style="font-size:1.5rem;">To get started with contributing, please follow the steps outlined in the <a href="Contributing.md" style="color: #007bff; text-decoration: none;">Contributing.md</a>.</p>
 
-To contribute to the Retro repository using GitHub Desktop, follow these steps:
+## Website Preview📸
+<br>
+<img src='./home.png'>
+<img src='./about.png'>
+<img src='./collection.png'>
 
-<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/tarikul-islam-anik/main/assets/images/Lady%20Beetle.png" width="20" height="20"> Reporting a bug<br>
-<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/tarikul-islam-anik/main/assets/images/Man%20Technologist%20Light%20Skin%20Tone.png" width="20" height="20" >Discussing the current state of the code<br>
-<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Axe.png" width="20" height="20" >Submitting a fix<br>
-<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/tarikul-islam-anik/main/assets/images/Rocket.png" width="20" height="20" >Proposing new features
+🌐 **Visit our website:** [Retro](https://rococo-mooncake-0d89f7.netlify.app/)  
+<br>
 
-To get started with contributing, please follow the steps outlined in the [Contributing.md](Contributing.md).
-
-<div align="center">
-  <h2 style="font-size:3rem;">Our Contributors <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Red%20Heart.png" alt="Red Heart" width="40" height="40" /></h2>
+ ## <h2 style="font-size:3rem;">Our Contributors <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Red%20Heart.png" alt="Red Heart" width="40" height="40" /></h2>
   <h3>Thank you for contributing to our repository</h3>
 <a href="https://github.com/anjaliavv51/Retro/graphs/contributors">
 <img src="https://contributors-img.web.app/image?repo=anjaliavv51/Retro"/>
 
-  </a>
-<p style="font-family:var(--ff-philosopher);font-size:3rem;"><b> Show some <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Red%20Heart.png" alt="Red Heart" width="40" height="40" /> by starring this awesome repository!
+
+## Stargazers
+
+<div align='center'>
+
+[![Stargazers repo roster for @Anjaliavv51/Retro](https://reporoster.com/stars/Anjaliavv51/Retro)](https://github.com/Anjaliavv51/Retro/stargazers)
 
 </div>
+
+## Forkers
+
+[![Forkers repo roster for @Anjaliavv51/Retro](https://reporoster.com/forks/Anjaliavv51/Retro)](https://github.com/Anjaliavv51/Retro/network/members)
+
+# Code of Conduct
+We are committed to fostering a welcoming and inclusive environment for everyone. All contributors and participants are expected to uphold the following values:
+
+- Be respectful of different viewpoints and experiences.
+- Show empathy toward others.
+- Use inclusive language.
+
+Please read and follow our [Code of Conduct](CODE_OF_CONDUCT.md) to foster an inclusive community.
+If anyone violates these standards, they may be banned from the community.
+
+## License 📜 
+
+This project is licensed under the MIT License. For more details, see the [LICENSE](LICENSE.txt) file.
+
+<div align="center">
+    <a href="#top">
+        <img src="https://img.shields.io/badge/Back%20to%20Top-000000?style=for-the-badge&logo=github&logoColor=white" alt="Back to Top">
+    </a>
+</div>
+
 <center>
 <h3 style="font-size:2rem;">
 If you find this project helpful, please consider giving it a star! <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/tarikul-islam-anik/main/assets/images/Star.png" width="30" height="30"></p>