Skip to content

Nikhilkumarmishra/figma-design-replication

Repository files navigation

Namaste

This project is a fully responsive website designed for newborn babies and younger kids, allowing parents to subscribe to services that provide specially curated audios and videos for their children's mental and social growth, as well as entertainment.

I have added each and every functionalites of figma design and its looks and feel like the original one made with love care as its for cute babies whom i realy love being with. I have developed many website in past this time its speacial as all my past memories of childhood becomes alive.

github.repo.Vs.code.View.-Nikhil.mp4

Objective

The objective of this assignment was to replicate the provided Figma design using plain HTML, CSS, and JavaScript without using any external libraries or frameworks like Bootstrap or jQuery.

Features

  • Design Replication: The website design closely matches the provided Figma file, with meticulous attention to details such as font sizes, colors, margins, paddings, and other stylistic elements.
  • Responsiveness: The website is fully responsive, working seamlessly on various screen sizes including mobile, tablet, and desktop. Media queries in CSS were used to achieve responsiveness.
  • Functionality: All interactive elements specified in the Figma design were implemented using plain JavaScript to enhance user experience.
  • Code Quality: The code is clean, readable, and maintainable, following best practices for HTML, CSS, and JavaScript. Comments are included where necessary to explain complex logic.
  • GitHub Usage: The project is version-controlled with regular commits that have clear and concise Readme.

Bonus Implementation

  • Node.js and MongoDB: The "Apply Now" functionality in the popup form registers user details as a document in a MongoDB collection.

Project Structure

  • index.html: The main HTML file containing the structure of the website.
  • index.css: The CSS file for styling the website, including media queries for responsiveness.
  • pop-up.html: Popup page html code
  • pop-up.css: Popup page css code

Screenshots

#Responsive design

Screenshot (557)

.

Screenshot (557)

.

Screenshot (553)

.

Screenshot (551)

.

Screenshot (555)

.

Screenshot (558)

.

Included some screenshots of the website in different screen sizes to showcase the design and responsiveness.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

For any questions or further information, please feel free to reach out.

LinkedIn- https://www.linkedin.com/in/nikhil-kumar-mishra/ Resume:- https://drive.google.com/file/d/1QDeSpEt040ZcKNRlxYeh-dFCX8sFs3VR/view?usp=drive_link

Thank you for being here and looking at my Work.

Namaste and have a Pleasant day ahead😊!

About

figma-design-replication , using HTML, CSS and JS along with NodeJS and MongoDB for Data

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published