Amazing Nursery Plants Garden Center
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>GreenThumb Nursery | Premium Plants & Garden Center | Expert Plant Care</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-light fixed-top navbar-custom"> <div class="container"> <a class="navbar-brand elegant-font" href="#home">? GreenThumb Nursery</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#plants">Plants</a> </li> <li class="nav-item"> <a class="nav-link" href="#services">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#tools">Care Tools</a> </li> <li class="nav-item"> <button class="btn btn-shop" onclick="scrollToContact()"> <i class="fas fa-shopping-cart me-2"></i>Shop Now </button> </li> </ul> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="hero-section"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-7"> <div class="hero-content"> <div class="hero-greeting">? Welcome to Nature's Paradise</div> <h1 class="hero-title elegant-font">GreenThumb Nursery</h1> <p class="hero-subtitle">Transform your space into a lush green sanctuary with our premium plants, expert care guidance, and comprehensive gardening solutions. From indoor houseplants to outdoor gardens, we nurture your green dreams.</p> <div class="hero-features"> <span class="feature-tag">Premium Plants</span> <span class="feature-tag">Expert Care</span> <span class="feature-tag">Garden Design</span> <span class="feature-tag">Plant Health</span> </div> <div class="hero-buttons"> <a href="#plants" class="btn btn-custom btn-primary-custom">Browse Plants</a> <a href="#services" class="btn btn-custom btn-secondary-custom">Garden Services</a> </div> </div> </div> <div class="col-lg-5"> <div class="hero-image text-center"> <div class="plant-showcase"> <i class="fas fa-seedling"></i> </div> </div> </div> </div> </div> </section> <!-- Plants Section --> <section id="plants" class="plants-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll elegant-font">Premium Plant Collection</h2> <p class="section-subtitle animate-on-scroll">Discover our carefully curated selection of healthy, vibrant plants for every space and skill level</p> </div> </div> <div class="plant-filters animate-on-scroll"> <button class="filter-btn active" onclick="filterPlants('all')">All Plants</button> <button class="filter-btn" onclick="filterPlants('indoor')">Indoor</button> <button class="filter-btn" onclick="filterPlants('outdoor')">Outdoor</button> <button class="filter-btn" onclick="filterPlants('flowering')">Flowering</button> <button class="filter-btn" onclick="filterPlants('succulents')">Succulents</button> </div> <div class="plants-grid"> <div class="plant-card animate-on-scroll" data-category="indoor"> <div class="plant-image"> <i class="fas fa-leaf"></i> <div class="plant-badge">Popular</div> <div class="plant-price">$24.99</div> <div class="plant-overlay"> <a href="#" class="plant-btn" onclick="viewPlant('Monstera Deliciosa')"> <i class="fas fa-eye me-2"></i>View </a> <a href="#" class="plant-btn" onclick="addToCart('Monstera Deliciosa')"> <i class="fas fa-shopping-cart me-2"></i>Add </a> </div> </div> <div class="plant-content"> <h4 class="plant-title">Monstera Deliciosa</h4> <div class="plant-scientific">Monstera deliciosa</div> <div class="plant-features"> <div class="plant-feature"> <div class="plant-feature-icon"><i class="fas fa-sun"></i></div> <div class="plant-feature-label">Light</div> <div class="plant-feature-value">Bright</div> </div> <div class="plant-feature"> <div class="plant-feature-icon"><i class="fas fa-tint"></i></div> <div class="plant-feature-label">Water</div> <div class="plant-feature-value">Weekly</div> </div> <div class="plant-feature"> <div class="plant-feature-icon"><i class="fas fa-thermometer-half"></i></div> <div class="plant-feature-label">Care</div> <div class="plant-feature-value">Easy</div> </div> </div> </div> </div> <div class="plant-card animate-on-scroll" data-category="succulents"> <div class="plant-image"> <i class="fas fa-spa"></i> <div class="plant-badge">Low Care</div> <div class="plant-price">$12.99</div> <div class="plant-overlay"> <a href="#" class="plant-btn" onclick="viewPlant('Jade Plant')"> <i class="fas fa-eye me-2"></i>View </a> <a href="#" class="plant-btn" onclick="addToCart('Jade Plant')"> <i class="fas fa-shopping-cart me-2"></i>Add </a> </div> </div> <div class="plant-content"> <h4 class="plant-title">Jade Plant</h4> <div class="plant-scientific">Crassula ovata</div> <div class="plant-features"> <div class="plant-feature"> <div class="plant-feature-icon"><i class="fas fa-sun"></i></div> <div class="plant-feature-label">Light</div> <div class="plant-feature-value">Direct</div> </div> <div class="plant-feature"> <div class="plant-feature-icon"><i class="fas fa-tint"></i></div> <div class="plant-feature-label">Water</div> <div class="plant-feature-value">Monthly</div> </div> <div class="plant-feature"> <div class="plant-feature-icon"><i class="fas fa-thermometer-half"></i></div> <div class="plant-feature-label">Care</div> <div class="plant-feature-value">Easy</div> </div> </div> </div> </div> <div class="plant-card animate-on-scroll" data-category="flowering"> <div class="plant-image"> <i class="fas fa-flower"></i> <div class="plant-badge">Blooming</div> <div class="plant-price">$18.99</div> <div class="plant-overlay"> <a href="#" class="plant-btn" onclick="viewPlant('Peace Lily')"> <i class="fas fa-eye me-2"></i>View </a> <a href="#" class="plant-btn" onclick="addToCart('Peace Lily')"> <i class="fas fa-shopping-cart me-2"></i>Add </a> </div> </div> <div class="plant-content"> <h4 class="plant-title">Peace Lily</h4> <div class="plant-scientific">Spathiphyllum wallisii</div> <div class="plant-features"> <div class="plant-feature"> <div class="plant-feature-icon"><i class="fas fa-sun"></i></div> <div class="plant-feature-label">Light</div> <div class="plant-feature-value">Low</div> </div> <div class="plant-feature"> <div class="plant-feature-icon"><i class="fas fa-tint"></i></div> <div class="plant-feature-label">Water</div> <div class="plant-feature-value">Weekly</div> </div> <div class="plant-feature"> <div class="plant-feature-icon"><i class="fas fa-thermometer-half"></i></div> <div class="plant-feature-label">Care</div> <div class="plant-feature-value">Medium</div> </div> </div> </div> </div> <div class="plant-card animate-on-scroll" data-category="outdoor"> <div class="plant-image"> <i class="fas fa-tree"></i> <div class="plant-badge">Hardy</div> <div class="plant-price">$45.99</div> <div class="plant-overlay"> <a href="#" class="plant-btn" onclick="viewPlant('Japanese Maple')"> <i class="fas fa-eye me-2"></i>View </a> <a href="#" class="plant-btn" onclick="addToCart('Japanese Maple')"> <i class="fas fa-shopping-cart me-2"></i>Add </a> </div> </div> <div class="plant-content"> <h4 class="plant-title">Japanese Maple</h4> <div class="plant-scientific">Acer palmatum</div> <div class="plant-features"> <div class="plant-feature"> <div class="plant-feature-icon"><i class="fas fa-sun"></i></div> <div class="plant-feature-label">Light</div> <div class="plant-feature-value">Partial</div> </div> <div class="plant-feature"> <div class="plant-feature-icon"><i class="fas fa-tint"></i></div> <div class="plant-feature-label">Water</div> <div class="plant-feature-value">Regular</div> </div> <div class="plant-feature"> <div class="plant-feature-icon"><i class="fas fa-thermometer-half"></i></div> <div class="plant-feature-label">Care</div> <div class="plant-feature-value">Medium</div> </div> </div> </div> </div> <div class="plant-card animate-on-scroll" data-category="indoor"> <div class="plant-image"> <i class="fas fa-seedling"></i> <div class="plant-badge">Air Purifier</div> <div class="plant-price">$16.99</div> <div class="plant-overlay"> <a href="#" class="plant-btn" onclick="viewPlant('Snake Plant')"> <i class="fas fa-eye me-2"></i>View </a> <a href="#" class="plant-btn" onclick="addToCart('Snake Plant')"> <i class="fas fa-shopping-cart me-2"></i>Add </a> </div> </div> <div class="plant-content"> <h4 class="plant-title">Snake Plant</h4> <div class="plant-scientific">Sansevieria trifasciata</div> <div class="plant-features"> <div class="plant-feature"> <div class="plant-feature-icon"><i class="fas fa-sun"></i></div> <div class="plant-feature-label">Light</div> <div class="plant-feature-value">Any</div> </div> <div class="plant-feature"> <div class="plant-feature-icon"><i class="fas fa-tint"></i></div> <div class="plant-feature-label">Water</div> <div class="plant-feature-value">Monthly</div> </div> <div class="plant-feature"> <div class="plant-feature-icon"><i class="fas fa-thermometer-half"></i></div> <div class="plant-feature-label">Care</div> <div class="plant-feature-value">Easy</div> </div> </div> </div> </div> <div class="plant-card animate-on-scroll" data-category="flowering"> <div class="plant-image"> <i class="fas fa-rose"></i> <div class="plant-badge">Fragrant</div> <div class="plant-price">$22.99</div> <div class="plant-overlay"> <a href="#" class="plant-btn" onclick="viewPlant('Lavender')"> <i class="fas fa-eye me-2"></i>View </a> <a href="#" class="plant-btn" onclick="addToCart('Lavender')"> <i class="fas fa-shopping-cart me-2"></i>Add </a> </div> </div> <div class="plant-content"> <h4 class="plant-title">English Lavender</h4> <div class="plant-scientific">Lavandula angustifolia</div> <div class="plant-features"> <div class="plant-feature"> <div class="plant-feature-icon"><i class="fas fa-sun"></i></div> <div class="plant-feature-label">Light</div> <div class="plant-feature-value">Full Sun</div> </div> <div class="plant-feature"> <div class="plant-feature-icon"><i class="fas fa-tint"></i></div> <div class="plant-feature-label">Water</div> <div class="plant-feature-value">Low</div> </div> <div class="plant-feature"> <div class="plant-feature-icon"><i class="fas fa-thermometer-half"></i></div> <div class="plant-feature-label">Care</div> <div class="plant-feature-value">Easy</div> </div> </div> </div> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="services-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll elegant-font">Garden Services</h2> <p class="section-subtitle animate-on-scroll">Complete plant care and garden design solutions for every green enthusiast</p> </div> </div> <div class="services-grid"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-seedling"></i> </div> <h4 class="service-title">Plant Care Consultation</h4> <p class="service-description">Expert guidance for keeping your plants healthy and thriving with personalized care plans.</p> <ul class="service-features"> <li><i class="fas fa-check"></i>Plant health assessment</li> <li><i class="fas fa-check"></i>Custom care schedules</li> <li><i class="fas fa-check"></i>Pest and disease diagnosis</li> <li><i class="fas fa-check"></i>Fertilization programs</li> <li><i class="fas fa-check"></i>Seasonal care guidance</li> </ul> </div> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-palette"></i> </div> <h4 class="service-title">Garden Design & Planning</h4> <p class="service-description">Transform your outdoor space with professional landscape design and plant selection.</p> <ul class="service-features"> <li><i class="fas fa-check"></i>Custom garden layouts</li> <li><i class="fas fa-check"></i>Plant selection guidance</li> <li><i class="fas fa-check"></i>Seasonal color planning</li> <li><i class="fas fa-check"></i>Hardscape integration</li> <li><i class="fas fa-check"></i>Maintenance planning</li> </ul> </div> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-home"></i> </div> <h4 class="service-title">Indoor Plant Setup</h4> <p class="service-description">Create beautiful indoor gardens with proper plant placement and care systems.</p> <ul class="service-features"> <li><i class="fas fa-check"></i>Space assessment</li> <li><i class="fas fa-check"></i>Light requirement analysis</li> <li><i class="fas fa-check"></i>Air purification planning</li> <li><i class="fas fa-check"></i>Watering system setup</li> <li><i class="fas fa-check"></i>Decorative pot selection</li> </ul> </div> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-tools"></i> </div> <h4 class="service-title">Plant Maintenance</h4> <p class="service-description">Regular maintenance services to keep your plants healthy and your garden beautiful.</p> <ul class="service-features"> <li><i class="fas fa-check"></i>Regular watering service</li> <li><i class="fas fa-check"></i>Pruning and trimming</li> <li><i class="fas fa-check"></i>Fertilization programs</li> <li><i class="fas fa-check"></i>Pest control treatments</li> <li><i class="fas fa-check"></i>Seasonal plant care</li> </ul> </div> </div> </div> </section> <!-- Tools Section --> <section id="tools" class="tools-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll elegant-font">Plant Care Tools</h2> <p class="section-subtitle animate-on-scroll">Interactive tools to help you care for your plants like a pro</p> </div> </div> <div class="tools-container"> <!-- Plant Care Calculator --> <div class="tool-card animate-on-scroll"> <div class="tool-header"> <div class="tool-icon"> <i class="fas fa-calculator"></i> </div> <h4 class="tool-title">Watering Schedule Calculator</h4> </div> <div class="tool-content"> <p>Calculate the perfect watering schedule for your plants based on type, size, and environment.</p> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Plant Type</label> <select class="form-control" id="plantType"> <option value="">Select plant type</option> <option value="succulent">Succulent</option> <option value="tropical">Tropical</option> <option value="flowering">Flowering</option> <option value="foliage">Foliage</option> <option value="herb">Herb</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Pot Size (inches)</label> <input type="number" class="form-control" id="potSize" placeholder="Enter pot diameter"> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Light Conditions</label> <select class="form-control" id="lightConditions"> <option value="low">Low Light</option> <option value="medium" selected>Medium Light</option> <option value="bright">Bright Light</option> <option value="direct">Direct Sun</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Season</label> <select class="form-control" id="season"> <option value="spring">Spring</option> <option value="summer">Summer</option> <option value="fall">Fall</option> <option value="winter">Winter</option> </select> </div> </div> </div> <button class="btn-calculate" onclick="calculateWatering()">Calculate Schedule</button> <div class="result-display" id="wateringResult"> <div class="result-title">Your Watering Schedule:</div> <div id="wateringDetails"></div> </div> </div> </div> <!-- Plant Health Checker --> <div class="tool-card animate-on-scroll"> <div class="tool-header"> <div class="tool-icon"> <i class="fas fa-stethoscope"></i> </div> <h4 class="tool-title">Plant Health Diagnostic</h4> </div> <div class="tool-content"> <p>Diagnose common plant problems and get treatment recommendations.</p> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Primary Symptom</label> <select class="form-control" id="symptom"> <option value="">Select main symptom</option> <option value="yellowing">Yellow leaves</option> <option value="browning">Brown/crispy leaves</option> <option value="wilting">Wilting/drooping</option> <option value="spots">Spots on leaves</option> <option value="pests">Visible pests</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Affected Area</label> <select class="form-control" id="affectedArea"> <option value="lower">Lower leaves</option> <option value="upper">Upper leaves</option> <option value="all">All leaves</option> <option value="new">New growth</option> <option value="stems">Stems/branches</option> </select> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Recent Changes</label> <select class="form-control" id="recentChanges"> <option value="none">No changes</option> <option value="watering">Changed watering</option> <option value="location">Moved location</option> <option value="fertilizer">Added fertilizer</option> <option value="repotted">Recently repotted</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Symptom Duration</label> <select class="form-control" id="duration"> <option value="days">Few days</option> <option value="week">About a week</option> <option value="weeks">Several weeks</option> <option value="month">Over a month</option> </select> </div> </div> </div> <button class="btn-calculate" onclick="diagnosePlant()">Diagnose Problem</button> <div class="result-display" id="diagnosisResult"> <div class="result-title">Plant Health Assessment:</div> <div id="diagnosisDetails"></div> </div> </div> </div> <!-- Fertilizer Calculator --> <div class="tool-card animate-on-scroll"> <div class="tool-header"> <div class="tool-icon"> <i class="fas fa-flask"></i> </div> <h4 class="tool-title">Fertilizer Calculator</h4> </div> <div class="tool-content"> <p>Calculate the right amount and frequency of fertilizer for optimal plant growth.</p> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Plant Category</label> <select class="form-control" id="plantCategory"> <option value="">Select category</option> <option value="houseplant">Houseplant</option> <option value="vegetable">Vegetable Garden</option> <option value="flower">Flower Garden</option> <option value="tree">Trees & Shrubs</option> <option value="lawn">Lawn Grass</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Growth Stage</label> <select class="form-control" id="growthStage"> <option value="seedling">Seedling</option> <option value="young">Young plant</option> <option value="mature">Mature plant</option> <option value="flowering">Flowering</option> <option value="dormant">Dormant</option> </select> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Garden Area (sq ft)</label> <input type="number" class="form-control" id="gardenArea" placeholder="Enter area size"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Current Season</label> <select class="form-control" id="fertilizerSeason"> <option value="spring">Spring</option> <option value="summer">Summer</option> <option value="fall">Fall</option> <option value="winter">Winter</option> </select> </div> </div> </div> <button class="btn-calculate" onclick="calculateFertilizer()">Calculate Fertilizer</button> <div class="result-display" id="fertilizerResult"> <div class="result-title">Fertilizer Recommendations:</div> <div id="fertilizerDetails"></div> </div> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll elegant-font">Visit Our Nursery</h2> <p class="section-subtitle animate-on-scroll">Ready to start your green journey? Visit us for expert advice and premium plants</p> </div> </div> <div class="contact-content animate-on-scroll"> <div class="contact-info"> <h3 class="contact-title elegant-font">Let's Grow Together</h3> <p class="contact-description">Whether you're a beginner or experienced gardener, our plant experts are here to help you create the perfect green space. Visit our nursery for personalized advice and discover our extensive collection of healthy, beautiful plants.</p> <div class="contact-methods"> <div class="contact-method"> <div class="contact-icon"> <i class="fas fa-envelope"></i> </div> <div> <div><strong>Email</strong></div> <div>info@greenthumb-nursery.com</div> </div> </div> <div class="contact-method"> <div class="contact-icon"> <i class="fas fa-phone"></i> </div> <div> <div><strong>Phone</strong></div> <div>+1 (555) PLANTS-1</div> </div> </div> <div class="contact-method"> <div class="contact-icon"> <i class="fas fa-map-marker-alt"></i> </div> <div> <div><strong>Location</strong></div> <div>123 Garden Lane, Green Valley</div> </div> </div> <div class="contact-method"> <div class="contact-icon"> <i class="fas fa-clock"></i> </div> <div> <div><strong>Hours</strong></div> <div>Daily, 8 AM - 6 PM</div> </div> </div> </div> </div> <div class="contact-form"> <form id="contactForm"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="form-label">First Name *</label> <input type="text" class="form-control" placeholder="Your first name" required> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Last Name *</label> <input type="text" class="form-control" placeholder="Your last name" required> </div> </div> </div> <div class="form-group"> <label class="form-label">Email Address *</label> <input type="email" class="form-control" placeholder="your.email@example.com" required> </div> <div class="form-group"> <label class="form-label">Plant Interest</label> <select class="form-control"> <option value="">Select your interest</option> <option value="houseplants">Indoor Houseplants</option> <option value="garden">Outdoor Garden Plants</option> <option value="succulents">Succulents & Cacti</option> <option value="herbs">Herbs & Vegetables</option> <option value="design">Garden Design Service</option> <option value="care">Plant Care Consultation</option> </select> </div> <div class="form-group"> <label class="form-label">Tell Us About Your Garden Goals *</label> <textarea class="form-control" rows="5" placeholder="What plants are you looking for? Do you need help with plant care? Any specific garden projects?" required></textarea> </div> <button type="submit" class="btn-submit"> <i class="fas fa-seedling me-2"></i>Start My Garden Journey </button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="footer-section"> <div class="container"> <div class="social-links"> <a href="#" onclick="openSocial('Facebook')"><i class="fab fa-facebook-f"></i></a> <a href="#" onclick="openSocial('Instagram')"><i class="fab fa-instagram"></i></a> <a href="#" onclick="openSocial('Twitter')"><i class="fab fa-twitter"></i></a> <a href="#" onclick="openSocial('YouTube')"><i class="fab fa-youtube"></i></a> <a href="#" onclick="openSocial('Pinterest')"><i class="fab fa-pinterest"></i></a> </div> <p class="mb-0">© 2024 GreenThumb Nursery. All rights reserved. | Growing Dreams, One Plant at a Time ?</p> </div> </footer> <!-- Success Message --> <div class="success-message" id="successMessage"> <i class="fas fa-check-circle me-2"></i> <span id="successText">Success!</span> </div> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <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:'977d5adf003847ea',t:'MTc1NjY1MTk4MS4wMDAwMDA='};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
:root { --primary-green: #16A34A; --secondary-forest: #15803D; --accent-lime: #84CC16; --warm-brown: #A16207; --earth-orange: #EA580C; --light-sage: #F0FDF4; --dark-forest: #14532D; --warm-gray: #64748B; --light-gray: #F1F5F9; --pure-white: #FFFFFF; --gradient-primary: linear-gradient(135deg, #16A34A 0%, #15803D 100%); --gradient-secondary: linear-gradient(135deg, #84CC16 0%, #65A30D 100%); --gradient-earth: linear-gradient(135deg, #A16207 0%, #EA580C 100%); --gradient-nature: linear-gradient(135deg, #14532D 0%, #16A34A 100%); --shadow-soft: 0 4px 20px rgba(22, 163, 74, 0.1); --shadow-medium: 0 8px 30px rgba(22, 163, 74, 0.15); --shadow-strong: 0 15px 40px rgba(22, 163, 74, 0.2); --border-radius: 16px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; line-height: 1.6; color: var(--dark-forest); background: var(--pure-white); overflow-x: hidden; } .elegant-font { font-family: 'Playfair Display', serif; } /* Navigation */ .navbar-custom { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); box-shadow: var(--shadow-soft); transition: all 0.3s ease; padding: 1rem 0; border-bottom: 1px solid rgba(22, 163, 74, 0.1); } .navbar-brand { font-weight: 800; font-size: 1.8rem; color: var(--primary-green) !important; letter-spacing: -0.5px; } .nav-link { font-weight: 500; color: var(--warm-gray) !important; margin: 0 1rem; transition: all 0.3s ease; position: relative; letter-spacing: 0.2px; } .nav-link:hover { color: var(--primary-green) !important; } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 50%; background: var(--gradient-primary); transition: all 0.3s ease; transform: translateX(-50%); border-radius: 1px; } .nav-link:hover::after { width: 100%; } .btn-shop { background: var(--gradient-primary); color: white; border: none; padding: 12px 28px; border-radius: 25px; font-weight: 600; margin-left: 20px; transition: all 0.3s ease; letter-spacing: 0.3px; } .btn-shop:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); color: white; } /* Hero Section */ .hero-section { min-height: 100vh; display: flex; align-items: center; background: linear-gradient(135deg, rgba(22, 163, 74, 0.05) 0%, rgba(132, 204, 22, 0.05) 100%); position: relative; overflow: hidden; } .hero-content { position: relative; z-index: 2; } .hero-greeting { font-size: 1.2rem; color: var(--secondary-forest); font-weight: 600; margin-bottom: 1rem; animation: fadeInUp 0.8s ease-out; } .hero-title { font-size: 3.5rem; font-weight: 800; color: var(--primary-green); /* margin-bottom: 1.5rem; */ animation: fadeInUp 0.8s ease-out 0.2s both; line-height: 1.1; letter-spacing: -2px; } .hero-subtitle { font-size: 1rem; color: var(--warm-gray); margin-bottom: 2rem; animation: fadeInUp 0.8s ease-out 0.4s both; font-weight: 400; max-width: 600px; } .hero-features { display: flex; gap: 1.5rem; margin-bottom: 3rem; animation: fadeInUp 0.8s ease-out 0.6s both; flex-wrap: wrap; } .feature-tag { background: rgba(22, 163, 74, 0.1); color: var(--primary-green); padding: 12px 20px; border-radius: 25px; font-weight: 600; font-size: 0.9rem; border: 1px solid rgba(22, 163, 74, 0.2); transition: all 0.3s ease; } .feature-tag:hover { background: var(--primary-green); color: white; transform: translateY(-2px); } .hero-buttons { animation: fadeInUp 0.8s ease-out 0.8s both; } .hero-image { position: relative; animation: fadeInRight 1s ease-out 0.5s both; } .plant-showcase { width: 400px; height: 400px; border-radius: var(--border-radius); background: var(--gradient-nature); display: flex; align-items: center; justify-content: center; font-size: 8rem; color: white; box-shadow: var(--shadow-strong); position: relative; overflow: hidden; } .plant-showcase::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent); animation: shimmer 3s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } 100% { transform: translateX(100%) translateY(100%) rotate(45deg); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } .btn-custom { padding: 16px 35px; font-weight: 600; border-radius: 30px; letter-spacing: 0.3px; transition: all 0.3s ease; border: none; margin: 0 10px; text-decoration: none; display: inline-block; font-size: 1rem; } .btn-primary-custom { background: var(--gradient-primary); color: white; } .btn-primary-custom:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); color: white; } .btn-secondary-custom { background: transparent; color: var(--primary-green); border: 2px solid var(--primary-green); } .btn-secondary-custom:hover { background: var(--primary-green); color: white; transform: translateY(-3px); } /* Section Styling */ .section-padding { padding: 100px 0; } .section-title { font-size: 3.5rem; font-weight: 800; margin-bottom: 1rem; color: var(--primary-green); text-align: center; line-height: 1.2; letter-spacing: -1px; } .section-subtitle { font-size: 1.2rem; color: var(--warm-gray); margin-bottom: 4rem; text-align: center; font-weight: 400; max-width: 600px; margin-left: auto; margin-right: auto; } /* Plants Section */ .plants-section { background: var(--light-sage); } .plant-filters { display: flex; justify-content: center; gap: 1rem; margin-bottom: 3rem; flex-wrap: wrap; } .filter-btn { background: white; color: var(--warm-gray); border: 2px solid var(--light-gray); padding: 12px 24px; border-radius: 25px; font-weight: 600; transition: all 0.3s ease; cursor: pointer; } .filter-btn.active, .filter-btn:hover { background: var(--primary-green); color: white; border-color: var(--primary-green); transform: translateY(-2px); } .plants-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; } .plant-card { background: white; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-soft); transition: all 0.3s ease; position: relative; } .plant-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-strong); } .plant-image { height: 250px; background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; font-size: 4rem; color: white; position: relative; overflow: hidden; } .plant-card:nth-child(2) .plant-image { background: var(--gradient-secondary); } .plant-card:nth-child(3) .plant-image { background: var(--gradient-earth); } .plant-card:nth-child(4) .plant-image { background: var(--gradient-nature); } .plant-card:nth-child(5) .plant-image { background: linear-gradient(135deg, #DC2626 0%, #EF4444 100%); } .plant-card:nth-child(6) .plant-image { background: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 100%); } .plant-badge { position: absolute; top: 15px; left: 15px; background: var(--earth-orange); color: white; padding: 6px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .plant-price { position: absolute; top: 15px; right: 15px; background: rgba(0, 0, 0, 0.8); color: white; padding: 8px 16px; border-radius: 20px; font-weight: 700; font-size: 1.1rem; } .plant-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.3s ease; } .plant-card:hover .plant-overlay { opacity: 1; } .plant-btn { background: white; color: var(--primary-green); padding: 12px 20px; border-radius: 25px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; margin: 0 5px; } .plant-btn:hover { background: var(--earth-orange); color: white; transform: translateY(-2px); } .plant-content { padding: 2rem; } .plant-title { font-size: 1.5rem; font-weight: 700; color: var(--primary-green); margin-bottom: 0.5rem; } .plant-scientific { color: var(--warm-gray); font-style: italic; margin-bottom: 1rem; font-size: 0.9rem; } .plant-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; } .plant-feature { text-align: center; padding: 0.8rem; background: var(--light-gray); border-radius: 8px; } .plant-feature-icon { font-size: 1.2rem; color: var(--secondary-forest); margin-bottom: 0.3rem; } .plant-feature-label { font-size: 0.8rem; color: var(--warm-gray); font-weight: 600; } .plant-feature-value { font-size: 1rem; color: var(--primary-green); font-weight: 700; } /* Services Section */ .services-section { background: var(--pure-white); } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .service-card { background: white; border-radius: var(--border-radius); padding: 2.5rem; box-shadow: var(--shadow-soft); transition: all 0.3s ease; border-top: 4px solid var(--primary-green); text-align: center; } .service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-strong); } .service-card:nth-child(2) { border-top-color: var(--earth-orange); } .service-card:nth-child(3) { border-top-color: var(--accent-lime); } .service-card:nth-child(4) { border-top-color: var(--warm-brown); } .service-icon { width: 80px; height: 80px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; font-size: 2.5rem; color: white; } .service-card:nth-child(2) .service-icon { background: var(--gradient-earth); } .service-card:nth-child(3) .service-icon { background: var(--gradient-secondary); } .service-card:nth-child(4) .service-icon { background: linear-gradient(135deg, #A16207 0%, #D97706 100%); } .service-title { font-size: 1.5rem; font-weight: 700; color: var(--primary-green); margin-bottom: 1rem; } .service-description { color: var(--warm-gray); margin-bottom: 1.5rem; line-height: 1.6; } .service-features { list-style: none; text-align: left; } .service-features li { display: flex; align-items: center; margin-bottom: 0.8rem; color: var(--warm-gray); font-weight: 500; } .service-features i { color: var(--secondary-forest); margin-right: 10px; width: 16px; } /* Tools Section */ .tools-section { background: var(--light-sage); } .tools-container { max-width: 800px; margin: 0 auto; } .tool-card { background: white; border-radius: var(--border-radius); padding: 2rem; box-shadow: var(--shadow-soft); margin-bottom: 2rem; transition: all 0.3s ease; } .tool-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); } .tool-header { display: flex; align-items: center; margin-bottom: 1.5rem; } .tool-icon { width: 60px; height: 60px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white; margin-right: 1rem; } .tool-title { font-size: 1.5rem; font-weight: 700; color: var(--primary-green); } .tool-content { margin-bottom: 1.5rem; } .form-group { margin-bottom: 1.5rem; } .form-label { font-weight: 600; color: var(--primary-green); margin-bottom: 0.5rem; display: block; } .form-control { width: 100%; padding: 12px 16px; border: 2px solid #E9ECEF; border-radius: 8px; font-size: 1rem; transition: all 0.3s ease; } .form-control:focus { outline: none; border-color: var(--primary-green); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1); } .btn-calculate { background: var(--gradient-primary); color: white; border: none; padding: 12px 30px; border-radius: 25px; font-weight: 600; transition: all 0.3s ease; cursor: pointer; } .btn-calculate:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); } .result-display { background: var(--light-gray); padding: 1.5rem; border-radius: 12px; margin-top: 1rem; display: none; } .result-display.show { display: block; animation: fadeInUp 0.5s ease-out; } .result-title { font-weight: 700; color: var(--primary-green); margin-bottom: 1rem; } /* Contact Section */ .contact-section { background: var(--gradient-nature); color: white; } .contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } .contact-info { padding: 2rem; } .contact-title { font-size: 3rem; font-weight: 800; margin-bottom: 1.5rem; color: white; } .contact-description { font-size: 1.1rem; margin-bottom: 2rem; opacity: 0.9; line-height: 1.7; } .contact-methods { margin-bottom: 2rem; } .contact-method { display: flex; align-items: center; margin-bottom: 1.5rem; padding: 1rem; background: rgba(255, 255, 255, 0.1); border-radius: 12px; transition: all 0.3s ease; } .contact-method:hover { background: rgba(255, 255, 255, 0.2); transform: translateX(10px); } .contact-icon { width: 50px; height: 50px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 1rem; font-size: 1.2rem; } .contact-form { background: rgba(255, 255, 255, 0.1); padding: 2.5rem; border-radius: var(--border-radius); backdrop-filter: blur(10px); } .contact-form .form-control { background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.2); color: white; backdrop-filter: blur(10px); } .contact-form .form-control::placeholder { color: rgba(255, 255, 255, 0.6); } .contact-form .form-control:focus { border-color: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.15); } .contact-form .form-label { color: white; } .btn-submit { background: white; color: var(--primary-green); border: none; padding: 16px 40px; border-radius: 30px; font-weight: 600; font-size: 1rem; transition: all 0.3s ease; width: 100%; letter-spacing: 0.3px; } .btn-submit:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); background: var(--light-gray); } /* Footer */ .footer-section { background: #1A1A1A; color: white; padding: 60px 0 30px; text-align: center; } .social-links { margin-bottom: 2rem; } .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: var(--gradient-primary); color: white; border-radius: 50%; margin: 0 10px; transition: all 0.3s ease; text-decoration: none; } .social-links a:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); } /* Success Messages */ .success-message { position: fixed; top: 100px; right: 30px; background: var(--gradient-primary); color: white; padding: 16px 25px; border-radius: 12px; box-shadow: var(--shadow-medium); z-index: 1060; transform: translateX(400px); transition: transform 0.3s ease; font-weight: 600; } .success-message.show { transform: translateX(0); } /* Loading Animation */ .loading-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(22, 163, 74, 0.3); border-radius: 50%; border-top-color: var(--primary-green); animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Animations */ .animate-on-scroll { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; } .animate-on-scroll.animated { opacity: 1; transform: translateY(0); } /* Responsive Design */ @media (max-width: 768px) { .hero-title { font-size: 3rem; } .section-title { font-size: 2.5rem; } .contact-content { grid-template-columns: 1fr; gap: 2rem; } .plant-showcase { width: 300px; height: 300px; font-size: 6rem; } .hero-features { justify-content: center; } .plant-features { grid-template-columns: 1fr; } .plant-filters { justify-content: center; } }
JavaScript
// Smooth scrolling for navigation links 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' }); } }); }); // Animate elements on scroll function animateOnScroll() { const elements = document.querySelectorAll('.animate-on-scroll'); elements.forEach(element => { const elementTop = element.getBoundingClientRect().top; const elementVisible = 150; if (elementTop < window.innerHeight - elementVisible) { element.classList.add('animated'); } }); } // Navbar background on scroll window.addEventListener('scroll', function() { const navbar = document.querySelector('.navbar-custom'); if (window.scrollY > 50) { navbar.style.background = 'rgba(255, 255, 255, 0.98)'; navbar.style.boxShadow = '0 8px 30px rgba(22, 163, 74, 0.15)'; } else { navbar.style.background = 'rgba(255, 255, 255, 0.95)'; navbar.style.boxShadow = '0 4px 20px rgba(22, 163, 74, 0.1)'; } animateOnScroll(); }); // Scroll to contact function function scrollToContact() { document.querySelector('#contact').scrollIntoView({ behavior: 'smooth', block: 'start' }); } // Filter plants function filterPlants(category) { const cards = document.querySelectorAll('.plant-card'); const buttons = document.querySelectorAll('.filter-btn'); // Update active button buttons.forEach(btn => btn.classList.remove('active')); event.target.classList.add('active'); // Filter cards cards.forEach(card => { if (category === 'all' || card.dataset.category === category) { card.style.display = 'block'; setTimeout(() => { card.style.opacity = '1'; card.style.transform = 'translateY(0)'; }, 100); } else { card.style.opacity = '0'; card.style.transform = 'translateY(20px)'; setTimeout(() => { card.style.display = 'none'; }, 300); } }); showSuccessMessage(`Showing ${category === 'all' ? 'all' : category} plants`); } // View plant function function viewPlant(plantName) { showSuccessMessage(`Loading ${plantName} details...`); setTimeout(() => { alert(`? PLANT PROFILE: ${plantName.toUpperCase()} ?\n\n? COMPLETE PLANT GUIDE:\n\n? PLANT OVERVIEW:\n⢠Scientific classification\n⢠Native habitat information\n⢠Growth characteristics\n⢠Mature size expectations\n⢠Seasonal behavior patterns\n\n? CARE REQUIREMENTS:\n⢠Light: Specific lighting needs\n⢠Water: Watering frequency and amount\n⢠Humidity: Ideal moisture levels\n⢠Temperature: Optimal temperature range\n⢠Soil: Preferred soil type and pH\n\n? PLANTING GUIDE:\n⢠Best planting season\n⢠Pot size recommendations\n⢠Soil preparation tips\n⢠Planting depth guidelines\n⢠Initial care instructions\n\n? SEASONAL CARE:\n⢠Spring: Growth season care\n⢠Summer: Heat protection tips\n⢠Fall: Preparation for dormancy\n⢠Winter: Cold weather protection\n⢠Year-round maintenance\n\n? COMMON ISSUES:\n⢠Pest identification and treatment\n⢠Disease prevention and cure\n⢠Nutrient deficiency signs\n⢠Overwatering/underwatering symptoms\n⢠Environmental stress indicators\n\n? GROWTH & PROPAGATION:\n⢠Expected growth rate\n⢠Pruning and trimming guide\n⢠Propagation methods\n⢠Repotting schedule\n⢠Fertilization program\n\n? PLACEMENT TIPS:\n⢠Indoor positioning advice\n⢠Outdoor garden placement\n⢠Companion plant suggestions\n⢠Decorative pot recommendations\n⢠Space requirements\n\n? BEGINNER TIPS:\n⢠Easy care instructions\n⢠Common mistakes to avoid\n⢠Success indicators\n⢠Troubleshooting guide\n⢠Expert care secrets\n\n? VISUAL GUIDE:\n⢠Healthy plant appearance\n⢠Growth stage photos\n⢠Problem identification images\n⢠Seasonal changes\n⢠Variety comparisons\n\n? PURCHASE INFORMATION:\n⢠Available sizes and prices\n⢠Pot and soil options\n⢠Care kit recommendations\n⢠Delivery and pickup options\n⢠Plant guarantee details\n\n? CUSTOMER REVIEWS:\n⢠5-star plant ratings\n⢠Care success stories\n⢠Growth progress photos\n⢠Expert testimonials\n⢠Community tips\n\n? EXPERT SUPPORT:\n⢠Free care consultations\n⢠Plant health assessments\n⢠Troubleshooting assistance\n⢠Seasonal care reminders\n⢠Growth progress tracking\n\n? CARE PACKAGE:\n⢠Premium potting soil\n⢠Appropriate fertilizer\n⢠Care instruction card\n⢠Watering schedule guide\n⢠Problem-solving checklist\n\n? DIGITAL RESOURCES:\n⢠Care reminder app\n⢠Growth tracking tools\n⢠Photo identification guide\n⢠Community forums\n⢠Expert video tutorials\n\n? SUSTAINABILITY:\n⢠Eco-friendly growing practices\n⢠Organic care options\n⢠Local sourcing information\n⢠Environmental benefits\n⢠Carbon footprint reduction\n\n? Ready to bring this beauty home?\nContact our plant experts for personalized advice!\n\n? Email: info@greenthumb-nursery.com\n? Phone: +1 (555) PLANTS-1\n\n? Your green journey starts here!`); }, 1000); } // Add to cart function function addToCart(plantName) { showSuccessMessage(`Adding ${plantName} to cart...`); setTimeout(() => { alert(`? ADDED TO CART: ${plantName.toUpperCase()} ?\n\nā Successfully added to your cart!\n\n? CART SUMMARY:\n⢠Plant: ${plantName}\n⢠Size: Standard nursery pot\n⢠Condition: Healthy, nursery-grown\n⢠Care level: Beginner-friendly\n⢠Guarantee: 30-day plant health\n\n? WHAT'S INCLUDED:\n⢠Healthy, well-rooted plant\n⢠Nursery-quality growing pot\n⢠Premium potting soil\n⢠Plant care instruction card\n⢠Watering and feeding schedule\n⢠Problem identification guide\n\n? FREE BONUSES:\n⢠Plant care consultation (15 min)\n⢠Seasonal care reminder emails\n⢠Access to expert plant community\n⢠Mobile plant care app\n⢠Growth tracking tools\n\n? DELIVERY OPTIONS:\n⢠Same-day local delivery\n⢠Next-day regional shipping\n⢠Weekend delivery available\n⢠Contactless delivery option\n⢠Plant-safe packaging guaranteed\n\n? PRICING & SAVINGS:\n⢠Competitive nursery pricing\n⢠Bulk order discounts\n⢠Loyalty program benefits\n⢠Seasonal promotions\n⢠Price match guarantee\n\n?ļø PLANT GUARANTEE:\n⢠30-day health guarantee\n⢠Free replacement if unhealthy\n⢠Expert care support included\n⢠Satisfaction guaranteed\n⢠No-questions-asked returns\n\n? CART MANAGEMENT:\n⢠View full cart contents\n⢠Modify quantities easily\n⢠Save for later option\n⢠Quick checkout process\n⢠Multiple payment methods\n\n? RECOMMENDED ADDITIONS:\n⢠Matching decorative pot\n⢠Premium plant fertilizer\n⢠Plant care tool kit\n⢠Humidity monitoring device\n⢠Growth support stakes\n\n? NEED HELP?\n⢠Plant selection advice\n⢠Care requirement questions\n⢠Delivery scheduling\n⢠Payment assistance\n⢠Expert consultations\n\n? NEXT STEPS:\n1. Continue shopping for more plants\n2. Review cart and checkout\n3. Schedule delivery/pickup\n4. Receive care instructions\n5. Enjoy your new plant!\n\n? PLANT CARE SUPPORT:\n⢠24/7 online care guides\n⢠Expert phone consultations\n⢠Video care tutorials\n⢠Community plant forums\n⢠Seasonal care newsletters\n\n? WHY CHOOSE US:\n⢠20+ years plant expertise\n⢠Locally grown, healthy plants\n⢠Expert care guidance\n⢠Satisfaction guaranteed\n⢠Sustainable growing practices\n\n? Questions about your order?\nCall us at +1 (555) PLANTS-1\n\n? Thank you for choosing GreenThumb Nursery!\nYour plant journey starts now!`); }, 1000); } // Watering calculator function calculateWatering() { const plantType = document.getElementById('plantType').value; const potSize = parseInt(document.getElementById('potSize').value); const lightConditions = document.getElementById('lightConditions').value; const season = document.getElementById('season').value; if (!plantType || !potSize || !lightConditions || !season) { alert('Please fill in all fields to calculate watering schedule.'); return; } // Base watering frequencies (days between watering) const baseFrequency = { succulent: 14, tropical: 7, flowering: 5, foliage: 6, herb: 4 }; // Adjustments based on conditions let frequency = baseFrequency[plantType]; // Pot size adjustment if (potSize < 6) frequency -= 1; else if (potSize > 12) frequency += 2; // Light adjustment if (lightConditions === 'direct') frequency -= 1; else if (lightConditions === 'low') frequency += 2; // Season adjustment if (season === 'summer') frequency -= 1; else if (season === 'winter') frequency += 3; // Ensure minimum frequency frequency = Math.max(frequency, 2); const waterAmount = Math.round(potSize * 0.3); // oz of water const resultDiv = document.getElementById('wateringResult'); const detailsDiv = document.getElementById('wateringDetails'); detailsDiv.innerHTML = ` <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1rem;"> <div style="text-align: center; padding: 1rem; background: rgba(22, 163, 74, 0.1); border-radius: 8px;"> <div style="font-size: 1.5rem; font-weight: 700; color: var(--primary-green);">Every ${frequency} days</div> <div style="font-size: 0.9rem; color: var(--warm-gray);">Watering Frequency</div> </div> <div style="text-align: center; padding: 1rem; background: rgba(22, 163, 74, 0.1); border-radius: 8px;"> <div style="font-size: 1.5rem; font-weight: 700; color: var(--primary-green);">${waterAmount} oz</div> <div style="font-size: 0.9rem; color: var(--warm-gray);">Water Amount</div> </div> </div> <div style="margin-bottom: 1rem;"> <strong>Schedule Details:</strong><br> ⢠Plant type: ${plantType.charAt(0).toUpperCase() + plantType.slice(1)}<br> ⢠Pot size: ${potSize}" diameter<br> ⢠Light conditions: ${lightConditions}<br> ⢠Season: ${season.charAt(0).toUpperCase() + season.slice(1)} </div> <div style="background: rgba(132, 204, 22, 0.1); padding: 1rem; border-radius: 8px; border-left: 4px solid var(--accent-lime);"> <strong>? Watering Tips:</strong><br> ⢠Check soil moisture before watering<br> ⢠Water thoroughly until drainage occurs<br> ⢠Use room temperature water<br> ⢠Water in the morning when possible<br> ⢠Adjust schedule based on plant response </div> `; resultDiv.classList.add('show'); showSuccessMessage('Watering schedule calculated!'); } // Plant diagnosis function diagnosePlant() { const symptom = document.getElementById('symptom').value; const affectedArea = document.getElementById('affectedArea').value; const recentChanges = document.getElementById('recentChanges').value; const duration = document.getElementById('duration').value; if (!symptom || !affectedArea || !recentChanges || !duration) { alert('Please fill in all fields for accurate diagnosis.'); return; } const diagnoses = { yellowing: { problem: 'Overwatering or Nutrient Deficiency', cause: 'Too much water or lack of nitrogen', treatment: 'Reduce watering frequency and add balanced fertilizer' }, browning: { problem: 'Underwatering or Low Humidity', cause: 'Insufficient water or dry air', treatment: 'Increase watering and humidity levels' }, wilting: { problem: 'Water Stress or Root Issues', cause: 'Inconsistent watering or root problems', treatment: 'Check soil moisture and root health' }, spots: { problem: 'Fungal or Bacterial Disease', cause: 'High humidity with poor air circulation', treatment: 'Improve air flow and apply fungicide' }, pests: { problem: 'Insect Infestation', cause: 'Common houseplant pests', treatment: 'Apply insecticidal soap or neem oil' } }; const diagnosis = diagnoses[symptom]; const urgency = duration === 'days' ? 'Low' : duration === 'weeks' ? 'Medium' : 'High'; const resultDiv = document.getElementById('diagnosisResult'); const detailsDiv = document.getElementById('diagnosisDetails'); detailsDiv.innerHTML = ` <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1rem;"> <div style="text-align: center; padding: 1rem; background: rgba(22, 163, 74, 0.1); border-radius: 8px;"> <div style="font-size: 1.2rem; font-weight: 700; color: var(--primary-green);">${diagnosis.problem}</div> <div style="font-size: 0.9rem; color: var(--warm-gray);">Likely Problem</div> </div> <div style="text-align: center; padding: 1rem; background: rgba(22, 163, 74, 0.1); border-radius: 8px;"> <div style="font-size: 1.2rem; font-weight: 700; color: var(--primary-green);">${urgency}</div> <div style="font-size: 0.9rem; color: var(--warm-gray);">Urgency Level</div> </div> </div> <div style="margin-bottom: 1rem;"> <strong>Diagnosis Details:</strong><br> ⢠Primary symptom: ${symptom.charAt(0).toUpperCase() + symptom.slice(1)}<br> ⢠Affected area: ${affectedArea}<br> ⢠Recent changes: ${recentChanges}<br> ⢠Duration: ${duration} </div> <div style="background: rgba(234, 88, 12, 0.1); padding: 1rem; border-radius: 8px; border-left: 4px solid var(--earth-orange);"> <strong>? Treatment Plan:</strong><br> ⢠Cause: ${diagnosis.cause}<br> ⢠Treatment: ${diagnosis.treatment}<br> ⢠Monitor progress for 1-2 weeks<br> ⢠Contact expert if symptoms persist<br> ⢠Take photos to track improvement </div> `; resultDiv.classList.add('show'); showSuccessMessage('Plant diagnosis completed!'); } // Fertilizer calculator function calculateFertilizer() { const plantCategory = document.getElementById('plantCategory').value; const growthStage = document.getElementById('growthStage').value; const gardenArea = parseInt(document.getElementById('gardenArea').value); const fertilizerSeason = document.getElementById('fertilizerSeason').value; if (!plantCategory || !growthStage || !gardenArea || !fertilizerSeason) { alert('Please fill in all fields to calculate fertilizer needs.'); return; } const fertilizers = { houseplant: { type: 'Balanced Liquid (10-10-10)', frequency: 'Monthly', amount: '1 tsp per gallon' }, vegetable: { type: 'High Nitrogen (20-10-10)', frequency: 'Bi-weekly', amount: '2 lbs per 100 sq ft' }, flower: { type: 'Bloom Booster (5-10-10)', frequency: 'Weekly', amount: '1 lb per 100 sq ft' }, tree: { type: 'Slow Release (16-4-8)', frequency: 'Quarterly', amount: '1 cup per tree' }, lawn: { type: 'Lawn Fertilizer (24-0-6)', frequency: 'Monthly', amount: '3 lbs per 1000 sq ft' } }; const fertilizer = fertilizers[plantCategory]; const totalAmount = Math.round((gardenArea / 100) * parseFloat(fertilizer.amount.match(/\d+/)[0])); const resultDiv = document.getElementById('fertilizerResult'); const detailsDiv = document.getElementById('fertilizerDetails'); detailsDiv.innerHTML = ` <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1rem;"> <div style="text-align: center; padding: 1rem; background: rgba(22, 163, 74, 0.1); border-radius: 8px;"> <div style="font-size: 1.2rem; font-weight: 700; color: var(--primary-green);">${fertilizer.type}</div> <div style="font-size: 0.9rem; color: var(--warm-gray);">Recommended Type</div> </div> <div style="text-align: center; padding: 1rem; background: rgba(22, 163, 74, 0.1); border-radius: 8px;"> <div style="font-size: 1.2rem; font-weight: 700; color: var(--primary-green);">${fertilizer.frequency}</div> <div style="font-size: 0.9rem; color: var(--warm-gray);">Application Frequency</div> </div> </div> <div style="margin-bottom: 1rem;"> <strong>Application Details:</strong><br> ⢠Plant category: ${plantCategory.charAt(0).toUpperCase() + plantCategory.slice(1)}<br> ⢠Growth stage: ${growthStage}<br> ⢠Garden area: ${gardenArea} sq ft<br> ⢠Season: ${fertilizerSeason.charAt(0).toUpperCase() + fertilizerSeason.slice(1)} </div> <div style="background: rgba(161, 98, 7, 0.1); padding: 1rem; border-radius: 8px; border-left: 4px solid var(--warm-brown);"> <strong>? Fertilizer Guidelines:</strong><br> ⢠Amount needed: ${fertilizer.amount}<br> ⢠Apply in ${fertilizerSeason === 'summer' ? 'early morning' : 'late afternoon'}<br> ⢠Water thoroughly after application<br> ⢠Avoid fertilizing dry or stressed plants<br> ⢠Reduce frequency in winter months </div> `; resultDiv.classList.add('show'); showSuccessMessage('Fertilizer plan calculated!'); } // Open social media function openSocial(platform) { showSuccessMessage(`Opening ${platform} page...`); setTimeout(() => { alert(`? SOCIAL MEDIA: ${platform.toUpperCase()} ?\n\n? Follow GreenThumb Nursery on ${platform}:\n\n? PLANT INSPIRATION:\n⢠Daily plant care tips\n⢠Beautiful plant photography\n⢠Garden design ideas\n⢠Seasonal planting guides\n⢠Plant parent success stories\n\n? VISUAL CONTENT:\n⢠Before/after garden transformations\n⢠Plant growth time-lapses\n⢠Care technique demonstrations\n⢠Problem diagnosis guides\n⢠Seasonal plant showcases\n\n? EDUCATIONAL CONTENT:\n⢠Plant identification guides\n⢠Common problem solutions\n⢠Propagation tutorials\n⢠Soil and fertilizer tips\n⢠Pest management strategies\n\n? COMMUNITY FEATURES:\n⢠Plant parent testimonials\n⢠Garden photo contests\n⢠Q&A with plant experts\n⢠Live plant care sessions\n⢠Seasonal gardening workshops\n\n? PLATFORM-SPECIFIC CONTENT:\n${platform === 'Facebook' ? '⢠Detailed plant care guides\n⢠Community plant discussions\n⢠Garden event announcements\n⢠Live expert Q&A sessions' : platform === 'Instagram' ? '⢠Stunning plant photography\n⢠Stories with daily care tips\n⢠Reels with quick plant hacks\n⢠IGTV plant care tutorials' : platform === 'Twitter' ? '⢠Quick plant care tips\n⢠Daily plant facts\n⢠Garden industry news\n⢠Real-time plant advice' : platform === 'YouTube' ? '⢠Comprehensive care tutorials\n⢠Garden design walkthroughs\n⢠Plant problem diagnostics\n⢠Seasonal gardening guides' : '⢠Plant inspiration boards\n⢠Garden design ideas\n⢠Care tip infographics\n⢠Plant identification guides'}\n\n? EXCLUSIVE BENEFITS:\n⢠Follower-only plant discounts\n⢠Early access to new arrivals\n⢠Free plant care resources\n⢠Priority expert consultations\n⢠Special contest entries\n\n? SOCIAL ENGAGEMENT:\n⢠Comment for personalized advice\n⢠DM for plant problem help\n⢠Share your plant photos with us\n⢠Tag us in your garden posts\n⢠Join our plant care challenges\n\n? FOLLOWER PERKS:\n⢠Monthly plant giveaways\n⢠Exclusive discount codes\n⢠Free plant health assessments\n⢠Access to private plant groups\n⢠VIP nursery events\n\n? STAY UPDATED:\n⢠Weekly plant spotlights\n⢠Monthly care calendars\n⢠Seasonal planting reminders\n⢠Flash sale notifications\n⢠New service announcements\n\n? NOTIFICATION SETTINGS:\n⢠New plant arrival alerts\n⢠Care reminder notifications\n⢠Seasonal gardening tips\n⢠Contest announcements\n⢠Expert advice updates\n\n? JOIN OUR COMMUNITY:\n⢠50,000+ plant enthusiasts\n⢠Daily inspiring content\n⢠Expert gardening advice\n⢠Supportive plant community\n⢠Local gardening resources\n\n? Connect with us today!\nFollow @GreenThumbNursery for daily plant inspiration!`); }, 1000); } // Contact form submission document.getElementById('contactForm').addEventListener('submit', function(e) { e.preventDefault(); const submitBtn = this.querySelector('.btn-submit'); const originalText = submitBtn.innerHTML; submitBtn.innerHTML = '<span class="loading-spinner"></span> Growing Your Garden Plan...'; submitBtn.disabled = true; setTimeout(() => { submitBtn.innerHTML = originalText; submitBtn.disabled = false; this.reset(); showSuccessMessage('Welcome to the GreenThumb family!'); setTimeout(() => { alert('? WELCOME TO GREENTHUMB NURSERY! ?\n\n? Your green journey begins now!\n\n? What happens next:\n⢠Personalized plant consultation\n⢠Custom garden planning\n⢠Expert care guidance\n⢠Priority plant selection\n\n? YOUR WELCOME PACKAGE INCLUDES:\n⢠Comprehensive Plant Care Guide\n⢠Seasonal Gardening Calendar\n⢠Plant Problem Diagnostic Chart\n⢠Watering & Fertilizer Schedules\n⢠Exclusive Member Discounts\n⢠Direct Access to Plant Experts\n\n? IMMEDIATE SUPPORT:\n⢠Email: info@greenthumb-nursery.com\n⢠Phone: +1 (555) PLANTS-1\n⢠Response time: Within 2 hours\n⢠Expert consultation: Available daily\n\n? PERSONALIZED SERVICES:\n⢠Plant health assessments\n⢠Custom care schedules\n⢠Garden design consultation\n⢠Seasonal planting plans\n⢠Problem diagnosis & treatment\n\n? PLANT EXPERTISE:\n⢠500+ plant varieties\n⢠Local growing knowledge\n⢠Organic care methods\n⢠Sustainable gardening\n⢠Indoor/outdoor specialists\n\n?ļø CARE TOOLS:\n⢠Watering calculators\n⢠Plant health diagnostics\n⢠Fertilizer recommendations\n⢠Growth tracking guides\n⢠Problem identification\n\n? EXCLUSIVE BENEFITS:\n⢠Member-only pricing\n⢠Early access to new plants\n⢠Free plant health checks\n⢠Complimentary repotting\n⢠24/7 care support hotline\n\n? SUCCESS METRICS:\n⢠98% plant survival rate\n⢠25,000+ happy customers\n⢠90% repeat plant parents\n⢠30+ plant care experts\n⢠20+ years experience\n\n? PLANT SELECTION:\n⢠Indoor houseplants\n⢠Outdoor garden plants\n⢠Flowering varieties\n⢠Succulents & cacti\n⢠Herbs & vegetables\n⢠Trees & shrubs\n\n? STAY CONNECTED:\n⢠Mobile plant care app\n⢠Real-time care reminders\n⢠Expert chat support\n⢠Plant community forums\n⢠Growth progress tracking\n\n? EXPERT TEAM:\n⢠Certified horticulturists\n⢠Plant pathologists\n⢠Garden designers\n⢠Organic specialists\n⢠Indoor plant experts\n\n? AWARD-WINNING NURSERY:\n⢠Best Local Nursery 2024\n⢠Customer Choice Awards\n⢠Sustainable Business Leader\n⢠Plant Care Innovation\n⢠Excellence in Horticulture\n\n? SPECIAL OFFERS:\n⢠First purchase: 15% discount\n⢠Referral program: $25 credit\n⢠Bulk orders: 20% off\n⢠Seasonal specials: Up to 30% off\n⢠Loyalty rewards program\n\n? GARDEN STYLES:\n⢠Indoor jungle creation\n⢠Outdoor garden design\n⢠Balcony & patio gardens\n⢠Herb & vegetable gardens\n⢠Low-maintenance landscapes\n⢠Native plant gardens\n\n? READY TO GROW?\nYour personal plant expert will contact you within 24 hours to start planning your perfect garden!\n\n? Welcome to a world of green possibilities!\nWhere every plant finds its perfect home.\n\n? Contact: info@greenthumb-nursery.com\n? Call: +1 (555) PLANTS-1'); }, 1000); }, 2000); }); // Show success message function showSuccessMessage(message) { const successMessage = document.getElementById('successMessage'); const successText = document.getElementById('successText'); successText.textContent = message; successMessage.classList.add('show'); setTimeout(() => { successMessage.classList.remove('show'); }, 3000); } // Initialize animations on page load document.addEventListener('DOMContentLoaded', function() { animateOnScroll(); });
Output Preview
Desktop
Mobile
Fullscreen