Grocery Mart About Page Template HTML CSS Template Free Download

HTML

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

<section class="hero">
        <div class="container">
            <div class="hero-content">
                <h1>About Grocery Mart</h1>
                <p>Fresh produce, quality groceries, and exceptional service since 2005. We're your neighborhood's trusted source for all your grocery needs.</p>
                <a href="#about" class="btn">Learn More</a>
            </div>
        </div>
    </section>

<section class="about" id="about">
        <div class="container">
            <div class="section-title">
                <h2>Our <span>Story</span></h2>
            </div>
            <div class="about-content">
                <div class="about-text">
                    <h3>From Humble Beginnings to Community Staple</h3>
                    <p>Founded in 2005 by the Johnson family, Grocery Mart started as a small corner store with a simple mission: to provide fresh, affordable groceries with a personal touch. What began as a modest family business has grown into a beloved community institution.</p>
                    <p>Today, we operate three locations across the city, but we've never lost sight of our roots. We still source many products from local farmers and producers, and we treat every customer like family.</p>
                    <p>Our commitment to quality, freshness, and community sets us apart from the big chain stores. We know your name, we know what you like, and we're always here to help.</p>
                    <a href="#" class="btn">Meet Our Team</a>
                </div>
                <div class="about-image">
                    <img src="https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Grocery store interior">
                </div>
            </div>
        </div>
    </section>

<section class="services">
        <div class="container">
            <div class="section-title">
                <h2>Our <span>Services</span></h2>
            </div>
            <div class="services-container">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-shopping-basket"></i>
                    </div>
                    <h3>Fresh Produce</h3>
                    <p>Daily deliveries of the freshest fruits and vegetables from local farms and trusted suppliers.</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-truck"></i>
                    </div>
                    <h3>Home Delivery</h3>
                    <p>Fast, reliable grocery delivery to your doorstep with our temperature-controlled vehicles.</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-utensils"></i>
                    </div>
                    <h3>Prepared Foods</h3>
                    <p>Delicious ready-to-eat meals made fresh daily by our in-house chefs using quality ingredients.</p>
                </div>
            </div>
        </div>
    </section>

<section class="team">
        <div class="container">
            <div class="section-title">
                <h2>Our <span>Team</span></h2>
            </div>
            <div class="team-container">
                <div class="team-member">
                    <div class="member-image">
                        <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Team member">
                    </div>
                    <div class="member-info">
                        <h3>Michael Johnson</h3>
                        <p>Founder & CEO</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>
                        </div>
                    </div>
                </div>
                <div class="team-member">
                    <div class="member-image">
                        <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Team member">
                    </div>
                    <div class="member-info">
                        <h3>Sarah Williams</h3>
                        <p>Head of Operations</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>
                        </div>
                    </div>
                </div>
                <div class="team-member">
                    <div class="member-image">
                        <img src="https://images.unsplash.com/photo-1551836022-d5d88e9218df?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Team member">
                    </div>
                    <div class="member-info">
                        <h3>David Chen</h3>
                        <p>Produce Manager</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>
                        </div>
                    </div>
                </div>
                <div class="team-member">
                    <div class="member-image">
                        <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Team member">
                    </div>
                    <div class="member-info">
                        <h3>Emily Rodriguez</h3>
                        <p>Customer Service</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>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="testimonials">
        <div class="container">
            <div class="section-title">
                <h2>Customer <span>Testimonials</span></h2>
            </div>
            <div class="testimonial-container">
                <div class="testimonial">
                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Customer">
                    <p>"I've been shopping at Grocery Mart for over 10 years. The quality of their produce is unmatched, and the staff always remembers my name and preferences. It's like shopping with family!"</p>
                    <h4>Jessica Thompson</h4>
                    <span>Loyal Customer</span>
                </div>
            </div>
        </div>
    </section>

<section class="stats">
        <div class="container">
            <div class="section-title">
                <h2>By The <span>Numbers</span></h2>
            </div>
            <div class="stats-container">
                <div class="stat-item">
                    <div class="stat-number" data-count="18">0</div>
                    <div class="stat-text">Years in Business</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" data-count="15000">0</div>
                    <div class="stat-text">Happy Customers</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" data-count="42">0</div>
                    <div class="stat-text">Local Suppliers</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" data-count="3">0</div>
                    <div class="stat-text">Locations</div>
                </div>
            </div>
        </div>
    </section>

<section class="gallery">
        <div class="container">
            <div class="section-title">
                <h2>Our <span>Gallery</span></h2>
            </div>
            <div class="gallery-container">
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1542838132-92c53300491e?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Fresh produce">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1518843875459-f738682238a6?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Bakery">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1550583724-b2692b85b150?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Dairy products">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Store interior">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1601493700631-2b16ec4b4716?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Meat section">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Checkout">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="contact">
        <div class="container">
            <div class="section-title">
                <h2>Get In <span>Touch</span></h2>
            </div>
            <div class="contact-container">
                <div class="contact-info">
                    <h3>Contact Information</h3>
                    <div class="info-item">
                        <div class="info-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div class="info-text">
                            <h4>Location</h4>
                            <p>123 Grocery Street, Foodville, FC 12345</p>
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="info-icon">
                            <i class="fas fa-phone-alt"></i>
                        </div>
                        <div class="info-text">
                            <h4>Phone</h4>
                            <p>(123) 456-7890</p>
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="info-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div class="info-text">
                            <h4>Email</h4>
                            <p>info@grocerymart.com</p>
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="info-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="info-text">
                            <h4>Hours</h4>
                            <p>Monday-Saturday: 7am-10pm<br>Sunday: 8am-9pm</p>
                        </div>
                    </div>
                </div>
                <div class="contact-form">
                    <form>
                        <div class="form-group">
                            <label for="name">Name</label>
                            <input type="text" id="name" class="form-control" placeholder="Your Name">
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" id="email" class="form-control" placeholder="Your Email">
                        </div>
                        <div class="form-group">
                            <label for="subject">Subject</label>
                            <input type="text" id="subject" class="form-control" placeholder="Subject">
                        </div>
                        <div class="form-group">
                            <label for="message">Message</label>
                            <textarea id="message" class="form-control" placeholder="Your Message"></textarea>
                        </div>
                        <button type="submit" class="btn">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>Grocery Mart</h3>
                    <p>Your neighborhood's trusted source for fresh, quality groceries since 2005. We're committed to serving our community with care.</p>
                    <div class="social-footer">
                        <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-youtube"></i></a>
                    </div>
                </div>
                <div class="footer-column">
                    <h3>Quick Links</h3>
                    <ul class="footer-links">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Store Hours</h3>
                    <p>Monday - Saturday: 7:00am - 10:00pm</p>
                    <p>Sunday: 8:00am - 9:00pm</p>
                    <p>Holiday hours may vary</p>
                </div>
                <div class="footer-column">
                    <h3>Newsletter</h3>
                    <p>Subscribe to our newsletter for weekly deals and updates.</p>
                    <form>
                        <input type="email" class="form-control" placeholder="Your Email">
                        <button type="submit" class="btn" style="width: 100%; margin-top: 10px;">Subscribe</button>
                    </form>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2023 Grocery Mart. All Rights Reserved.</p>
            </div>
        </div>
    </footer>

</body>
</html>

CSS

:root {
            --primary-color: #FFD700;
            --secondary-color: #FFA500;
            --dark-color: #333;
            --light-color: #f9f9f9;
            --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }

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

body {
            font-family: 'Poppins', sans-serif;
            line-height: 1.6;
            color: var(--dark-color);
            overflow-x: hidden;
        }

.container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

/* Header */
        header {
            background-color: white;
            box-shadow: var(--shadow);
            position: fixed;
            width: 100%;
            z-index: 1000;
        }

.navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }

.logo {
            font-size: 24px;
            font-weight: 700;
            color: var(--dark-color);
            text-decoration: none;
        }

.logo span {
            color: var(--primary-color);
        }

.nav-links {
            display: flex;
            list-style: none;
        }

.nav-links li {
            margin-left: 30px;
        }

.nav-links a {
            text-decoration: none;
            color: var(--dark-color);
            font-weight: 500;
            transition: var(--transition);
            position: relative;
        }

.nav-links a:hover {
            color: var(--primary-color);
        }

.nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background: var(--primary-color);
            bottom: -5px;
            left: 0;
            transition: var(--transition);
        }

.nav-links a:hover::after {
            width: 100%;
        }

.hamburger {
            display: none;
            cursor: pointer;
        }

.hamburger div {
            width: 25px;
            height: 3px;
            background-color: var(--dark-color);
            margin: 5px;
            transition: var(--transition);
        }

/* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.pexels.com/photos/3962285/pexels-photo-3962285.jpeg');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            text-align: center;
            color: white;
            padding-top: 80px;
            animation: fadeIn 1.5s ease;
        }

.hero-content {
            max-width: 800px;
            margin: 0 auto;
        }

.hero h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            animation: slideUp 1s ease;
        }

.hero p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            animation: slideUp 1.2s ease;
        }

.btn {
            display: inline-block;
            background: var(--primary-color);
            color: var(--dark-color);
            padding: 12px 30px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
            border: none;
            cursor: pointer;
            animation: slideUp 1.4s ease;
        }

.btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

/* About Section */
        .about {
            padding: 100px 0;
            background-color: white;
        }

.section-title {
            text-align: center;
            margin-bottom: 60px;
            position: relative;
        }

.section-title h2 {
            font-size: 2.5rem;
            color: var(--dark-color);
            margin-bottom: 15px;
        }

.section-title h2 span {
            color: var(--primary-color);
        }

.section-title::after {
            content: '';
            position: absolute;
            width: 80px;
            height: 4px;
            background: var(--primary-color);
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
        }

.about-content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }

.about-text {
            flex: 1;
            min-width: 300px;
            padding-right: 30px;
            opacity: 0;
            transform: translateX(-50px);
            animation: fadeInRight 1s ease forwards;
        }

.about-text h3 {
            font-size: 1.8rem;
            margin-bottom: 20px;
            color: var(--dark-color);
        }

.about-text p {
            margin-bottom: 20px;
            color: #666;
        }

.about-image {
            flex: 1;
            min-width: 300px;
            opacity: 0;
            transform: translateX(50px);
            animation: fadeInLeft 1s ease forwards;
            animation-delay: 0.3s;
        }

.about-image img {
            width: 100%;
            border-radius: 10px;
            box-shadow: var(--shadow);
        }

/* Services Section */
        .services {
            padding: 100px 0;
            background-color: var(--light-color);
        }

.services-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

.service-card {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: var(--shadow);
            text-align: center;
            transition: var(--transition);
            opacity: 0;
            transform: translateY(50px);
        }

.service-card:nth-child(1) {
            animation: fadeInUp 1s ease forwards;
        }

.service-card:nth-child(2) {
            animation: fadeInUp 1s ease forwards 0.3s;
        }

.service-card:nth-child(3) {
            animation: fadeInUp 1s ease forwards 0.6s;
        }

.service-card:hover {
            transform: translateY(-10px);
        }

.service-icon {
            font-size: 3rem;
            color: var(--primary-color);
            margin-bottom: 20px;
        }

.service-card h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
        }

/* Team Section */
        .team {
            padding: 100px 0;
            background-color: white;
        }

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

.team-member {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            opacity: 0;
            transform: scale(0.9);
        }

.team-member:nth-child(1) {
            animation: fadeIn 1s ease forwards;
        }

.team-member:nth-child(2) {
            animation: fadeIn 1s ease forwards 0.3s;
        }

.team-member:nth-child(3) {
            animation: fadeIn 1s ease forwards 0.6s;
        }

.team-member:nth-child(4) {
            animation: fadeIn 1s ease forwards 0.9s;
        }

.team-member:hover {
            transform: scale(1.05);
        }

.member-image {
            height: 300px;
            overflow: hidden;
        }

.member-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

.team-member:hover .member-image img {
            transform: scale(1.1);
        }

.member-info {
            padding: 20px;
            text-align: center;
        }

.member-info h3 {
            font-size: 1.3rem;
            margin-bottom: 5px;
        }

.member-info p {
            color: var(--primary-color);
            font-weight: 500;
            margin-bottom: 15px;
        }

.social-links {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

.social-links a {
            color: var(--dark-color);
            transition: var(--transition);
        }

.social-links a:hover {
            color: var(--primary-color);
            transform: translateY(-3px);
        }

/* Testimonials Section */
        .testimonials {
            padding: 100px 0;
            background-color: var(--light-color);
        }

.testimonial-container {
            max-width: 800px;
            margin: 50px auto 0;
            position: relative;
        }

.testimonial {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: var(--shadow);
            text-align: center;
            opacity: 0;
            transform: translateY(50px);
            animation: fadeInUp 1s ease forwards;
        }

.testimonial img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 20px;
            border: 5px solid var(--primary-color);
        }

.testimonial p {
            font-style: italic;
            margin-bottom: 20px;
            color: #666;
        }

.testimonial h4 {
            font-size: 1.2rem;
            color: var(--dark-color);
        }

.testimonial span {
            color: var(--primary-color);
            font-weight: 500;
        }

/* Stats Section */
        .stats {
            padding: 100px 0;
            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-1.2.1&auto=format&fit=crop&w=1350&q=80');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            color: white;
            text-align: center;
        }

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

.stat-item {
            padding: 30px;
            opacity: 0;
            transform: translateY(50px);
        }

.stat-item:nth-child(1) {
            animation: fadeInUp 1s ease forwards;
        }

.stat-item:nth-child(2) {
            animation: fadeInUp 1s ease forwards 0.3s;
        }

.stat-item:nth-child(3) {
            animation: fadeInUp 1s ease forwards 0.6s;
        }

.stat-item:nth-child(4) {
            animation: fadeInUp 1s ease forwards 0.9s;
        }

.stat-number {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 10px;
            color: var(--primary-color);
        }

.stat-text {
            font-size: 1.2rem;
            font-weight: 500;
        }

/* Gallery Section */
        .gallery {
            padding: 100px 0;
            background-color: white;
        }

.gallery-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 50px;
        }

.gallery-item {
            height: 250px;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: var(--shadow);
            position: relative;
            opacity: 0;
            transform: scale(0.9);
        }

.gallery-item:nth-child(1) {
            animation: fadeIn 1s ease forwards;
        }

.gallery-item:nth-child(2) {
            animation: fadeIn 1s ease forwards 0.2s;
        }

.gallery-item:nth-child(3) {
            animation: fadeIn 1s ease forwards 0.4s;
        }

.gallery-item:nth-child(4) {
            animation: fadeIn 1s ease forwards 0.6s;
        }

.gallery-item:nth-child(5) {
            animation: fadeIn 1s ease forwards 0.8s;
        }

.gallery-item:nth-child(6) {
            animation: fadeIn 1s ease forwards 1s;
        }

.gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

.gallery-item:hover img {
            transform: scale(1.1);
        }

.gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 215, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: var(--transition);
        }

.gallery-item:hover .gallery-overlay {
            opacity: 1;
        }

.gallery-overlay i {
            color: white;
            font-size: 2rem;
        }

/* Contact Section */
        .contact {
            padding: 100px 0;
            background-color: var(--light-color);
        }

.contact-container {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            margin-top: 50px;
        }

.contact-info {
            flex: 1;
            min-width: 300px;
            opacity: 0;
            transform: translateX(-50px);
            animation: fadeInRight 1s ease forwards;
        }

.contact-info h3 {
            font-size: 1.8rem;
            margin-bottom: 20px;
            color: var(--dark-color);
        }

.info-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
        }

.info-icon {
            font-size: 1.5rem;
            color: var(--primary-color);
            margin-right: 15px;
            margin-top: 5px;
        }

.info-text h4 {
            font-size: 1.2rem;
            margin-bottom: 5px;
        }

.info-text p {
            color: #666;
        }

.contact-form {
            flex: 1;
            min-width: 300px;
            opacity: 0;
            transform: translateX(50px);
            animation: fadeInLeft 1s ease forwards;
            animation-delay: 0.3s;
        }

.form-group {
            margin-bottom: 20px;
        }

.form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }

.form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-family: 'Poppins', sans-serif;
            transition: var(--transition);
        }

.form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
        }

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

/* Footer */
        footer {
            background-color: var(--dark-color);
            color: white;
            padding: 50px 0 20px;
            text-align: center;
        }

.footer-content {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-bottom: 30px;
        }

.footer-column {
            flex: 1;
            min-width: 250px;
            margin-bottom: 30px;
        }

.footer-column h3 {
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: var(--primary-color);
        }

.footer-column p {
            margin-bottom: 15px;
            color: #bbb;
        }

.footer-links {
            list-style: none;
        }

.footer-links li {
            margin-bottom: 10px;
        }

.footer-links a {
            color: #bbb;
            text-decoration: none;
            transition: var(--transition);
        }

.footer-links a:hover {
            color: var(--primary-color);
            padding-left: 5px;
        }

.social-footer {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }

.social-footer a {
            color: white;
            background: rgba(255, 255, 255, 0.1);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            text-decoration: none;
        }

.social-footer a:hover {
            background: var(--primary-color);
            color: var(--dark-color);
            transform: translateY(-5px);
        }

.copyright {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 20px;
            color: #bbb;
            font-size: 0.9rem;
        }

/* Animations */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

@keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

@keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

@keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(100px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

/* Responsive */
        @media (max-width: 992px) {
            .hero h1 {
                font-size: 2.8rem;
            }
        }

@media (max-width: 768px) {
            .nav-links {
                position: absolute;
                right: 0;
                top: 80px;
                background: white;
                width: 100%;
                flex-direction: column;
                align-items: center;
                padding: 20px 0;
                box-shadow: var(--shadow);
                clip-path: circle(0px at 90% -10%);
                transition: all 0.5s ease-out;
            }

.nav-links.active {
                clip-path: circle(1000px at 90% -10%);
            }

.nav-links li {
                margin: 15px 0;
            }

.hamburger {
                display: block;
            }

.hamburger.active div:nth-child(1) {
                transform: rotate(-45deg) translate(-5px, 6px);
            }

.hamburger.active div:nth-child(2) {
                opacity: 0;
            }

.hamburger.active div:nth-child(3) {
                transform: rotate(45deg) translate(-5px, -6px);
            }

.hero h1 {
                font-size: 2.5rem;
            }

.about-content {
                flex-direction: column;
            }

.about-text {
                padding-right: 0;
                margin-bottom: 30px;
            }
        }

@media (max-width: 576px) {
            .hero h1 {
                font-size: 2rem;
            }

.hero p {
                font-size: 1rem;
            }

.section-title h2 {
                font-size: 2rem;
            }

.btn {
                padding: 10px 25px;
            }
        }

JavaScript

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

hamburger.addEventListener('click', () => {
            hamburger.classList.toggle('active');
            navLinks.classList.toggle('active');
        });

// Close mobile menu when clicking a link
        document.querySelectorAll('.nav-links a').forEach(link => {
            link.addEventListener('click', () => {
                hamburger.classList.remove('active');
                navLinks.classList.remove('active');
            });
        });

// Animate stats counters
        const statNumbers = document.querySelectorAll('.stat-number');
        const speed = 200;

function animateCounters() {
            statNumbers.forEach(stat => {
                const target = +stat.getAttribute('data-count');
                const count = +stat.innerText;
                const increment = target / speed;

if (count < target) {
                    stat.innerText = Math.ceil(count + increment);
                    setTimeout(animateCounters, 1);
                } else {
                    stat.innerText = target;
                }
            });
        }

// Start counter animation when stats section is in view
        const statsSection = document.querySelector('.stats');
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    animateCounters();
                    observer.unobserve(entry.target);
                }
            });
        }, { threshold: 0.5 });

observer.observe(statsSection);

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

// Animation on scroll
        const animateElements = document.querySelectorAll('.about-text, .about-image, .service-card, .team-member, .testimonial, .stat-item, .gallery-item, .contact-info, .contact-form');

const animateOnScroll = () => {
            animateElements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.3;

if (elementPosition < screenPosition) {
                    element.style.animationPlayState = 'running';
                }
            });
        };

window.addEventListener('scroll', animateOnScroll);
        window.addEventListener('load', animateOnScroll);

Grocery Mart About Page Template Preview

Download Options