Table of Contents
Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website
Getting bored of shopping at Amazon, Flipkart or any other e-commerce website wanted to do something new, then it’s time to switch on your e-commerce website 😁.
Heyy….., wait one second did you have not your website. Don’t feel bad, I am here to help you to make you learn How to build an e-commerce website so stay connected to the blog till the end and at the end, you have your e-commerce website then do shopping as so as you want.
Before discussing the procedure to make the website, let’s lookout at How it looks. You can look at my beautiful e-commerce website 👇😅.
Live Project:-
Here you can check it.
See the Pen Ecommerce by Himanshu Singh (@himanishu) on CodePen.
The important ingredients you should have for building an e-commerce website. Following are some skills required for building this webpage:-
.
HTML for Responsive Ecommerce Website:-
1. In the header section, firstly made three divs. One for the logo, second for the search bar, and third for menu lists.
In the second class, I have used the search icon I have imported through ionicon , for any type of icons used in website development you can use it.
Input is a tag used for many purposes for like checkboxes, radio, email input, date, time, and others. But here we are using for search bar so type is text. For more ideas, you can refer to our other blogs.
<header>
<div class="logo"><a href="#">ShoPperZ</a></div>
<div class="search">
<a href=""><input type="text" placeholder="search products" id="input">
<ion-icon class="s" name="search"></ion-icon>
</a>
</div>
<div class="heading">
<ul>
<li><a href="#" class="under">HOME</a></li>
<li><a href="#" class="under">SHOP</a></li>
<li><a href="#" class="under">OUR PRODUCTS</a></li>
<li><a href="#" class="under">CONTACT US</a></li>
<li><a href="#" class="under">ABOUT US</a></li>
</ul>
</div>
</header>
<header>
<div class="logo"><a href="#">ShoPperZ</a></div>
<div class="menu">
<a href=""><ion-icon name="close" class="close"></ion-icon></a>
<ul>
<li><a href="#" class="under">HOME</a></li>
<li><a href="#" class="under">SHOP</a></li>
<li><a href="#" class="under">OUR PRODUCTS</a></li>
<li><a href="#" class="under">CONTACT US</a></li>
<li><a href="#" class="under">ABOUT US</a></li>
</ul>
</div>
<div class="search">
<a href=""><input type="text" placeholder="search products" id="input">
<ion-icon class="s" name="search"></ion-icon>
</a>
</div>
<div class="heading">
<ul>
<li><a href="#" class="under">HOME</a></li>
<li><a href="#" class="under">SHOP</a></li>
<li><a href="#" class="under">OUR PRODUCTS</a></li>
<li><a href="#" class="under">CONTACT US</a></li>
<li><a href="#" class="under">ABOUT US</a></li>
</ul>
</div>
<div class="heading1">
<ion-icon name="menu" class="ham"></ion-icon>
</div>
</header>
2. Section:-
<section>
<div class="section">
<div class="section1">
<div class="img-slider">
<img src="https://images.pexels.com/photos/6347888/pexels-photo-6347888.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt="" class="img">
<img src="https://images.pexels.com/photos/3962294/pexels-photo-3962294.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt="" class="img">
<img src="https://images.pexels.com/photos/2292953/pexels-photo-2292953.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
alt="" class="img">
<img src="https://images.pexels.com/photos/1229861/pexels-photo-1229861.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt="" class="img">
<img src="https://images.pexels.com/photos/1598505/pexels-photo-1598505.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt="" class="img">
</div>
</div>
<div class="section2">
<div class="container">
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/1464625/pexels-photo-1464625.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""></div>
<div class="name">SHOES</div>
<div class="price">$5</div>
<div class="info">Lorem ipsum dolor sit amet consectetur.</div>
</div>
<div class="items">
<div class="img img2"><img
src="https://images.pexels.com/photos/3649765/pexels-photo-3649765.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""></div>
<div class="name">MEN's T-SHIRT</div>
<div class="price">$6.34</div>
<div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img3"><img
src="https://media.istockphoto.com/photos/folded-blue-jeans-on-a-white-background-modern-casual-clothing-flat-picture-id1281304280"
alt=""></div>
<div class="name">JEANS</div>
<div class="price">$9</div>
<div class="info">Lorem ipsum dolor sit amet.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/8839887/pexels-photo-8839887.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""></div>
<div class="name">WATCH</div>
<div class="price">$9.1</div>
<div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/6858618/pexels-photo-6858618.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""></div>
<div class="name">SMART PHONE</div>
<div class="price">$20</div>
<div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/5552789/pexels-photo-5552789.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""></div>
<div class="name">TELEVISION</div>
<div class="price">$18</div>
<div class="info">Lorem ipsum dolor sit amet consectetur.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/4295985/pexels-photo-4295985.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""></div>
<div class="name">HOODIES</div>
<div class="price">$6.7</div>
<div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://media.istockphoto.com/photos/vintage-plates-with-silver-teaspoons-picture-id184363070"
alt=""></div>
<div class="name">DINNER SET</div>
<div class="price">$10</div>
<div class="info">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/6463348/pexels-photo-6463348.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""></div>
<div class="name">BLANKETS</div>
<div class="price">$9.9</div>
<div class="info">Lorem ipsum dolor sit amet consectetur adipisicing.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/2659939/pexels-photo-2659939.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""></div>
<div class="name">LAPTOP</div>
<div class="price">$99</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://media.istockphoto.com/photos/modern-kitchen-microwave-oven-picture-id1144960519"
alt=""></div>
<div class="name">MICROWAVE</div>
<div class="price">$30</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://media.istockphoto.com/photos/black-coffee-maker-with-green-led-lights-picture-id177395430"
alt=""></div>
<div class="name">COFFEE MAKER</div>
<div class="price">$29.7</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/6606354/pexels-photo-6606354.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""></div>
<div class="name">BED</div>
<div class="price">$100</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://media.istockphoto.com/photos/woman-turning-on-air-conditioner-picture-id1325708905"
alt=""></div>
<div class="name">AIR CONDITIONER</div>
<div class="price">$78</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/5834/nature-grass-leaf-green.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""></div>
<div class="name">BOOK</div>
<div class="price">$9</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/4339598/pexels-photo-4339598.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""></div>
<div class="name">BAG</div>
<div class="price">$36.5</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://media.istockphoto.com/photos/hand-of-a-lady-selecting-yellow-colored-saree-in-a-shop-picture-id1301740530"
alt=""></div>
<div class="name">SAREES</div>
<div class="price">$25.6</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/5816934/pexels-photo-5816934.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""></div>
<div class="name">WASHING MACHINE</div>
<div class="price">$56</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
</div>
</div>
</div>
</section>
3. Footer:-
<footer>
<div class="footer0">
<h1>ShoPperZ</h1>
</div>
<div class="footer1 ">
Connect with us at<div class="social-media">
<a href="#">
<ion-icon name="logo-facebook"></ion-icon>
</a>
<a href="#">
<ion-icon name="logo-linkedin"></ion-icon>
</a>
<a href="#">
<ion-icon name="logo-youtube"></ion-icon>
</a>
<a href="#">
<ion-icon name="logo-instagram"></ion-icon>
</a>
<a href="#">
<ion-icon name="logo-twitter"></ion-icon>
</a>
</div>
</div>
<div class="footer2">
<div class="product">
<div class="heading">Products</div>
<div class="div">Sell your Products</div>
<div class="div">Advertise</div>
<div class="div">Pricing</div>
<div class="div">Product Buisness</div>
</div>
<div class="services">
<div class="heading">Services</div>
<div class="div">Return</div>
<div class="div">Cash Back</div>
<div class="div">Affiliate Marketing</div>
<div class="div">Others</div>
</div>
<div class="Company">
<div class="heading">Company</div>
<div class="div">Complaint</div>
<div class="div">Careers</div>
<div class="div">Affiliate Marketing</div>
<div class="div">Support</div>
</div>
<div class="Get Help">
<div class="heading">Get Help</div>
<div class="div">Help Center</div>
<div class="div">Privacy Policy</div>
<div class="div">Terms</div>
<div class="div">Login</div>
</div>
</div>
<div class="footer3">Copyright © <h4>ShoPperZ</h4> 2021-2028</div>
</footer>
FULL HTML CODE AT ONCE:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./ecommerce.css">
<link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
</head>
<body>
<header>
<div class="logo"><a href="#">ShoPperZ</a></div>
<div class="menu">
<a href=""><ion-icon name="close" class="close"></ion-icon></a>
<ul>
<li><a href="#" class="under">HOME</a></li>
<li><a href="#" class="under">SHOP</a></li>
<li><a href="#" class="under">OUR PRODUCTS</a></li>
<li><a href="#" class="under">CONTACT US</a></li>
<li><a href="#" class="under">ABOUT US</a></li>
</ul>
</div>
<div class="search">
<a href=""><input type="text" placeholder="search products" id="input">
<ion-icon class="s" name="search"></ion-icon>
</a>
</div>
<div class="heading">
<ul>
<li><a href="#" class="under">HOME</a></li>
<li><a href="#" class="under">SHOP</a></li>
<li><a href="#" class="under">OUR PRODUCTS</a></li>
<li><a href="#" class="under">CONTACT US</a></li>
<li><a href="#" class="under">ABOUT US</a></li>
</ul>
</div>
<div class="heading1">
<ion-icon name="menu" class="ham"></ion-icon>
</div>
</header>
<section>
<div class="section">
<div class="section1">
<div class="img-slider">
<img src="https://images.pexels.com/photos/6347888/pexels-photo-6347888.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt="" class="img">
<img src="https://images.pexels.com/photos/3962294/pexels-photo-3962294.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt="" class="img">
<img src="https://images.pexels.com/photos/2292953/pexels-photo-2292953.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
alt="" class="img">
<img src="https://images.pexels.com/photos/1229861/pexels-photo-1229861.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt="" class="img">
<img src="https://images.pexels.com/photos/1598505/pexels-photo-1598505.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt="" class="img">
</div>
</div>
<div class="section2">
<div class="container">
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/1464625/pexels-photo-1464625.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""></div>
<div class="name">SHOES</div>
<div class="price">$5</div>
<div class="info">Lorem ipsum dolor sit amet consectetur.</div>
</div>
<div class="items">
<div class="img img2"><img
src="https://images.pexels.com/photos/3649765/pexels-photo-3649765.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""></div>
<div class="name">MEN's T-SHIRT</div>
<div class="price">$6.34</div>
<div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img3"><img
src="https://media.istockphoto.com/photos/folded-blue-jeans-on-a-white-background-modern-casual-clothing-flat-picture-id1281304280"
alt=""></div>
<div class="name">JEANS</div>
<div class="price">$9</div>
<div class="info">Lorem ipsum dolor sit amet.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/8839887/pexels-photo-8839887.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""></div>
<div class="name">WATCH</div>
<div class="price">$9.1</div>
<div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/6858618/pexels-photo-6858618.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""></div>
<div class="name">SMART PHONE</div>
<div class="price">$20</div>
<div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/5552789/pexels-photo-5552789.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""></div>
<div class="name">TELEVISION</div>
<div class="price">$18</div>
<div class="info">Lorem ipsum dolor sit amet consectetur.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/4295985/pexels-photo-4295985.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""></div>
<div class="name">HOODIES</div>
<div class="price">$6.7</div>
<div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://media.istockphoto.com/photos/vintage-plates-with-silver-teaspoons-picture-id184363070"
alt=""></div>
<div class="name">DINNER SET</div>
<div class="price">$10</div>
<div class="info">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/6463348/pexels-photo-6463348.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""></div>
<div class="name">BLANKETS</div>
<div class="price">$9.9</div>
<div class="info">Lorem ipsum dolor sit amet consectetur adipisicing.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/2659939/pexels-photo-2659939.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""></div>
<div class="name">LAPTOP</div>
<div class="price">$99</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://media.istockphoto.com/photos/modern-kitchen-microwave-oven-picture-id1144960519"
alt=""></div>
<div class="name">MICROWAVE</div>
<div class="price">$30</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://media.istockphoto.com/photos/black-coffee-maker-with-green-led-lights-picture-id177395430"
alt=""></div>
<div class="name">COFFEE MAKER</div>
<div class="price">$29.7</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/6606354/pexels-photo-6606354.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""></div>
<div class="name">BED</div>
<div class="price">$100</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://media.istockphoto.com/photos/woman-turning-on-air-conditioner-picture-id1325708905"
alt=""></div>
<div class="name">AIR CONDITIONER</div>
<div class="price">$78</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/5834/nature-grass-leaf-green.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""></div>
<div class="name">BOOK</div>
<div class="price">$9</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/4339598/pexels-photo-4339598.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""></div>
<div class="name">BAG</div>
<div class="price">$36.5</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://media.istockphoto.com/photos/hand-of-a-lady-selecting-yellow-colored-saree-in-a-shop-picture-id1301740530"
alt=""></div>
<div class="name">SAREES</div>
<div class="price">$25.6</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/5816934/pexels-photo-5816934.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""></div>
<div class="name">WASHING MACHINE</div>
<div class="price">$56</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="footer0">
<h1>ShoPperZ</h1>
</div>
<div class="footer1 ">
Connect with us at<div class="social-media">
<a href="#">
<ion-icon name="logo-facebook"></ion-icon>
</a>
<a href="#">
<ion-icon name="logo-linkedin"></ion-icon>
</a>
<a href="#">
<ion-icon name="logo-youtube"></ion-icon>
</a>
<a href="#">
<ion-icon name="logo-instagram"></ion-icon>
</a>
<a href="#">
<ion-icon name="logo-twitter"></ion-icon>
</a>
</div>
</div>
<div class="footer2">
<div class="product">
<div class="heading">Products</div>
<div class="div">Sell your Products</div>
<div class="div">Advertise</div>
<div class="div">Pricing</div>
<div class="div">Product Buisness</div>
</div>
<div class="services">
<div class="heading">Services</div>
<div class="div">Return</div>
<div class="div">Cash Back</div>
<div class="div">Affiliate Marketing</div>
<div class="div">Others</div>
</div>
<div class="Company">
<div class="heading">Company</div>
<div class="div">Complaint</div>
<div class="div">Careers</div>
<div class="div">Affiliate Marketing</div>
<div class="div">Support</div>
</div>
<div class="Get Help">
<div class="heading">Get Help</div>
<div class="div">Help Center</div>
<div class="div">Privacy Policy</div>
<div class="div">Terms</div>
<div class="div">Login</div>
</div>
</div>
<div class="footer3">Copyright © <h4>ShoPperZ</h4> 2021-2028</div>
</footer>
<script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>
<script src="./ecommerce.js"></script>
</body>
</html>
CSS:-
Topics to be known before CSS tutorial:-
1.Flexbox.
2.CSS basics(selectors,color,border-box,etc).
3.pseduo effects(hover, active) and pseudo elements(before).
4.media queries(responsive) and keyframes(animation).
1: *{
2: margin: 0;
3: padding: 0;
4: box-sizing: border-box;
5: }
6: header{
7: display: flex;
8: justify-content: space-evenly;
9: align-items: center;
10: height:60px;
11: width:100%;
12: background:black;
13: }
14: .heading ul{
15: display:flex;
16: }
17: .logo a{
18: color:white;
19: transition-duration: 1s;
20: font-weight: 800;
21: }
22: .logo a:hover{
23: color:rgb(240, 197, 6);
24: transition-duration: 1s;
25: }
26: .heading ul li{
27: list-style: none;
28: }
29: .heading ul li a{
30: margin:5px;
31: text-decoration: none;
32: color:black;
33: font-weight: 500;
34: position:relative;
35: color:white;
36: margin:2px 14px;
37: font-size: 18px;
38: transition-duration: 1s;
39: }
40: .heading ul li a:active{
41: color:red;
42: }
43: .heading ul li a:hover{
44: color:rgb(243, 168, 7);
45: transition-duration: 1s;
46: }
47: .heading ul li a::before{
48: content:'';
49: height:2px;
50: width:0px;
51: position:absolute;
52: left:0;
53: bottom:0;
54: background-color: white;
55: transition-duration: 1s;
56: }
57: .heading ul li a:hover::before{
58: width:100%;
59: transition-duration: 1s;
60: background-color:rgb(243, 168, 7);
61: }
62: #input{
63: height:30px;
64: width:300px;
65: text-decoration: none;
66: border:0px;
67: padding:5px;
68: }
69: .logo a{
70: color: white;
71: font-size: 35px;
72: font-weight: 500;
73: text-decoration:none;
74: }
75: ion-icon{
76: width:30px;
77: height:30px;
78: background-color: white;
79: color:black;
80: }
81: ion-icon:hover{
82: cursor: pointer;
83: }
84: .search a{
85: display:flex;
86: }
87: header a ion-icon{
88: position:relative;
89: right:3px;
90: }
91: .img-slider img{
92: height:720px;
93: width:1080px;
94: }
95: @keyframes slide{
96: 0%{
97: left:0px;
98: }
99: 15%{
100: left:0px;
101: }
102: 20%{
103: left:-1080px;
104: }
105: 32%{
106: left:-1080px;
107: }
108: 35%{
109: left:-2160px;
110: }
111: 47%{
112: left:-2160px;
113: }
114: 50%{
115: left:-3240px;
116: }
117: 63%{
118: left:-3240px;
119: }
120: 66%{
121: left:-4320px;
122: }
123: 79%{
124: left:-4320px;
125: }
126: 82%{
127: left:-5400px;
128: }
129: 100%{
130: left:0px;
131: }}
132: .img-slider{
133: display:flex;
134: float:left;
135: position:relative;
136: width:1080px;
137: height:720px;
138: animation-name:slide;
139: animation-duration: 10s;
140: animation-iteration-count: infinite;
141: transition-duration:2s ;
142: }
143: .heading1 {
144: opacity:0;
145: }
146: .search{
147: display:flex;
148: position: relative;
149: }
150: .section1{
151: width:1080px;
152: overflow:hidden;
153: justify-content: center;
154: align-items: center;
155: margin:0px auto;
156: }
157: .section2 .container{
158: display:flex;
159: width:100%;
160: height:max-content;
161: flex-wrap: wrap;
162: justify-content:center;
163: margin:10px auto;
164: }
165: .section2 .container .items{
166: margin: 10px;
167: width:200px;
168: height: 300px;
169: background-color:white;
170: border:2.5px solid black;
171: border-radius: 12px;
172: }
173: .section2 .container .items .name{
174: text-align:center;
175: background-color:rgb(240, 197, 6);
176: height:25px;
177: padding-top:4px;
178: color:white;
179: margin: 0;
180: }
181: .section2 .container .items .price{
182: float:left;
183: padding-left:10px;
184: display: block;
185: width:100%;
186: color:rgb(255, 0, 0);
187: font-weight: 650;
188: }
189: .section2 .container .items .info{
190: padding-left:10px;
191: color:rgb(243, 168, 7);
192: }
193: .section2 .container .items .img img{
194: width:200px;
195: height:200px;
196: margin: 0;
197: padding: 0;
198: border-radius:12px;
199: transition-duration:0.8s;
200: }
201: .section2 .container .items .img {
202: overflow: hidden;
203: margin: 0;
204: }
205: .section2 .container .items:hover .img img{
206: transform: scale(1.2);
207: transition-duration:0.8s;
208: border-radius:12px;
209: }
210: footer{
211: display:flex;
212: flex-direction: column;
213: background-color: black;
214: align-items: center;
215: color:white;
216: }
217: .footer1{
218: display:flex;
219: flex-direction: column;
220: align-items: center;
221: color:white;
222: margin-top:15px;
223: }
224: .social-media{
225: display:flex;
226: justify-content: center;
227: color:white;
228: flex-wrap: wrap;
229: }
230: .social-media a{
231: color:white;
232: margin:20px;
233: border-radius: 5px;
234: margin-top:10px;
235: color:white;
236: }
237: .social-media a ion-icon{
238: color:white;
239: background-color: black;
240: }
241: .social-media a:hover ion-icon{
242: color:red;
243: transform: translateY(5px);
244: }
245: .footer2{
246: display: flex;
247: width:100%;
248: justify-content:space-evenly;
249: align-items: center;
250: text-decoration: none;
251: flex-wrap: wrap;
252: }
253: .footer0{
254: font-weight:1200;
255: transition-duration: 1s;
256: }
257: .footer0:hover{
258: color:rgb(243, 168, 7);
259: }
260: .footer2 .heading {
261: font-weight: 900;
262: font-size: 18px;
263: }
264: .footer3 {
265: margin-top:60px;
266: margin-bottom: 20px;
267: display:flex;
268: flex-wrap: wrap;
269: justify-content: center;
270: }
271: .footer2 .heading:hover{
272: color:rgb(243, 168, 7) ;
273: }
274: .footer2 .div:hover{
275: transform: scale(1.05);
276: }
277: .footer3 h4{
278: margin:0 10px;
279: }
280: .footer2 div{
281: margin:10px;
282: }
283: .menu{
284: visibility:hidden;
285: }
286: .heading1 .ham:active{
287: color: red;
288: }
289: .items{
290: overflow:hidden;
291: }
292: .ham,.close{
293: cursor:pointer;
294: }
295: @media screen and (max-width:1250px){
296: .heading ul li{
297: display:none;
298: }
299: .items{
300: transform:scale(0.9);
301: }
302: .img-slider img{
303: height:60vw;
304: width:80vw;
305: }
306: .ham:active {
307: color:red;
308: }
309: .menu {
310: display:flex;
311: flex-direction: column;
312: align-items: center;
313: }
314: .menu a ion-icon{
315: position: absolute;
316: }
317: @keyframes slide1{
318: 0%{
319: left:0vw;
320: }
321: 15%{
322: left:0vw;
323: }
324: 20%{
325: left:-80vw;
326: }
327: 32%{
328: left:-80vw;
329: }
330: 35%{
331: left:-160vw;
332: }
333: 47%{
334: left:-160vw;
335: }
336: 50%{
337: left:-240vw;
338: }
339: 63%{
340: left:-240vw;
341: }
342: 66%{
343: left:-320vw;
344: }
345: 79%{
346: left:-320vw;
347: }
348: 82%{
349: left:-400vw;
350: }
351: 100%{
352: left:0vw;
353: }}
354: .menu ul{
355: display:flex;
356: flex-direction:column;
357: position: absolute;
358: width:100vw;
359: height:100vh;
360: background-color: black;
361: left:0;
362: top:0;
363: z-index:11;
364: align-items: center;
365: justify-content: center;
366: opacity:1;
367: }
368: .close{
369: z-index:34;
370: color:white;
371: background-color: black;
372: }
373: .close:active{
374: color:red;
375: }
376: .menu ul li{
377: list-style: none;
378: margin: 20px;
379: border-top:3px solid white;
380: width:80%;
381: text-align:center;
382: padding-top:10px;
383: }
384: .menu ul li a{
385: text-decoration: none;
386: padding-top: 10px;
387: color:white;
388: font-weight: 900;
389: }
390: .menu ul li a:hover{
391: color:rgb(240, 197, 6);
392: }
393: .img-slider{
394: display:flex;
395: float:left;
396: position:relative;
397: width:80%;
398: height:60%;
399: animation-name:slide1;
400: animation-duration: 10s;
401: animation-iteration-count: infinite;
402: transition-duration:2s ;
403: }
404: .section1{
405: width:80%;
406: overflow:hidden;
407: justify-content: center;
408: align-items: center;
409: margin:0px auto;
410: }
411: .heading1{
412: opacity: 1;
413: position:relative;
414: bottom:8px;
415: }
416: .search a{
417: display:flex;
418: flex-wrap: nowrap;
419: }
420: .heading1 .ham{
421: background-color: black;
422: color:white;
423: }
424: #input{
425: width:200px;
426: flex-shrink:2;
427: }
428: header{
429: height:150px;
430: }
431: }
432: @media screen and (max-width:550px){
433: .heading ul li{
434: display:none;
435: }
436: .heading1{
437: opacity: 1;
438: bottom:8px;
439: }
440: header{
441: height:250px;
442: flex-wrap: wrap;
443: display: flex;
444: flex-direction: column;
445: }
446: #input{
447: width:150px;
448: }
449: .close{
450: z-index:34;}
451: .search a{
452: display:flex;
453: flex-wrap: nowrap;
454: }
455: }
Javascript codes for Responsive Ecommerce Website:-
1: const close=document.querySelector(".close");
2: const open=document.querySelector(".ham");
3: const menu=document.querySelector(".menu")
4: close.addEventListener("click",()=>{
5: menu.style.visibility="hidden";
6: })
7: open.addEventListener("click",()=>{
8: menu.style.visibility="visible";
9: })
Kindly upload the zipped source file instead of uploading it in codepen so that we don't need to actually copy paste whole code for a demo.