Premium Nursery Plant Centre 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>GreenHaven Nursery - Premium Plant Centre</title> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> </head> <body class="overflow-x-hidden bg-green-50 font-inter"> <!-- Navigation --> <nav class="fixed w-full z-50 py-4 px-6 glass-nature"> <div class="container mx-auto flex justify-between items-center"> <div class="flex items-center"> <div class="text-3xl font-playfair font-bold text-green-700 tracking-wide"> ? Green<span class="text-amber-600">Haven</span> </div> </div> <div class="hidden lg:flex items-center space-x-8"> <a href="#home" class="text-gray-700 hover:text-green-600 transition-all duration-300 font-medium relative group"> Home <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-green-600 transition-all duration-300 group-hover:w-full"></span> </a> <a href="#plants" class="text-gray-700 hover:text-green-600 transition-all duration-300 font-medium relative group"> Plants <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-green-600 transition-all duration-300 group-hover:w-full"></span> </a> <a href="#categories" class="text-gray-700 hover:text-green-600 transition-all duration-300 font-medium relative group"> Categories <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-green-600 transition-all duration-300 group-hover:w-full"></span> </a> <a href="#services" class="text-gray-700 hover:text-green-600 transition-all duration-300 font-medium relative group"> Services <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-green-600 transition-all duration-300 group-hover:w-full"></span> </a> <a href="#care" class="text-gray-700 hover:text-green-600 transition-all duration-300 font-medium relative group"> Plant Care <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-green-600 transition-all duration-300 group-hover:w-full"></span> </a> <a href="#contact" class="text-gray-700 hover:text-green-600 transition-all duration-300 font-medium relative group"> Contact <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-green-600 transition-all duration-300 group-hover:w-full"></span> </a> </div> <div class="flex items-center space-x-4"> <div class="relative"> <i class="fas fa-heart text-gray-700 hover:text-pink-500 cursor-pointer text-xl transition-colors duration-300"></i> <span class="absolute -top-2 -right-2 bg-pink-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center nature-badge">7</span> </div> <div class="relative"> <i class="fas fa-shopping-cart text-gray-700 hover:text-green-600 cursor-pointer text-xl transition-colors duration-300"></i> <span class="absolute -top-2 -right-2 bg-green-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center nature-badge">3</span> </div> <button class="btn-nature text-white px-6 py-2 rounded-full font-semibold"> Sign In </button> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="min-h-screen seasonal-spring pt-20"> <div class="container mx-auto px-6 py-20"> <div class="grid lg:grid-cols-2 gap-16 items-center"> <div class="leaf-slide-left"> <h1 class="text-6xl md:text-7xl font-playfair font-bold text-gray-900 mb-8 leading-tight"> Bring <span class="text-green-600">Nature</span> <span class="block text-amber-600">Home</span> </h1> <p class="text-2xl text-gray-600 mb-12 leading-relaxed font-light"> Discover thousands of beautiful plants, expert care advice, and everything you need to create your perfect green sanctuary. </p> <div class="flex flex-col sm:flex-row gap-6 mb-16"> <button class="btn-nature text-white px-10 py-4 rounded-full font-bold text-lg"> ? Shop Plants </button> <button class="btn-outline-nature px-10 py-4 rounded-full font-bold text-lg"> ? Plant Care Guide </button> </div> <div class="grid grid-cols-3 gap-8"> <div class="text-center"> <div class="text-4xl font-bold text-green-600 mb-2">5000+</div> <div class="text-gray-500 text-sm">Plant Varieties</div> </div> <div class="text-center"> <div class="text-4xl font-bold text-amber-600 mb-2">15+</div> <div class="text-gray-500 text-sm">Years Experience</div> </div> <div class="text-center"> <div class="text-4xl font-bold text-blue-600 mb-2">98%</div> <div class="text-gray-500 text-sm">Survival Rate</div> </div> </div> </div> <div class="leaf-slide-right"> <div class="relative"> <div class="swaying-plant"> <img src="https://plus.unsplash.com/premium_photo-1663011532132-f9499fa0dbba?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Beautiful Plants" class="rounded-3xl shadow-forest w-full"> </div> <div class="absolute -bottom-10 -left-10 bg-white p-6 rounded-2xl shadow-lg"> <div class="flex items-center space-x-4"> <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center"> <i class="fas fa-truck text-green-600 text-xl"></i> </div> <div> <div class="font-bold text-gray-900">Free Delivery</div> <div class="text-sm text-gray-500">Orders above $75</div> </div> </div> </div> <div class="absolute -top-10 -right-10 bg-amber-500 text-white p-6 rounded-2xl shadow-lg growing-pulse"> <div class="text-center"> <div class="text-2xl font-bold">Expert</div> <div class="text-sm">Care Tips</div> </div> </div> </div> </div> </div> </div> </section> <!-- Categories Section --> <section id="categories" class="py-20 bg-white"> <div class="container mx-auto px-6"> <div class="text-center mb-16 grow-in"> <h2 class="text-5xl font-playfair font-bold text-gray-900 mb-6">Plant Categories</h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed"> From indoor houseplants to outdoor garden varieties, find the perfect plants for every space and skill level. </p> </div> <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> <div class="category-card bg-gradient-to-br from-green-100 to-green-200 p-8 rounded-3xl shadow-forest bloom-in hover:shadow-xl transition-all duration-300"> <div class="text-6xl mb-6 text-center">?</div> <h3 class="text-2xl font-playfair font-bold text-gray-900 mb-4 text-center">Indoor Plants</h3> <p class="text-gray-600 text-center mb-6">Perfect houseplants for every room and lighting condition</p> <div class="text-center"> <span class="text-sm text-green-600 font-semibold">1200+ Varieties</span> </div> </div> <div class="category-card bg-gradient-to-br from-amber-100 to-amber-200 p-8 rounded-3xl shadow-earth bloom-in hover:shadow-xl transition-all duration-300"> <div class="text-6xl mb-6 text-center">?</div> <h3 class="text-2xl font-playfair font-bold text-gray-900 mb-4 text-center">Trees & Shrubs</h3> <p class="text-gray-600 text-center mb-6">Beautiful trees and shrubs for landscaping projects</p> <div class="text-center"> <span class="text-sm text-amber-600 font-semibold">800+ Varieties</span> </div> </div> <div class="category-card bg-gradient-to-br from-pink-100 to-pink-200 p-8 rounded-3xl shadow-lg bloom-in hover:shadow-xl transition-all duration-300"> <div class="text-6xl mb-6 text-center">?</div> <h3 class="text-2xl font-playfair font-bold text-gray-900 mb-4 text-center">Flowering Plants</h3> <p class="text-gray-600 text-center mb-6">Colorful blooms to brighten any garden or home</p> <div class="text-center"> <span class="text-sm text-pink-600 font-semibold">600+ Varieties</span> </div> </div> <div class="category-card bg-gradient-to-br from-blue-100 to-blue-200 p-8 rounded-3xl shadow-lg bloom-in hover:shadow-xl transition-all duration-300"> <div class="text-6xl mb-6 text-center">?</div> <h3 class="text-2xl font-playfair font-bold text-gray-900 mb-4 text-center">Herbs & Vegetables</h3> <p class="text-gray-600 text-center mb-6">Fresh herbs and vegetables for your kitchen garden</p> <div class="text-center"> <span class="text-sm text-blue-600 font-semibold">400+ Varieties</span> </div> </div> </div> </div> </section> <!-- Featured Plants --> <section id="plants" class="py-20 bg-gray-50"> <div class="container mx-auto px-6"> <div class="text-center mb-16 grow-in"> <h2 class="text-5xl font-playfair font-bold text-gray-900 mb-6">Featured Plants</h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed"> Handpicked premium plants with guaranteed health and expert care instructions included. </p> </div> <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> <div class="plant-card bg-white rounded-2xl shadow-lg overflow-hidden stagger-grow"> <div class="relative"> <img src="https://images.unsplash.com/photo-1485955900006-10f4d324d411?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Monstera Deliciosa" class="w-full h-48 object-cover"> <div class="absolute top-4 left-4 bg-green-500 text-white px-3 py-1 rounded-full text-sm font-bold"> BESTSELLER </div> <div class="absolute top-4 right-4 bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-bold"> EASY CARE </div> </div> <div class="p-6"> <h3 class="text-xl font-playfair font-bold text-gray-900 mb-2">Monstera Deliciosa</h3> <p class="text-gray-600 mb-4">Swiss Cheese Plant - Large specimen</p> <div class="flex justify-between items-center mb-4"> <div class="flex items-center space-x-2"> <span class="text-2xl font-bold text-green-600">$45.99</span> </div> <div class="flex items-center space-x-1"> <span class="text-yellow-400">⭐⭐⭐⭐⭐</span> <span class="text-gray-500 text-sm">(234)</span> </div> </div> <div class="flex items-center justify-between mb-4"> <div class="flex items-center space-x-2 text-sm text-gray-500"> <i class="fas fa-sun text-yellow-500"></i> <span>Bright Indirect</span> </div> <div class="flex items-center space-x-2 text-sm text-gray-500"> <i class="fas fa-tint text-blue-500"></i> <span>Weekly</span> </div> </div> <button class="w-full btn-nature text-white py-3 rounded-full font-semibold hover:shadow-lg transition-all duration-300"> ? Add to Cart </button> </div> </div> <div class="plant-card bg-white rounded-2xl shadow-lg overflow-hidden stagger-grow"> <div class="relative"> <img src="https://plus.unsplash.com/premium_photo-1663011532132-f9499fa0dbba?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Fiddle Leaf Fig" class="w-full h-48 object-cover"> <div class="absolute top-4 left-4 bg-purple-500 text-white px-3 py-1 rounded-full text-sm font-bold"> PREMIUM </div> </div> <div class="p-6"> <h3 class="text-xl font-playfair font-bold text-gray-900 mb-2">Fiddle Leaf Fig</h3> <p class="text-gray-600 mb-4">Statement plant - 6ft tall</p> <div class="flex justify-between items-center mb-4"> <div class="flex items-center space-x-2"> <span class="text-2xl font-bold text-green-600">$89.99</span> </div> <div class="flex items-center space-x-1"> <span class="text-yellow-400">⭐⭐⭐⭐⭐</span> <span class="text-gray-500 text-sm">(156)</span> </div> </div> <div class="flex items-center justify-between mb-4"> <div class="flex items-center space-x-2 text-sm text-gray-500"> <i class="fas fa-sun text-yellow-500"></i> <span>Bright Light</span> </div> <div class="flex items-center space-x-2 text-sm text-gray-500"> <i class="fas fa-tint text-blue-500"></i> <span>Bi-weekly</span> </div> </div> <button class="w-full btn-nature text-white py-3 rounded-full font-semibold hover:shadow-lg transition-all duration-300"> ? Add to Cart </button> </div> </div> <div class="plant-card bg-white rounded-2xl shadow-lg overflow-hidden stagger-grow"> <div class="relative"> <img src="https://images.unsplash.com/photo-1463320726281-696a485928c7?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Snake Plant" class="w-full h-48 object-cover"> <div class="absolute top-4 left-4 bg-green-500 text-white px-3 py-1 rounded-full text-sm font-bold"> LOW LIGHT </div> <div class="absolute top-4 right-4 bg-orange-500 text-white px-3 py-1 rounded-full text-sm font-bold"> AIR PURIFIER </div> </div> <div class="p-6"> <h3 class="text-xl font-playfair font-bold text-gray-900 mb-2">Snake Plant</h3> <p class="text-gray-600 mb-4">Sansevieria - Perfect for beginners</p> <div class="flex justify-between items-center mb-4"> <div class="flex items-center space-x-2"> <span class="text-2xl font-bold text-green-600">$24.99</span> </div> <div class="flex items-center space-x-1"> <span class="text-yellow-400">⭐⭐⭐⭐⭐</span> <span class="text-gray-500 text-sm">(342)</span> </div> </div> <div class="flex items-center justify-between mb-4"> <div class="flex items-center space-x-2 text-sm text-gray-500"> <i class="fas fa-moon text-gray-400"></i> <span>Low Light</span> </div> <div class="flex items-center space-x-2 text-sm text-gray-500"> <i class="fas fa-tint text-blue-500"></i> <span>Monthly</span> </div> </div> <button class="w-full btn-nature text-white py-3 rounded-full font-semibold hover:shadow-lg transition-all duration-300"> ? Add to Cart </button> </div> </div> <div class="plant-card bg-white rounded-2xl shadow-lg overflow-hidden stagger-grow"> <div class="relative"> <img src="https://images.unsplash.com/photo-1416879595882-3373a0480b5b?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Peace Lily" class="w-full h-48 object-cover"> <div class="absolute top-4 left-4 bg-pink-500 text-white px-3 py-1 rounded-full text-sm font-bold"> FLOWERING </div> </div> <div class="p-6"> <h3 class="text-xl font-playfair font-bold text-gray-900 mb-2">Peace Lily</h3> <p class="text-gray-600 mb-4">Beautiful white blooms</p> <div class="flex justify-between items-center mb-4"> <div class="flex items-center space-x-2"> <span class="text-2xl font-bold text-green-600">$32.99</span> </div> <div class="flex items-center space-x-1"> <span class="text-yellow-400">⭐⭐⭐⭐⭐</span> <span class="text-gray-500 text-sm">(189)</span> </div> </div> <div class="flex items-center justify-between mb-4"> <div class="flex items-center space-x-2 text-sm text-gray-500"> <i class="fas fa-adjust text-gray-500"></i> <span>Medium Light</span> </div> <div class="flex items-center space-x-2 text-sm text-gray-500"> <i class="fas fa-tint text-blue-500"></i> <span>Weekly</span> </div> </div> <button class="w-full btn-nature text-white py-3 rounded-full font-semibold hover:shadow-lg transition-all duration-300"> ? Add to Cart </button> </div> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="py-20 forest-gradient text-white"> <div class="container mx-auto px-6"> <div class="grid lg:grid-cols-2 gap-16 items-center"> <div class="leaf-slide-left"> <h2 class="text-5xl font-playfair font-bold mb-8"> ? Expert Plant Services </h2> <p class="text-xl mb-10 leading-relaxed text-green-100"> From plant consultation to maintenance, we provide comprehensive services to help your plants thrive. </p> <div class="space-y-6 mb-12"> <div class="flex items-center bg-white/10 p-6 rounded-2xl backdrop-blur-sm"> <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mr-6 growing-pulse"> <i class="fas fa-user-md text-2xl"></i> </div> <div> <h4 class="text-xl font-bold mb-2">Plant Health Consultation</h4> <p class="text-green-100">Expert diagnosis and treatment for sick plants</p> </div> </div> <div class="flex items-center bg-white/10 p-6 rounded-2xl backdrop-blur-sm"> <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mr-6 growing-pulse"> <i class="fas fa-home text-2xl"></i> </div> <div> <h4 class="text-xl font-bold mb-2">Home Plant Setup</h4> <p class="text-green-100">Professional plant arrangement and setup service</p> </div> </div> <div class="flex items-center bg-white/10 p-6 rounded-2xl backdrop-blur-sm"> <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mr-6 growing-pulse"> <i class="fas fa-calendar-alt text-2xl"></i> </div> <div> <h4 class="text-xl font-bold mb-2">Plant Care Subscription</h4> <p class="text-green-100">Regular maintenance visits to keep plants healthy</p> </div> </div> </div> <button class="bg-white text-green-600 px-10 py-4 rounded-full font-bold text-lg hover:shadow-lg transition-all duration-300"> ?️ Book Service </button> </div> <div class="leaf-slide-right"> <div class="relative"> <img src="https://plus.unsplash.com/premium_photo-1679428401686-3182f5ce1992?q=80&w=387&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Plant Services" class="rounded-3xl shadow-2xl fluttering-leaf"> <div class="absolute -bottom-8 -left-8 bg-amber-500 text-white p-8 rounded-2xl shadow-xl"> <div class="text-center"> <div class="text-4xl font-bold">FREE</div> <div class="text-lg">Consultation</div> <div class="text-sm">First Visit</div> </div> </div> </div> </div> </div> </div> </section> <!-- Plant Care Guide --> <section id="care" class="py-20 bg-white"> <div class="container mx-auto px-6"> <div class="text-center mb-16 grow-in"> <h2 class="text-5xl font-playfair font-bold text-gray-900 mb-6">Plant Care Made Simple</h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed"> Learn the essentials of plant care with our expert guides and tips for keeping your plants healthy and thriving. </p> </div> <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> <div class="glass-card-nature p-8 rounded-3xl shadow-lg bloom-in text-center"> <div class="w-20 h-20 forest-gradient rounded-full flex items-center justify-center mx-auto mb-6 growing-pulse"> <i class="fas fa-sun text-3xl text-white"></i> </div> <h3 class="text-2xl font-playfair font-bold text-gray-900 mb-4">Light Requirements</h3> <p class="text-gray-600 leading-relaxed"> Understanding your plant's light needs is crucial for healthy growth and vibrant foliage. </p> </div> <div class="glass-card-nature p-8 rounded-3xl shadow-lg bloom-in text-center"> <div class="w-20 h-20 sky-gradient rounded-full flex items-center justify-center mx-auto mb-6 growing-pulse"> <i class="fas fa-tint text-3xl text-white"></i> </div> <h3 class="text-2xl font-playfair font-bold text-gray-900 mb-4">Watering Guide</h3> <p class="text-gray-600 leading-relaxed"> Learn proper watering techniques and schedules to prevent over or under-watering your plants. </p> </div> <div class="glass-card-nature p-8 rounded-3xl shadow-lg bloom-in text-center"> <div class="w-20 h-20 earth-gradient rounded-full flex items-center justify-center mx-auto mb-6 growing-pulse"> <i class="fas fa-seedling text-3xl text-white"></i> </div> <h3 class="text-2xl font-playfair font-bold text-gray-900 mb-4">Soil & Fertilizer</h3> <p class="text-gray-600 leading-relaxed"> Choose the right soil mix and fertilization schedule for optimal plant nutrition and growth. </p> </div> <div class="glass-card-nature p-8 rounded-3xl shadow-lg bloom-in text-center"> <div class="w-20 h-20 flower-gradient rounded-full flex items-center justify-center mx-auto mb-6 growing-pulse"> <i class="fas fa-bug text-3xl text-white"></i> </div> <h3 class="text-2xl font-playfair font-bold text-gray-900 mb-4">Pest Control</h3> <p class="text-gray-600 leading-relaxed"> Identify and treat common plant pests naturally to keep your plants healthy and pest-free. </p> </div> </div> </div> </section> <!-- Newsletter --> <section class="py-20 forest-gradient text-white"> <div class="container mx-auto px-6"> <div class="max-w-3xl mx-auto text-center grow-in"> <h2 class="text-5xl font-playfair font-bold mb-8">? Join Our Plant Community</h2> <p class="text-xl mb-12 leading-relaxed text-green-100"> Get weekly plant care tips, exclusive offers, and be the first to know about new arrivals and seasonal plants. </p> <div class="glass-card-nature p-8 rounded-3xl"> <div class="flex flex-col md:flex-row gap-4 max-w-xl mx-auto"> <input type="email" placeholder="Enter your email address" class="flex-1 px-6 py-4 rounded-full border-0 focus:outline-none text-gray-900"> <button class="bg-white text-green-600 px-8 py-4 rounded-full font-bold hover:shadow-lg transition-all duration-300"> Subscribe </button> </div> <p class="text-sm text-green-200 mt-4"> Join 15,000+ plant lovers. Unsubscribe anytime. </p> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-20 bg-gray-50"> <div class="container mx-auto px-6"> <div class="grid lg:grid-cols-2 gap-16"> <div class="leaf-slide-left"> <h2 class="text-5xl font-playfair font-bold text-gray-900 mb-8">Visit Our Nursery</h2> <p class="text-xl text-gray-600 mb-10 leading-relaxed"> Come explore our greenhouse and outdoor displays. Our plant experts are here to help you find the perfect plants for your space. </p> <div class="space-y-8"> <div class="flex items-center"> <div class="w-16 h-16 forest-gradient rounded-full flex items-center justify-center mr-6 growing-pulse"> <i class="fas fa-map-marker-alt text-2xl text-white"></i> </div> <div> <h4 class="text-xl font-bold text-gray-900 mb-2">Nursery Location</h4> <p class="text-gray-600">456 Garden Lane, Green Valley<br>Botanical District, State 67890</p> </div> </div> <div class="flex items-center"> <div class="w-16 h-16 earth-gradient rounded-full flex items-center justify-center mr-6 growing-pulse"> <i class="fas fa-phone text-2xl text-white"></i> </div> <div> <h4 class="text-xl font-bold text-gray-900 mb-2">Phone</h4> <p class="text-gray-600">(555) 123-PLANT<br>Mon-Sat: 8AM-7PM, Sun: 9AM-5PM</p> </div> </div> <div class="flex items-center"> <div class="w-16 h-16 flower-gradient rounded-full flex items-center justify-center mr-6 growing-pulse"> <i class="fas fa-envelope text-2xl text-white"></i> </div> <div> <h4 class="text-xl font-bold text-gray-900 mb-2">Email</h4> <p class="text-gray-600">info@greenhaven.com<br>care@greenhaven.com</p> </div> </div> </div> </div> <div class="glass-card-nature p-10 rounded-3xl shadow-lg leaf-slide-right"> <form class="space-y-6"> <div class="grid md:grid-cols-2 gap-6"> <div> <label class="block text-gray-700 font-semibold mb-3">First Name</label> <input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:border-green-500 transition-all duration-300"> </div> <div> <label class="block text-gray-700 font-semibold mb-3">Last Name</label> <input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:border-green-500 transition-all duration-300"> </div> </div> <div> <label class="block text-gray-700 font-semibold mb-3">Email</label> <input type="email" class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:border-green-500 transition-all duration-300"> </div> <div> <label class="block text-gray-700 font-semibold mb-3">Interest</label> <select class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:border-green-500 transition-all duration-300"> <option>General Inquiry</option> <option>Plant Care Question</option> <option>Bulk Order</option> <option>Plant Consultation</option> <option>Landscaping Project</option> <option>Other</option> </select> </div> <div> <label class="block text-gray-700 font-semibold mb-3">Message</label> <textarea rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:border-green-500 transition-all duration-300"></textarea> </div> <button type="submit" class="w-full btn-nature text-white py-4 rounded-xl font-bold text-lg"> Send Message </button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="forest-gradient text-white py-16"> <div class="container mx-auto px-6"> <div class="grid md:grid-cols-4 gap-12 mb-12"> <div> <div class="text-3xl font-playfair font-bold mb-6 tracking-wide"> ? Green<span class="text-amber-300">Haven</span> </div> <p class="text-green-100 mb-6 leading-relaxed"> Your trusted partner in creating beautiful, thriving plant spaces. Expert care, premium plants, guaranteed success. </p> <div class="flex space-x-4"> <i class="fab fa-facebook text-2xl hover:text-amber-300 cursor-pointer transition-colors duration-300"></i> <i class="fab fa-instagram text-2xl hover:text-amber-300 cursor-pointer transition-colors duration-300"></i> <i class="fab fa-pinterest text-2xl hover:text-amber-300 cursor-pointer transition-colors duration-300"></i> <i class="fab fa-youtube text-2xl hover:text-amber-300 cursor-pointer transition-colors duration-300"></i> </div> </div> <div> <h3 class="text-xl font-bold mb-6">Plant Categories</h3> <ul class="space-y-3 text-green-100"> <li><a href="#" class="hover:text-amber-300 transition-colors duration-300">Indoor Plants</a></li> <li><a href="#" class="hover:text-amber-300 transition-colors duration-300">Outdoor Plants</a></li> <li><a href="#" class="hover:text-amber-300 transition-colors duration-300">Flowering Plants</a></li> <li><a href="#" class="hover:text-amber-300 transition-colors duration-300">Trees & Shrubs</a></li> <li><a href="#" class="hover:text-amber-300 transition-colors duration-300">Herbs & Vegetables</a></li> </ul> </div> <div> <h3 class="text-xl font-bold mb-6">Services</h3> <ul class="space-y-3 text-green-100"> <li><a href="#" class="hover:text-amber-300 transition-colors duration-300">Plant Consultation</a></li> <li><a href="#" class="hover:text-amber-300 transition-colors duration-300">Home Setup</a></li> <li><a href="#" class="hover:text-amber-300 transition-colors duration-300">Plant Care Service</a></li> <li><a href="#" class="hover:text-amber-300 transition-colors duration-300">Landscaping</a></li> <li><a href="#" class="hover:text-amber-300 transition-colors duration-300">Plant Rental</a></li> </ul> </div> <div> <h3 class="text-xl font-bold mb-6">Contact Info</h3> <ul class="space-y-3 text-green-100"> <li><i class="fas fa-map-marker-alt mr-3"></i>456 Garden Lane, Green Valley</li> <li><i class="fas fa-phone mr-3"></i>(555) 123-PLANT</li> <li><i class="fas fa-envelope mr-3"></i>info@greenhaven.com</li> <li><i class="fas fa-clock mr-3"></i>Mon-Sat: 8AM-7PM</li> </ul> </div> </div> <div class="border-t border-green-400 pt-8 text-center text-green-100"> <p>© 2024 GreenHaven Nursery. All rights reserved. | Privacy Policy | Terms of Service</p> </div> </div> </footer> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'96d9b08fc7bd4e0d',t:'MTc1NDkzNTgyNi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>
CSS
.font-playfair { font-family: 'Playfair Display', serif; } .font-inter { font-family: 'Inter', sans-serif; } /* Nature-inspired Animations */ .grow-in { opacity: 0; transform: scale(0.8) translateY(30px); transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1); } .grow-in.visible { opacity: 1; transform: scale(1) translateY(0); } .leaf-slide-left { opacity: 0; transform: translateX(-80px) rotate(-5deg); transition: all 1s cubic-bezier(0.4, 0, 0.2, 1); } .leaf-slide-left.visible { opacity: 1; transform: translateX(0) rotate(0deg); } .leaf-slide-right { opacity: 0; transform: translateX(80px) rotate(5deg); transition: all 1s cubic-bezier(0.4, 0, 0.2, 1); } .leaf-slide-right.visible { opacity: 1; transform: translateX(0) rotate(0deg); } .bloom-in { opacity: 0; transform: scale(0.3) rotate(180deg); transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1); } .bloom-in.visible { opacity: 1; transform: scale(1) rotate(0deg); } .stagger-grow { opacity: 0; transform: translateY(40px) scale(0.9); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .stagger-grow.visible { opacity: 1; transform: translateY(0) scale(1); } /* Nature Gradients */ .forest-gradient { background: linear-gradient(135deg, #065f46 0%, #047857 25%, #059669 50%, #10b981 75%, #34d399 100%); } .earth-gradient { background: linear-gradient(135deg, #92400e 0%, #b45309 25%, #d97706 50%, #f59e0b 75%, #fbbf24 100%); } .flower-gradient { background: linear-gradient(135deg, #be185d 0%, #db2777 25%, #ec4899 50%, #f472b6 75%, #f9a8d4 100%); } .sky-gradient { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 25%, #60a5fa 50%, #93c5fd 75%, #dbeafe 100%); } /* Plant Card Hover Effects */ .plant-card { transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .plant-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.1), transparent); transition: left 0.8s; z-index: 1; } .plant-card:hover::before { left: 100%; } .plant-card:hover { transform: translateY(-12px) scale(1.03); box-shadow: 0 25px 50px rgba(16, 185, 129, 0.15); } /* Category Card Nature Effect */ .category-card { transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .category-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%); opacity: 0; transition: opacity 0.3s; } .category-card:hover { transform: rotateY(8deg) rotateX(4deg) translateZ(15px); } .category-card:hover::after { opacity: 1; } /* Glass Morphism Nature Style */ .glass-nature { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(25px); border: 1px solid rgba(16, 185, 129, 0.2); box-shadow: 0 8px 32px rgba(16, 185, 129, 0.1); } .glass-card-nature { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.3); } /* Premium Nature Shadows */ .shadow-forest { box-shadow: 0 20px 40px rgba(16, 185, 129, 0.2); } .shadow-earth { box-shadow: 0 20px 40px rgba(180, 83, 9, 0.2); } /* Button Animations */ .btn-nature { background: linear-gradient(135deg, #059669, #047857); position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .btn-nature::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transition: left 0.6s; } .btn-nature:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(16, 185, 129, 0.4); } .btn-nature:hover::before { left: 100%; } .btn-outline-nature { border: 2px solid #059669; color: #059669; background: transparent; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .btn-outline-nature::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(135deg, #059669, #047857); transition: left 0.4s; z-index: -1; } .btn-outline-nature:hover { color: white; transform: translateY(-3px); } .btn-outline-nature:hover::before { left: 0; } /* Nature Animations */ @keyframes sway-gentle { 0%, 100% { transform: translateX(0px) rotate(0deg); } 25% { transform: translateX(-8px) rotate(-1deg); } 50% { transform: translateX(0px) rotate(0deg); } 75% { transform: translateX(8px) rotate(1deg); } } @keyframes grow-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); } 50% { box-shadow: 0 0 0 25px rgba(16, 185, 129, 0); } } @keyframes leaf-flutter { 0%, 100% { transform: translateY(0px) rotate(0deg); } 25% { transform: translateY(-15px) rotate(2deg); } 50% { transform: translateY(-25px) rotate(0deg); } 75% { transform: translateY(-15px) rotate(-2deg); } } .swaying-plant { animation: sway-gentle 8s ease-in-out infinite; } .growing-pulse { animation: grow-pulse 3s infinite; } .fluttering-leaf { animation: leaf-flutter 6s ease-in-out infinite; } /* Cart Animation */ .cart-grow { animation: cartGrow 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55); } @keyframes cartGrow { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } /* Loading Animation */ .loading-grow::after { content: ''; animation: loadingGrow 2s infinite; } @keyframes loadingGrow { 0%, 20% { content: '?'; } 40% { content: '?'; } 60%, 100% { content: '?'; } } /* Search Animation */ .search-nature { transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); border: 2px solid transparent; } .search-nature:focus { width: 420px; border-color: #059669; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); } /* Notification Badge */ .nature-badge { animation: naturePulse 2.5s infinite; } @keyframes naturePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #f0fdf4; } ::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #059669, #047857); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #047857, #065f46); } /* Responsive Enhancements */ @media (max-width: 768px) { .search-nature:focus { width: 280px; } } /* Seasonal Effects */ .seasonal-spring { background: linear-gradient(45deg, #ecfdf5, #f0fdf4, #dcfce7); } .seasonal-summer { background: linear-gradient(45deg, #fffbeb, #fef3c7, #fde68a); }
JavaScript
// Advanced Intersection Observer with nature-themed animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver(function(entries) { entries.forEach((entry, index) => { if (entry.isIntersecting) { if (entry.target.classList.contains('stagger-grow')) { setTimeout(() => { entry.target.classList.add('visible'); }, index * 200); } else { entry.target.classList.add('visible'); } } }); }, observerOptions); // Observe all animated elements document.querySelectorAll('.grow-in, .leaf-slide-left, .leaf-slide-right, .bloom-in, .stagger-grow').forEach(el => { observer.observe(el); }); // Smooth scrolling document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Cart functionality with nature animation let cartCount = 3; document.querySelectorAll('button:contains("Add to Cart"), button[class*="Add to Cart"]').forEach(button => { if (button.textContent.includes('Add to Cart')) { button.addEventListener('click', function(e) { e.preventDefault(); // Add cart animation const cartIcon = document.querySelector('.fa-shopping-cart').parentElement; cartIcon.classList.add('cart-grow'); // Update cart count cartCount++; const cartBadge = cartIcon.querySelector('span'); cartBadge.textContent = cartCount; cartBadge.classList.add('nature-badge'); // Show success message const plantName = this.closest('.plant-card').querySelector('h3').textContent; alert(`? ${plantName} added to cart! Your plants will love their new home. Cart total: ${cartCount} plants`); // Remove animation class setTimeout(() => { cartIcon.classList.remove('cart-grow'); }, 800); }); } }); // Search functionality const searchInput = document.querySelector('input[placeholder*="Search"]'); searchInput.addEventListener('keypress', function(e) { if (e.key === 'Enter') { const searchTerm = this.value.trim(); if (searchTerm) { alert(`? Searching for "${searchTerm}"... Found 23 beautiful plants matching your search! Redirecting to results.`); this.value = ''; } } }); // Wishlist functionality let wishlistCount = 7; document.querySelector('.fa-heart').addEventListener('click', function() { this.classList.toggle('text-pink-500'); const wishlistBadge = this.parentElement.querySelector('span'); if (this.classList.contains('text-pink-500')) { wishlistCount++; alert('? Plant added to your wishlist! Building your dream garden collection.'); } else { wishlistCount = Math.max(0, wishlistCount - 1); alert('? Plant removed from wishlist. Your garden dreams are still growing!'); } wishlistBadge.textContent = wishlistCount; }); // Shopping cart click document.querySelector('.fa-shopping-cart').addEventListener('click', function() { alert(`? Your Plant Cart\n\nPlants: ${cartCount}\nSubtotal: $${(cartCount * 42.99).toFixed(2)}\nFree care guide included!\n\nReady to bring these beauties home?`); }); // Enhanced form handling document.querySelector('#contact form').addEventListener('submit', function(e) { e.preventDefault(); const submitBtn = this.querySelector('button[type="submit"]'); const originalText = submitBtn.textContent; submitBtn.innerHTML = 'Growing your message<span class="loading-grow"></span>'; submitBtn.disabled = true; setTimeout(() => { alert('? Thank you for reaching out to GreenHaven! Our plant experts will respond within 24 hours with personalized advice for your green space.'); this.reset(); submitBtn.textContent = originalText; submitBtn.disabled = false; }, 2500); }); // Newsletter subscription document.querySelector('input[type="email"]').addEventListener('keypress', function(e) { if (e.key === 'Enter') { e.preventDefault(); const email = this.value.trim(); if (email && email.includes('@')) { alert('? Welcome to the GreenHaven family! You\'ll receive weekly plant care tips, seasonal guides, and exclusive plant parent discounts.'); this.value = ''; } else { alert('Please enter a valid email address to join our plant community.'); } } }); // Enhanced button interactions document.querySelectorAll('button').forEach(button => { button.addEventListener('click', function(e) { // Add click animation this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = ''; }, 150); if (this.textContent.includes('Shop Plants')) { document.querySelector('#plants').scrollIntoView({ behavior: 'smooth' }); } else if (this.textContent.includes('Plant Care Guide')) { document.querySelector('#care').scrollIntoView({ behavior: 'smooth' }); } else if (this.textContent.includes('Book Service')) { alert('?️ Plant Services Available:\n\n• Free plant health consultation\n• Professional plant setup ($75)\n• Monthly care visits ($45/month)\n• Emergency plant rescue ($35)\n\nWhich service interests you?'); } else if (this.textContent.includes('Subscribe')) { e.preventDefault(); const emailInput = this.parentElement.querySelector('input[type="email"]'); if (emailInput && emailInput.value.trim() && emailInput.value.includes('@')) { alert('? Welcome to the GreenHaven family! You\'ll receive weekly plant care tips, seasonal guides, and exclusive plant parent discounts.'); emailInput.value = ''; } else { alert('Please enter a valid email address to join our plant community.'); } } else if (this.textContent.includes('Sign In')) { alert('? Welcome back to GreenHaven!\n\nSign in to access:\n• Your plant care calendar\n• Personalized recommendations\n• Order history & tracking\n• Plant parent rewards'); } }); }); // Category card interactions document.querySelectorAll('.category-card').forEach(card => { card.addEventListener('click', function() { const categoryName = this.querySelector('h3').textContent; alert(`? Exploring ${categoryName}\n\nDiscover our carefully curated selection of ${categoryName.toLowerCase()} with expert care guides and guaranteed healthy arrival!`); }); }); // Plant care guide interactions document.querySelectorAll('.glass-card-nature').forEach(card => { card.addEventListener('click', function() { const careType = this.querySelector('h3').textContent; let careInfo = ''; switch(careType) { case 'Light Requirements': careInfo = '☀️ Light Guide:\n\n• Bright Direct: South-facing windows\n• Bright Indirect: East/West windows\n• Medium Light: North windows\n• Low Light: Interior spaces\n\nTip: Rotate plants weekly for even growth!'; break; case 'Watering Guide': careInfo = '? Watering Tips:\n\n• Check soil moisture first\n• Water thoroughly, then drain\n• Morning watering is best\n• Use room temperature water\n\nRule: When in doubt, wait it out!'; break; case 'Soil & Fertilizer': careInfo = '? Soil & Nutrition:\n\n• Well-draining potting mix\n• Fertilize during growing season\n• Organic options preferred\n• Repot every 1-2 years\n\nTip: Less is more with fertilizer!'; break; case 'Pest Control': careInfo = '? Natural Pest Control:\n\n• Neem oil for aphids\n• Rubbing alcohol for mealybugs\n• Yellow sticky traps for gnats\n• Quarantine new plants\n\nPrevention is the best medicine!'; break; } alert(careInfo); }); }); // Add seasonal background changes function updateSeasonalTheme() { const month = new Date().getMonth(); const body = document.body; // Remove existing seasonal classes body.classList.remove('seasonal-spring', 'seasonal-summer', 'seasonal-autumn', 'seasonal-winter'); if (month >= 2 && month <= 4) { // Spring body.classList.add('seasonal-spring'); } else if (month >= 5 && month <= 7) { // Summer body.classList.add('seasonal-summer'); } } // Enhanced hover effects for plant cards document.querySelectorAll('.plant-card').forEach(card => { card.addEventListener('mouseenter', function() { this.style.zIndex = '10'; // Add subtle sway animation on hover this.style.animation = 'sway-gentle 4s ease-in-out infinite'; }); card.addEventListener('mouseleave', function() { this.style.zIndex = '1'; this.style.animation = ''; }); }); // Parallax effect for swaying elements window.addEventListener('scroll', function() { const scrolled = window.pageYOffset; const swaying = document.querySelectorAll('.swaying-plant, .fluttering-leaf'); swaying.forEach(element => { const speed = scrolled * 0.05; element.style.transform = `translateY(${speed}px) rotate(${speed * 0.01}deg)`; }); }); // Initialize seasonal theme updateSeasonalTheme(); // Add loading animation on page load window.addEventListener('load', function() { document.body.classList.add('loaded'); });
Output Preview
Desktop
Mobile
Fullscreen