Mango Farming Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GoldenMango - Premium Mango Farming</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- Header/Navigation --> <header class="header"> <div class="container"> <a href="#" class="logo">Golden<span>Mango</span></a> <nav class="navbar"> <a href="#home">Home</a> <a href="#varieties">Varieties</a> <a href="#cultivation">Cultivation</a> <a href="#benefits">Benefits</a> <a href="#products">Products</a> <a href="#gallery">Gallery</a> <a href="#testimonials">Testimonials</a> <a href="#contact">Contact</a> </nav> <div class="icons"> <div id="menu-btn" class="fas fa-bars"></div> <a href="#" class="btn">Order Now</a> </div> </div> </header> <!-- Hero Section --> <section class="home" id="home"> <div class="container"> <div class="content"> <h3 class="slide-left">Premium <span>Mango Farming</span></h3> <p class="slide-left">Experience the finest quality mangoes grown with sustainable farming practices and decades of expertise.</p> <a href="#products" class="btn slide-left">Our Products</a> <a href="#contact" class="btn btn-outline slide-left">Contact Us</a> </div> <div class="image slide-right"> <img src="https://images.unsplash.com/photo-1601493700631-2b16ec4b4716?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Mango Farm"> <div class="floating-mango mango-1"> <img src="https://cdn-icons-png.flaticon.com/512/2718/2718224.png" alt="Mango"> </div> <div class="floating-mango mango-2"> <img src="https://cdn-icons-png.flaticon.com/512/2718/2718224.png" alt="Mango"> </div> <div class="floating-mango mango-3"> <img src="https://cdn-icons-png.flaticon.com/512/2718/2718224.png" alt="Mango"> </div> </div> </div> </section> <!-- Scrolling Mango Varieties Section --> <section class="varieties-scroller"> <div class="container"> <h2 class="heading">Our <span>Mango Varieties</span></h2> <div class="scroller-container"> <div class="scroller-track"> <div class="scroller-item"> <img src="https://m.media-amazon.com/images/I/61Q8E4jS9FL._AC_UF1000,1000_QL80_.jpg" alt="Alphonso"> <h3>Alphonso</h3> </div> <div class="scroller-item"> <img src="https://5.imimg.com/data5/SELLER/Default/2021/12/QO/YD/JA/3033603/himsagar-mango.jpg" alt="Himsagar"> <h3>Himsagar</h3> </div> <div class="scroller-item"> <img src="https://www.jiomart.com/images/product/original/491000001/lalbagh-malda-mango-1-kg-product-images-o491000001-p491000001-0-202203171004.jpg" alt="Malda"> <h3>Malda</h3> </div> <div class="scroller-item"> <img src="https://www.bigbasket.com/media/uploads/p/l/40162552_3-fresho-kesar-mango.jpg" alt="Kesar"> <h3>Kesar</h3> </div> <div class="scroller-item"> <img src="https://m.media-amazon.com/images/I/61Q8E4jS9FL._AC_UF1000,1000_QL80_.jpg" alt="Alphonso"> <h3>Alphonso</h3> </div> <div class="scroller-item"> <img src="https://5.imimg.com/data5/SELLER/Default/2021/12/QO/YD/JA/3033603/himsagar-mango.jpg" alt="Himsagar"> <h3>Himsagar</h3> </div> <div class="scroller-item"> <img src="https://www.jiomart.com/images/product/original/491000001/lalbagh-malda-mango-1-kg-product-images-o491000001-p491000001-0-202203171004.jpg" alt="Malda"> <h3>Malda</h3> </div> <div class="scroller-item"> <img src="https://www.bigbasket.com/media/uploads/p/l/40162552_3-fresho-kesar-mango.jpg" alt="Kesar"> <h3>Kesar</h3> </div> </div> </div> </div> </section> <!-- Cultivation Process Section --> <section class="cultivation" id="cultivation"> <div class="container"> <h2 class="heading">Our <span>Cultivation Process</span></h2> <div class="process-steps"> <div class="process-card slide-up"> <div class="process-number">01</div> <div class="process-icon"> <i class="fas fa-seedling"></i> </div> <h3>Soil Preparation</h3> <p>We prepare the soil with organic compost and ensure proper drainage for optimal mango tree growth.</p> </div> <div class="process-card slide-up"> <div class="process-number">02</div> <div class="process-icon"> <i class="fas fa-tree"></i> </div> <h3>Planting</h3> <p>Carefully selected saplings are planted at optimal distances to allow for healthy growth.</p> </div> <div class="process-card slide-up"> <div class="process-number">03</div> <div class="process-icon"> <i class="fas fa-tint"></i> </div> <h3>Irrigation</h3> <p>Precision irrigation systems provide the perfect amount of water at the right time.</p> </div> <div class="process-card slide-up"> <div class="process-number">04</div> <div class="process-icon"> <i class="fas fa-bug"></i> </div> <h3>Pest Control</h3> <p>Natural pest control methods protect our mangoes without harmful chemicals.</p> </div> <div class="process-card slide-up"> <div class="process-number">05</div> <div class="process-icon"> <i class="fas fa-sun"></i> </div> <h3>Ripening</h3> <p>Our mangoes ripen naturally on the tree for maximum flavor and sweetness.</p> </div> <div class="process-card slide-up"> <div class="process-number">06</div> <div class="process-icon"> <i class="fas fa-hands"></i> </div> <h3>Harvesting</h3> <p>Each mango is hand-picked at peak ripeness by our experienced farmers.</p> </div> </div> </div> </section> <!-- Benefits Section --> <section class="benefits" id="benefits"> <div class="container"> <div class="image slide-left"> <img src="https://images.unsplash.com/photo-1568702846926-c610b34a5d05?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Mango Benefits"> </div> <div class="content slide-right"> <h3>Health <span>Benefits</span> of Mangoes</h3> <div class="benefits-list"> <div class="benefit-item"> <div class="benefit-icon"> <i class="fas fa-heart"></i> </div> <div class="benefit-text"> <h4>Rich in Antioxidants</h4> <p>Mangoes are packed with antioxidants that help protect your cells from damage.</p> </div> </div> <div class="benefit-item"> <div class="benefit-icon"> <i class="fas fa-brain"></i> </div> <div class="benefit-text"> <h4>Boosts Immunity</h4> <p>High in vitamin C and A, mangoes help strengthen your immune system.</p> </div> </div> <div class="benefit-item"> <div class="benefit-icon"> <i class="fas fa-eye"></i> </div> <div class="benefit-text"> <h4>Promotes Eye Health</h4> <p>Contains lutein and zeaxanthin which help maintain good eyesight.</p> </div> </div> <div class="benefit-item"> <div class="benefit-icon"> <i class="fas fa-digging"></i> </div> <div class="benefit-text"> <h4>Aids Digestion</h4> <p>Mangoes contain enzymes that help break down proteins and improve digestion.</p> </div> </div> </div> <a href="#" class="btn">Learn More</a> </div> </div> </section> <!-- Products Section --> <section class="products" id="products"> <div class="container"> <h2 class="heading">Our <span>Products</span></h2> <div class="product-cards"> <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=1170&q=80" alt="Fresh Mangoes"> <div class="product-badge">Best Seller</div> </div> <div class="product-content"> <h3>Fresh Mangoes</h3> <p>Hand-picked at peak ripeness, our fresh mangoes are available in various varieties.</p> <div class="product-footer"> <div class="price">$2.99 <span>/lb</span></div> <a href="#" class="btn">Add to Cart</a> </div> </div> </div> <div class="product-card"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1603569283847-aa295f0d016a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1169&q=80" alt="Mango Pulp"> </div> <div class="product-content"> <h3>Mango Pulp</h3> <p>100% natural mango pulp with no additives, perfect for smoothies and desserts.</p> <div class="product-footer"> <div class="price">$4.99 <span>/jar</span></div> <a href="#" class="btn">Add to Cart</a> </div> </div> </div> <div class="product-card"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1550583724-b2692b85b150?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Dried Mango"> <div class="product-badge">New</div> </div> <div class="product-content"> <h3>Dried Mango</h3> <p>Naturally dried mango slices with no added sugar, a healthy snack option.</p> <div class="product-footer"> <div class="price">$6.99 <span>/pack</span></div> <a href="#" class="btn">Add to Cart</a> </div> </div> </div> </div> <div class="view-all"> <a href="#" class="btn btn-outline">View All Products</a> </div> </div> </section> <!-- Gallery Section --> <section class="gallery" id="gallery"> <div class="container"> <h2 class="heading">Our <span>Farm Gallery</span></h2> <div class="gallery-grid"> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1601493700631-2b16ec4b4716?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Mango Farm"> <div class="gallery-overlay"> <h3>Mango Orchard</h3> <a href="#" class="gallery-btn"><i class="fas fa-search-plus"></i></a> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1568702846926-c610b34a5d05?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Mango Blossom"> <div class="gallery-overlay"> <h3>Mango Blossom</h3> <a href="#" class="gallery-btn"><i class="fas fa-search-plus"></i></a> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1603569283847-aa295f0d016a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1169&q=80" alt="Harvesting"> <div class="gallery-overlay"> <h3>Harvesting</h3> <a href="#" class="gallery-btn"><i class="fas fa-search-plus"></i></a> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1550583724-b2692b85b150?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Packaging"> <div class="gallery-overlay"> <h3>Packaging</h3> <a href="#" class="gallery-btn"><i class="fas fa-search-plus"></i></a> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1601493700631-2b16ec4b4716?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Farmers"> <div class="gallery-overlay"> <h3>Our Farmers</h3> <a href="#" class="gallery-btn"><i class="fas fa-search-plus"></i></a> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1568702846926-c610b34a5d05?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Products"> <div class="gallery-overlay"> <h3>Our Products</h3> <a href="#" class="gallery-btn"><i class="fas fa-search-plus"></i></a> </div> </div> </div> </div> </section> <!-- Testimonials Section --> <section class="testimonials" id="testimonials"> <div class="container"> <h2 class="heading">Customer <span>Testimonials</span></h2> <div class="testimonial-slider"> <div class="slider-container"> <div class="testimonial-slide active"> <div class="user"> <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah J."> <div class="user-info"> <h3>Sarah J.</h3> <div class="stars"> <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> <p>"The Alphonso mangoes I received were absolutely perfect - sweet, juicy, and fragrant. The best I've had outside of India! The packaging was excellent and they arrived in perfect condition."</p> </div> <div class="testimonial-slide"> <div class="user"> <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Michael T."> <div class="user-info"> <h3>Michael T.</h3> <div class="stars"> <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> <p>"I've been ordering from GoldenMango for three seasons now and they never disappoint. Their commitment to organic farming practices is evident in the superior taste and quality of their mangoes."</p> </div> <div class="testimonial-slide"> <div class="user"> <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Priya K."> <div class="user-info"> <h3>Priya K.</h3> <div class="stars"> <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> <p>"As someone who grew up eating mangoes in India, I'm very particular about quality. GoldenMango's Kesar variety brought back childhood memories - authentic taste and perfect ripeness."</p> </div> </div> <div class="slider-nav"> <button class="prev"><i class="fas fa-chevron-left"></i></button> <button class="next"><i class="fas fa-chevron-right"></i></button> </div> </div> </div> </section> <!-- Contact Section --> <section class="contact" id="contact"> <div class="container"> <h2 class="heading">Contact <span>Us</span></h2> <div class="contact-container"> <div class="contact-info slide-left"> <h3>Get In Touch</h3> <div class="info-box"> <div class="icon"> <i class="fas fa-map-marker-alt"></i> </div> <div class="detail"> <h4>Address</h4> <p>123 Orchard Lane, Mango Valley, CA 90210</p> </div> </div> <div class="info-box"> <div class="icon"> <i class="fas fa-phone-alt"></i> </div> <div class="detail"> <h4>Phone</h4> <p>+1 (800) 555-MANGO</p> </div> </div> <div class="info-box"> <div class="icon"> <i class="fas fa-envelope"></i> </div> <div class="detail"> <h4>Email</h4> <p>info@goldenmango.com</p> </div> </div> <div class="info-box"> <div class="icon"> <i class="fas fa-clock"></i> </div> <div class="detail"> <h4>Business Hours</h4> <p>Monday - Friday: 9am - 5pm</p> <p>Saturday: 10am - 2pm</p> </div> </div> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> </div> </div> <div class="contact-form slide-right"> <h3>Send Us a Message</h3> <form> <div class="input-box"> <input type="text" placeholder="Your Name" required> </div> <div class="input-box"> <input type="email" placeholder="Your Email" required> </div> <div class="input-box"> <input type="text" placeholder="Subject" required> </div> <div class="input-box"> <textarea placeholder="Your Message" required></textarea> </div> <button type="submit" class="btn">Send Message</button> </form> </div> </div> </div> </section> <!-- Newsletter Section --> <section class="newsletter"> <div class="container"> <div class="newsletter-content"> <h3>Subscribe to Our Newsletter</h3> <p>Get updates on seasonal mango varieties, special offers, and farming news.</p> <form> <input type="email" placeholder="Enter your email"> <button type="submit" class="btn">Subscribe</button> </form> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-box"> <h3>Quick Links</h3> <a href="#home"><i class="fas fa-chevron-right"></i> Home</a> <a href="#varieties"><i class="fas fa-chevron-right"></i> Varieties</a> <a href="#cultivation"><i class="fas fa-chevron-right"></i> Cultivation</a> <a href="#benefits"><i class="fas fa-chevron-right"></i> Benefits</a> <a href="#products"><i class="fas fa-chevron-right"></i> Products</a> </div> <div class="footer-box"> <h3>Our Services</h3> <a href="#"><i class="fas fa-chevron-right"></i> Wholesale Supply</a> <a href="#"><i class="fas fa-chevron-right"></i> Farm Tours</a> <a href="#"><i class="fas fa-chevron-right"></i> Export Services</a> <a href="#"><i class="fas fa-chevron-right"></i> Farming Consultancy</a> <a href="#"><i class="fas fa-chevron-right"></i> Organic Certification</a> </div> <div class="footer-box"> <h3>Contact Info</h3> <a href="#"><i class="fas fa-phone"></i> +1 (800) 555-MANGO</a> <a href="#"><i class="fas fa-envelope"></i> info@goldenmango.com</a> <a href="#"><i class="fas fa-map-marker-alt"></i> Mango Valley, CA 90210</a> </div> <div class="footer-box"> <h3>Follow Us</h3> <a href="#"><i class="fab fa-facebook-f"></i> Facebook</a> <a href="#"><i class="fab fa-twitter"></i> Twitter</a> <a href="#"><i class="fab fa-instagram"></i> Instagram</a> <a href="#"><i class="fab fa-youtube"></i> YouTube</a> <a href="#"><i class="fab fa-linkedin-in"></i> LinkedIn</a> </div> </div> <div class="copyright"> <p>© 2023 GoldenMango. All Rights Reserved.</p> </div> </footer> <script src="script.js"></script> </body> </html>
CSS
/* Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Playfair+Display:wght@400;500;600;700&display=swap'); /* Variables */ :root { --primary: #f9a825; --secondary: #4caf50; --dark: #1e1e1e; --light: #f5f5f5; --gray: #777; --light-gray: #eaeaea; --white: #ffffff; --black: #000000; --green: #28a745; --red: #dc3545; --blue: #007bff; } /* Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; text-decoration: none; list-style: none; outline: none; border: none; transition: all 0.2s linear; } html { font-size: 62.5%; scroll-behavior: smooth; overflow-x: hidden; } body { background: var(--white); color: var(--dark); overflow-x: hidden; } section { padding: 8rem 9%; } .btn { display: inline-block; margin-top: 1rem; padding: 1rem 3rem; background: var(--primary); color: var(--white); font-size: 1.7rem; font-weight: 500; border-radius: 0.5rem; cursor: pointer; text-transform: capitalize; } .btn:hover { background: var(--secondary); transform: translateY(-0.3rem); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); } .btn-outline { background: transparent; border: 0.2rem solid var(--primary); color: var(--primary); margin-left: 1rem; } .btn-outline:hover { background: var(--primary); color: var(--white); } .heading { text-align: center; font-size: 4.5rem; margin-bottom: 5rem; position: relative; font-family: 'Playfair Display', serif; } .heading span { color: var(--primary); } .heading::after { content: ''; position: absolute; bottom: -1.5rem; left: 50%; transform: translateX(-50%); width: 10rem; height: 0.3rem; background: var(--primary); border-radius: 0.5rem; } .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } /* Header Styles */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--white); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); padding: 2rem 9%; display: flex; align-items: center; justify-content: space-between; } .header .logo { font-size: 2.5rem; font-weight: 700; color: var(--dark); font-family: 'Playfair Display', serif; } .header .logo span { color: var(--primary); } .header .navbar a { font-size: 1.7rem; margin-left: 2rem; color: var(--dark); position: relative; } .header .navbar a::before { content: ''; position: absolute; bottom: -0.5rem; left: 0; width: 0; height: 0.2rem; background: var(--primary); transition: width 0.3s ease; } .header .navbar a:hover::before { width: 100%; } .header .icons { display: flex; align-items: center; gap: 1.5rem; } .header .icons #menu-btn { font-size: 2.5rem; color: var(--dark); cursor: pointer; display: none; } /* Hero Section */ .home { display: flex; align-items: center; min-height: 100vh; padding-top: 12rem; background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('https://images.unsplash.com/photo-1601493700631-2b16ec4b4716?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80') no-repeat; background-size: cover; background-position: center; background-attachment: fixed; } .home .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .home .content { flex: 1 1 45rem; padding-right: 2rem; } .home .content h3 { font-size: 5.5rem; color: var(--white); text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.3); line-height: 1.2; margin-bottom: 2rem; font-family: 'Playfair Display', serif; } .home .content h3 span { color: var(--primary); } .home .content p { font-size: 1.7rem; color: var(--light); padding: 1rem 0; line-height: 1.5; margin-bottom: 2rem; } .home .image { flex: 1 1 45rem; position: relative; } .home .image img { width: 100%; border-radius: 1rem; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3); animation: float 3s linear infinite; } .floating-mango { position: absolute; animation: float 6s ease-in-out infinite; } .floating-mango img { width: 8rem; height: 8rem; filter: drop-shadow(0 0.5rem 1rem rgba(0, 0, 0, 0.3)); } .mango-1 { top: -3rem; left: -3rem; animation-delay: 0s; } .mango-2 { bottom: 2rem; right: -4rem; animation-delay: 1s; } .mango-3 { top: 50%; right: -5rem; animation-delay: 2s; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2rem); } } /* Varieties Scroller */ .varieties-scroller { background: var(--light-gray); padding: 5rem 0; } .scroller-container { width: 100%; overflow: hidden; position: relative; } .scroller-track { display: flex; animation: scroll 30s linear infinite; width: calc(250px * 16); } .scroller-item { width: 25rem; margin: 0 2rem; text-align: center; } .scroller-item img { width: 100%; height: 25rem; object-fit: cover; border-radius: 1rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .scroller-item:hover img { transform: scale(1.05); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); } .scroller-item h3 { font-size: 2rem; margin-top: 1.5rem; color: var(--dark); } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-250px * 8)); } } /* Cultivation Process */ .process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: 3rem; } .process-card { background: var(--white); border-radius: 1rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); padding: 3rem 2rem; text-align: center; position: relative; overflow: hidden; transition: all 0.3s ease; } .process-card:hover { transform: translateY(-1rem); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); } .process-number { position: absolute; top: 1rem; left: 1rem; font-size: 6rem; font-weight: 700; color: rgba(249, 168, 37, 0.1); z-index: 1; } .process-icon { height: 7rem; width: 7rem; line-height: 7rem; font-size: 2.5rem; color: var(--white); background: var(--primary); border-radius: 50%; margin: 0 auto 1.5rem; position: relative; z-index: 2; transition: all 0.3s ease; } .process-card:hover .process-icon { background: var(--secondary); transform: rotate(360deg); } .process-card h3 { font-size: 2.2rem; color: var(--dark); margin-bottom: 1rem; position: relative; z-index: 2; } .process-card p { font-size: 1.5rem; color: var(--gray); line-height: 1.8; position: relative; z-index: 2; } /* Benefits Section */ .benefits .container { display: flex; align-items: center; flex-wrap: wrap; gap: 4rem; } .benefits .image { flex: 1 1 45rem; } .benefits .image img { width: 100%; border-radius: 1rem; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3); } .benefits .content { flex: 1 1 45rem; } .benefits .content h3 { font-size: 3.5rem; color: var(--dark); margin-bottom: 2rem; font-family: 'Playfair Display', serif; } .benefits .content h3 span { color: var(--primary); } .benefits .benefits-list { margin: 3rem 0; } .benefit-item { display: flex; align-items: flex-start; margin-bottom: 2rem; padding: 1.5rem; border-radius: 0.5rem; transition: all 0.3s ease; } .benefit-item:hover { background: var(--light-gray); transform: translateX(1rem); } .benefit-icon { height: 5rem; width: 5rem; line-height: 5rem; font-size: 2rem; color: var(--white); background: var(--primary); border-radius: 50%; text-align: center; margin-right: 1.5rem; flex-shrink: 0; } .benefit-text h4 { font-size: 1.8rem; color: var(--dark); margin-bottom: 0.5rem; } .benefit-text p { font-size: 1.5rem; color: var(--gray); line-height: 1.6; } /* Products Section */ .product-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: 3rem; } .product-card { background: var(--white); border-radius: 1rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); overflow: hidden; transition: all 0.3s ease; } .product-card:hover { transform: translateY(-1rem); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); } .product-image { position: relative; height: 25rem; overflow: hidden; } .product-image img { width: 100%; height: 100%; object-fit: cover; transition: all 0.5s ease; } .product-card:hover .product-image img { transform: scale(1.1); } .product-badge { position: absolute; top: 1rem; right: 1rem; background: var(--primary); color: var(--white); padding: 0.5rem 1.5rem; border-radius: 0.5rem; font-size: 1.4rem; font-weight: 600; } .product-content { padding: 2rem; } .product-content h3 { font-size: 2.2rem; color: var(--dark); margin-bottom: 1rem; } .product-content p { font-size: 1.5rem; color: var(--gray); line-height: 1.6; margin-bottom: 1.5rem; } .product-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 1.5rem; border-top: 0.1rem solid var(--light-gray); } .product-footer .price { font-size: 2rem; color: var(--primary); font-weight: 700; } .product-footer .price span { font-size: 1.4rem; color: var(--gray); font-weight: 400; } .view-all { text-align: center; margin-top: 4rem; } /* Gallery Section */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: 2rem; } .gallery-item { position: relative; height: 25rem; border-radius: 1rem; overflow: hidden; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: all 0.5s ease; } .gallery-item:hover img { transform: scale(1.1); } .gallery-overlay { position: absolute; bottom: -100%; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.5s ease; } .gallery-item:hover .gallery-overlay { bottom: 0; } .gallery-overlay h3 { font-size: 2rem; color: var(--white); margin-bottom: 1.5rem; } .gallery-btn { height: 5rem; width: 5rem; line-height: 5rem; font-size: 2rem; color: var(--white); background: var(--primary); border-radius: 50%; text-align: center; transition: all 0.3s ease; } .gallery-btn:hover { background: var(--secondary); transform: rotate(360deg); } /* Testimonials Section */ .testimonials { background: var(--light-gray); } .testimonial-slider { position: relative; padding: 2rem; } .slider-container { display: flex; overflow: hidden; position: relative; height: 40rem; } .testimonial-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease; background: var(--white); border-radius: 1rem; padding: 3rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); } .testimonial-slide.active { opacity: 1; } .user { display: flex; align-items: center; margin-bottom: 2rem; } .user img { height: 7rem; width: 7rem; border-radius: 50%; object-fit: cover; margin-right: 1.5rem; } .user .user-info h3 { font-size: 2rem; color: var(--dark); margin-bottom: 0.5rem; } .user .user-info .stars i { font-size: 1.5rem; color: var(--primary); } .testimonial-slide p { font-size: 1.6rem; color: var(--gray); line-height: 1.8; padding: 1rem 0; font-style: italic; } .slider-nav { display: flex; justify-content: center; margin-top: 2rem; gap: 1rem; } .slider-nav button { height: 5rem; width: 5rem; line-height: 5rem; font-size: 2rem; color: var(--white); background: var(--primary); border-radius: 50%; cursor: pointer; transition: all 0.3s ease; } .slider-nav button:hover { background: var(--secondary); transform: scale(1.1); } /* Contact Section */ .contact .contact-container { display: flex; flex-wrap: wrap; gap: 3rem; } .contact .contact-info { flex: 1 1 40rem; padding: 3rem; background: var(--light-gray); border-radius: 1rem; } .contact .contact-info h3 { font-size: 2.5rem; color: var(--dark); margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 0.2rem solid var(--primary); font-family: 'Playfair Display', serif; } .info-box { display: flex; align-items: flex-start; margin-bottom: 2rem; } .info-box .icon { height: 5rem; width: 5rem; line-height: 5rem; font-size: 2rem; color: var(--white); background: var(--primary); border-radius: 50%; text-align: center; margin-right: 1.5rem; flex-shrink: 0; } .info-box .detail h4 { font-size: 1.8rem; color: var(--dark); margin-bottom: 0.5rem; } .info-box .detail p { font-size: 1.5rem; color: var(--gray); } .social-links { display: flex; gap: 1.5rem; margin-top: 3rem; } .social-links a { height: 4.5rem; width: 4.5rem; line-height: 4.5rem; font-size: 1.8rem; color: var(--white); background: var(--primary); border-radius: 50%; text-align: center; transition: all 0.3s ease; } .social-links a:hover { background: var(--secondary); transform: translateY(-0.5rem); } .contact .contact-form { flex: 1 1 40rem; padding: 3rem; background: var(--light-gray); border-radius: 1rem; } .contact .contact-form h3 { font-size: 2.5rem; color: var(--dark); margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 0.2rem solid var(--primary); font-family: 'Playfair Display', serif; } .contact .contact-form .input-box { margin-bottom: 1.5rem; } .contact .contact-form .input-box input, .contact .contact-form .input-box textarea { width: 100%; padding: 1.5rem; font-size: 1.6rem; color: var(--dark); background: var(--white); border-radius: 0.5rem; resize: none; } .contact .contact-form .input-box textarea { height: 15rem; } /* Newsletter Section */ .newsletter { background: var(--primary); padding: 5rem 0; } .newsletter-content { max-width: 60rem; margin: 0 auto; text-align: center; } .newsletter-content h3 { font-size: 3rem; color: var(--white); margin-bottom: 1.5rem; font-family: 'Playfair Display', serif; } .newsletter-content p { font-size: 1.6rem; color: var(--light); margin-bottom: 2rem; } .newsletter-content form { display: flex; max-width: 50rem; margin: 0 auto; } .newsletter-content form input { width: 100%; padding: 1.5rem; font-size: 1.6rem; color: var(--dark); border-radius: 0.5rem 0 0 0.5rem; } .newsletter-content form button { padding: 0 3rem; background: var(--dark); color: var(--white); font-size: 1.6rem; border-radius: 0 0.5rem 0.5rem 0; cursor: pointer; } .newsletter-content form button:hover { background: var(--secondary); } /* Footer */ .footer { background: var(--dark); padding-top: 7rem; } .footer .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); gap: 3rem; } .footer .footer-box h3 { font-size: 2.2rem; color: var(--white); margin-bottom: 2rem; position: relative; font-family: 'Playfair Display', serif; } .footer .footer-box h3::after { content: ''; position: absolute; bottom: -1rem; left: 0; width: 5rem; height: 0.2rem; background: var(--primary); } .footer .footer-box a { display: block; font-size: 1.5rem; color: var(--light-gray); padding: 1rem 0; transition: all 0.3s ease; } .footer .footer-box a:hover { color: var(--primary); transform: translateX(1rem); } .footer .footer-box a i { margin-right: 0.5rem; color: var(--primary); } .footer .footer-box p { font-size: 1.5rem; color: var(--light-gray); margin-bottom: 2rem; } .footer .copyright { text-align: center; padding: 2rem 0; margin-top: 3rem; border-top: 0.1rem solid rgba(255, 255, 255, 0.2); } .footer .copyright p { font-size: 1.6rem; color: var(--light-gray); } .footer .copyright p a { color: var(--primary); } /* Animation Classes */ .slide-left { transform: translateX(-10rem); opacity: 0; transition: all 1s ease; } .slide-right { transform: translateX(10rem); opacity: 0; transition: all 1s ease; } .slide-up { transform: translateY(10rem); opacity: 0; transition: all 1s ease; } .active-animation { transform: translateX(0) translateY(0); opacity: 1; } /* Media Queries */ @media (max-width: 991px) { html { font-size: 55%; } section { padding: 8rem 2rem; } .header { padding: 2rem; } } @media (max-width: 768px) { .header .navbar { position: absolute; top: 99%; left: 0; right: 0; background: var(--white); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); } .header .navbar.active { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } .header .navbar a { display: block; margin: 2rem; font-size: 2rem; } .header .icons #menu-btn { display: inline-block; } .home .content h3 { font-size: 4.5rem; } .benefits .container { flex-direction: column; } .benefits .image, .benefits .content { flex: 1 1 100%; } .contact .contact-container { flex-direction: column; } .contact .contact-info, .contact .contact-form { flex: 1 1 100%; } .newsletter-content form { flex-direction: column; } .newsletter-content form input { border-radius: 0.5rem; margin-bottom: 1rem; } .newsletter-content form button { border-radius: 0.5rem; width: 100%; } } @media (max-width: 450px) { html { font-size: 50%; } .heading { font-size: 3.5rem; } .process-steps, .product-cards, .gallery-grid { grid-template-columns: 1fr; } }
JavaScript
document.addEventListener('DOMContentLoaded', function() { // Header Scroll Effect window.addEventListener('scroll', function() { const header = document.querySelector('.header'); if (window.scrollY > 100) { header.style.background = 'rgba(255, 255, 255, 0.95)'; header.style.boxShadow = '0 0.5rem 1rem rgba(0, 0, 0, 0.1)'; header.style.padding = '1.5rem 9%'; } else { header.style.background = 'var(--white)'; header.style.boxShadow = '0 0.5rem 1rem rgba(0, 0, 0, 0.1)'; header.style.padding = '2rem 9%'; } }); // Mobile Menu Toggle const menuBtn = document.querySelector('#menu-btn'); const navbar = document.querySelector('.navbar'); menuBtn.addEventListener('click', function() { navbar.classList.toggle('active'); menuBtn.classList.toggle('fa-times'); }); // Close Menu on Scroll window.addEventListener('scroll', function() { navbar.classList.remove('active'); menuBtn.classList.remove('fa-times'); }); // Scroll Animation function animateOnScroll() { const elements = document.querySelectorAll('.slide-left, .slide-right, .slide-up'); elements.forEach(element => { const elementPosition = element.getBoundingClientRect().top; const screenPosition = window.innerHeight / 1.3; if (elementPosition < screenPosition) { element.classList.add('active-animation'); } }); } window.addEventListener('scroll', animateOnScroll); animateOnScroll(); // Run once on page load // Testimonial Slider const testimonialSlides = document.querySelectorAll('.testimonial-slide'); const prevBtn = document.querySelector('.prev'); const nextBtn = document.querySelector('.next'); let currentTestimonialSlide = 0; function showTestimonialSlide(n) { testimonialSlides.forEach(slide => { slide.classList.remove('active'); }); currentTestimonialSlide = (n + testimonialSlides.length) % testimonialSlides.length; testimonialSlides[currentTestimonialSlide].classList.add('active'); } prevBtn.addEventListener('click', function() { showTestimonialSlide(currentTestimonialSlide - 1); }); nextBtn.addEventListener('click', function() { showTestimonialSlide(currentTestimonialSlide + 1); }); // Auto Slide let testimonialSlideInterval = setInterval(function() { showTestimonialSlide(currentTestimonialSlide + 1); }, 5000); // Pause on hover const testimonialSliderContainer = document.querySelector('.slider-container'); testimonialSliderContainer.addEventListener('mouseenter', function() { clearInterval(testimonialSlideInterval); }); testimonialSliderContainer.addEventListener('mouseleave', function() { testimonialSlideInterval = setInterval(function() { showTestimonialSlide(currentTestimonialSlide + 1); }, 5000); }); // 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' }); } }); }); // Form Submission Handling (prevent default) document.querySelectorAll('form').forEach(form => { form.addEventListener('submit', function(e) { e.preventDefault(); // Here you would typically add AJAX form submission alert('Form submitted! In a real application, this would send the data to your server.'); this.reset(); }); }); // Process Cards Animation const processCards = document.querySelectorAll('.process-card'); processCards.forEach(card => { card.addEventListener('mouseenter', function() { const icon = this.querySelector('.process-icon'); icon.style.transform = 'rotate(360deg)'; }); card.addEventListener('mouseleave', function() { const icon = this.querySelector('.process-icon'); icon.style.transform = 'rotate(0)'; }); }); // Gallery Item Animation const galleryItems = document.querySelectorAll('.gallery-item'); galleryItems.forEach(item => { item.addEventListener('mouseenter', function() { const overlay = this.querySelector('.gallery-overlay'); overlay.style.bottom = '0'; }); item.addEventListener('mouseleave', function() { const overlay = this.querySelector('.gallery-overlay'); overlay.style.bottom = '-100%'; }); }); // Benefit Items Animation const benefitItems = document.querySelectorAll('.benefit-item'); benefitItems.forEach(item => { item.addEventListener('mouseenter', function() { const icon = this.querySelector('.benefit-icon'); icon.style.background = 'var(--secondary)'; icon.style.transform = 'rotate(360deg)'; }); item.addEventListener('mouseleave', function() { const icon = this.querySelector('.benefit-icon'); icon.style.background = 'var(--primary)'; icon.style.transform = 'rotate(0)'; }); }); });
Output Preview
Desktop
Mobile
Fullscreen