Vegetable Corner 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>Vegetable Corner - Fresh & Organic</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  
</head>
<body>
    
    <header id="header">
        <div class="container">
            <nav class="navbar">
                <a href="#" class="logo">
                    <i class="fas fa-leaf"></i> Vegetable Corner
                </a>
                <ul class="nav-links">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#products">Products</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" id="home">
        <div class="container">
            <div class="hero-content">
                <h1>Fresh & Organic Vegetables</h1>
                <p>Discover the finest selection of organic vegetables grown with love and care for your health and well-being.</p>
                <a href="#products" class="btn">Shop Now</a>
            </div>
        </div>
    </section>

<section class="section about" id="about">
        <div class="container">
            <h2 class="section-title">About Us</h2>
            <div class="about-content">
                <div class="about-text">
                    <h3>We Provide Fresh Vegetables Since 2010</h3>
                    <p>Vegetable Corner is a family-owned business dedicated to providing the freshest, highest quality organic vegetables to our community. Our farm uses sustainable farming practices to ensure that every vegetable we grow is packed with nutrients and flavor.</p>
                    <p>We believe in the power of fresh, organic produce to transform health and bring people together. That's why we work directly with local farmers who share our values and commitment to quality.</p>
                    <a href="#contact" class="btn">Learn More</a>
                </div>
                <div class="about-image">
                    <img src="https://images.unsplash.com/photo-1526470303-82c787d88682?q=80&w=632&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Farmers harvesting vegetables">
                </div>
            </div>
        </div>
    </section>

<section class="section features" id="features">
        <div class="container">
            <h2 class="section-title">Why Choose Us</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <i class="fas fa-seedling"></i>
                    <h3>100% Organic</h3>
                    <p>All our vegetables are grown without synthetic pesticides or fertilizers, ensuring pure, natural goodness.</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-truck"></i>
                    <h3>Fast Delivery</h3>
                    <p>We deliver fresh vegetables to your doorstep within 24 hours of harvest for maximum freshness.</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-award"></i>
                    <h3>Quality Guarantee</h3>
                    <p>If you're not satisfied with any product, we'll replace it or refund your money, no questions asked.</p>
                </div>
            </div>
        </div>
    </section>

<section class="section products" id="products">
        <div class="container">
            <h2 class="section-title">Our Products</h2>
            <div class="products-grid">
                <div class="product-card">
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1518977676601-b53f82aba655?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Fresh Tomatoes">
                    </div>
                    <div class="product-info">
                        <h3>Organic Tomatoes</h3>
                        <div class="price">$3.99/lb</div>
                        <a href="#" class="btn">Add to Cart</a>
                    </div>
                </div>
                <div class="product-card">
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1589927986089-35812388d1f4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Fresh Carrots">
                    </div>
                    <div class="product-info">
                        <h3>Organic Carrots</h3>
                        <div class="price">$2.49/lb</div>
                        <a href="#" class="btn">Add to Cart</a>
                    </div>
                </div>
                <div class="product-card">
                    <div class="product-image">
                        <img src="https://plus.unsplash.com/premium_photo-1702403157830-9df749dc6c1e?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Fresh Broccoli">
                    </div>
                    <div class="product-info">
                        <h3>Organic Broccoli</h3>
                        <div class="price">$2.99/lb</div>
                        <a href="#" class="btn">Add to Cart</a>
                    </div>
                </div>
                <div class="product-card">
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1601493700631-2b16ec4b4716?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80" alt="Fresh Bell Peppers">
                    </div>
                    <div class="product-info">
                        <h3>Organic Bell Peppers</h3>
                        <div class="price">$4.49/lb</div>
                        <a href="#" class="btn">Add to Cart</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section testimonials" id="testimonials">
        <div class="container">
            <h2 class="section-title">Customer Reviews</h2>
            <div class="testimonials-slider">
                <div class="testimonial-card active">
                    <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Sarah Johnson">
                    <p>"The vegetables from Vegetable Corner are always fresh and delicious. I've been a customer for three years and their quality never disappoints. The organic tomatoes are my favorite!"</p>
                    <div class="name">Sarah Johnson</div>
                    <div class="rating">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                </div>
                <div class="testimonial-card">
                    <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Michael Chen">
                    <p>"I love that I can trust Vegetable Corner for truly organic produce. Their delivery is fast and the vegetables last much longer than supermarket produce. Highly recommended!"</p>
                    <div class="name">Michael Chen</div>
                    <div class="rating">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                </div>
                <div class="testimonial-card">
                    <img src="https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=686&q=80" alt="Emily Rodriguez">
                    <p>"As a chef, I'm very particular about my ingredients. Vegetable Corner consistently provides the highest quality vegetables that make my dishes shine. Their seasonal selections are amazing!"</p>
                    <div class="name">Emily Rodriguez</div>
                    <div class="rating">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                </div>
                <div class="testimonial-nav">
                    <div class="testimonial-dot active" data-slide="0"></div>
                    <div class="testimonial-dot" data-slide="1"></div>
                    <div class="testimonial-dot" data-slide="2"></div>
                </div>
            </div>
        </div>
    </section>

<section class="section gallery" id="gallery">
        <div class="container">
            <h2 class="section-title">Our Farm Gallery</h2>
            <div class="gallery-grid">
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1464226184884-fa280b87c399?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Farm Field">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1589927986089-35812388d1f4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Harvesting">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1542838132-92c53300491e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Vegetable Market">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1526470303-82c787d88682?q=80&w=632&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Farmers Working">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section team" id="team">
        <div class="container">
            <h2 class="section-title">Our Team</h2>
            <div class="team-grid">
                <div class="team-member">
                    <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="John Farmer">
                    <div class="team-info">
                        <h3>John Farmer</h3>
                        <p>Founder & Head Farmer</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">
                    <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Sarah Green">
                    <div class="team-info">
                        <h3>Sarah Green</h3>
                        <p>Organic Farming Expert</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">
                    <img src="https://images.unsplash.com/photo-1551836022-d5d88e9218df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Mike Harvest">
                    <div class="team-info">
                        <h3>Mike Harvest</h3>
                        <p>Distribution 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>
        </div>
    </section>

<section class="newsletter" id="newsletter">
        <div class="container">
            <h2>Subscribe to Our Newsletter</h2>
            <p>Stay updated with our latest products, seasonal offers, and farming stories. Join our community of vegetable lovers today!</p>
            <form class="newsletter-form">
                <input type="email" placeholder="Enter your email address" required>
                <button type="submit">Subscribe</button>
            </form>
        </div>
    </section>

<section class="section contact" id="contact">
        <div class="container">
            <h2 class="section-title">Contact Us</h2>
            <div class="contact-container">
                <div class="contact-info">
                    <h3>Get In Touch</h3>
                    <div class="contact-details">
                        <div class="contact-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>123 Green Valley Road, Farmville, CA 12345</span>
                        </div>
                        <div class="contact-item">
                            <i class="fas fa-phone-alt"></i>
                            <span>+1 (555) 123-4567</span>
                        </div>
                        <div class="contact-item">
                            <i class="fas fa-envelope"></i>
                            <span>info@vegetablecorner.com</span>
                        </div>
                        <div class="contact-item">
                            <i class="fas fa-clock"></i>
                            <span>Mon-Sat: 8:00 AM - 6:00 PM</span>
                        </div>
                    </div>
                    <div class="footer-social">
                        <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="contact-form">
                    <form>
                        <div class="form-group">
                            <label for="name">Your Name</label>
                            <input type="text" id="name" required>
                        </div>
                        <div class="form-group">
                            <label for="email">Your Email</label>
                            <input type="email" id="email" required>
                        </div>
                        <div class="form-group">
                            <label for="subject">Subject</label>
                            <input type="text" id="subject" required>
                        </div>
                        <div class="form-group">
                            <label for="message">Your Message</label>
                            <textarea id="message" required></textarea>
                        </div>
                        <button type="submit" class="btn">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-container">
                <div class="footer-col">
                    <h3>Vegetable Corner</h3>
                    <p>Providing fresh, organic vegetables to our community since 2010. Quality you can taste, service you can trust.</p>
                    <p>Join us in our mission to promote healthy living through organic farming.</p>
                </div>
                <div class="footer-col">
                    <h3>Quick Links</h3>
                    <ul class="footer-links">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">About Us</a></li>
                        <li><a href="#products">Products</a></li>
                        <li><a href="#testimonials">Testimonials</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Products</h3>
                    <ul class="footer-links">
                        <li><a href="#">Organic Vegetables</a></li>
                        <li><a href="#">Seasonal Specials</a></li>
                        <li><a href="#">Farm Boxes</a></li>
                        <li><a href="#">Herbs</a></li>
                        <li><a href="#">Gift Cards</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Newsletter</h3>
                    <p>Subscribe to our newsletter for the latest updates and offers.</p>
                    <form class="newsletter-form">
                        <input type="email" placeholder="Your Email" required>
                        <button type="submit"><i class="fas fa-paper-plane"></i></button>
                    </form>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2023 Vegetable Corner. All Rights Reserved.</p>
            </div>
        </div>
    </footer>

<div class="back-to-top">
        <i class="fas fa-arrow-up"></i>
    </div>

</body>
</html>

CSS

:root {
            --primary-color: #3498db;
            --secondary-color: #2980b9;
            --dark-blue: #1a5276;
            --light-blue: #d4e6f1;
            --white: #ffffff;
            --black: #333333;
            --gray: #f5f5f5;
            --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(--black);
            overflow-x: hidden;
        }

a {
            text-decoration: none;
            color: inherit;
        }

ul {
            list-style: none;
        }

img {
            max-width: 100%;
            height: auto;
            display: block;
        }

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

.btn {
            display: inline-block;
            padding: 12px 30px;
            background-color: var(--primary-color);
            color: var(--white);
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-weight: 600;
            transition: var(--transition);
            box-shadow: var(--shadow);
        }

.btn:hover {
            background-color: var(--secondary-color);
            transform: translateY(-3px);
        }

.section {
            padding: 80px 0;
        }

.section-title {
            text-align: center;
            margin-bottom: 50px;
            color: var(--dark-blue);
            font-size: 2.5rem;
            position: relative;
        }

.section-title::after {
            content: '';
            display: block;
            width: 80px;
            height: 5px;
            background-color: var(--primary-color);
            margin: 15px auto 0;
            border-radius: 5px;
        }

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

header.scrolled {
            background-color: rgba(255, 255, 255, 0.95);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }

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

.logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--primary-color);
            display: flex;
            align-items: center;
        }

.logo i {
            margin-right: 10px;
            font-size: 2rem;
        }

.nav-links {
            display: flex;
            gap: 30px;
        }

.nav-links a {
            font-weight: 500;
            transition: var(--transition);
            position: relative;
        }

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

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

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

.hamburger {
            display: none;
            cursor: pointer;
            font-size: 1.5rem;
            color: var(--primary-color);
        }

/* Hero Section */
        .hero {
            background: linear-gradient(rgba(52, 152, 219, 0.8), rgba(41, 127, 185, 0.409)), url('https://images.unsplash.com/photo-1542838132-92c53300491e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80');
            background-size: cover;
            background-position: center;
            height: 100vh;
            display: flex;
            align-items: center;
            text-align: center;
            color: var(--white);
            padding-top: 80px;
        }

.hero-content {
            max-width: 800px;
            margin: 0 auto;
            animation: fadeInUp 1s ease;
        }

.hero h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        }

.hero p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
        }

/* About Section */
        .about {
            background-color: var(--gray);
        }

.about-content {
            display: flex;
            align-items: center;
            gap: 50px;
        }

.about-text {
            flex: 1;
            animation: fadeInLeft 1s ease;
        }

.about-image {
            flex: 1;
            animation: fadeInRight 1s ease;
        }

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

/* Features Section */
        .features {
            background-color: var(--white);
        }

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

.feature-card {
            background-color: var(--white);
            border-radius: 10px;
            padding: 30px;
            text-align: center;
            box-shadow: var(--shadow);
            transition: var(--transition);
            animation: fadeInUp 1s ease;
        }

.feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.feature-card i {
            font-size: 3rem;
            color: var(--primary-color);
            margin-bottom: 20px;
        }

.feature-card h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--dark-blue);
        }

/* Products Section */
        .products {
            background-color: var(--gray);
        }

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

.product-card {
            background-color: var(--white);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            animation: fadeInUp 1s ease;
        }

.product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.product-image {
            height: 200px;
            overflow: hidden;
        }

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

.product-card:hover .product-image img {
            transform: scale(1.1);
        }

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

.product-info h3 {
            font-size: 1.3rem;
            margin-bottom: 10px;
            color: var(--dark-blue);
        }

.product-info .price {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 15px;
        }

/* Testimonials Section */
        .testimonials {
            background-color: var(--white);
        }

.testimonials-slider {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }

.testimonial-card {
            background-color: var(--light-blue);
            padding: 30px;
            border-radius: 10px;
            text-align: center;
            box-shadow: var(--shadow);
            margin: 20px;
            display: none;
            animation: fadeIn 1s ease;
        }

.testimonial-card.active {
            display: block;
        }

.testimonial-card img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            margin: 0 auto 20px;
            border: 5px solid var(--white);
            box-shadow: var(--shadow);
        }

.testimonial-card p {
            font-style: italic;
            margin-bottom: 20px;
        }

.testimonial-card .name {
            font-weight: 600;
            color: var(--dark-blue);
        }

.testimonial-nav {
            display: flex;
            justify-content: center;
            margin-top: 30px;
            gap: 10px;
        }

.testimonial-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #ccc;
            cursor: pointer;
            transition: var(--transition);
        }

.testimonial-dot.active {
            background-color: var(--primary-color);
            transform: scale(1.2);
        }

/* Gallery Section */
        .gallery {
            background-color: var(--gray);
        }

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

.gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            height: 250px;
            box-shadow: var(--shadow);
            animation: fadeIn 1s ease;
        }

.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-color: rgba(52, 152, 219, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: var(--transition);
        }

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

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

/* Team Section */
        .team {
            background-color: var(--white);
        }

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

.team-member {
            background-color: var(--white);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            text-align: center;
            transition: var(--transition);
            animation: fadeInUp 1s ease;
        }

.team-member:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.team-member img {
            width: 100%;
            height: 250px;
            object-fit: cover;
        }

.team-info {
            padding: 20px;
        }

.team-info h3 {
            font-size: 1.3rem;
            margin-bottom: 5px;
            color: var(--dark-blue);
        }

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

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

.social-links a {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background-color: var(--light-blue);
            display: flex;
            justify-content: center;
            align-items: center;
            transition: var(--transition);
        }

.social-links a:hover {
            background-color: var(--primary-color);
            color: var(--white);
        }

/* Newsletter Section */
        .newsletter {
            background: linear-gradient(rgba(52, 152, 219, 0.9), rgba(41, 128, 185, 0.9)), url('https://images.unsplash.com/photo-1518977676601-b53f82aba655?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
            background-size: cover;
            background-position: center;
            color: var(--white);
            text-align: center;
            padding: 80px 20px;
        }

.newsletter h2 {
            margin-bottom: 20px;
            font-size: 2.5rem;
        }

.newsletter p {
            max-width: 600px;
            margin: 0 auto 30px;
            font-size: 1.1rem;
        }

.newsletter-form {
            display: flex;
            max-width: 500px;
            margin: 0 auto;
        }

.newsletter-form input {
            flex: 1;
            padding: 15px;
            border: none;
            border-radius: 50px 0 0 50px;
            font-family: 'Poppins', sans-serif;
            outline: none;
        }

.newsletter-form button {
            padding: 15px 30px;
            background-color: var(--dark-blue);
            color: var(--white);
            border: none;
            border-radius: 0 50px 50px 0;
            cursor: pointer;
            font-weight: 600;
            transition: var(--transition);
        }

.newsletter-form button:hover {
            background-color: var(--black);
        }

/* Contact Section */
        .contact {
            background-color: var(--gray);
        }

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

.contact-info {
            animation: fadeInLeft 1s ease;
        }

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

.contact-details {
            margin-bottom: 30px;
        }

.contact-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

.contact-item i {
            width: 40px;
            height: 40px;
            background-color: var(--primary-color);
            color: var(--white);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 15px;
            font-size: 1.2rem;
        }

.contact-form {
            animation: fadeInRight 1s ease;
        }

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

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

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

.form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }

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

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

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

.footer-col h3 {
            font-size: 1.5rem;
            margin-bottom: 20px;
            position: relative;
        }

.footer-col h3::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -10px;
            width: 50px;
            height: 2px;
            background-color: var(--primary-color);
        }

.footer-col p {
            margin-bottom: 15px;
        }

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

.footer-links a {
            transition: var(--transition);
        }

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

.footer-social {
            display: flex;
            gap: 15px;
        }

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

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

.copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

/* Back to Top Button */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background-color: var(--primary-color);
            color: var(--white);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2rem;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
            z-index: 999;
            box-shadow: var(--shadow);
        }

.back-to-top.active {
            opacity: 1;
            visibility: visible;
        }

.back-to-top:hover {
            background-color: var(--secondary-color);
            transform: translateY(-5px);
        }

/* Animations */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

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

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

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

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

/* Responsive Styles */
        @media (max-width: 992px) {
            .section-title {
                font-size: 2rem;
            }

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

.about-text,
            .about-image {
                flex: none;
                width: 100%;
            }

.about-image {
                margin-top: 30px;
            }
        }

@media (max-width: 768px) {
            .section {
                padding: 60px 0;
            }

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

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

.nav-links {
                position: fixed;
                top: 80px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 80px);
                background-color: var(--white);
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 30px;
                transition: var(--transition);
            }

.nav-links.active {
                left: 0;
            }

.hamburger {
                display: block;
            }

.newsletter-form {
                flex-direction: column;
            }

.newsletter-form input {
                border-radius: 50px;
                margin-bottom: 10px;
            }

.newsletter-form button {
                border-radius: 50px;
            }
        }

@media (max-width: 576px) {
            .section-title {
                font-size: 1.8rem;
            }

.hero h1 {
                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', () => {
            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>';
            });
        });

// Sticky Header
        window.addEventListener('scroll', () => {
            const header = document.getElementById('header');
            header.classList.toggle('scrolled', window.scrollY > 50);
        });

// Testimonial Slider
        const testimonialCards = document.querySelectorAll('.testimonial-card');
        const testimonialDots = document.querySelectorAll('.testimonial-dot');
        let currentTestimonial = 0;

function showTestimonial(index) {
            testimonialCards.forEach(card => card.classList.remove('active'));
            testimonialDots.forEach(dot => dot.classList.remove('active'));
            
            testimonialCards[index].classList.add('active');
            testimonialDots[index].classList.add('active');
            currentTestimonial = index;
        }

testimonialDots.forEach((dot, index) => {
            dot.addEventListener('click', () => showTestimonial(index));
        });

// Auto slide testimonials
        setInterval(() => {
            currentTestimonial = (currentTestimonial + 1) % testimonialCards.length;
            showTestimonial(currentTestimonial);
        }, 5000);

// Back to Top Button
        const backToTopBtn = document.querySelector('.back-to-top');

backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

// Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });

// Animation on scroll
        function animateOnScroll() {
            const elements = document.querySelectorAll('.feature-card, .product-card, .team-member, .gallery-item, .about-text, .about-image, .contact-info, .contact-form');
            
            elements.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);

Vegetable Corner Template Preview

Download Options