Grocery HTML Program by HTML, Css and Js

Grocery html program by html,css and js
Html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>complete responsive grocery website design tutorial</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/5.15.3/css/all.min.css">

<link rel="stylesheet" href="css/style.css">
</head>
<body>

<header>
<div class="header-1">
<a href="#" class="logo"><i class="fas fa-shopping-basket"></i>groco</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="header-2">
<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>



<section class="home" id="home">
<div class="image">
<img src="images/home-img.png" alt="">
</div>
<div class="content">
<span>fresh and organic</span>
<h3>your daily need products</h3>
<a href="#" class="btn">get started</a>
</div>
</section>


<section class="banner-container">
<div class="banner">
<img src="images/banner-1.jpg" alt="">
<h3>special offer</h3>
<p>upto 45% off</p>
<a href="#" class="btn">check out</a>
</div>
</div>
<div class="banner">
<img src="images/banner-2.jpg" alt="">
<h3>limited offer</h3>
<p>upto 50% off</p>
<a href="#" class="btn">check out</a>
</div>
</div>
</section>


<section class="category" id="category">
<h1 class="heading">shop by <span>category</span></h1>
<div class="box-container">
<div class="box">
<h3>vegitables</h3>
<p>upto 50% off</p>
<img src="images/category-1.png" alt="">
<a href="#" class="btn">shop now</a>
</div>
<div class="box">
<h3>juice</h3>
<p>upto 44% off</p>

</div>
<div class="box">
<h3>meat</h3>
<p>upto 35% off</p>
</div>
<div class="box">
<h3>fruite</h3>
<p>upto 12% off</p>
</div>
</div>
</section>


<section class="product" id="product">
<h1 class="heading">latest <span>products</span></h1>
<div class="box">
<span class="discount">-33%</span>
<div class="icons">
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<img src="images/product-1.png" alt="">
<h3>organic banana</h3>
<div class="stars">
<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">
<div class="icons">
</div>
<h3>organic tomato</h3>
<div class="stars">
</div>
<span> /kg </span>
</div>
</div>
<div class="box">
<div class="icons">
</div>
<h3>organic orange</h3>
<div class="stars">

</div>
<span> /kg </span>
</div>
</div>
<div class="box">
<div class="icons">
</div>
<h3>natural mild</h3>
<div class="stars">
</div>
<span> /kg </span>

</div>
</div>
<div class="box">
<div class="icons">
</div>
<h3>organic grapes</h3>
<div class="stars">
</div>
<span> /kg </span>
</div>
</div>
<div class="box">
<div class="icons">
</div>
<h3>natural almonts</h3>
<div class="stars">
</div>
<span> /kg </span>
</div>
</div>
<div class="box">
<div class="icons">
</div>

<h3>organic apple</h3>
<div class="stars">
</div>
<span> /kg </span>
</div>
</div>
<div class="box">
<div class="icons">
</div>
<h3>natural butter</h3>
<div class="stars">

</div>
<span> /kg </span>
</div>
</div>
<div class="box">
<div class="icons">
</div>
<h3>organic carrot</h3>
<div class="stars">
</div>

<span> /kg </span>
</div>
</div>
</div>
</section>


<section class="deal" id="deal">
<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 sequi 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>


<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>


<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>



<section class="footer">
<div class="box">
<a href="#" class="logo"><i class="fas fa-shopping-basket"></i>groco</a>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam culpa sit enim nesciunt
rerum laborum illum quam error ut alias!</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="#">india</a>
<a href="#">USA</a>
<a href="#">france</a>
<a href="#">japan</a>
<a href="#">russia</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 xp</a>
<a href="#">app store</a>
</div>
</div>
</div>
<h1 class="credit"> created by <span> mr. web designer </span> | all rights reserved! </h1>
</section>



<script src="js/script.js"></script>
</body>
</html>
js script
let menu = document.querySelector('#menu-bar');
let navbar = document.querySelector('.navbar');
let header = document.querySelector('.header-2');
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 1, 2021 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').innerText = d;
document.getElementById('hour').innerText = h;
document.getElementById('minute').innerText = m;
document.getElementById('second').innerText = s;
setInterval(function(){
CountDown();
},1000)
css script
@import url('https://fonts.googleapis.com/css2?
family=Nunito:wght@200;300;400;600;700&display=swap');
:root{
--green:#27ae60;
--black:#2c2c54;
*{
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;
color:#fff;
padding:.8rem 3rem;
font-size: 1.7rem;
text-align: center;
cursor: pointer;
.btn:hover{
background:var(--black);
}
.heading{
text-align: center;
color:var(--black);
text-transform: uppercase;
padding:1rem;
font-size: 3.5rem;
padding-bottom: 2rem;
.heading span{
color:var(--green);
text-transform: uppercase;
.header-1{
background:#eee;
display: flex;
align-items: center;
justify-content: space-between;
padding:2rem 9%;
.logo{
color:var(--black);
font-weight: bolder;
font-size: 3rem;
.logo i{
padding-right: .5rem;
color:var(--green);
.header-1 .search-box-container{
display: flex;
height:5rem;
.header-1 .search-box-container #search-box{
height: 100%;
width:100%;
padding:1rem;
font-size: 2rem;
color:#333;
border:.1rem solid rgba(0,0,0,.3);
text-transform: none;
.header-1 .search-box-container label{
height: 100%;
width:8rem;
font-size: 2.5rem;
line-height: 5rem;
color:#fff;
text-align: center;
cursor: pointer;
.header-1 .search-box-container label:hover{

.header-2{
background:#fff;
display: flex;
padding:2rem 9%;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
position: relative;
.header-2.active{
position: fixed;
top:0; left: 0; right:0;
z-index: 10000;
.header-2 .navbar a{
padding:.5rem 1.5rem;
font-size: 2rem;
border-radius: .5rem;
color:var(--black);
.header-2 .navbar a:hover{
color:#fff;
}
.header-2 .icons a{
font-size: 2.5rem;
color:var(--black);
padding-left: 1rem;
.header-2 .icons a:hover{
color:var(--green);
#menu-bar{
font-size: 3rem;
border:.1rem solid var(--black);
color:var(--black);
cursor: pointer;
display: none;
.home{
display: flex;
justify-content: center;
flex-wrap: wrap;
.home .image{
flex:1 1 40rem;
padding-top: 5rem;
}
.home .image img{
width:100%;
.home .content{
flex:1 1 40rem;
.home .content span{
font-size: 3rem;
color:#666;
.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 40rem;
height: 25rem;
overflow: hidden;
position: relative;
}
.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:var(--black);
.banner-container .banner .content p{
font-size: 2rem;
color:#333;
.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{
text-align: center;
padding:2rem;
flex:1 1 25rem;
.category .box-container .box img{
width: 20rem;
margin:.5rem 0;
.category .box-container .box h3{
font-size: 3.5rem;
color:var(--black);
.category .box-container .box p{
font-size: 2rem;
color:#666;
padding:.5rem 0;
.category .box-container .box .btn{
display: block;
}
.product .box-container{
display: flex;
flex-wrap: wrap;
gap:1.5rem;
.product .box-container .box{
flex:1 1 30rem;
text-align: center;
padding:2rem;
overflow: hidden;
position: relative;
.product .box-container .box img{
height: 20rem;
.product .box-container .box .discount{
position: absolute;
top:1rem; left: 1rem;
background:rgba(0,255,0,.1);
color:var(--green);
padding:.7rem 1rem;
font-size: 2rem;
.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:var(--black);
border-radius: 50%;
margin-top: .7rem;
.product .box-container .box .icons a:hover{
color:#fff;
.product .box-container .box h3{
color:var(--black);
font-size: 2.5rem;
.product .box-container .box .stars i{
padding:1rem .1rem;
font-size: 1.7rem;
color:gold;
.product .box-container .box .price{
font-size: 2rem;
color:#333;
padding:.5rem 0;
.product .box-container .box .price span{
font-size: 1.5rem;
color:#999;
text-decoration: line-through;
.product .box-container .box .quantity{
display: flex;
padding-top: 1rem;
padding-bottom: .5rem;
.product .box-container .box .quantity span{
padding:0 .7rem;
font-size: 1.7rem;
.product .box-container .box .quantity input{

font-size: 1.5rem;
font-weight: bolder;
color:var(--black);
padding:.5rem;
.product .box-container .box .btn{
display: block;
.deal{
background:url(../images/deal-bg.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:var(--black);
.deal .content p{
font-size: 1.7rem;
padding:1rem 0;
color:#333;
.deal .content .count-down{
display: flex;
gap:1rem;
padding:.5rem 0;
.deal .content .count-down .box{
width:9rem;
text-align: center;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
.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;
color:#fff;
width:100%;
padding:.5rem;
font-size: 2rem;
.contact form{
text-align: center;
padding:2rem;
.contact form .inputBox{
display: flex;
flex-wrap: wrap;
.contact form .inputBox input, .contact form textarea{
padding:1rem;
font-size: 1.7rem;
background:#f7f7f7;
margin:1rem 0;
width: 49%;
.contact form textarea{
height: 20rem;
resize: none;
width: 100%;
}
.newsletter{
background:url(../images/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;
margin:1rem auto;
padding:1.5rem;
.newsletter form .box{
width:100%;
font-size: 1.7rem;
color:#333;
.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:#666;
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:#333;
.footer .box-container .box .links a:hover{
text-decoration: underline;
color:var(--green);
.footer .credit{
padding:2.5rem 1rem;
border-top: .1rem solid rgba(0,0,0,.1);
margin-top: 1rem;
text-align: center;
font-size: 2rem;
.footer .credit span{
color:var(--green);
}
/* media queries */
@media(max-width:1200px){
html{
font-size: 55%;
.header-1,
.header-2{
padding:2rem;
}
section{
padding:2rem;
#menu-bar{
display: initial;
.header-2 .navbar{
position: absolute;
top:100%; left: 0; right:0;
padding:1rem 2rem;
display: none;
.header-2 .navbar.active{
display: initial;
.header-2 .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{
.contact form .inputBox input{
width:100%;
.newsletter h3{
font-size: 2.2rem;
}
}
html{
font-size: 50%;
.heading{
font-size: 3rem;
.header-1{
flex-flow: column;
.header-1 .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;
}

Grocery HTML Program by HTML, Css and Js

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Grocery HTML Program by HTML, Css and Js

Uploaded by

Copyright:

Available Formats

Grocery html program by html,css and js

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>complete responsive grocery website design tutorial</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

<link rel="stylesheet" href="css/style.css">

<a href="#" class="logo"><i class="fas fa-shopping-basket"></i>groco</a>

<form action="" class="search-box-container">

<label for="search-box" class="fas fa-search"></label>

<div id="menu-bar" class="fas fa-bars"></div>

<a href="#" class="fas fa-shopping-cart"></a>

<a href="#" class="fas fa-heart"></a>

<a href="#" class="fas fa-user-circle"></a>

<img src="images/home-img.png" alt="">

<span>fresh and organic</span>

<h3>your daily need products</h3>

<a href="#" class="btn">get started</a>

<img src="images/banner-1.jpg" alt="">

<p>upto 45% off</p>

<a href="#" class="btn">check out</a>

<p>upto 50% off</p>

<a href="#" class="btn">check out</a>

<section class="category" id="category">

<h1 class="heading">shop by <span>category</span></h1>

<p>upto 50% off</p>

<img src="images/category-1.png" alt="">

<a href="#" class="btn">shop now</a>

<p>upto 44% off</p>

<img src="images/category-2.png" alt="">

<a href="#" class="btn">shop now</a>

<p>upto 35% off</p>

<img src="images/category-3.png" alt="">

<a href="#" class="btn">shop now</a>

<p>upto 12% off</p>

<img src="images/category-4.png" alt="">

<a href="#" class="btn">shop now</a>

<section class="product" id="product">

<h1 class="heading">latest <span>products</span></h1>

<a href="#" class="fas fa-share"></a>

<a href="#" class="fas fa-eye"></a>

<img src="images/product-1.png" alt="">

<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 class="price"> $10.50 <span> $13.20 </span> </div>

<input type="number" min="1" max="1000" value="1">

<span> /kg </span>

<a href="#" class="btn">add to cart</a>

<a href="#" class="fas fa-heart"></a>

<a href="#" class="fas fa-share"></a>

<a href="#" class="fas fa-eye"></a>