FreshMart Grocery Store Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FreshMart - Your Neighborhood Grocery Store</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

</head>
<body>
    
    <div class="loading" id="loading">
        <div class="spinner"></div>
    </div>

<header class="header">
        <div class="header-top">
            <div class="container">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <div>? Free Delivery on Orders Over $50 | ? Customer Service: (555) 123-4567</div>
                    <div style="display: flex; gap: 1rem;">
                        <span>Store Hours: 7AM - 11PM</span>
                        <span>Weekly Ads</span>
                        <span>Store Locator</span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="header-main">
            <div class="container">
                <div class="header-content">
                    <a href="#" class="logo">
                        <div class="logo-icon">
                            <i class="fas fa-shopping-basket"></i>
                        </div>
                        FreshMart
                    </a>

<div class="header-actions">
                        <a href="#" class="header-link" id="deliveryBtn">
                            <i class="fas fa-truck"></i>
                            Delivery
                        </a>
                        <a href="#" class="header-link">
                            <i class="fas fa-heart"></i>
                            Lists
                        </a>
                        <a href="#" class="header-link" id="cartBtn">
                            <i class="fas fa-shopping-cart"></i>
                            Cart
                            <span class="cart-count" id="cartCount">0</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

<nav class="nav">
            <div class="container">
                <ul class="nav-menu">
                    <li><a href="#categories">All Departments</a></li>
                    <li><a href="#produce">Fresh Produce</a></li>
                    <li><a href="#meat">Meat & Seafood</a></li>
                    <li><a href="#dairy">Dairy & Eggs</a></li>
                    <li><a href="#bakery">Bakery</a></li>
                    <li><a href="#pantry">Pantry</a></li>
                    <li><a href="#deals">Weekly Deals</a></li>
                </ul>
            </div>
        </nav>
    </header>

<section class="hero">
        <div class="container">
            <div class="hero-content">
                <div class="hero-text">
                    <h1>Fresh. Local. Delivered.</h1>
                    <p>Shop the freshest groceries from local farms and trusted brands. Same-day delivery available with our convenient online shopping experience.</p>
                    <a href="#products" class="hero-cta">
                        <i class="fas fa-shopping-basket"></i>
                        Start Shopping
                    </a>
                </div>
                <div class="hero-image">
                    <img src="https://images.unsplash.com/photo-1542838132-92c53300491e?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Fresh Groceries" class="hero-grocery" onerror="this.src=''; this.alt='Grocery image failed to load'; this.style.display='none';">
                </div>
            </div>
        </div>
    </section>

<section class="features">
        <div class="container">
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-truck"></i>
                    </div>
                    <h3 class="feature-title">Same-Day Delivery</h3>
                    <p class="feature-description">Get your groceries delivered fresh to your door within hours of ordering.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-leaf"></i>
                    </div>
                    <h3 class="feature-title">Farm Fresh Produce</h3>
                    <p class="feature-description">Locally sourced fruits and vegetables picked at peak freshness.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-tags"></i>
                    </div>
                    <h3 class="feature-title">Weekly Deals</h3>
                    <p class="feature-description">Save more with our rotating weekly specials and bulk discounts.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-mobile-alt"></i>
                    </div>
                    <h3 class="feature-title">Easy Shopping</h3>
                    <p class="feature-description">Shop online or with our mobile app for ultimate convenience.</p>
                </div>
            </div>
        </div>
    </section>

<section class="categories" id="categories">
        <div class="container">
            <h2 class="section-title">Shop by Department</h2>
            <div class="categories-grid">
                <div class="category-card" data-category="produce">
                    <div class="category-image" style="background: linear-gradient(135deg, #22c55e, #16a34a); color: white;">
                        ?
                    </div>
                    <div class="category-content">
                        <h3 class="category-name">Fresh Produce</h3>
                        <p class="category-description">Farm-fresh fruits, vegetables, and organic options</p>
                        <p class="category-count">500+ items available</p>
                    </div>
                </div>
                <div class="category-card" data-category="meat">
                    <div class="category-image" style="background: linear-gradient(135deg, #dc2626, #b91c1c); color: white;">
                        ?
                    </div>
                    <div class="category-content">
                        <h3 class="category-name">Meat & Seafood</h3>
                        <p class="category-description">Premium cuts, fresh seafood, and deli selections</p>
                        <p class="category-count">200+ items available</p>
                    </div>
                </div>
                <div class="category-card" data-category="dairy">
                    <div class="category-image" style="background: linear-gradient(135deg, #3b82f6, #2563eb); color: white;">
                        ?
                    </div>
                    <div class="category-content">
                        <h3 class="category-name">Dairy & Eggs</h3>
                        <p class="category-description">Fresh milk, cheese, yogurt, and farm eggs</p>
                        <p class="category-count">150+ items available</p>
                    </div>
                </div>
                <div class="category-card" data-category="bakery">
                    <div class="category-image" style="background: linear-gradient(135deg, #f59e0b, #d97706); color: white;">
                        ?
                    </div>
                    <div class="category-content">
                        <h3 class="category-name">Bakery</h3>
                        <p class="category-description">Fresh bread, pastries, cakes, and custom orders</p>
                        <p class="category-count">100+ items available</p>
                    </div>
                </div>
                <div class="category-card" data-category="pantry">
                    <div class="category-image" style="background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: white;">
                        ?
                    </div>
                    <div class="category-content">
                        <h3 class="category-name">Pantry Essentials</h3>
                        <p class="category-description">Canned goods, pasta, rice, and cooking ingredients</p>
                        <p class="category-count">800+ items available</p>
                    </div>
                </div>
                <div class="category-card" data-category="frozen">
                    <div class="category-image" style="background: linear-gradient(135deg, #06b6d4, #0891b2); color: white;">
                        ?
                    </div>
                    <div class="category-content">
                        <h3 class="category-name">Frozen Foods</h3>
                        <p class="category-description">Frozen meals, vegetables, ice cream, and more</p>
                        <p class="category-count">300+ items available</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="products" id="products">
        <div class="container">
            <div class="products-header">
                <h2 class="section-title">Featured Products</h2>
                <div class="products-filters">
                    <select class="filter-select" id="categoryFilter">
                        <option value="all">All Categories</option>
                        <option value="produce">Fresh Produce</option>
                        <option value="meat">Meat & Seafood</option>
                        <option value="dairy">Dairy & Eggs</option>
                        <option value="bakery">Bakery</option>
                        <option value="pantry">Pantry</option>
                    </select>
                    <select class="filter-select" id="priceFilter">
                        <option value="all">All Prices</option>
                        <option value="under-5">Under $5</option>
                        <option value="5-15">$5 - $15</option>
                        <option value="15-30">$15 - $30</option>
                        <option value="over-30">Over $30</option>
                    </select>
                    <select class="filter-select" id="sortFilter">
                        <option value="featured">Featured</option>
                        <option value="price-low">Price: Low to High</option>
                        <option value="price-high">Price: High to Low</option>
                        <option value="rating">Customer Rating</option>
                    </select>
                </div>
            </div>
            <div class="products-grid" id="productsGrid">
                <div class="product-card" data-category="produce" data-price="3.99">
                    <div class="product-image" style="background: linear-gradient(135deg, #22c55e, #16a34a); color: white;">
                        ?
                        <div class="product-badge">Organic</div>
                        <div class="product-wishlist">
                            <i class="far fa-heart"></i>
                        </div>
                    </div>
                    <div class="product-content">
                        <div class="product-brand">Local Farm</div>
                        <h3 class="product-title">Organic Honeycrisp Apples</h3>
                        <div class="product-details">
                            <span>2 lb bag</span>
                            <span>Fresh & Crisp</span>
                        </div>
                        <div class="product-rating">
                            <div class="stars">
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                            </div>
                            <span class="rating-count">(1,234)</span>
                        </div>
                        <div class="product-price">
                            <span class="current-price">$3.99</span>
                            <span class="original-price">$4.99</span>
                            <span class="discount">20% off</span>
                        </div>
                        <div class="product-actions">
                            <button class="btn-primary add-to-cart" data-product="Organic Honeycrisp Apples" data-price="3.99">Add to Cart</button>
                            <button class="btn-secondary">♡</button>
                        </div>
                    </div>
                </div>

<div class="product-card" data-category="meat" data-price="12.99">
                    <div class="product-image" style="background: linear-gradient(135deg, #dc2626, #b91c1c); color: white;">
                        ?
                        <div class="product-badge">Premium</div>
                        <div class="product-wishlist">
                            <i class="far fa-heart"></i>
                        </div>
                    </div>
                    <div class="product-content">
                        <div class="product-brand">Butcher's Choice</div>
                        <h3 class="product-title">Grass-Fed Ground Beef</h3>
                        <div class="product-details">
                            <span>1 lb package</span>
                            <span>85% Lean</span>
                        </div>
                        <div class="product-rating">
                            <div class="stars">
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                            </div>
                            <span class="rating-count">(856)</span>
                        </div>
                        <div class="product-price">
                            <span class="current-price">$12.99</span>
                            <span class="original-price">$15.99</span>
                            <span class="discount">19% off</span>
                        </div>
                        <div class="product-actions">
                            <button class="btn-primary add-to-cart" data-product="Grass-Fed Ground Beef" data-price="12.99">Add to Cart</button>
                            <button class="btn-secondary">♡</button>
                        </div>
                    </div>
                </div>

<div class="product-card" data-category="dairy" data-price="4.49">
                    <div class="product-image" style="background: linear-gradient(135deg, #3b82f6, #2563eb); color: white;">
                        ?
                        <div class="product-badge">Fresh</div>
                        <div class="product-wishlist">
                            <i class="far fa-heart"></i>
                        </div>
                    </div>
                    <div class="product-content">
                        <div class="product-brand">Dairy Fresh</div>
                        <h3 class="product-title">Whole Milk</h3>
                        <div class="product-details">
                            <span>1 gallon</span>
                            <span>Vitamin D</span>
                        </div>
                        <div class="product-rating">
                            <div class="stars">
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="far fa-star star"></i>
                            </div>
                            <span class="rating-count">(2,341)</span>
                        </div>
                        <div class="product-price">
                            <span class="current-price">$4.49</span>
                        </div>
                        <div class="product-actions">
                            <button class="btn-primary add-to-cart" data-product="Whole Milk" data-price="4.49">Add to Cart</button>
                            <button class="btn-secondary">♡</button>
                        </div>
                    </div>
                </div>

<div class="product-card" data-category="bakery" data-price="2.99">
                    <div class="product-image" style="background: linear-gradient(135deg, #f59e0b, #d97706); color: white;">
                        ?
                        <div class="product-badge">Fresh Baked</div>
                        <div class="product-wishlist">
                            <i class="far fa-heart"></i>
                        </div>
                    </div>
                    <div class="product-content">
                        <div class="product-brand">Bakery Fresh</div>
                        <h3 class="product-title">Artisan Sourdough Bread</h3>
                        <div class="product-details">
                            <span>1 loaf</span>
                            <span>Baked Today</span>
                        </div>
                        <div class="product-rating">
                            <div class="stars">
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                            </div>
                            <span class="rating-count">(567)</span>
                        </div>
                        <div class="product-price">
                            <span class="current-price">$2.99</span>
                            <span class="original-price">$3.49</span>
                            <span class="discount">14% off</span>
                        </div>
                        <div class="product-actions">
                            <button class="btn-primary add-to-cart" data-product="Artisan Sourdough Bread" data-price="2.99">Add to Cart</button>
                            <button class="btn-secondary">♡</button>
                        </div>
                    </div>
                </div>

<div class="product-card" data-category="produce" data-price="1.99">
                    <div class="product-image" style="background: linear-gradient(135deg, #22c55e, #16a34a); color: white;">
                        ?
                        <div class="product-badge">Local</div>
                        <div class="product-wishlist">
                            <i class="far fa-heart"></i>
                        </div>
                    </div>
                    <div class="product-content">
                        <div class="product-brand">Garden Fresh</div>
                        <h3 class="product-title">Baby Carrots</h3>
                        <div class="product-details">
                            <span>1 lb bag</span>
                            <span>Ready to Eat</span>
                        </div>
                        <div class="product-rating">
                            <div class="stars">
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="far fa-star star"></i>
                            </div>
                            <span class="rating-count">(1,876)</span>
                        </div>
                        <div class="product-price">
                            <span class="current-price">$1.99</span>
                        </div>
                        <div class="product-actions">
                            <button class="btn-primary add-to-cart" data-product="Baby Carrots" data-price="1.99">Add to Cart</button>
                            <button class="btn-secondary">♡</button>
                        </div>
                    </div>
                </div>

<div class="product-card" data-category="pantry" data-price="8.99">
                    <div class="product-image" style="background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: white;">
                        ?
                        <div class="product-badge">Family Size</div>
                        <div class="product-wishlist">
                            <i class="far fa-heart"></i>
                        </div>
                    </div>
                    <div class="product-content">
                        <div class="product-brand">Pantry Essentials</div>
                        <h3 class="product-title">Organic Pasta Variety Pack</h3>
                        <div class="product-details">
                            <span>6 boxes</span>
                            <span>Different Shapes</span>
                        </div>
                        <div class="product-rating">
                            <div class="stars">
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                            </div>
                            <span class="rating-count">(432)</span>
                        </div>
                        <div class="product-price">
                            <span class="current-price">$8.99</span>
                            <span class="original-price">$12.99</span>
                            <span class="discount">31% off</span>
                        </div>
                        <div class="product-actions">
                            <button class="btn-primary add-to-cart" data-product="Organic Pasta Variety Pack" data-price="8.99">Add to Cart</button>
                            <button class="btn-secondary">♡</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="deals" id="deals">
        <div class="container">
            <h2 class="section-title">Weekly Deals & Specials</h2>
            <div class="deals-grid">
                <div class="deal-card">
                    <div class="deal-icon">
                        ?
                    </div>
                    <h3 class="deal-title">Buy 2 Get 1 Free</h3>
                    <p class="deal-description">Mix and match on select produce items. Perfect for stocking up on fresh fruits and vegetables.</p>
                    <button class="deal-cta">Shop Produce</button>
                </div>
                <div class="deal-card">
                    <div class="deal-icon">
                        ?
                    </div>
                    <h3 class="deal-title">Meat Bundle Special</h3>
                    <p class="deal-description">Save 25% when you buy our premium meat bundle. Includes chicken, beef, and pork selections.</p>
                    <button class="deal-cta">View Bundle</button>
                </div>
                <div class="deal-card">
                    <div class="deal-icon">
                        ?
                    </div>
                    <h3 class="deal-title">Free Delivery Weekend</h3>
                    <p class="deal-description">No minimum order required for free delivery this weekend. Perfect time to stock up on essentials.</p>
                    <button class="deal-cta">Order Now</button>
                </div>
            </div>
        </div>
    </section>

<footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>Customer Service</h3>
                    <ul>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">Order Status</a></li>
                        <li><a href="#">Returns & Refunds</a></li>
                        <li><a href="#">Delivery Info</a></li>
                        <li><a href="#">FAQ</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>Departments</h3>
                    <ul>
                        <li><a href="#">Fresh Produce</a></li>
                        <li><a href="#">Meat & Seafood</a></li>
                        <li><a href="#">Dairy & Eggs</a></li>
                        <li><a href="#">Bakery</a></li>
                        <li><a href="#">Frozen Foods</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>Services</h3>
                    <ul>
                        <li><a href="#">Online Shopping</a></li>
                        <li><a href="#">Same-Day Delivery</a></li>
                        <li><a href="#">Curbside Pickup</a></li>
                        <li><a href="#">Meal Planning</a></li>
                        <li><a href="#">Catering</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>About FreshMart</h3>
                    <ul>
                        <li><a href="#">Our Story</a></li>
                        <li><a href="#">Local Partners</a></li>
                        <li><a href="#">Sustainability</a></li>
                        <li><a href="#">Careers</a></li>
                        <li><a href="#">Community</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 FreshMart. All rights reserved. | Privacy Policy | Terms of Service | Nutrition Information</p>
            </div>
        </div>
    </footer>

<div class="cart-sidebar" id="cartSidebar">
        <div class="cart-header">
            <h3 class="cart-title">Shopping Cart</h3>
            <button class="cart-close" id="cartClose">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="cart-items" id="cartItems">
            <p style="text-align: center; color: var(--text-secondary); padding: 2rem;">Your cart is empty</p>
        </div>
        <div class="cart-footer">
            <div class="cart-total">
                <span>Total: $<span id="cartTotal">0.00</span></span>
            </div>
            <button class="checkout-btn" id="checkoutBtn">
                Proceed to Checkout
            </button>
        </div>
    </div>

<div class="delivery-modal" id="deliveryModal">
        <div class="delivery-content">
            <button class="delivery-close" id="deliveryClose">
                <i class="fas fa-times"></i>
            </button>
            <h2>Schedule Your Delivery</h2>
            <p>Choose your preferred delivery time and we'll bring fresh groceries right to your door!</p>
            <form class="delivery-form" id="deliveryForm">
                <div class="form-group">
                    <label class="form-label">Delivery Address *</label>
                    <input type="text" class="form-input" placeholder="Street address" required>
                </div>
                <div class="form-group">
                    <label class="form-label">City, State, ZIP *</label>
                    <input type="text" class="form-input" placeholder="City, State, ZIP" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Delivery Date *</label>
                    <input type="date" class="form-input" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Delivery Time *</label>
                    <select class="form-input" required>
                        <option value="">Select time slot</option>
                        <option value="morning">Morning (8AM - 12PM)</option>
                        <option value="afternoon">Afternoon (12PM - 5PM)</option>
                        <option value="evening">Evening (5PM - 8PM)</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Phone Number *</label>
                    <input type="tel" class="form-input" placeholder="For delivery updates" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Special Instructions</label>
                    <textarea class="form-input form-textarea" placeholder="Gate code, apartment number, delivery preferences, etc."></textarea>
                </div>
                <button type="submit" class="form-submit">Schedule Delivery</button>
            </form>
        </div>
    </div>

CSS

:root {
            --primary-color: #22c55e;
            --primary-dark: #16a34a;
            --secondary-color: #f97316;
            --accent-color: #3b82f6;
            --success-color: #10b981;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
            --light-green: #f0fdf4;
            --medium-green: #dcfce7;
            --light-gray: #f8fafc;
            --medium-gray: #e5e7eb;
            --dark-gray: #6b7280;
            --text-primary: #111827;
            --text-secondary: #6b7280;
            --border-color: #e5e7eb;
            --white: #ffffff;
            --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
            --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.1);
            --shadow-heavy: 0 10px 25px rgba(0, 0, 0, 0.15);
            --border-radius: 12px;
            --transition: all 0.3s ease;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            color: var(--text-primary);
            background-color: var(--white);
        }

/* Header */
        .header {
            background: var(--white);
            box-shadow: var(--shadow-light);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

.header-top {
            background: var(--primary-color);
            color: white;
            padding: 0.5rem 0;
            font-size: 0.9rem;
        }

.header-main {
            padding: 1rem 0;
        }

.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 1rem;
        }

.header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
        }

.logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--primary-color);
            text-decoration: none;
            font-family: 'Poppins', sans-serif;
        }

.logo-icon {
            background: var(--primary-color);
            color: white;
            padding: 0.5rem;
            border-radius: var(--border-radius);
        }

.search-container {
            flex: 1;
            max-width: 600px;
            position: relative;
        }

.search-wrapper {
            display: flex;
            border: 2px solid var(--border-color);
            border-radius: var(--border-radius);
            overflow: hidden;
            transition: var(--transition);
        }

.search-wrapper:focus-within {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
        }

.search-input {
            flex: 1;
            padding: 0.8rem 1rem;
            border: none;
            font-size: 1rem;
            outline: none;
        }

.search-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 0.8rem 1.5rem;
            cursor: pointer;
            font-size: 1rem;
            transition: var(--transition);
        }

.search-btn:hover {
            background: var(--primary-dark);
        }

.header-actions {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

.header-link {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--text-primary);
            text-decoration: none;
            padding: 0.5rem 1rem;
            border-radius: var(--border-radius);
            transition: var(--transition);
            font-weight: 500;
        }

.header-link:hover {
            background: var(--light-green);
            color: var(--primary-color);
        }

.cart-count {
            background: var(--secondary-color);
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            font-weight: 700;
            margin-left: -10px;
            margin-top: -10px;
        }

/* Navigation */
        .nav {
            background: var(--light-green);
            padding: 1rem 0;
        }

.nav-menu {
            display: flex;
            align-items: center;
            gap: 2rem;
            list-style: none;
        }

.nav-menu a {
            color: var(--text-primary);
            text-decoration: none;
            font-weight: 500;
            padding: 0.5rem 1rem;
            border-radius: var(--border-radius);
            transition: var(--transition);
        }

.nav-menu a:hover {
            background: var(--primary-color);
            color: white;
        }

/* Hero Section */
        .hero {
            background: linear-gradient(135deg, var(--primary-color), #15803d);
            color: white;
            padding: 4rem 0;
            position: relative;
            overflow: hidden;
        }

.hero::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
            opacity: 0.3;
        }

.hero-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
            position: relative;
            z-index: 2;
        }

.hero-text h1 {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 1rem;
            line-height: 1.1;
            font-family: 'Poppins', sans-serif;
        }

.hero-text p {
            font-size: 1.3rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }

.hero-cta {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--secondary-color);
            color: white;
            padding: 1rem 2rem;
            border: none;
            border-radius: var(--border-radius);
            font-size: 1.1rem;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
        }

.hero-cta:hover {
            background: #ea580c;
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
        }

.hero-image {
            text-align: center;
        }

.hero-grocery {
            width: 100%;
            max-width: 500px;
            height: auto;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-heavy);
        }

/* Features */
        .features {
            padding: 4rem 0;
            background: var(--white);
        }

.features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
        }

.feature-card {
            text-align: center;
            padding: 2rem;
            border-radius: var(--border-radius);
            transition: var(--transition);
        }

.feature-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-medium);
        }

.feature-icon {
            width: 80px;
            height: 80px;
            background: var(--primary-color);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin: 0 auto 1.5rem;
        }

.feature-title {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--text-primary);
        }

.feature-description {
            color: var(--text-secondary);
            line-height: 1.6;
        }

/* Categories */
        .categories {
            padding: 4rem 0;
            background: var(--light-gray);
        }

.section-title {
            text-align: center;
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 3rem;
            color: var(--text-primary);
            font-family: 'Poppins', sans-serif;
        }

.categories-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
        }

.category-card {
            background: white;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow-light);
            transition: var(--transition);
            cursor: pointer;
        }

.category-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-medium);
        }

.category-image {
            height: 200px;
            background: var(--medium-gray);
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
        }

.category-content {
            padding: 1.5rem;
        }

.category-name {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--text-primary);
        }

.category-description {
            color: var(--text-secondary);
            margin-bottom: 1rem;
        }

.category-count {
            color: var(--primary-color);
            font-weight: 600;
        }

/* Products */
        .products {
            padding: 4rem 0;
            background: var(--white);
        }

.products-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 3rem;
        }

.products-filters {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

.filter-select {
            padding: 0.5rem 1rem;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            background: white;
            font-size: 0.9rem;
            cursor: pointer;
        }

.products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 2rem;
        }

.product-card {
            background: white;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            overflow: hidden;
            transition: var(--transition);
            cursor: pointer;
            box-shadow: var(--shadow-light);
        }

.product-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-medium);
            border-color: var(--primary-color);
        }

.product-image {
            position: relative;
            height: 200px;
            background: var(--light-gray);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
        }

.product-badge {
            position: absolute;
            top: 1rem;
            left: 1rem;
            background: var(--secondary-color);
            color: white;
            padding: 0.3rem 0.8rem;
            border-radius: var(--border-radius);
            font-size: 0.8rem;
            font-weight: 600;
        }

.product-wishlist {
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
        }

.product-wishlist:hover {
            background: var(--primary-color);
            color: white;
        }

.product-content {
            padding: 1.5rem;
        }

.product-brand {
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }

.product-title {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
            line-height: 1.4;
        }

.product-details {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            font-size: 0.9rem;
            color: var(--text-secondary);
        }

.product-rating {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

.stars {
            display: flex;
            gap: 0.2rem;
        }

.star {
            color: var(--warning-color);
            font-size: 0.9rem;
        }

.rating-count {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

.product-price {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
        }

.current-price {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--primary-color);
        }

.original-price {
            font-size: 1.1rem;
            color: var(--text-secondary);
            text-decoration: line-through;
        }

.discount {
            background: var(--success-color);
            color: white;
            padding: 0.2rem 0.5rem;
            border-radius: var(--border-radius);
            font-size: 0.8rem;
            font-weight: 600;
        }

.product-actions {
            display: flex;
            gap: 0.5rem;
        }

.btn-primary {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: var(--border-radius);
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            flex: 1;
            font-size: 0.9rem;
        }

.btn-primary:hover {
            background: var(--primary-dark);
            transform: translateY(-1px);
        }

.btn-secondary {
            background: transparent;
            color: var(--text-primary);
            border: 1px solid var(--border-color);
            padding: 0.8rem 1rem;
            border-radius: var(--border-radius);
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            font-size: 0.9rem;
        }

.btn-secondary:hover {
            background: var(--light-gray);
            border-color: var(--primary-color);
        }

/* Deals Section */
        .deals {
            padding: 4rem 0;
            background: var(--light-green);
        }

.deals-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
        }

.deal-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 2rem;
            text-align: center;
            box-shadow: var(--shadow-light);
            transition: var(--transition);
        }

.deal-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-medium);
        }

.deal-icon {
            font-size: 3rem;
            color: var(--secondary-color);
            margin-bottom: 1rem;
        }

.deal-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--text-primary);
        }

.deal-description {
            color: var(--text-secondary);
            margin-bottom: 2rem;
        }

.deal-cta {
            background: var(--secondary-color);
            color: white;
            padding: 1rem 2rem;
            border: none;
            border-radius: var(--border-radius);
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
        }

.deal-cta:hover {
            background: #ea580c;
            transform: translateY(-2px);
        }

/* Footer */
        .footer {
            background: var(--text-primary);
            color: white;
            padding: 3rem 0 1rem;
        }

.footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

.footer-section h3 {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

.footer-section ul {
            list-style: none;
        }

.footer-section ul li {
            margin-bottom: 0.5rem;
        }

.footer-section ul li a {
            color: #d1d5db;
            text-decoration: none;
            transition: var(--transition);
        }

.footer-section ul li a:hover {
            color: var(--primary-color);
        }

.footer-bottom {
            border-top: 1px solid #374151;
            padding-top: 2rem;
            text-align: center;
            color: #d1d5db;
        }

/* Cart Sidebar */
        .cart-sidebar {
            position: fixed;
            top: 0;
            right: -400px;
            width: 400px;
            height: 100vh;
            background: white;
            box-shadow: var(--shadow-heavy);
            z-index: 10000;
            transition: var(--transition);
            display: flex;
            flex-direction: column;
        }

.cart-sidebar.open {
            right: 0;
        }

.cart-header {
            padding: 1.5rem;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--light-green);
        }

.cart-title {
            font-size: 1.3rem;
            font-weight: 700;
        }

.cart-close {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--text-secondary);
        }

.cart-items {
            flex: 1;
            padding: 1.5rem;
            overflow-y: auto;
        }

.cart-item {
            display: flex;
            gap: 1rem;
            padding: 1rem 0;
            border-bottom: 1px solid var(--border-color);
        }

.cart-item-image {
            width: 80px;
            height: 80px;
            background: var(--light-gray);
            border-radius: var(--border-radius);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
        }

.cart-item-details {
            flex: 1;
        }

.cart-item-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
            line-height: 1.3;
        }

.cart-item-price {
            color: var(--primary-color);
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

.cart-item-quantity {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

.quantity-btn {
            width: 30px;
            height: 30px;
            border: 1px solid var(--border-color);
            background: white;
            border-radius: var(--border-radius);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
        }

.quantity-btn:hover {
            background: var(--light-gray);
        }

.cart-footer {
            padding: 1.5rem;
            border-top: 1px solid var(--border-color);
            background: var(--light-green);
        }

.cart-total {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            font-size: 1.2rem;
            font-weight: 700;
        }

.checkout-btn {
            width: 100%;
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 1rem;
            border-radius: var(--border-radius);
            font-size: 1.1rem;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
        }

.checkout-btn:hover {
            background: var(--primary-dark);
        }

/* Delivery Modal */
        .delivery-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10001;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
        }

.delivery-modal.open {
            opacity: 1;
            visibility: visible;
        }

.delivery-content {
            background: white;
            border-radius: var(--border-radius);
            padding: 2rem;
            max-width: 600px;
            width: 90%;
            max-height: 90%;
            overflow-y: auto;
            position: relative;
        }

.delivery-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--text-secondary);
        }

.delivery-form {
            margin-top: 2rem;
        }

.form-group {
            margin-bottom: 1.5rem;
        }

.form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 600;
            color: var(--text-primary);
        }

.form-input {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            font-size: 1rem;
            transition: var(--transition);
        }

.form-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
        }

.form-textarea {
            resize: vertical;
            min-height: 100px;
        }

.form-submit {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 1rem 2rem;
            border-radius: var(--border-radius);
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
            width: 100%;
        }

.form-submit:hover {
            background: var(--primary-dark);
        }

/* Responsive Design */
        @media (max-width: 1024px) {
            .hero-text h1 {
                font-size: 2.5rem;
            }
            
            .hero-content {
                grid-template-columns: 1fr;
                text-align: center;
            }
        }

@media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                gap: 1rem;
            }
            
            .search-container {
                width: 100%;
            }
            
            .nav-menu {
                flex-wrap: wrap;
                gap: 1rem;
            }
            
            .hero-text h1 {
                font-size: 2rem;
            }
            
            .products-grid {
                grid-template-columns: 1fr;
            }
            
            .cart-sidebar {
                width: 100%;
                right: -100%;
            }
        }

@media (max-width: 480px) {
            .container {
                padding: 0 0.5rem;
            }
            
            .section-title {
                font-size: 2rem;
            }
            
            .hero {
                padding: 2rem 0;
            }
        }

/* Loading Animation */
        .loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            transition: opacity 0.5s ease;
        }

.loading.hidden {
            opacity: 0;
            pointer-events: none;
        }

.spinner {
            width: 50px;
            height: 50px;
            border: 4px solid var(--light-gray);
            border-top: 4px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

@keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

/* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

.animate-fade-in {
            animation: fadeInUp 0.6s ease forwards;
        }

JavaScript

// Loading screen
        window.addEventListener('load', () => {
            const loading = document.getElementById('loading');
            setTimeout(() => {
                loading.classList.add('hidden');
            }, 1000);
        });

// Cart functionality
        let cart = [];
        let cartTotal = 0;

function updateCartUI() {
            const cartCount = document.getElementById('cartCount');
            const cartItems = document.getElementById('cartItems');
            const cartTotalElement = document.getElementById('cartTotal');

cartCount.textContent = cart.length;
            cartTotalElement.textContent = cartTotal.toFixed(2);

if (cart.length === 0) {
                cartItems.innerHTML = '<p style="text-align: center; color: var(--text-secondary); padding: 2rem;">Your cart is empty</p>';
            } else {
                cartItems.innerHTML = cart.map(item => `
                    <div class="cart-item">
                        <div class="cart-item-image">
                            ${getProductEmoji(item.name)}
                        </div>
                        <div class="cart-item-details">
                            <div class="cart-item-title">${item.name}</div>
                            <div class="cart-item-price">$${item.price}</div>
                            <div class="cart-item-quantity">
                                <button class="quantity-btn" onclick="updateQuantity('${item.id}', -1)">-</button>
                                <span>${item.quantity}</span>
                                <button class="quantity-btn" onclick="updateQuantity('${item.id}', 1)">+</button>
                                <button class="quantity-btn" onclick="removeFromCart('${item.id}')" style="margin-left: 1rem; color: var(--danger-color);">×</button>
                            </div>
                        </div>
                    </div>
                `).join('');
            }
        }

function getProductEmoji(productName) {
            if (productName.includes('Apple')) return '?';
            if (productName.includes('Beef')) return '?';
            if (productName.includes('Milk')) return '?';
            if (productName.includes('Bread')) return '?';
            if (productName.includes('Carrot')) return '?';
            if (productName.includes('Pasta')) return '?';
            return '?';
        }

function removeFromCart(itemId) {
            cart = cart.filter(item => item.id !== itemId);
            cartTotal = cart.reduce((total, item) => total + (item.price * item.quantity), 0);
            updateCartUI();
        }

// Event listeners
        document.querySelectorAll('.add-to-cart').forEach(btn => {
            btn.addEventListener('click', function() {
                const productName = this.getAttribute('data-product');
                const price = this.getAttribute('data-price');
                addToCart(productName, price);
            });
        });

// Cart sidebar toggle
        document.getElementById('cartBtn').addEventListener('click', (e) => {
            e.preventDefault();
            document.getElementById('cartSidebar').classList.add('open');
        });

document.getElementById('cartClose').addEventListener('click', () => {
            document.getElementById('cartSidebar').classList.remove('open');
        });

// Delivery modal toggle
        document.getElementById('deliveryBtn').addEventListener('click', (e) => {
            e.preventDefault();
            document.getElementById('deliveryModal').classList.add('open');
        });

document.getElementById('deliveryClose').addEventListener('click', () => {
            document.getElementById('deliveryModal').classList.remove('open');
        });

// Search functionality
        document.getElementById('searchBtn').addEventListener('click', () => {
            const searchTerm = document.getElementById('searchInput').value.trim();
            if (searchTerm) {
                alert(`Searching for "${searchTerm}". This would show filtered grocery results.`);
            }
        });

document.getElementById('searchInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                document.getElementById('searchBtn').click();
            }
        });

// Category filtering
        document.querySelectorAll('.category-card').forEach(card => {
            card.addEventListener('click', function() {
                const category = this.getAttribute('data-category');
                alert(`Browsing ${category} department. This would show filtered products.`);
            });
        });

// Product filtering
        document.getElementById('categoryFilter').addEventListener('change', function() {
            const category = this.value;
            filterProducts('category', category);
        });

document.getElementById('priceFilter').addEventListener('change', function() {
            const priceRange = this.value;
            filterProducts('price', priceRange);
        });

// Wishlist functionality
        document.querySelectorAll('.product-wishlist').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const icon = this.querySelector('i');
                
                if (icon.classList.contains('far')) {
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    this.style.background = 'var(--primary-color)';
                    this.style.color = 'white';
                    alert('Added to your shopping list!');
                } else {
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    this.style.background = 'rgba(255, 255, 255, 0.9)';
                    this.style.color = 'var(--text-primary)';
                    alert('Removed from shopping list!');
                }
            });
        });

// Deal buttons
        document.querySelectorAll('.deal-cta').forEach(btn => {
            btn.addEventListener('click', function() {
                const dealTitle = this.parentElement.querySelector('.deal-title').textContent;
                alert(`Accessing ${dealTitle}. This would show the special offer details and eligible products.`);
            });
        });

// Delivery form submission
        document.getElementById('deliveryForm').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('Delivery scheduled! You will receive a confirmation email with tracking information. Our team will contact you 30 minutes before delivery.');
            document.getElementById('deliveryModal').classList.remove('open');
            this.reset();
        });

// Checkout functionality
        document.getElementById('checkoutBtn').addEventListener('click', () => {
            if (cart.length === 0) {
                alert('Your cart is empty! Add some fresh groceries to get started.');
                return;
            }
            
            const freeDelivery = cartTotal >= 50;
            const deliveryMessage = freeDelivery ? 'Free delivery included!' : 'Delivery fee: $4.99';
            
            alert(`Proceeding to checkout with ${cart.length} item(s) totaling $${cartTotal.toFixed(2)}. ${deliveryMessage}`);
        });

// Close modals when clicking outside
        document.addEventListener('click', function(e) {
            const deliveryModal = document.getElementById('deliveryModal');
            
            if (e.target === deliveryModal) {
                deliveryModal.classList.remove('open');
            }
        });

// Initialize
        updateCartUI();

// Smooth scrolling for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

FreshMart Grocery Store Template Preview

Download Options