Design a Grocery Store Ttemplate using HTML and CSS

Last Updated : 05 Jan, 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

grocerysnasp

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>

CSS

/* 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; 
    } 
}