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>
<div class="header1">
<a href="#" class="logo"><i class="fas fa-shopping-basket"></i>seafood</a>
<form action="" class="search-box-container">
<input type="search" id="search-box" placeholder="search here...">
<label for="search-box" class="fas fa-search"></label>
</form>
</div>
<div class="header2">
<div id="menu-bar" class="fas fa-bars"></div>
<nav class="navbar">
<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>
<div class="icons">
<a href="#" class="fas fa-shopping-cart"></a>
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-user-circle"></a>
</div>
</div>
</header>
<!-- home section starts -->
<section class="home" id="home">
<div class="img">
<img decoding="async" src="home-img.png" alt="">
</div>
<div class="content">
<span>fresh and organic</span>
<h3>your daily fresh fish</h3>
<a href="#" class="btn">get started</a>
</div>
</section>
<!-- banner section starts -->
<section class="banner-container">
<div class="banner">
<img decoding="async" src="banner-1.jpg" alt="">
<div class="content">
<h3>special offer</h3>
<p>upto 45% off</p>
<a href="#" class="btn">check out</a>
</div>
</div>
<div class="banner">
<img decoding="async" src="banner-2.jpg" alt="">
<div class="content">
<h3>limited offer</h3>
<p>upto 50% off</p>
<a href="#" class="btn">check out</a>
</div>
</div>
<div class="banner">
<img decoding="async" src="banner-3.jpg" alt="">
<div class="content">
<h3>premium offer</h3>
<p>upto 50% off</p>
<a href="#" class="btn">check out</a>
</div>
</div>
</section>
<!-- category section starts -->
<section class="category" id="category">
<h1 class="heading">shop by <span>category</span></h1>
<div class="box-container">
<div class="box">
<h3>fish fry</h3>
<p>upto 50% off</p>
<img decoding="async" src="category-1.jpg" alt="">
<a href="#" class="btn">shop now</a>
</div>
<div class="box">
<h3>fish curry</h3>
<p>upto 44% off</p>
<img decoding="async" src="category-2.jpg" alt="">
<a href="#" class="btn">shop now</a>
</div>
<div class="box">
<h3>sea prawn</h3>
<p>upto 35% off</p>
<img decoding="async" src="category-3.jpg" alt="">
<a href="#" class="btn">shop now</a>
</div>
<div class="box">
<h3>sea fish</h3>
<p>upto 12% off</p>
<img decoding="async" src="category-4.jpg" alt="">
<a href="#" class="btn">shop now</a>
</div>
</div>
</section>
<!-- product section starts -->
<section class="product" id="product">
<h1 class="heading">latest <span>products</span></h1>
<div class="box-container">
<div class="box">
<span class="discount">-33%</span>
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<img decoding="async" src="product-1.jpg" alt="">
<h3>Sea Fish</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<div class="price"> $10.50 <span> $13.20</span></div>
<div class="quantity">
<span>quantity</span>
<input type="number" min="1" max="1000" value="1">
<span> /kg </span>
</div>
<a href="#" class="btn">add to cart</a>
</div>
<div class="box">
<span class="discount">-52%</span>
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<img decoding="async" src="product-2.jpg" alt="">
<h3>Oysters</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<div class="price"> $10.50 <span> $13.20</span></div>
<div class="quantity">
<span>quantity</span>
<input type="number" min="1" max="1000" value="1">
<span> /kg </span>
</div>
<a href="#" class="btn">add to cart</a>
</div>
<div class="box">
<span class="discount">-45%</span>
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<img decoding="async" src="product-3.jpg" alt="">
<h3>Abalone</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<div class="price"> $10.50 <span> $13.20</span></div>
<div class="quantity">
<span>quantity</span>
<input type="number" min="1" max="1000" value="1">
<span> /kg </span>
</div>
<a href="#" class="btn">add to cart</a>
</div>
<div class="box">
<span class="discount">-12%</span>
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<img decoding="async" src="product-4.jpg" alt="">
<h3>Crab</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<div class="price"> $10.50 <span> $13.20</span></div>
<div class="quantity">
<span>quantity</span>
<input type="number" min="1" max="1000" value="1">
<span> /kg </span>
</div>
<a href="#" class="btn">add to cart</a>
</div>
<div class="box">
<span class="discount">-20%</span>
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<img decoding="async" src="product-5.jpg" alt="">
<h3>Lobster</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<div class="price"> $10.50 <span> $13.20</span></div>
<div class="quantity">
<span>quantity</span>
<input type="number" min="1" max="1000" value="1">
<span> /kg </span>
</div>
<a href="#" class="btn">add to cart</a>
</div>
<div class="box">
<span class="discount">-29%</span>
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<img decoding="async" src="product-6.jpg" alt="">
<h3>Sushi</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<div class="price"> $10.50 <span> $13.20</span></div>
<div class="quantity">
<span>quantity</span>
<input type="number" min="1" max="1000" value="1">
<span> /kg </span>
</div>
<a href="#" class="btn">add to cart</a>
</div>
<div class="box">
<span class="discount">-55%</span>
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<img decoding="async" src="product-7.jpg" alt="">
<h3>Herring</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<div class="price"> $10.50 <span> $13.20</span></div>
<div class="quantity">
<span>quantity</span>
<input type="number" min="1" max="1000" value="1">
<span> /kg </span>
</div>
<a href="#" class="btn">add to cart</a>
</div>
<div class="box">
<span class="discount">-30%</span>
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<img decoding="async" src="product-8.jpg" alt="">
<h3>Squid</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<div class="price"> $10.50 <span> $13.20</span></div>
<div class="quantity">
<span>quantity</span>
<input type="number" min="1" max="1000" value="1">
<span> /kg </span>
</div>
<a href="#" class="btn">add to cart</a>
</div>
<div class="box">
<span class="discount">-40%</span>
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<img decoding="async" src="product-9.jpg" alt="">
<h3>Mackerel</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<div class="price"> $10.50 <span> $13.20</span></div>
<div class="quantity">
<span>quantity</span>
<input type="number" min="1" max="1000" value="1">
<span> /kg </span>
</div>
<a href="#" class="btn">add to cart</a>
</div>
</div>
</section>
<!-- deal section starts -->
<section class="deal" id="deal">
<div class="content">
<h3 class="title">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>
<div class="count-down">
<div class="box">
<h3 id="day">00</h3>
<span>day</span>
</div>
<div class="box">
<h3 id="hour">00</h3>
<span>hour</span>
</div>
<div class="box">
<h3 id="minute">00</h3>
<span>minute</span>
</div>
<div class="box">
<h3 id="second">00</h3>
<span>second</span>
</div>
</div>
<a href="#" class="btn">check the deal</a>
</div>
</section>
<!-- contact section starts -->
<section class="contact" id="contact">
<h1 class="heading"> <span>contact</span> us </h1>
<form action="">
<div class="inputBox">
<input type="text" placeholder="name">
<input type="email" placeholder="email">
</div>
<div class="inputBox">
<input type="number" placeholder="number">
<input type="text" placeholder="subject">
</div>
<textarea placeholder="message" name="" id="" cols="30" rows="10"></textarea>
<input type="submit" value="send message" class="btn">
</form>
</section>
<!-- newsletter section starts -->
<section class="newsletter">
<h3>subscribe us for latest updates</h3>
<form action="">
<input class="box" type="email" placeholder="enter your email">
<input type="submit" value="Subscribe" class="btn">
</form>
</section>
<!-- footer section starts -->
<section class="footer">
<div class="box-container">
<div class="box">
<a href="" class="logo"><i class="fas fa-shopping-basket"></i></a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam possimus voluptates commodi laudantium!
Doloribus sint voluptatibus quaerat farhan suscipit nulla?</p>
<div class="share">
<a href="#" class="btn fab fa-facebook-f"></a>
<a href="#" class="btn fab fa-twitter"></a>
<a href="#" class="btn fab fa-instagram"></a>
<a href="#" class="btn fab fa-linkedin"></a>
</div>
</div>
<div class="box">
<h3>our location</h3>
<div class="links">
<a href="#">USA</a>
<a href="#">india</a>
<a href="#">dubai</a>
<a href="#">turkey</a>
<a href="#">azerbaijan</a>
</div>
</div>
<div class="box">
<h3>quick links</h3>
<div class="links">
<a href="#">home</a>
<a href="#">category</a>
<a href="#">product</a>
<a href="#">deal</a>
<a href="#">contact</a>
</div>
</div>
<div class="box">
<h3>download app</h3>
<div class="links">
<a href="#">google play</a>
<a href="#">window 10</a>
<a href="#">app store</a>
</div>
</div>
</div>
<h1 class="credit"> created by <span> Dailywebdesign </span> || all rights reserved! </h1>
</section>
<!-- custome js link file -->
<script src="main.js"></script>
</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)
images
 |
| ecommerce website design |
 |
| ecommerce website design |
 |
| ecommerce website design |
 |
| ecommerce website design |
 |
| ecommerce website design |
 |
| ecommerce website design |
 |
| ecommerce website design |
 |
| ecommerce website design |
 |
| ecommerce website design |
 |
| ecommerce website design |
 |
| ecommerce website design |
 |
| ecommerce website design |
 |
| ecommerce website design |
 |
| ecommerce website design |
 |
| ecommerce website design |
 |
| ecommerce website design |
 |
| ecommerce website design |
 |
| ecommerce website design |
 |
| ecommerce website design |
 |
| ecommerce website design |
 |
| ecommerce website design |
 |
| ecommerce website design |