E-commerce website Design using HTML CSS & JAVASCRIPT source code

Hi everybody! Using HTML, CSS, and JavaScript, you will learn how to create responsive web designer for e-commerce using HTML CSS And JAVASCRIPT in this Blog.

- Responsive Website
January 18, 2023
3 Views

E-commerce website Design using HTML CSS & JAVASCRIPT source code

Hi everybody! Using HTML, CSS, and JavaScript, you will learn

how to create responsive web designer for e-commerce using HTML CSS And JAVASCRIPT in this Blog.

Using standard JavaScript, users can use the navigation buttons on the web design moving car animation website design to navigate through each slide. The clip-path property is utilized for the transition on the slide. I hope that when you design a website with online moving car animation , this video will be helpful.

You can download all of the source files and codes from this location. The code from the text editors must be copied and pasted. Try it out first by watching the video tutorial. It will assist you in comprehending everything. After that, if your code isn’t working right, look at the source codes provided and compare them to your own. It will assist you in comprehending everything, including your errors.

Index.html

				
					<!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>complete responsive sea food website design</title>
    <!-- font awesome cdn link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <!-- custom style file -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
<!-- header section start -->
<header>
        <a href="#">seafood</a>
        <form action="">
            <input type="search" id="search-box" placeholder="search here...">
            <label for="search-box"></label>
        </form>
        <nav>
            <a href="#home">home</a>
            <a href="#category">category</a>
            <a href="#product">product</a>
            <a href="#deal">deal</a>
            <a href="#contact">contact</a>
        </nav>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
</header>
<!-- home section starts -->
<section id="home">
        <img decoding="async" src="home-img.png" alt="">
        fresh and organic
        <h3>your daily fresh fish</h3>
        <a href="#">get started</a>
</section>
<!-- banner section starts -->
<section>
        <img decoding="async" src="banner-1.jpg" alt="">
            <h3>special offer</h3>
            <p>upto 45% off</p>
            <a href="#">check out</a>
        <img decoding="async" src="banner-2.jpg" alt="">
            <h3>limited offer</h3>
            <p>upto 50% off</p>
            <a href="#">check out</a>
        <img decoding="async" src="banner-3.jpg" alt="">
            <h3>premium offer</h3>
            <p>upto 50% off</p>
            <a href="#">check out</a>
</section>
<!-- category section starts -->
<section id="category">
    <h1>shop by category</h1>
            <h3>fish fry</h3>
            <p>upto 50% off</p>
            <img decoding="async" src="category-1.jpg" alt="">
            <a href="#">shop now</a>
            <h3>fish curry</h3>
            <p>upto 44% off</p>
            <img decoding="async" src="category-2.jpg" alt="">
            <a href="#">shop now</a>
            <h3>sea prawn</h3>
            <p>upto 35% off</p>
            <img decoding="async" src="category-3.jpg" alt="">
            <a href="#">shop now</a>
            <h3>sea fish</h3>
            <p>upto 12% off</p>
            <img decoding="async" src="category-4.jpg" alt="">
            <a href="#">shop now</a>
</section>
<!-- product section starts -->
<section id="product">
    <h1>latest products</h1>
            -33%
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
            <img decoding="async" src="product-1.jpg" alt="">
            <h3>Sea Fish</h3>
             $10.50  $13.20
            quantity
            <input type="number" min="1" max="1000" value="1">
             /kg
        <a href="#">add to cart</a>
        -52%
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
        <img decoding="async" src="product-2.jpg" alt="">
        <h3>Oysters</h3>
         $10.50  $13.20
        quantity
        <input type="number" min="1" max="1000" value="1">
         /kg
    <a href="#">add to cart</a>
    -45%
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
    <img decoding="async" src="product-3.jpg" alt="">
    <h3>Abalone</h3>
     $10.50  $13.20
    quantity
    <input type="number" min="1" max="1000" value="1">
     /kg
<a href="#">add to cart</a>
    -12%
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
    <img decoding="async" src="product-4.jpg" alt="">
    <h3>Crab</h3>
     $10.50  $13.20
    quantity
    <input type="number" min="1" max="1000" value="1">
     /kg
<a href="#">add to cart</a>
    -20%
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
    <img decoding="async" src="product-5.jpg" alt="">
    <h3>Lobster</h3>
     $10.50  $13.20
    quantity
    <input type="number" min="1" max="1000" value="1">
     /kg
<a href="#">add to cart</a>
    -29%
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
    <img decoding="async" src="product-6.jpg" alt="">
    <h3>Sushi</h3>
     $10.50  $13.20
    quantity
    <input type="number" min="1" max="1000" value="1">
     /kg
<a href="#">add to cart</a>
    -55%
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
    <img decoding="async" src="product-7.jpg" alt="">
    <h3>Herring</h3>
     $10.50  $13.20
    quantity
    <input type="number" min="1" max="1000" value="1">
     /kg
<a href="#">add to cart</a>
    -30%
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
    <img decoding="async" src="product-8.jpg" alt="">
    <h3>Squid</h3>
     $10.50  $13.20
    quantity
    <input type="number" min="1" max="1000" value="1">
     /kg
<a href="#">add to cart</a>
    -40%
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
    <img decoding="async" src="product-9.jpg" alt="">
    <h3>Mackerel</h3>
     $10.50  $13.20
    quantity
    <input type="number" min="1" max="1000" value="1">
     /kg
<a href="#">add to cart</a>
</section>
<!-- deal section starts -->
<section id="deal">
        <h3>deal of the day</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam possimus voluptates commodi laudantium!
            Doloribus sint voluptatibus quaerat farhan suscipit nulla?</p>
                    <h3 id="day">00</h3>
                    day
                    <h3 id="hour">00</h3>
                    hour
                    <h3 id="minute">00</h3>
                    minute
                    <h3 id="second">00</h3>
                    second
            <a href="#">check the deal</a>
</section>
<!-- contact section starts -->
<section id="contact">
    <h1> contact us </h1>
    <form action="">
            <input type="text" placeholder="name">
            <input type="email" placeholder="email">
            <input type="number" placeholder="number">
            <input type="text" placeholder="subject">
        <textarea placeholder="message" name="" id="" cols="30" rows="10"></textarea>
        <input type="submit" value="send message">
    </form>
</section>
<!-- newsletter section starts -->
<section>
    <h3>subscribe us for latest updates</h3>
    <form action="">
        <input type="email" placeholder="enter your email">
        <input type="submit" value="Subscribe">
    </form>
</section>
<!-- footer section starts -->
<section>
            <a href=""></a>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam possimus voluptates commodi laudantium!
                Doloribus sint voluptatibus quaerat farhan suscipit nulla?</p>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
            <h3>our location</h3>
                <a href="#">USA</a>
                <a href="#">india</a>
                <a href="#">dubai</a>
                <a href="#">turkey</a>
                <a href="#">azerbaijan</a>
            <h3>quick links</h3>
                <a href="#">home</a>
                <a href="#">category</a>
                <a href="#">product</a>
                <a href="#">deal</a>
                <a href="#">contact</a>
            <h3>download app</h3>
                <a href="#">google play</a>
                <a href="#">window 10</a>
                <a href="#">app store</a>
    <h1> created by  Dailywebdesign  || all rights reserved! </h1>
</section>
    <!-- custome js link file -->
</body>
</html>

style.css

				
					@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700&display=swap');
:root{
    --green:#27ae60;
    --black:#2c2c54;
    --darkgreen:#1E8349;
}
body{
    background: var(--green);
}
*{
    font-family: 'Nunito', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
    text-transform: capitalize;
    transition: all .2s linear;
}
*::selection{
    background:var(--green);
    color: #fff;
}
html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-padding-top: 6.5rem;
    scroll-behavior: smooth;
}
section{
    padding: 2rem 9%;
}
.btn{
    display:inline-block;
    margin-top:1rem;
    background: var(--darkgreen);
    color: #fff;
    padding: .8rem 3rem;
    font-size:1.7rem;
    text-align:center;
    cursor: pointer;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
}
.btn:hover{
    background: var(--black);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}
.heading{
    text-align: center;
    color: var(--black);
    text-transform: uppercase;
    padding:1rem;
    font-size: 3.5rem;
    padding-bottom:2rem;
    border-bottom: 0.1rem solid rgba(0,0,0,0.7);
}
.heading span{
    color: #ffffff;
    text-transform: uppercase;
    border-bottom: 0.1rem solid rgba(0,0,0,0.7);
}
.header1{
    background:#1E8349;
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding:2rem 9%;
    border-bottom: 0.1rem solid rgba(0,0,0,0.7);
}
.logo{
    color: #ffffff;
    font-weight: bold;
    font-size: 3rem;
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
}
.logo i{
    padding-right: .5rem;
    color: var(--black);
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
}
.header1 .search-box-container{
    display: flex;
    height: 5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
}
.header1 .search-box-container #search-box{
    height:100%;
    width: 100%;
    padding: 1rem;
    font-size: 2rem;
    color: #333;
    border: .1rem solid rgba(0,0,0,0.3);
    text-transform: none;
}
.header1 .search-box-container label{
    height: 100%;
    width:8rem;
    font-size: 2.5rem;
    line-height: 5rem;
    color: #fff;
    background:var(--green);
    text-align: center;
    cursor: pointer;
}
.header1 .search-box-container label:hover{
    background: var(--black);
}
.header2{
    background:#fff;
    display: flex;
    align-items: center;
    justify-content:space-between;
    padding:2rem 9%;
    position: relative;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
}
.header2.active{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index: 10000;
}
.header2 .navbar a{
    padding:.5rem 1.5rem;
    font-size: 2rem;
    border-radius: .5rem;
    color: var(--green);
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
}
.header2 .navbar a:hover{
    background: var(--darkgreen);
    color: #fff;
}
.header2 .icons a{
    font-size:2.5rem;
    color: var(--darkgreen);
    padding-left: 1rem;
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
}
.header2 .icons a:hover{
    color: var(--black);
}
#menu-bar{
    font-size:2.5rem;
    border-radius: .5rem;
    border: .1rem solid var(--black);
    padding: .8rem 1.5rem;
    color: var(--darkgreen);
    cursor: pointer;
    display:none;
}
.home{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.home .img{
    flex: 1 1 40rem;
    padding-top: 5rem;
}
.home .img img{
    width: 100%;
}
.home .content{
    flex: 1 1 40rem;
}
.home .content span{
    font-size: 3rem;
    color: #fff;
}
.home .content h3{
    font-size:5rem;
    color: var(--black);
}
.banner-container{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.banner-container .banner{
    flex: 1 1 35rem;
    height:25rem;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
}
.banner-container .banner img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.banner-container .banner .content{
    position: absolute;
    top: 50%;
    left: 4%;
    transform: translateY(-50%);
}
.banner-container .banner .content h3{
    font-size: 3rem;
    color: #fff;
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
}
.banner-container .banner .content p{
    font-size: 2rem;
    color: var(--darkgreen);
}
.banner-container .banner:hover img{
    transform:scale(1.2) rotate(-5deg);
}
.category .box-container{
    display: flex;
    gap:1.5rem;
    flex-wrap: wrap;
    padding-top: 1rem;
}
.category .box-container .box{
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
    border-radius: .5rem;
    text-align: center;
    padding: 2rem;
    flex: 1 1 25rem;
}
.category .box-container .box img{
   width: 100%;
   object-fit: cover;
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
   border:0.1rem solid rgba(0,0,0,0.7);
}
.category .box-container .box img:hover{
    transform:scale(1.2) rotate(5deg);
}
.category .box-container .box h3{
    font-size: 3.5rem;
    color: var(--black);
}
.category .box-container .box p{
    font-size: 2rem;
    color: #fff;
    padding:.5rem 0;
}
.category .box-container .box .btn{
    display: block;
}
.product .box-container{
    display:flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-top: 1rem;
}
.product .box-container .box{
    flex: 1 1 30rem;
    text-align: center;
    padding:2rem;
    border-radius: .5rem;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
}
.product .box-container .box img{
    height: 20rem;
    width:100%;
    object-fit:cover;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
}
.product .box-container .box img:hover{
    transform:scale(1.2) rotate(5deg);
}
.product .box-container .box .discount{
    position: absolute;
    top: 1rem;
    left:1rem;
    background:var(--darkgreen);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
    color:#fff;
    padding:.7rem 1rem;
    font-size:2rem;
}
.product .box-container .box .discount:hover{
    background: var(--black);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}
.product .box-container .box .icons{
    position: absolute;
    top: .5rem;
    right: -6rem;
}
.product .box-container .box:hover .icons{
    right:1rem;
}
.product .box-container .box .icons a{
    display: block;
    height: 4.5rem;
    width: 4.5rem;
    line-height: 4.5rem;
    font-size: 1.7rem;
    color: #ffffff;
    background: var(--darkgreen);
    border-radius: 50%;
    margin-top: .7rem;
}
.product .box-container .box .icons a:hover{
    background: var(--black);
    color: #fff;
}
.product .box-container .box h3{
    color: var(--black);
    font-size: 2.5rem;
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
}
.product .box-container .box .stars i{
    padding: 1rem .1rem;
    font-size: 1.7rem;
    color:gold;
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
}
.product .box-container .box .price{
    font-size:2rem;
    color:#000;
    padding: .5rem 0;
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
}
.product .box-container .box .price span{
    font-size: 1.5rem;
    color: #fff;
    text-decoration: line-through;
}
.product .box-container .box .quantity{
    display:flex;
    align-items: center;
    justify-content:center;
    padding-top: 1rem;
    padding-bottom:.5rem;
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
}
.product .box-container .box .quantity span{
    padding: 0 .7rem;
    font-size: 1.7rem;
}
.product .box-container .box .quantity input{
    border: .1rem solid rgba(0,0,0,0.3);
    font-size: 1.5rem;
    font-weight: bolder;
    color: var(--black);
    padding: .5rem;
    background:rgba(0,0,0,.05);
}
.product .box-container .box .btn{
    display: block;
}
.deal{
    background:url(deal-bg1.jpg) no-repeat;
    background-position: center;
    background-size:cover;
    padding-top: 7rem;
    padding-bottom:7rem;
}
.deal .content{
    max-width: 50rem;
}
.deal .content .title{
    font-size: 4rem;
    color:#fff;
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
}
.deal .content p{
    font-size: 1.7rem;
    padding:1rem 0;
    color: #fff;
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
}
.deal .content .count-down{
    display: flex;
    gap: 1rem;
    padding: .5rem 0;
}
.deal .content .count-down .box{
    width:9rem;
    text-align: center;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
}
.deal .content .count-down .box h3{
    color: var(--black);
    background:#fff;
    height:7rem;
    line-height: 7rem;
    width: 100%;
    font-size: 5rem;
}
.deal .content .count-down .box span{
    display: block;
    background: var(--black);
    color:#fff;
    width: 100%;
    padding: .5rem;
    font-size: 2rem;
}
.contact form{
    text-align: center;
    padding: 2rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
}
.contact form .inputBox{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.contact form .inputBox input,
.contact form textarea{
    padding: 1rem;
    font-size:1.7rem;
    background:#ffffff;
    text-transform: none;
    margin: 1rem 0;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
    width:49%;
}
.contact form textarea {
    height: 20rem;
    resize:none;
    width: 100%;
}
.newsletter{
    background: url(newsletter-bg.jpg) no-repeat;
    background-size:cover;
    background-position:center;
    text-align: center;
    padding:5rem 2rem;
}
.newsletter h3{
    font-size: 3rem;
    color:var(--black);
}
.newsletter form{
    max-width: 55rem;
    display: flex;
    align-items: center;
    margin: 1rem auto;
    padding:1.5rem;
    background: rgba(0,0,0,.1);
}
.newsletter form .box{
    width: 100%;
    padding: .7rem 1.5rem;
    font-size: 1.7rem;
    color:var(--black);
    text-transform: none;
}
.newsletter form .btn{
    margin-top: 0;
}
.footer .box-container{
    display: flex;
    gap:1.5rem;
    flex-wrap: wrap;
}
.footer .box-container .box{
    padding:1rem 0;
    flex: 1 1 25rem;
}
.footer .box-container .box .share a{
    padding: 0;
    height:4rem;
    width: 4rem;
    line-height: 4rem;
    text-align: center;
}
.footer .box-container .box h3{
    font-size: 2.5rem;
    color: var(--black);
}
.footer .box-container .box p{
    font-size: 1.3rem;
    color:#000;
    padding: .7rem 0;
}
.footer .box-container .box .links{
    padding: 1rem 0;
}
.footer .box-container .box .links a{
    display:block;
    padding: .5rem 0;
    font-size: 1.7rem;
    color: #000;
}
.footer .box-container .box .links a:hover{
    text-decoration: underline;
    color:#fff;
}
.footer .credit{
    padding: 2.5rem 1rem;
    border-top:.1rem solid rgba(0,0,0,0.7);
    margin-top: 1rem;
    text-align:center;
    font-size: 2rem;
}
.footer .credit span{
    color:var(--black);
}
/* media queries */
@media(max-width:1200px) {
    html{
        font-size: 55%;
    }
}
@media(max-width:991px) {
    .header1,
    .header2{
        padding: 2rem;
    }
    section{
        padding: 2rem;
    }
}
@media(max-width:768px) {
    #menu-bar {
        display:initial;
    }
    .header2 .navbar{
        position:absolute;
        top: 100%;
        left: 0;
        right: 0;
        background:var(--darkgreen);
        padding:1rem 2rem;
        display:none;
    }
    .header2 .navbar.active{
       display:initial;
    }
    .header2 .navbar a{
        font-size: 2.5rem;
        display:block;
        text-align: center;
        background:#fff;
        padding:1rem;
        margin: 1.5rem 0;
    }
    .home .content{
        text-align:center;
    }
    .home .content h3{
        font-size:4rem;
    }
    .deal{
        background-position: left;
    }
    .deal .content{
        max-width: 100%;
        text-align:center;
    }
    .deal .content .count-down{
        justify-content: center;
    }
    .contact form .inputBox input{
        width: 100%;
    }
    .newsletter{
        font-size: 2.2rem;
    }
}
@media(max-width:450px) {
    html{
        font-size: 50%;
    }
    .header1{
        flex-flow: column;
    }
    .header1 .search-box-container{
        width:100%;
        margin-top:2rem;
    }
    .logo{
        font-size:4rem;
    }
    .deal .content .count-down .box h3{
        font-size: 4rem;
    }
    .deal .content .count-down .box span{
        font-size: 1.5rem;
    }
}

main.js

				
					let menu = document.querySelector('#menu-bar');
let navbar = document.querySelector('.navbar');
let header = document.querySelector('.header2');
menu.addEventListener('click', () =>{
    menu.classList.toggle('fa-times');
    navbar.classList.toggle('active');
});
window.onscroll = () =>{
    menu.classList.remove('fa-times');
    navbar.classList.remove('active');
    if(window.scrollY > 150){
        header.classList.add('active');
    }else{
        header.classList.remove('active');
    }
}
let countDate = new Date('june 12, 2022 00:00:00').getTime();
function CountDown(){
    let now = new Date().getTime();
    gap = countDate - now;
    let second = 1000;
    let minute = second * 60;
    let hour = minute * 60;
    let day = hour * 24;
    let d = Math.floor(gap / (day));
    let h = Math.floor((gap % (day)) / (hour));
    let m = Math.floor((gap % (hour)) / (minute));
    let s = Math.floor((gap % (minute)) / (second));
    document.getElementById('day').innerHTML = d;
    document.getElementById('hour').innerHTML = h;
    document.getElementById('minute').innerHTML = m;
    document.getElementById('second').innerHTML = s;
}
setInterval(function(){
    CountDown();
}, 1000)