E-commerce Product Page

This is an E-commerce Product Main Page where product can be added to the Cart.

Visit site( Live url )

E-Commerce-Product-Page

click 👆 on the above link and visit the site which is hosted live on netlify

How it works

Product can be added to the cart ,

quantity of the product can be increase and decrease

with the help of Add to cart ,increase and descrease button accordingly.

Product images can be viewed by clicking on the list of

images at the bottom on large screen and change the

preview image by clicking on the previous and next

arrow button on both large and small screen.

Screen Layout

The designs were created to the following widths:

• Mobile: 375px
• Medium screen : 500px
• Desktop: 1300px

Colors Used

Primary Colors Used

• Orange : hsl(26, 100%, 55%) ;
• Pale orange: hsl(25, 100%, 94%);

Secondary Colors Used

• Very vark blue: hsl(220, 13%, 13%)
• Dark grayish blue: hsl(219, 9%, 45%)
• Grayish blue: hsl(220, 14%, 75%)
• Light grayish blue: hsl(223, 64%, 98%)
• White: hsl(0, 0%, 100%)
• Black (with 75% opacity for lightbox background): hsl(0, 0%, 0%)

Screenshots

Desktop view

Mobile View

Authors

• @kislayraj-ai