Nursery Plant Center Hero Section
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>Green Haven Nursery - Your Garden Paradise</title> </head> <body class="bg-gray-50"> <!-- Navigation --> <nav class="fixed top-0 left-0 right-0 z-50 backdrop-blur-20 bg-white/20 border-b border-white/30"> <div class="container mx-auto px-6 py-4"> <div class="flex items-center justify-between"> <div class="flex items-center space-x-3"> <div class="w-12 h-12 bg-gradient-to-br from-green-400 to-blue-400 rounded-full flex items-center justify-center leaf-sway"> <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 20 20"> <path d="M10 2L3 7v11a1 1 0 001 1h3v-8h6v8h3a1 1 0 001-1V7l-7-5z" /> <path d="M10 2C8 4 6 6 6 8s2 4 4 4 4-2 4-4-2-4-4-6z" /> </svg> </div> <span class="text-2xl font-bold text-gray-700" style="font-family: 'Playfair Display', serif;">Green Haven Nursery</span> </div> <div class="hidden md:flex items-center space-x-8"> <a href="#" class="text-gray-700 hover:text-green-600 font-medium transition-colors">Plants</a> <a href="#" class="text-gray-700 hover:text-green-600 font-medium transition-colors">Garden Supplies</a> <a href="#" class="text-gray-700 hover:text-green-600 font-medium transition-colors">Care Tips</a> <a href="#" class="text-gray-700 hover:text-green-600 font-medium transition-colors">About</a> <button class="bg-gradient-to-r from-green-400 to-blue-400 text-white px-6 py-2 rounded-full font-semibold hover:shadow-lg transition-all"> Visit Us </button> </div> </div> </div> </nav> <!-- Hero Section --> <section class="nursery-hero min-h-screen flex items-center pt-20 relative"> <div class="container mx-auto px-6 relative z-10"> <div class="grid lg:grid-cols-2 gap-16 items-center"> <!-- Left Content --> <div class="text-gray-700"> <div class="bloom-left delay-100 mb-6"> <div class="inline-flex items-center px-5 py-3 rounded-full bg-gradient-to-r from-green-200/40 to-blue-200/40 border border-green-300/40 mb-6"> <span class="w-2 h-2 bg-green-400 rounded-full mr-3 animate-pulse"></span> <span class="text-green-700 font-semibold text-sm">Grow • Nurture • Flourish</span> </div> </div> <h1 class="bloom-left delay-200 nursery-title text-5xl md:text-7xl font-bold leading-tight mb-8"> Your Garden <span class="botanical-script block text-6xl md:text-8xl mb-2">Paradise</span> <span class="block text-4xl md:text-5xl">Awaits</span> </h1> <p class="bloom-left delay-300 text-xl text-gray-600 mb-10 leading-relaxed max-w-2xl"> Discover thousands of beautiful plants, expert gardening advice, and everything you need to create your perfect green space. From indoor houseplants to outdoor garden essentials, we're your trusted partner in growing something beautiful. </p> <div class="bloom-left delay-400 flex flex-col sm:flex-row gap-6 mb-16"> <button class="garden-button text-white px-10 py-5 rounded-full font-bold text-lg"> Explore Plants </button> <button class="backdrop-blur-sm bg-white/30 border-2 border-white/40 text-gray-700 hover:bg-white/40 px-10 py-5 rounded-full font-bold text-lg transition-all"> Garden Services </button> </div> <!-- Growth Stats --> <div class="bloom-left delay-600 grid grid-cols-3 gap-8"> <div class="text-center"> <div class="growth-stats text-4xl md:text-5xl font-bold mb-3">5000+</div> <div class="text-gray-500 font-medium">Plant Varieties</div> </div> <div class="text-center"> <div class="growth-stats text-4xl md:text-5xl font-bold mb-3">25+</div> <div class="text-gray-500 font-medium">Years Experience</div> </div> <div class="text-center"> <div class="growth-stats text-4xl md:text-5xl font-bold mb-3">10K+</div> <div class="text-gray-500 font-medium">Happy Gardeners</div> </div> </div> </div> <!-- Right Content - Plant Finder --> <div class="bloom-right delay-300"> <div class="greenhouse-card rounded-3xl p-8 sm:p-10"> <div class="text-center mb-8"> <div class="w-16 h-16 bg-gradient-to-br from-green-400 to-blue-400 rounded-full flex items-center justify-center mx-auto mb-4 leaf-sway"> <span class="text-3xl">?</span> </div> <h3 class="text-3xl font-bold text-gray-800 mb-3" style="font-family: 'Playfair Display', serif;">Find Your Perfect Plant</h3> <p class="text-gray-600">Let us help you discover the ideal plants for your space</p> </div> <form class="space-y-6"> <div class="grid sm:grid-cols-2 gap-6"> <div> <label class="block text-sm font-bold text-gray-700 mb-3">Plant Type</label> <select class="plant-input w-full px-5 py-4 rounded-xl outline-none"> <option>What are you looking for?</option> <option> Indoor Houseplants</option> <option> Flowering Plants</option> <option> Trees & Shrubs</option> <option> Herbs & Vegetables</option> <option> Succulents & Cacti</option> <option> Tropical Plants</option> </select> </div> <div> <label class="block text-sm font-bold text-gray-700 mb-3">Care Level</label> <select class="plant-input w-full px-5 py-4 rounded-xl outline-none"> <option>Low Maintenance</option> <option>Moderate Care</option> <option>High Maintenance</option> <option>Expert Level</option> </select> </div> </div> <div class="grid sm:grid-cols-2 gap-6"> <div> <label class="block text-sm font-bold text-gray-700 mb-3">Light Requirements</label> <select class="plant-input w-full px-5 py-4 rounded-xl outline-none"> <option> Full Sun</option> <option> Partial Sun</option> <option> Partial Shade</option> <option> Full Shade</option> <option> Indoor Light</option> </select> </div> <div> <label class="block text-sm font-bold text-gray-700 mb-3">Space Size</label> <select class="plant-input w-full px-5 py-4 rounded-xl outline-none"> <option>Small (Desk/Table)</option> <option>Medium (Floor/Corner)</option> <option>Large (Statement Piece)</option> <option>Garden Bed</option> <option>Entire Yard</option> </select> </div> </div> <div class="grid grid-cols-2 gap-6"> <div> <label class="block text-sm font-bold text-gray-700 mb-3">Budget Range</label> <select class="plant-input w-full px-5 py-4 rounded-xl outline-none"> <option>$10 - $25</option> <option>$25 - $50</option> <option>$50 - $100</option> <option>$100 - $250</option> <option>$250+</option> </select> </div> <div> <label class="block text-sm font-bold text-gray-700 mb-3">Purpose</label> <select class="plant-input w-full px-5 py-4 rounded-xl outline-none"> <option>Air Purification</option> <option>Decoration</option> <option>Food Production</option> <option>Privacy Screen</option> <option>Fragrance</option> </select> </div> </div> <div> <label class="block text-sm font-bold text-gray-700 mb-3">Special Preferences</label> <div class="grid grid-cols-2 gap-4"> <label class="flex items-center"> <input type="checkbox" class="mr-3 text-green-500"> <span class="text-sm">Pet-Safe</span> </label> <label class="flex items-center"> <input type="checkbox" class="mr-3 text-green-500"> <span class="text-sm">Native Plants</span> </label> <label class="flex items-center"> <input type="checkbox" class="mr-3 text-green-500"> <span class="text-sm">Drought Tolerant</span> </label> <label class="flex items-center"> <input type="checkbox" class="mr-3 text-green-500"> <span class="text-sm">Fast Growing</span> </label> </div> </div> <button type="submit" class="w-full bg-gradient-to-r from-green-500 to-blue-500 text-white py-5 rounded-xl font-bold text-lg hover:shadow-2xl transition-all duration-300 transform hover:scale-105"> Find My Perfect Plants </button> </form> <!-- Nursery Features --> <div class="mt-10 pt-8 border-t border-gray-200"> <div class="grid grid-cols-3 gap-6 text-center"> <div> <div class="text-3xl font-bold text-green-500 mb-2">FREE</div> <div class="text-xs text-gray-600 font-medium">Plant Care Guide</div> </div> <div> <div class="text-3xl font-bold text-blue-500 mb-2">30</div> <div class="text-xs text-gray-600 font-medium">Day Guarantee</div> </div> <div> <div class="text-3xl font-bold text-purple-500 mb-2">?</div> <div class="text-xs text-gray-600 font-medium">Local Delivery</div> </div> </div> </div> </div> </div> </div> </div> </section> <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:'97718f19f6d27a12',t:'MTc1NjUyODI5MS4wMDAwMDA='};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
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@300;400;500;600;700&family=Dancing+Script:wght@400;500;600;700&display=swap'); * { font-family: 'Inter', sans-serif; } .nursery-hero { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 25%, #a8e6cf 50%, #88d8a3 75%, #7fcdcd 100%); background-size: 400% 400%; animation: naturalFlow 20s ease infinite; position: relative; overflow: hidden; } @keyframes naturalFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .nursery-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 70%, rgba(132, 250, 176, 0.3) 0%, transparent 50%), radial-gradient(circle at 70% 30%, rgba(168, 230, 207, 0.2) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(136, 216, 163, 0.15) 0%, transparent 50%); } .nursery-hero::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="leaves" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M20,50 Q30,30 50,50 Q30,70 20,50" fill="rgba(255,255,255,0.08)"/><path d="M70,20 Q80,10 90,20 Q80,30 70,20" fill="rgba(255,255,255,0.06)"/><circle cx="60" cy="80" r="3" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100%" height="100%" fill="url(%23leaves)"/></svg>'); opacity: 0.4; } .grow-animation { animation: growUp 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; opacity: 0; transform: translateY(50px); } .bloom-left { animation: bloomLeft 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; opacity: 0; transform: translateX(-50px); } .bloom-right { animation: bloomRight 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; opacity: 0; transform: translateX(50px); } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } .delay-400 { animation-delay: 0.4s; } .delay-500 { animation-delay: 0.5s; } .delay-600 { animation-delay: 0.6s; } @keyframes growUp { to { opacity: 1; transform: translateY(0); } } @keyframes bloomLeft { to { opacity: 1; transform: translateX(0); } } @keyframes bloomRight { to { opacity: 1; transform: translateX(0); } } .garden-button { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); box-shadow: 0 10px 30px rgba(132, 250, 176, 0.4); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .garden-button:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(132, 250, 176, 0.6); } .greenhouse-card { backdrop-filter: blur(25px); background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 25px 50px rgba(132, 250, 176, 0.15); } .plant-input { background: rgba(255, 255, 255, 0.9); border: 2px solid rgba(132, 250, 176, 0.3); transition: all 0.3s ease; } .plant-input:focus { border-color: #84fab0; box-shadow: 0 0 0 4px rgba(132, 250, 176, 0.1); background: rgba(255, 255, 255, 1); } .growth-stats { animation: sproutUp 1.5s ease-out forwards; background: linear-gradient(135deg, #ffffff 0%, #8fd3f4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } @keyframes sproutUp { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 0.8; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } } .nursery-title { font-family: 'Playfair Display', serif; background: linear-gradient(135deg, #2d5016 0%, #365314 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .botanical-script { font-family: 'Dancing Script', cursive; background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .plant-badge { background: linear-gradient(135deg, rgba(132, 250, 176, 0.3) 0%, rgba(143, 211, 244, 0.3) 100%); border: 1px solid rgba(132, 250, 176, 0.4); backdrop-filter: blur(15px); } .leaf-sway { animation: leafSway 3s ease-in-out infinite; } @keyframes leafSway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } } .plant-category { transition: all 0.3s ease; border: 2px solid transparent; } .plant-category:hover { transform: translateY(-5px); border-color: #84fab0; box-shadow: 0 15px 30px rgba(132, 250, 176, 0.2); } .plant-category.active { border-color: #84fab0; background: rgba(132, 250, 176, 0.1); }
JavaScript
document.addEventListener('DOMContentLoaded', function () { // Growth animation observer const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver(function (entries) { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.animationPlayState = 'running'; } }); }, observerOptions); // Observe animated elements document.querySelectorAll('[class*="animation"], .growth-stats').forEach(el => { observer.observe(el); }); // Plant finder form submission document.querySelector('form').addEventListener('submit', function (e) { e.preventDefault(); const button = this.querySelector('button[type="submit"]'); const originalText = button.textContent; button.innerHTML = ` <div class="flex items-center justify-center"> <span class="animate-spin text-2xl mr-3">?</span> Growing your plant recommendations... </div> `; button.disabled = true; setTimeout(() => { button.innerHTML = ` <div class="flex items-center justify-center"> <span class="text-2xl mr-2">?</span> Perfect matches found! Check your results </div> `; setTimeout(() => { button.textContent = originalText; button.disabled = false; }, 3000); }, 2500); }); // Plant category interactions document.querySelectorAll('.plant-category').forEach(category => { category.addEventListener('click', function () { // Remove active class from all categories document.querySelectorAll('.plant-category').forEach(cat => { cat.classList.remove('active'); }); // Add active class to clicked category this.classList.add('active'); // Add a gentle bounce effect this.style.transform = 'translateY(-8px) scale(1.05)'; setTimeout(() => { this.style.transform = ''; }, 200); }); }); // Enhanced navigation interactions document.querySelectorAll('nav a').forEach(link => { link.addEventListener('mouseenter', function () { this.style.transform = 'translateY(-2px)'; this.style.textShadow = '0 2px 10px rgba(132, 250, 176, 0.3)'; }); link.addEventListener('mouseleave', function () { this.style.transform = ''; this.style.textShadow = ''; }); }); // Add gentle leaf sway to icons setInterval(() => { document.querySelectorAll('.leaf-sway').forEach(leaf => { leaf.style.transform = 'rotate(3deg)'; setTimeout(() => { leaf.style.transform = 'rotate(-3deg)'; setTimeout(() => { leaf.style.transform = ''; }, 500); }, 500); }); }, 5000); });
Output Preview
Desktop
Mobile
Fullscreen