Our Services Grocery Mart | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grocery Mart</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">

</head>
<body>

<section class="grocery-section">
    <h2>Fresh Grocery Products</h2>
    <p>Get fresh, organic & healthy groceries delivered to your doorstep.</p>

<div class="item-card">
        <img src="https://plus.unsplash.com/premium_photo-1664305032567-2c460e29dec1?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8R3JvY2VyeXxlbnwwfHwwfHx8MA%3D%3D" alt="Fresh Fruits">
        <div class="item-content">
          <h3>Fresh Fruits</h3>
          <p>Organic apples, bananas, and seasonal fruits.</p>
          <div class="price">₹120 / Kg</div>
          <a href="#" class="buy-btn">Add to Cart</a>
        </div>
      </div>

<div class="item-card">
        <img src="https://images.unsplash.com/photo-1628102491629-778571d893a3?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8R3JvY2VyeXxlbnwwfHwwfHx8MA%3D%3D" alt="Vegetables">
        <div class="item-content">
          <h3>Green Vegetables</h3>
          <p>Farm-fresh leafy vegetables, cucumbers & more.</p>
          <div class="price">₹80 / Kg</div>
          <a href="#" class="buy-btn">Add to Cart</a>
        </div>
      </div>

<div class="item-card">
        <img src="https://images.unsplash.com/photo-1534723452862-4c874018d66d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8R3JvY2VyeXxlbnwwfHwwfHx8MA%3D%3D" alt="Dairy Products">
        <div class="item-content">
          <h3>Dairy Products</h3>
          <p>Fresh milk, paneer, ghee & butter delivered daily.</p>
          <div class="price">₹60 / Litre</div>
          <a href="#" class="buy-btn">Add to Cart</a>
        </div>
      </div>

<div class="item-card">
        <img src="https://plus.unsplash.com/premium_photo-1686878940830-9031355ec98c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fEdyb2Nlcnl8ZW58MHx8MHx8fDA%3D" alt="Groceries Pack">
        <div class="item-content">
          <h3>Groceries Pack</h3>
          <p>Rice, pulses, flour & everyday essentials in one pack.</p>
          <div class="price">₹950 / Pack</div>
          <a href="#" class="buy-btn">Add to Cart</a>
        </div>
      </div>

</div>
  </section>

</body>
</html>

CSS

*{margin:0;padding:0;box-sizing:border-box;}
    body{font-family:'Poppins',sans-serif;background:#f8fff5;}

.grocery-section{
      padding:90px 8%;
      background:linear-gradient(135deg,#e8ffe8,#fff);
      text-align:center;
    }
    .grocery-section h2{
      font-size:2.6rem;
      font-weight:700;
      margin-bottom:12px;
      color:#2e7d32;
    }
    .grocery-section p{
      font-size:1.1rem;
      color:#444;
      margin-bottom:60px;
    }

.grocery-container{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      gap:30px;
    }

.item-card{
      background:#fff;
      border-radius:18px;
      overflow:hidden;
      box-shadow:0 6px 20px rgba(0,0,0,0.08);
      transition:.4s ease;
      position:relative;
    }
    .item-card:hover{
      transform:translateY(-10px);
      box-shadow:0 12px 28px rgba(0,0,0,0.15);
    }
    .item-card img{
      width:100%;
      height:220px;
      object-fit:cover;
      transition:.4s ease;
    }
    .item-card:hover img{
      transform:scale(1.08);
    }
    .item-content{
      padding:20px;
      text-align:left;
    }
    .item-content h3{
      font-size:1.3rem;
      margin-bottom:8px;
      color:#388e3c;
      font-weight:600;
    }
    .item-content p{
      font-size:.95rem;
      color:#555;
      line-height:1.5;
    }
    .price{
      margin-top:8px;
      font-weight:700;
      font-size:1.1rem;
      color:#2e7d32;
    }
    .buy-btn{
      display:inline-block;
      padding:8px 16px;
      background:#43a047;
      color:#fff;
      border-radius:25px;
      font-size:.9rem;
      font-weight:600;
      margin-top:10px;
      transition:.3s ease;
      text-decoration:none;
    }
    .buy-btn:hover{background:#2e7d32;}

@media(max-width:768px){
      .grocery-section h2{font-size:2rem;}
    }

JavaScript

Our Services Grocery Mart Preview

Download Options