https://github.com/mouhametnd/ecommerce-product

This project is made with HTML, CSS, SCSS, Javascript, localStorage and Gulp.js
https://github.com/mouhametnd/ecommerce-product

bem-methodology gulpjs html javascript localstorage postcss scss

Last synced: 4 days ago
JSON representation

This project is made with HTML, CSS, SCSS, Javascript, localStorage and Gulp.js

• Host: GitHub
• URL: https://github.com/mouhametnd/ecommerce-product
• Owner: mouhametnd
• License: mit
• Created: 2022-05-05T09:59:19.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-05-05T12:41:52.000Z (over 2 years ago)
• Last Synced: 2024-10-12T23:41:27.230Z (about 1 month ago)
• Topics: bem-methodology, gulpjs, html, javascript, localstorage, postcss, scss
• Language: SCSS
• Homepage: https://mouhametnd-ecommerce.netlify.app/
• Size: 779 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Frontend Mentor - E-commerce product page

## Welcome 🍃

This project was a mentor frontend challenge that helped me put into practice the manipulation of the DOM with vanilla Javascript and Responsive Design.

## Links

- My Linkedin [Linkedin](https://www.linkedin.com/in/mouhametndiaye/)

- Live Project [E-commerce Product](https://mouhametnd-ecommerce.netlify.app/)

- Challenged by [frontend mentor](https://www.frontendmentor.io/home)

- My email [email protected]

## Challenge  

Your users should be able to:

- View the optimal layout for the site depending on their device's screen size

- See hover states for all interactive elements on the page

- Open a lightbox gallery by clicking on the large product image

- Switch the large product image by clicking on the small thumbnail images

- Add items to the cart

- View the cart and remove items from it

## Screenshot

![Design preview for the E-commerce product page coding challenge](./assets/design/active-states-basket-filled.jpg)

## Built with

- Mobile-first workflow

- HTML

- SCSS

- Javascript, localStorage and Gulp.js

## How To Run The Project

1. First of all you would need a Node installed.

2. Then you would need to install project dependencies from the package.json file, by running the npm install command. This.