Index

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

Index

Uploaded by

Document Information

Original Description:

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

Index

Uploaded by

Copyright:

Available Formats

<!

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

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

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

<section class="home" id="home">

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

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

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

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

<section class="deal" id="deal">

<h3 class="title">deal of the day</h3>

<a href="#" class="btn">check the deal</a>

<section class="contact" id="contact">

<h1 class="heading"> <span>contact</span> us </h1>

<textarea placeholder="message" name="" id="" cols="30"

<input type="submit" value="send message" class="btn">

<h3>subscribe us for latest updates</h3>

You might also like