FreshMart Grocery 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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

</head>
<body>
    
    <header>
        <div class="container">
            <nav>
                <a href="#" class="logo">Fresh<span>Mart</span></a>
                <ul class="nav-links">
                    <li><a href="#">Home</a></li>
                    <li><a href="#products">Products</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#mission">Mission</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
                <div class="hamburger">
                    <i class="fas fa-bars"></i>
                </div>
            </nav>
        </div>
    </header>

<section class="hero">
        <div class="container">
            <div class="hero-content">
                <h1 id="typed-text">Fresh Groceries Delivered to Your Doorstep</h1>
                <p>Discover the freshest produce, highest quality meats, and pantry staples at affordable prices. We bring the market to you!</p>
                <a href="#products" class="btn">Shop Now</a>
            </div>
        </div>
    </section>

<section id="products" class="products">
        <div class="container">
            <div class="section-title">
                <h2>Our Featured Products</h2>
                <p>Handpicked selection of the freshest groceries for your family</p>
            </div>
            <div class="products-grid">
                <div class="product-card">
                    <div class="product-img">
                        <img src="https://images.unsplash.com/photo-1518977676601-b53f82aba655?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Fresh Fruits">
                    </div>
                    <div class="product-info">
                        <h3>Fresh Fruits</h3>
                        <p>Seasonal selection of the freshest fruits from local farms</p>
                        <div class="product-price">
                            <span class="price">$2.99/lb</span>
                            <button class="add-to-cart">
                                <i class="fas fa-shopping-cart"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="product-card">
                    <div class="product-img">
                        <img src="https://images.unsplash.com/photo-1542838132-92c53300491e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80" alt="Organic Vegetables">
                    </div>
                    <div class="product-info">
                        <h3>Organic Vegetables</h3>
                        <p>Certified organic vegetables grown without pesticides</p>
                        <div class="product-price">
                            <span class="price">$1.99/lb</span>
                            <button class="add-to-cart">
                                <i class="fas fa-shopping-cart"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="product-card">
                    <div class="product-img">
                        <img src="https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Dairy Products">
                    </div>
                    <div class="product-info">
                        <h3>Dairy Products</h3>
                        <p>Fresh milk, cheese, yogurt and other dairy essentials</p>
                        <div class="product-price">
                            <span class="price">$3.49</span>
                            <button class="add-to-cart">
                                <i class="fas fa-shopping-cart"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="product-card">
                    <div class="product-img">
                        <img src="https://images.unsplash.com/photo-1550583724-b2692b85b150?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80" alt="Bakery Items">
                    </div>
                    <div class="product-info">
                        <h3>Bakery Items</h3>
                        <p>Freshly baked bread, pastries and desserts daily</p>
                        <div class="product-price">
                            <span class="price">$4.99</span>
                            <button class="add-to-cart">
                                <i class="fas fa-shopping-cart"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="about" class="about">
        <div class="container">
            <div class="about-content">
                <div class="about-img">
                    <img src="https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Our Store">
                </div>
                <div class="about-text">
                    <h2>About <span>FreshMart</span></h2>
                    <p>Founded in 2010, FreshMart began as a small neighborhood grocery store with a simple mission: to provide fresh, high-quality food at affordable prices. What started as a single location has grown into a beloved community staple, known for our commitment to quality and customer service.</p>
                    <p>We partner with local farmers and producers to bring you the best our region has to offer. Our team carefully selects each product to ensure it meets our high standards for freshness and quality.</p>
                    <div class="tagline">Freshness you can taste, quality you can trust.</div>
                    <a href="#mission" class="btn">Learn More</a>
                </div>
            </div>
        </div>
    </section>

<section id="mission" class="mission">
        <div class="container">
            <div class="section-title">
                <h2>Our Mission</h2>
                <p>What drives us every day to serve you better</p>
            </div>
            <div class="mission-statement">
                <h3>Nourishing Communities</h3>
                <p>At FreshMart, our mission is to nourish our community by providing access to fresh, affordable, and high-quality groceries. We believe that everyone deserves access to nutritious food, and we're committed to making that a reality through fair pricing, local partnerships, and sustainable practices. Our team works tirelessly to ensure that from farm to shelf, every product meets our rigorous standards for quality and freshness.</p>
            </div>
        </div>
    </section>

<section class="vision">
        <div class="container">
            <div class="vision-container">
                <div class="vision-text">
                    <h2>Our Vision</h2>
                    <p>We envision a future where every neighborhood has access to fresh, affordable groceries, where local farmers thrive, and where food brings people together. FreshMart aims to be at the heart of this vision, expanding our reach while maintaining the personal touch that makes us special.</p>
                    <p>Our growth is guided by principles of sustainability, community engagement, and innovation in the grocery industry.</p>
                    <a href="#contact" class="btn">Join Our Journey</a>
                </div>
                <div class="vision-images">
                    <div class="vision-img">
                        <img src="https://images.unsplash.com/photo-1542838132-92c53300491e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80" alt="Local Farmers">
                        <h3>Supporting Local</h3>
                    </div>
                    <div class="vision-img">
                        <img src="https://images.unsplash.com/photo-1518977676601-b53f82aba655?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Sustainable Practices">
                        <h3>Sustainability</h3>
                    </div>
                    <div class="vision-img">
                        <img src="https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Community">
                        <h3>Community Focus</h3>
                    </div>
                    <div class="vision-img">
                        <img src="https://images.unsplash.com/photo-1550583724-b2692b85b150?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80" alt="Quality">
                        <h3>Quality Assurance</h3>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="stats">
        <div class="container">
            <div class="stats-container">
                <div class="stat-item">
                    <div class="stat-number" data-count="15">0</div>
                    <div class="stat-label">Years in Business</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" data-count="250">0</div>
                    <div class="stat-label">Local Partners</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" data-count="5000">0</div>
                    <div class="stat-label">Happy Customers</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" data-count="100">0</div>
                    <div class="stat-label">Products Available</div>
                </div>
            </div>
        </div>
    </section>

<section id="contact" class="contact">
        <div class="container">
            <div class="section-title">
                <h2>Get In Touch</h2>
                <p>Have questions or feedback? We'd love to hear from you!</p>
            </div>
            <form class="contact-form">
                <div class="form-group">
                    <label for="name">Your Name</label>
                    <input type="text" id="name" placeholder="John Doe" required>
                </div>
                <div class="form-group">
                    <label for="email">Email Address</label>
                    <input type="email" id="email" placeholder="john@example.com" required>
                </div>
                <div class="form-group">
                    <label for="subject">Subject</label>
                    <input type="text" id="subject" placeholder="How can we help?">
                </div>
                <div class="form-group">
                    <label for="message">Your Message</label>
                    <textarea id="message" placeholder="Type your message here..." required></textarea>
                </div>
                <button type="submit" class="submit-btn">Send Message</button>
            </form>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-col">
                    <h3>FreshMart</h3>
                    <p>Your neighborhood grocery store committed to freshness, quality, and community.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
                <div class="footer-col">
                    <h3>Quick Links</h3>
                    <a href="#">Home</a>
                    <a href="#products">Products</a>
                    <a href="#about">About Us</a>
                    <a href="#mission">Our Mission</a>
                    <a href="#contact">Contact</a>
                </div>
                <div class="footer-col">
                    <h3>Store Info</h3>
                    <p><i class="fas fa-map-marker-alt"></i> 123 Grocery Lane, Foodville</p>
                    <p><i class="fas fa-phone"></i> (123) 456-7890</p>
                    <p><i class="fas fa-envelope"></i> info@freshmart.com</p>
                    <p><i class="fas fa-clock"></i> Mon-Sat: 8AM - 9PM<br>Sun: 9AM - 7PM</p>
                </div>
                <div class="footer-col">
                    <h3>Newsletter</h3>
                    <p>Subscribe to our newsletter for weekly deals and updates!</p>
                    <form>
                        <div class="form-group">
                            <input type="email" placeholder="Your Email" required>
                        </div>
                        <button type="submit" class="btn">Subscribe</button>
                    </form>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2023 FreshMart. All Rights Reserved.</p>
            </div>
        </div>
    </footer>

</body>
</html>

CSS

/* Global Styles */
        :root {
            --primary: #4CAF50;
            --primary-dark: #388E3C;
            --secondary: #FFC107;
            --dark: #333;
            --light: #f9f9f9;
            --gray: #eee;
            --dark-gray: #777;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: var(--light);
            color: var(--dark);
            overflow-x: hidden;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        section {
            padding: 80px 0;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 50px;
            position: relative;
        }
        
        .section-title h2 {
            font-size: 2.5rem;
            color: var(--primary-dark);
            margin-bottom: 15px;
        }
        
        .section-title p {
            color: var(--dark-gray);
            font-size: 1.1rem;
            max-width: 700px;
            margin: 0 auto;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 30px;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 30px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
        }
        
        .btn:hover {
            background-color: var(--primary-dark);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        /* Header Styles */
        header {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
        }
        
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }
        
        .logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--primary-dark);
            text-decoration: none;
        }
        
        .logo span {
            color: var(--secondary);
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin-left: 30px;
        }
        
        .nav-links a {
            text-decoration: none;
            color: var(--dark);
            font-weight: 600;
            transition: color 0.3s ease;
        }
        
        .nav-links a:hover {
            color: var(--primary);
        }
        
        .hamburger {
            display: none;
            cursor: pointer;
        }
        
        /* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1583258292688-d0213dc5a3a8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80') no-repeat center center/cover;
            display: flex;
            align-items: center;
            text-align: center;
            color: white;
            margin-top: 80px;
        }
        
        .hero-content {
            max-width: 800px;
            margin: 0 auto;
        }
        
        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            line-height: 1.2;
        }
        
        .hero p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            opacity: 0.9;
        }
        
        .typed-cursor {
            font-size: 3rem;
            opacity: 1;
            animation: blink 0.7s infinite;
        }
        
        @keyframes blink {
            0% { opacity: 1; }
            50% { opacity: 0; }
            100% { opacity: 1; }
        }
        
        /* Products Section */
        .products {
            background-color: white;
        }
        
        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 30px;
        }
        
        .product-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.5s ease, box-shadow 0.3s ease;
            position: relative;
            opacity: 0;
            transform: translateY(50px);
        }
        
        .product-card.animate {
            opacity: 1;
            transform: translateY(0);
        }
        
        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }
        
        .product-img {
            height: 200px;
            overflow: hidden;
        }
        
        .product-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .product-card:hover .product-img img {
            transform: scale(1.1);
        }
        
        .product-info {
            padding: 20px;
        }
        
        .product-info h3 {
            font-size: 1.3rem;
            margin-bottom: 10px;
            color: var(--dark);
        }
        
        .product-info p {
            color: var(--dark-gray);
            margin-bottom: 15px;
            font-size: 0.9rem;
        }
        
        .product-price {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .price {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--primary);
        }
        
        .add-to-cart {
            background-color: var(--primary);
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        
        .add-to-cart:hover {
            background-color: var(--primary-dark);
        }
        
        /* About Section */
        .about {
            background-color: var(--gray);
        }
        
        .about-content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 50px;
        }
        
        .about-img {
            flex: 1;
            min-width: 300px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .about-img img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        .about-text {
            flex: 1;
            min-width: 300px;
        }
        
        .about-text h2 {
            font-size: 2.5rem;
            color: var(--primary-dark);
            margin-bottom: 20px;
            line-height: 1.2;
        }
        
        .about-text h2 span {
            color: var(--secondary);
        }
        
        .about-text p {
            margin-bottom: 20px;
            color: var(--dark-gray);
            line-height: 1.6;
        }
        
        .tagline {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin: 30px 0;
            position: relative;
            padding-left: 20px;
        }
        
        .tagline::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 5px;
            background-color: var(--secondary);
        }
        
        /* Mission Section */
        .mission {
            background-color: white;
            text-align: center;
        }
        
        .mission-statement {
            max-width: 800px;
            margin: 0 auto;
            padding: 40px;
            background-color: var(--light);
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            position: relative;
        }
        
        .mission-statement::before {
            content: '"';
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 5rem;
            color: var(--primary);
            opacity: 0.1;
            font-family: serif;
        }
        
        .mission-statement h3 {
            font-size: 1.8rem;
            margin-bottom: 20px;
            color: var(--primary-dark);
        }
        
        .mission-statement p {
            color: var(--dark-gray);
            line-height: 1.8;
            font-size: 1.1rem;
        }
        
        /* Vision Section */
        .vision {
            background-color: var(--gray);
        }
        
        .vision-container {
            display: flex;
            flex-wrap: wrap;
            gap: 50px;
            align-items: center;
        }
        
        .vision-text {
            flex: 1;
            min-width: 300px;
        }
        
        .vision-text h2 {
            font-size: 2.5rem;
            color: var(--primary-dark);
            margin-bottom: 20px;
        }
        
        .vision-text p {
            color: var(--dark-gray);
            margin-bottom: 20px;
            line-height: 1.6;
        }
        
        .vision-images {
            flex: 1;
            min-width: 300px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
        
        .vision-img {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            height: 200px;
            position: relative;
            opacity: 0;
            transform: scale(0.8);
            transition: all 0.5s ease;
        }
        
        .vision-img.animate {
            opacity: 1;
            transform: scale(1);
        }
        
        .vision-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .vision-img:hover img {
            transform: scale(1.1);
        }
        
        .vision-img::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
        }
        
        .vision-img h3 {
            position: absolute;
            bottom: 20px;
            left: 20px;
            color: white;
            z-index: 1;
            font-size: 1.2rem;
        }
        
        /* Stats Section */
        .stats {
            background-color: var(--primary-dark);
            color: white;
            text-align: center;
            padding: 60px 0;
        }
        
        .stats-container {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: 30px;
        }
        
        .stat-item {
            padding: 20px;
            min-width: 200px;
            transition: transform 0.3s ease;
        }
        
        .stat-item:hover {
            transform: translateY(-10px);
        }
        
        .stat-number {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 10px;
            transition: color 0.3s ease;
        }
        
        .stat-item:hover .stat-number {
            color: var(--secondary);
        }
        
        .stat-label {
            font-size: 1.2rem;
            opacity: 0.9;
        }
        
        /* Contact Section */
        .contact {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1550583724-b2692b85b150?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80') no-repeat center center/cover;
            color: white;
        }
        
        .contact .section-title h2,
        .contact .section-title p {
            color: white;
        }
        
        .contact-form {
            max-width: 600px;
            margin: 0 auto;
            background-color: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
        }
        
        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 12px 15px;
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 5px;
            color: white;
            font-size: 1rem;
        }
        
        .form-group input::placeholder,
        .form-group textarea::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }
        
        .form-group textarea {
            resize: vertical;
            min-height: 120px;
        }
        
        .submit-btn {
            width: 100%;
            padding: 15px;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        
        .submit-btn:hover {
            background-color: var(--primary-dark);
        }
        
        /* Footer */
        footer {
            background: url('https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80') no-repeat center center/cover;
            color: white;
            padding: 80px 0 30px;
            position: relative;
        }
        
        footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
        }
        
        .footer-content {
            position: relative;
            z-index: 1;
            display: flex;
            flex-wrap: wrap;
            gap: 50px;
            margin-bottom: 50px;
        }
        
        .footer-col {
            flex: 1;
            min-width: 250px;
        }
        
        .footer-col h3 {
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: var(--secondary);
        }
        
        .footer-col p,
        .footer-col a {
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.8;
            margin-bottom: 10px;
            display: block;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .footer-col a:hover {
            color: var(--secondary);
        }
        
        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        .social-links a {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .social-links a:hover {
            background-color: var(--secondary);
            color: var(--dark);
        }
        
        .copyright {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.9rem;
            position: relative;
            z-index: 1;
        }
        
        /* Responsive Styles */
        @media (max-width: 992px) {
            .section-title h2 {
                font-size: 2rem;
            }
            
            .hero h1 {
                font-size: 2.8rem;
            }
        }
        
        @media (max-width: 768px) {
            .hamburger {
                display: block;
            }
            
            .nav-links {
                position: fixed;
                top: 80px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 80px);
                background-color: white;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                transition: left 0.3s ease;
            }
            
            .nav-links.active {
                left: 0;
            }
            
            .nav-links li {
                margin: 15px 0;
            }
            
            .hero h1 {
                font-size: 2.2rem;
            }
            
            .hero p {
                font-size: 1rem;
            }
            
            section {
                padding: 60px 0;
            }
            
            .about-content,
            .vision-container {
                flex-direction: column;
            }
            
            .about-img,
            .about-text,
            .vision-text,
            .vision-images {
                width: 100%;
            }
        }
        
        @media (max-width: 576px) {
            .hero h1 {
                font-size: 1.8rem;
            }
            
            .section-title h2 {
                font-size: 1.8rem;
            }
            
            .stats-container {
                flex-direction: column;
            }
            
            .contact-form {
                padding: 30px 20px;
            }
        }

JavaScript

// Typing Effect for Hero Text
        const typedTextSpan = document.getElementById("typed-text");
        const textArray = [
            "Fresh Groceries Delivered to Your Doorstep",
            "Locally Sourced, Always Fresh",
            "Quality You Can Taste",
            "Your Neighborhood Grocery Store"
        ];
        const typingDelay = 100;
        const erasingDelay = 50;
        const newTextDelay = 2000;
        let textArrayIndex = 0;
        let charIndex = 0;

document.addEventListener("DOMContentLoaded", function() {
            setTimeout(type, newTextDelay + 250);
        });

// Mobile Menu Toggle
        const hamburger = document.querySelector(".hamburger");
        const navLinks = document.querySelector(".nav-links");

hamburger.addEventListener("click", () => {
            navLinks.classList.toggle("active");
            hamburger.innerHTML = navLinks.classList.contains("active") 
                ? '<i class="fas fa-times"></i>' 
                : '<i class="fas fa-bars"></i>';
        });

// Close mobile menu when clicking a link
        document.querySelectorAll(".nav-links a").forEach(link => {
            link.addEventListener("click", () => {
                navLinks.classList.remove("active");
                hamburger.innerHTML = '<i class="fas fa-bars"></i>';
            });
        });

// Animate product cards on scroll
        const productCards = document.querySelectorAll(".product-card");
        
        function animateCards() {
            productCards.forEach((card, index) => {
                const cardPosition = card.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.3;
                
                if (cardPosition < screenPosition) {
                    setTimeout(() => {
                        card.classList.add("animate");
                    }, index * 200);
                }
            });
        }

// Animate vision images on scroll
        const visionImages = document.querySelectorAll(".vision-img");
        
        function animateVisionImages() {
            visionImages.forEach((img, index) => {
                const imgPosition = img.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.3;
                
                if (imgPosition < screenPosition) {
                    setTimeout(() => {
                        img.classList.add("animate");
                    }, index * 200);
                }
            });
        }

// Number counter animation
        const counters = document.querySelectorAll(".stat-number");
        const speed = 200;

// Run animations when elements are in view
        window.addEventListener("scroll", () => {
            animateCards();
            animateVisionImages();
            
            // Check if stats section is in view
            const statsSection = document.querySelector(".stats");
            const statsPosition = statsSection.getBoundingClientRect().top;
            const screenPosition = window.innerHeight / 1.3;
            
            if (statsPosition < screenPosition) {
                animateCounters();
            }
        });

// Initialize animations on page load
        window.addEventListener("load", () => {
            animateCards();
            animateVisionImages();
        });

FreshMart Grocery Template Preview

Download Options