Design a Grocery Store Ttemplate using HTML and CSS
Last Updated :
26 Jul, 2024
In the article, we will see how to Create a website for a grocery store template using HTML and CSS. It allows customers to browse products, make purchases, and enjoy the convenience of online shopping. The grocery shop app is precisely built to incorporate a navigational header, product divisions for Vegetables and Fruits, and a responsive grid layout for best user experience.
Preview
Approach
- Create a header section inside the HTML file that includes the header logo, navigation links for grocery item categories, and a search box for item searches.
- Use media queries to ensure responsiveness; when the screen width is less than 768px, convert the navigation bar into a column and move the search bar below it for better mobile viewing.
- Use a grid layout with a minimum height of 170vh to organize the major content. Configure the product grid to auto-fill columns with a minimum width of 250px, resulting in a responsive layout.
- Finally, create a footer with a dark background color, white text, and padding.
Example: This example illustrates how to build a create website for grocery store template using HTML and CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet"
href="styles.css">
<title>Grocery Store</title>
</head>
<body>
<header>
<div class="navbar">
<div class="logo">
<span>
<p>Grocery Store</p>
</span>
</div>
<nav>
<ul>
<li>
<a href="#home">
Home
</a>
</li>
<li>
<a href="#vegetables">
Vegetables
</a>
</li>
<li>
<a href="#fruits">
Fruits
</a>
</li>
</ul>
</nav>
<div class="search">
<input type="text"
placeholder="Search products...">
<button>Search</button>
</div>
</div>
</header>
<div class="container">
<section>
<h2 id="vegetables">
Vegetables
</h2>
<div class="category">
<div class="product">
<div class="image-placeholder
image-placeholder1">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240104152640/carrot-icon.png"
alt="grocery">
</div>
<h3>Carrot</h3>
<p class="price">$1.99/1kg</p>
<div class="qyt">
<label for="quantity_vegetable1">
Quantity:
</label>
<input type="number"
id="quantity_vegetable1"
value="1">
</div>
<div class="productbtns">
<button>
Add to Cart
</button>
<button>
Buy Now
</button>
</div>
</div>
<div class="product">
<div class="image-placeholder
image-placeholder2">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240104153932/tomato-icon.png"
alt="grocery">
</div>
<h3>Tomato</h3>
<p class="price">$1.49/1kg</p>
<div class="qyt">
<label for="quantity_vegetable2">
Quantity:
</label>
<input type="number"
id="quantity_vegetable2"
value="1">
</div>
<div class="productbtns">
<button>Add to Cart</button>
<button>Buy Now</button>
</div>
</div>
<div class="product">
<div class="image-placeholder
image-placeholder3">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240104153754/pumpkin-icon.png"
alt="grocery">
</div>
<h3>Pumpkin</h3>
<p class="price">$2.99/1kg</p>
<div class="qyt">
<label for="quantity_vegetable3">
Quantity:
</label>
<input type="number"
id="quantity_vegetable3"
value="1">
</div>
<div class="productbtns">
<button>Add to Cart</button>
<button>Buy Now</button>
</div>
</div>
<div class="product">
<div class="image-placeholder
image-placeholder4">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240104153652/eggplant-icon.png"
alt="grocery">
</div>
<h3>Brinjal</h3>
<p class="price">$1.79/1kg</p>
<div class="qyt">
<label for="quantity_vegetable4">
Quantity:
</label>
<input type="number"
id="quantity_vegetable4"
value="1">
</div>
<div class="productbtns">
<button>Add to Cart</button>
<button>Buy Now</button>
</div>
</div>
</div>
</section>
<section>
<h2 id="fruits">Fruits</h2>
<div class="category">
<div class="product">
<div class="image-placeholder image-placeholder5">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240104153254/fresh-apple-icon.png"
alt="grocery">
</div>
<h3>Apple</h3>
<p class="price">$2.49/1kg</p>
<div class="qyt">
<label for="quantity_fruit1">
Quantity:
</label>
<input type="number"
id="quantity_fruit1"
value="1">
</div>
<div class="productbtns">
<button>Add to Cart</button>
<button>Buy Now</button>
</div>
</div>
<div class="product">
<div class="image-placeholder
image-placeholder6">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240104153407/bananas-icon.png"
alt="grocery">
</div>
<h3>Banana</h3>
<p class="price">$0.99/1kg</p>
<div class="qyt">
<label for="quantity_fruit2">
Quantity:
</label>
<input type="number"
id="quantity_fruit2"
value="1">
</div>
<div class="productbtns">
<button>Add to Cart</button>
<button>Buy Now</button>
</div>
</div>
<div class="product">
<div class="image-placeholder
image-placeholder7">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240104153523/orange-icon.png"
alt="grocery">
</div>
<h3>Orange</h3>
<p class="price">$0.79/1kg</p>
<div class="qyt">
<label for="quantity_fruit4">
Quantity:
</label>
<input type="number"
id="quantity_fruit4"
value="1">
</div>
<div class="productbtns">
<button>Add to Cart</button>
<button>Buy Now</button>
</div>
</div>
</div>
</section>
</div>
<footer>
<p>© 2023 Grocery Store.
All rights reserved.
</p>
</footer>
</body>
</html>
/* styles.css */
body {
margin: 0;
font-family: 'Arial', sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 15px 20px;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
flex-direction: column;
}
.logo p {
margin: 0;
font-size: 1.2em;
color: #4caf50;
}
nav ul {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
nav li {
margin-right: 20px;
}
nav a {
text-decoration: none;
color: #fff;
font-weight: bold;
font-size: 1.2em;
transition: color 0.3s ease-in-out;
}
nav a:hover {
color: #ffd700;
}
.search {
display: flex;
align-items: center;
}
.search input {
padding: 8px;
margin-right: 10px;
border: none;
border-radius: 5px;
}
.search button {
background-color: #ffd700;
color: #333;
border: none;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
.search button:hover {
background-color: #ffc107;
}
@media screen and (max-width: 768px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
nav {
margin-top: 10px;
}
nav ul {
flex-direction: column;
}
nav li {
margin-right: 0;
margin-bottom: 10px;
}
.search {
margin-top: 10px;
}
}
.container {
display: grid;
gap: 1rem;
min-height: 100vh;
}
.category {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
gap: 1rem;
}
.product {
position: relative;
max-height: auto;
border: 1px solid #ddd;
padding: 15px;
text-align: center;
display: flex;
flex-direction: column;
line-height: 1.5rem;
transition: box-shadow 0.3s ease-in-out;
}
.product:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
img {
max-width: 100%;
height: 200px;
object-fit: fill;
overflow: hidden;
transition: transform 0.3s ease-in-out;
margin-bottom: 1rem;
}
.product:hover img {
transform: scale(1.05);
}
.productbtns button {
margin-top: 1rem;
cursor: pointer;
background-color: #4caf50;
color: white;
border: none;
padding: 10px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 5px;
transition: background-color 0.3s ease-in-out;
margin-bottom: 1rem;
cursor: pointer;
}
.productbtns button:hover {
background-color: #ffc107;
}
.qyt {
display: flex;
align-items: center;
justify-content: center;
}
.qyt input {
width: 30px;
border-radius: 0.1rem;
border: 0.1rem solid #4caf50;
transition: border-color 0.3s ease-in-out;
}
.price {
color: #ffc107;
font-weight: 600;
margin: 0 0;
}
.qyt input,
.qyt label {
margin: 0px 10px;
}
.product h3 {
margin: 0 0;
}
.image-placeholder {
width: 100%;
height: 200px;
margin-bottom: 1rem;
overflow: hidden;
position: relative;
cursor: pointer;
transition: transform 0.3s ease-in-out;
}
.image-placeholder:hover {
transform: scale(1.05);
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: relative;
bottom: 0;
width: auto;
padding: 1rem 0rem;
}
footer p {
margin: 0;
font-size: 0.9em;
}
@media screen and (max-width: 768px) {
footer {
font-size: 0.8em;
}
}
Output:
Similar Reads
Design a Google Chrome Page Template using HTML and CSS Google Chrome Page Template is a replica of Google Chrome Page which can be built with the help of HTML and CSS. This project has fundamental features and design elements, a search option, along with using the FontAwsome Icons, and various CSS styling, which offer you hands-on experience in web desi
4 min read
Design a Layered Image Page Template using HTML and CSS The article provides a complete guide for creating a layered image layout using HTML and CSS. The Layered Image Page refers to a webpage design that contains layered structured visual elements using images. Here, the design contains two boxes with background images and some empty rounded boxes with
3 min read
Design a Responsive Services Section Template using HTML and CSS A Services Website plays a vital role in showcasing the different services that a particular company or any other contractor has to offer. In this article, we are going to build a services page, it will illustrate the different components of the services like the title, description, and learn more b
4 min read
Design a Offer Box With Ribbon template using HTML and CSS To highlight special offers, discounts, or promotions, offer boxes with ribbons are a common graphic element seen in marketing and promotional materials. Usually, it is just a box or container with the offer inside that is decorated with ribbon to make it look festive and appealing. The ribbon serve
3 min read
Email Template Using HTML and CSS The colorful and engaging email templates you see in your inbox are more than just design—they’re built to get results. A well-crafted email can increase click-through rates by up to 42%. In this article, you'll learn how to create a simple yet attractive email template using HTML and CSS. Since man
5 min read
How to design Animated Product Card Template using HTML and CSS ? In the dynamic world of web development, where creating engaging and visually appealing user interfaces is key, one effective strategy to captivate your audience involves seamlessly incorporating animated elements into your design. In this article, we will guide you through the process of creating a
3 min read