Aata Chaki Template | QuickCoder | The frontend studio

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shree Ganesh Aata Chaki - Premium Flour Mill</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">

</head>
<body>
    
    <header id="header">
        <a href="#" class="logo"><i class="fas fa-wheat-awn"></i> Shree Ganesh Aata Chaki</a>
        <div class="menu-toggle">
            <i class="fas fa-bars"></i>
        </div>
        <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="#process">Process</a></li>
            <li><a href="#testimonials">Testimonials</a></li>
            <li><a href="#gallery">Gallery</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </header>

<section class="hero" id="home">
        <div class="hero-content">
            <h1>Premium Quality Freshly Ground Flour</h1>
            <p>Experience the authentic taste of traditional stone-ground flour from our family-run mill. We use only the finest grains to bring you nutritious and flavorful flour for your kitchen.</p>
            <div class="hero-buttons">
                <a href="#products" class="btn">Our Products</a>
                <a href="#contact" class="btn btn-outline">Contact Us</a>
            </div>
        </div>
        <img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Wheat" class="floating-wheat wheat1">
        <img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Wheat" class="floating-wheat wheat2">
        <img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Wheat" class="floating-wheat wheat3">
    </section>

<section class="section" id="about">
        <div class="section-title">
            <h2>Our Tradition</h2>
            <p>For three generations, we've been milling flour with the same dedication to quality and tradition that our grandfather started with.</p>
        </div>
        <div class="about-content">
            <div class="about-img">
                <img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Traditional flour mill">
            </div>
            <div class="about-text">
                <h3>Preserving the Art of Traditional Milling</h3>
                <p>Founded in 1965, Shree Ganesh Aata Chaki has been serving the community with freshly ground flour using traditional stone mills. Our process ensures that all the natural nutrients and flavors are preserved in every batch.</p>
                <p>We source our grains directly from local farmers who share our commitment to sustainable and organic farming practices. This allows us to maintain complete control over the quality from field to flour.</p>
                <div class="features">
                    <div class="feature-item">
                        <i class="fas fa-leaf"></i>
                        <h4>100% Natural</h4>
                        <p>No additives or preservatives</p>
                    </div>
                    <div class="feature-item">
                        <i class="fas fa-heart"></i>
                        <h4>Healthy</h4>
                        <p>Rich in nutrients and fiber</p>
                    </div>
                    <div class="feature-item">
                        <i class="fas fa-award"></i>
                        <h4>Premium Quality</h4>
                        <p>Finest grains selection</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section products" id="products">
        <div class="section-title">
            <h2>Our Products</h2>
            <p>We offer a variety of freshly ground flours to meet all your cooking and baking needs.</p>
        </div>
        <div class="products-container">
            <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=2070&q=80" alt="Whole Wheat Flour">
                </div>
                <div class="product-info">
                    <h3>Whole Wheat Flour</h3>
                    <p>Stone-ground whole wheat flour with all the bran and germ intact for maximum nutrition.</p>
                    <div class="product-price">
                        <span class="price">₹50/kg</span>
                        <button class="add-to-cart">Add to Cart</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=2070&q=80" alt="Multigrain Flour">
                </div>
                <div class="product-info">
                    <h3>Multigrain Flour</h3>
                    <p>A nutritious blend of wheat, barley, oats, and millets for a healthy diet.</p>
                    <div class="product-price">
                        <span class="price">₹65/kg</span>
                        <button class="add-to-cart">Add to Cart</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=2070&q=80" alt="Besan (Gram Flour)">
                </div>
                <div class="product-info">
                    <h3>Besan (Gram Flour)</h3>
                    <p>Finely ground chickpea flour perfect for making pakoras, dhokla, and more.</p>
                    <div class="product-price">
                        <span class="price">₹70/kg</span>
                        <button class="add-to-cart">Add to Cart</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section process" id="process">
        <div class="section-title light">
            <h2>Our Traditional Process</h2>
            <p>We follow time-honored methods to ensure the highest quality flour with all its natural goodness.</p>
        </div>
        <div class="process-steps">
            <div class="step">
                <div class="step-number">1</div>
                <h3>Grain Selection</h3>
                <p>We carefully select the finest quality grains from trusted local farmers who follow organic practices.</p>
            </div>
            <div class="step">
                <div class="step-number">2</div>
                <h3>Cleaning</h3>
                <p>Grains are thoroughly cleaned to remove any impurities, stones, or foreign particles.</p>
            </div>
            <div class="step">
                <div class="step-number">3</div>
                <h3>Stone Grinding</h3>
                <p>Grains are slowly ground between traditional stone chakki to preserve nutrients and flavor.</p>
            </div>
            <div class="step">
                <div class="step-number">4</div>
                <h3>Packaging</h3>
                <p>Freshly ground flour is packed in food-grade bags to maintain freshness and quality.</p>
            </div>
        </div>
    </section>

<section class="section" id="testimonials">
        <div class="section-title">
            <h2>What Our Customers Say</h2>
            <p>Hear from our satisfied customers who have experienced the difference of our traditional flour.</p>
        </div>
        <div class="testimonials-container">
            <div class="testimonial">
                <div class="testimonial-header">
                    <div class="testimonial-img">
                        <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Customer">
                    </div>
                    <div class="testimonial-author">
                        <h4>Priya Sharma</h4>
                        <p>Home Baker</p>
                    </div>
                </div>
                <p class="testimonial-text">"The difference in taste is remarkable! My breads and rotis have never been this flavorful. The flour is so fresh and aromatic."</p>
                <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">
                <div class="testimonial-header">
                    <div class="testimonial-img">
                        <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1976&q=80" alt="Customer">
                    </div>
                    <div class="testimonial-author">
                        <h4>Rahul Patel</h4>
                        <p>Restaurant Owner</p>
                    </div>
                </div>
                <p class="testimonial-text">"We've been using Shree Ganesh flour for our restaurant for 5 years now. Our customers always compliment the taste and texture of our breads."</p>
                <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">
                <div class="testimonial-header">
                    <div class="testimonial-img">
                        <img src="https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1972&q=80" alt="Customer">
                    </div>
                    <div class="testimonial-author">
                        <h4>Anjali Mehta</h4>
                        <p>Health Enthusiast</p>
                    </div>
                </div>
                <p class="testimonial-text">"As someone who's health-conscious, I appreciate that their flour retains all the natural nutrients. My digestion has improved since switching to their products."</p>
                <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>
    </section>

<section class="section" id="gallery">
        <div class="section-title">
            <h2>Our Gallery</h2>
            <p>A glimpse into our traditional milling process and products.</p>
        </div>
        <div class="gallery-container">
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Flour Mill">
                <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-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Wheat Grains">
                <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-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Stone Grinder">
                <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-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Fresh Flour">
                <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-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Baking">
                <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-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Packaging">
                <div class="gallery-overlay">
                    <i class="fas fa-search-plus"></i>
                </div>
            </div>
        </div>
    </section>

<section class="section contact" id="contact">
        <div class="section-title">
            <h2>Contact Us</h2>
            <p>Get in touch with us for orders, wholesale inquiries, or any questions about our products.</p>
        </div>
        <div class="contact-container">
            <div class="contact-info">
                <h3>Let's Connect</h3>
                <p>We'd love to hear from you! Whether you have questions about our products, want to place an order, or just want to learn more about traditional flour milling, we're here to help.</p>
                <div class="contact-details">
                    <div class="contact-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <div class="contact-text">
                            <h4>Address</h4>
                            <p>123 Mill Street, Grain Village, Maharashtra 400001</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <i class="fas fa-phone-alt"></i>
                        <div class="contact-text">
                            <h4>Phone</h4>
                            <p>+91 98765 43210</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <i class="fas fa-envelope"></i>
                        <div class="contact-text">
                            <h4>Email</h4>
                            <p>contact@shreeganeshaatachaki.com</p>
                        </div>
                    </div>
                </div>
                <h4>Follow Us</h4>
                <div class="social-links">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-whatsapp"></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" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Email Address</label>
                        <input type="email" id="email" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="phone">Phone Number</label>
                        <input type="tel" id="phone" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="message">Your Message</label>
                        <textarea id="message" class="form-control" required></textarea>
                    </div>
                    <button type="submit" class="submit-btn">Send Message</button>
                </form>
            </div>
        </div>
    </section>

<footer>
        <div class="footer-container">
            <div class="footer-col">
                <h3>About Us</h3>
                <p>Shree Ganesh Aata Chaki is a family-run traditional flour mill committed to providing high-quality, freshly ground flour using time-honored methods.</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</a></li>
                    <li><a href="#products">Products</a></li>
                    <li><a href="#process">Our Process</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="#">Whole Wheat Flour</a></li>
                    <li><a href="#">Multigrain Flour</a></li>
                    <li><a href="#">Besan (Gram Flour)</a></li>
                    <li><a href="#">Rice Flour</a></li>
                    <li><a href="#">Specialty Flours</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h3>Contact Info</h3>
                <div class="footer-contact">
                    <p><i class="fas fa-map-marker-alt"></i> 123 Mill Street, Grain Village, Maharashtra 400001</p>
                    <p><i class="fas fa-phone-alt"></i> +91 98765 43210</p>
                    <p><i class="fas fa-envelope"></i> contact@shreeganeshaatachaki.com</p>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2023 Shree Ganesh Aata Chaki. All Rights Reserved.</p>
        </div>
    </footer>

CSS

:root {
            --primary: #d4a762;
            --secondary: #3a3a3a;
            --light: #f8f8f8;
            --dark: #222;
            --white: #fff;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            overflow-x: hidden;
            color: var(--secondary);
            background-color: var(--light);
        }
        
        h1, h2, h3, h4 {
            font-family: 'Playfair Display', serif;
            font-weight: 600;
        }
        
        /* Header */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 20px 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            transition: all 0.5s ease;
        }
        
        header.scrolled {
            background-color: rgba(255, 255, 255, 0.95);
            padding: 15px 100px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }
        
        .logo {
            font-size: 28px;
            font-weight: 700;
            color: var(--white);
            text-decoration: none;
            display: flex;
            align-items: center;
        }
        
        header.scrolled .logo {
            color: var(--primary);
        }
        
        .logo i {
            margin-right: 10px;
            color: var(--primary);
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin-left: 40px;
        }
        
        .nav-links a {
            color: var(--white);
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            position: relative;
        }
        
        header.scrolled .nav-links a {
            color: var(--secondary);
        }
        
        .nav-links a:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background: var(--primary);
            bottom: -5px;
            left: 0;
            transition: width 0.3s;
        }
        
        .nav-links a:hover:after {
            width: 100%;
        }
        
        .nav-links a:hover {
            color: var(--primary);
        }
        
        .menu-toggle {
            display: none;
            cursor: pointer;
            color: var(--white);
            font-size: 24px;
        }
        
        header.scrolled .menu-toggle {
            color: var(--secondary);
        }
        
        /* Hero Section */
        .hero {
            position: relative;
            width: 100%;
            min-height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1603665270146-5430a4a84da9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            padding: 0 100px;
            color: var(--white);
            overflow: hidden;
        }
        
        .hero-content {
            max-width: 600px;
            z-index: 10;
            transform: translateY(50px);
            opacity: 0;
            animation: fadeInUp 1s forwards 0.5s;
        }
        
        .hero h1 {
            font-size: 60px;
            margin-bottom: 20px;
            line-height: 1.2;
        }
        
        .hero p {
            font-size: 18px;
            margin-bottom: 30px;
            line-height: 1.6;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 30px;
            background: var(--primary);
            color: var(--white);
            text-decoration: none;
            border-radius: 30px;
            font-weight: 500;
            transition: all 0.3s ease;
            border: 2px solid var(--primary);
        }
        
        .btn:hover {
            background: transparent;
            color: var(--primary);
        }
        
        .btn-outline {
            background: transparent;
            color: var(--primary);
            margin-left: 15px;
        }
        
        .btn-outline:hover {
            background: var(--primary);
            color: var(--white);
        }
        
        .floating-wheat {
            position: absolute;
            width: 100px;
            opacity: 0.7;
            animation: float 6s infinite ease-in-out;
        }
        
        .wheat1 {
            top: 20%;
            right: 10%;
            animation-delay: 0s;
        }
        
        .wheat2 {
            bottom: 15%;
            left: 8%;
            animation-delay: 1s;
        }
        
        .wheat3 {
            top: 40%;
            left: 15%;
            animation-delay: 2s;
        }
        
        /* About Section */
        .section {
            padding: 100px;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 60px;
            transform: translateY(30px);
            opacity: 0;
        }
        
        .section-title.animated {
            animation: fadeInUp 1s forwards;
        }
        
        .section-title h2 {
            font-size: 40px;
            margin-bottom: 15px;
            color: var(--secondary);
        }
        
        .section-title p {
            font-size: 18px;
            color: #666;
            max-width: 700px;
            margin: 0 auto;
        }
        
        .about-content {
            display: flex;
            align-items: center;
            gap: 50px;
        }
        
        .about-img {
            flex: 1;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
            transform: translateX(-50px);
            opacity: 0;
        }
        
        .about-img.animated {
            animation: fadeInLeft 1s forwards;
        }
        
        .about-img img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.5s ease;
        }
        
        .about-img:hover img {
            transform: scale(1.05);
        }
        
        .about-text {
            flex: 1;
            transform: translateX(50px);
            opacity: 0;
        }
        
        .about-text.animated {
            animation: fadeInRight 1s forwards;
        }
        
        .about-text h3 {
            font-size: 32px;
            margin-bottom: 20px;
            color: var(--secondary);
        }
        
        .about-text p {
            font-size: 16px;
            line-height: 1.8;
            margin-bottom: 20px;
            color: #555;
        }
        
        .features {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 30px;
        }
        
        .feature-item {
            flex: 1 1 200px;
            padding: 20px;
            background: var(--white);
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            transform: translateY(30px);
            opacity: 0;
        }
        
        .feature-item.animated {
            animation: fadeInUp 1s forwards;
        }
        
        .feature-item:nth-child(1) {
            animation-delay: 0.3s;
        }
        
        .feature-item:nth-child(2) {
            animation-delay: 0.5s;
        }
        
        .feature-item:nth-child(3) {
            animation-delay: 0.7s;
        }
        
        .feature-item:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .feature-item i {
            font-size: 30px;
            color: var(--primary);
            margin-bottom: 15px;
        }
        
        .feature-item h4 {
            font-size: 18px;
            margin-bottom: 10px;
        }
        
        /* Products Section */
        .products {
            background-color: var(--white);
        }
        
        .products-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .product-card {
            background: var(--white);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            transform: translateY(50px);
            opacity: 0;
        }
        
        .product-card.animated {
            animation: fadeInUp 1s forwards;
        }
        
        .product-card:nth-child(1) {
            animation-delay: 0.2s;
        }
        
        .product-card:nth-child(2) {
            animation-delay: 0.4s;
        }
        
        .product-card:nth-child(3) {
            animation-delay: 0.6s;
        }
        
        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .product-img {
            height: 250px;
            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: 22px;
            margin-bottom: 10px;
        }
        
        .product-info p {
            color: #666;
            margin-bottom: 15px;
            line-height: 1.6;
        }
        
        .product-price {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .price {
            font-size: 20px;
            font-weight: 600;
            color: var(--primary);
        }
        
        .add-to-cart {
            background: var(--primary);
            color: var(--white);
            border: none;
            padding: 8px 20px;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
        }
        
        .add-to-cart:hover {
            background: #c09555;
        }
        
        /* Process Section */
        .process {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            color: var(--white);
            text-align: center;
        }
        
        .section-title.light h2,
        .section-title.light p {
            color: var(--white);
        }
        
        .process-steps {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 30px;
            margin-top: 50px;
        }
        
        .step {
            flex: 1 1 250px;
            max-width: 300px;
            padding: 30px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
            transform: translateY(50px);
            opacity: 0;
        }
        
        .step.animated {
            animation: fadeInUp 1s forwards;
        }
        
        .step:nth-child(1) {
            animation-delay: 0.2s;
        }
        
        .step:nth-child(2) {
            animation-delay: 0.4s;
        }
        
        .step:nth-child(3) {
            animation-delay: 0.6s;
        }
        
        .step:nth-child(4) {
            animation-delay: 0.8s;
        }
        
        .step:hover {
            background: rgba(212, 167, 98, 0.3);
            transform: translateY(-10px);
        }
        
        .step-number {
            width: 60px;
            height: 60px;
            background: var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 24px;
            font-weight: 700;
        }
        
        .step h3 {
            font-size: 22px;
            margin-bottom: 15px;
        }
        
        .step p {
            color: #ddd;
            line-height: 1.6;
        }
        
        /* Testimonials */
        .testimonials-container {
            display: flex;
            gap: 30px;
            overflow-x: auto;
            padding: 20px 0;
            scroll-snap-type: x mandatory;
        }
        
        .testimonial {
            min-width: 350px;
            background: var(--white);
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
            scroll-snap-align: start;
            transform: translateX(50px);
            opacity: 0;
        }
        
        .testimonial.animated {
            animation: fadeInRight 1s forwards;
        }
        
        .testimonial:nth-child(1) {
            animation-delay: 0.2s;
        }
        
        .testimonial:nth-child(2) {
            animation-delay: 0.4s;
        }
        
        .testimonial:nth-child(3) {
            animation-delay: 0.6s;
        }
        
        .testimonial-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .testimonial-img {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 20px;
        }
        
        .testimonial-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .testimonial-author h4 {
            font-size: 18px;
            margin-bottom: 5px;
        }
        
        .testimonial-author p {
            color: #777;
            font-size: 14px;
        }
        
        .testimonial-text {
            color: #555;
            line-height: 1.8;
            font-style: italic;
            margin-bottom: 20px;
        }
        
        .rating {
            color: var(--primary);
        }
        
        /* Gallery */
        .gallery-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            grid-gap: 15px;
            margin-top: 30px;
        }
        
        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            height: 250px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transform: scale(0.9);
            opacity: 0;
            transition: all 0.5s ease;
        }
        
        .gallery-item.animated {
            animation: zoomIn 1s forwards;
        }
        
        .gallery-item:nth-child(1) {
            animation-delay: 0.1s;
        }
        
        .gallery-item:nth-child(2) {
            animation-delay: 0.2s;
        }
        
        .gallery-item:nth-child(3) {
            animation-delay: 0.3s;
        }
        
        .gallery-item:nth-child(4) {
            animation-delay: 0.4s;
        }
        
        .gallery-item:nth-child(5) {
            animation-delay: 0.5s;
        }
        
        .gallery-item:nth-child(6) {
            animation-delay: 0.6s;
        }
        
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .gallery-item:hover img {
            transform: scale(1.1);
        }
        
        .gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(212, 167, 98, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.3s ease;
        }
        
        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }
        
        .gallery-overlay i {
            color: var(--white);
            font-size: 40px;
        }
        
        /* Contact */
        .contact {
            background: var(--white);
        }
        
        .contact-container {
            display: flex;
            gap: 50px;
        }
        
        .contact-info {
            flex: 1;
            transform: translateX(-50px);
            opacity: 0;
        }
        
        .contact-info.animated {
            animation: fadeInLeft 1s forwards;
        }
        
        .contact-info h3 {
            font-size: 28px;
            margin-bottom: 20px;
        }
        
        .contact-info p {
            color: #555;
            margin-bottom: 30px;
            line-height: 1.8;
        }
        
        .contact-details {
            margin-bottom: 30px;
        }
        
        .contact-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
        }
        
        .contact-item i {
            font-size: 20px;
            color: var(--primary);
            margin-right: 15px;
            margin-top: 5px;
        }
        
        .contact-text h4 {
            font-size: 18px;
            margin-bottom: 5px;
        }
        
        .contact-text p {
            color: #666;
            margin: 0;
        }
        
        .social-links {
            display: flex;
            gap: 15px;
        }
        
        .social-links a {
            width: 40px;
            height: 40px;
            background: var(--light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--secondary);
            transition: all 0.3s ease;
        }
        
        .social-links a:hover {
            background: var(--primary);
            color: var(--white);
            transform: translateY(-5px);
        }
        
        .contact-form {
            flex: 1;
            transform: translateX(50px);
            opacity: 0;
        }
        
        .contact-form.animated {
            animation: fadeInRight 1s forwards;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-family: 'Poppins', sans-serif;
            transition: all 0.3s ease;
        }
        
        .form-control:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(212, 167, 98, 0.2);
        }
        
        textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }
        
        .submit-btn {
            background: var(--primary);
            color: var(--white);
            border: none;
            padding: 12px 30px;
            border-radius: 30px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .submit-btn:hover {
            background: #c09555;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        /* Footer */
        footer {
            background: var(--secondary);
            color: var(--white);
            padding: 80px 100px 30px;
        }
        
        .footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            margin-bottom: 50px;
        }
        
        .footer-col h3 {
            font-size: 20px;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }
        
        .footer-col h3:after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 2px;
            background: var(--primary);
        }
        
        .footer-col p {
            color: #bbb;
            line-height: 1.8;
            margin-bottom: 20px;
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 10px;
        }
        
        .footer-links a {
            color: #bbb;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .footer-links a:hover {
            color: var(--primary);
            padding-left: 5px;
        }
        
        .footer-contact p {
            display: flex;
            align-items: flex-start;
            margin-bottom: 15px;
        }
        
        .footer-contact i {
            color: var(--primary);
            margin-right: 10px;
            margin-top: 5px;
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #bbb;
            font-size: 14px;
        }
        
        /* Animations */
        @keyframes fadeInUp {
            from {
                transform: translateY(50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        
        @keyframes fadeInLeft {
            from {
                transform: translateX(-50px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        @keyframes fadeInRight {
            from {
                transform: translateX(50px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        @keyframes zoomIn {
            from {
                transform: scale(0.9);
                opacity: 0;
            }
            to {
                transform: scale(1);
                opacity: 1;
            }
        }
        
        @keyframes float {
            0% {
                transform: translateY(0) rotate(0deg);
            }
            50% {
                transform: translateY(-20px) rotate(5deg);
            }
            100% {
                transform: translateY(0) rotate(0deg);
            }
        }
        
        /* Responsive */
        @media (max-width: 1200px) {
            header, .hero {
                padding: 0 50px;
            }
            
            .section {
                padding: 80px 50px;
            }
            
            footer {
                padding: 60px 50px 30px;
            }
        }
        
        @media (max-width: 992px) {
            .about-content {
                flex-direction: column;
            }
            
            .contact-container {
                flex-direction: column;
            }
            
            .menu-toggle {
                display: block;
                z-index: 1001;
            }
            
            .nav-links {
                position: fixed;
                top: 0;
                right: -100%;
                width: 300px;
                height: 100vh;
                background: var(--white);
                flex-direction: column;
                align-items: center;
                justify-content: center;
                transition: all 0.5s ease;
                box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
            }
            
            .nav-links.active {
                right: 0;
            }
            
            .nav-links li {
                margin: 15px 0;
            }
            
            .nav-links a {
                color: var(--secondary);
                font-size: 18px;
            }
            
            header.scrolled .nav-links {
                background: var(--white);
            }
        }
        
        @media (max-width: 768px) {
            header, .hero {
                padding: 0 30px;
            }
            
            .section {
                padding: 60px 30px;
            }
            
            footer {
                padding: 50px 30px 30px;
            }
            
            .hero h1 {
                font-size: 40px;
            }
            
            .hero p {
                font-size: 16px;
            }
            
            .section-title h2 {
                font-size: 32px;
            }
            
            .process-steps {
                flex-direction: column;
                align-items: center;
            }
            
            .step {
                max-width: 100%;
            }
        }
        
        @media (max-width: 576px) {
            .hero h1 {
                font-size: 32px;
            }
            
            .hero-buttons {
                display: flex;
                flex-direction: column;
                gap: 15px;
            }
            
            .btn-outline {
                margin-left: 0;
            }
            
            .section-title h2 {
                font-size: 28px;
            }
        }

JavaScript

// Header scroll effect
        window.addEventListener('scroll', function() {
            const header = document.getElementById('header');
            if (window.scrollY > 100) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });

// Mobile menu toggle
        const menuToggle = document.querySelector('.menu-toggle');
        const navLinks = document.querySelector('.nav-links');
        
        menuToggle.addEventListener('click', function() {
            navLinks.classList.toggle('active');
        });

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

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

// Animation on scroll
        function animateOnScroll() {
            const elements = document.querySelectorAll('.section-title, .about-img, .about-text, .feature-item, .product-card, .step, .testimonial, .gallery-item, .contact-info, .contact-form');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.3;
                
                if (elementPosition < screenPosition) {
                    element.classList.add('animated');
                }
            });
        }

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

Aata Chaki Template Preview

Download Options