Open In App

Design a Grocery Store Ttemplate using HTML and CSS

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

Example: This example illustrates how to build a create website for grocery store template using HTML and CSS.




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




Article Tags :