Nursery Plant Centre
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 - Plant Centre</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet"> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <div class="container"> <a class="navbar-brand" href="#">Green Haven</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 active" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#plants">Plants</a> </li> <li class="nav-item"> <a class="nav-link" href="#mission">Mission</a> </li> <li class="nav-item"> <a class="nav-link" href="#vision">Vision</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> </ul> </div> </div> </nav> <!-- Hero Section --> <section class="hero"> <div class="container hero-content"> <div class="row"> <div class="col-lg-8"> <h1 class="typed-text" id="typed-text"></h1> <span class="typed-cursor">|</span> <p class="lead mb-4">Discover the perfect plants for your home and garden at our premium nursery center.</p> <a href="#plants" class="btn btn-primary btn-lg me-2">Explore Plants</a> <a href="#contact" class="btn btn-outline-light btn-lg">Contact Us</a> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="about-section"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6 mb-4 mb-lg-0"> <img src="https://images.pexels.com/photos/7728657/pexels-photo-7728657.jpeg" alt="About Our Nursery" class="img-fluid about-img"> </div> <div class="col-lg-6"> <h2 class="tagline">Bringing Nature Closer to You</h2> <p class="lead">Green Haven Nursery has been serving plant enthusiasts for over 20 years with the highest quality plants and gardening supplies.</p> <p>Our passion for plants drives us to provide exceptional service and expert advice to help you create your perfect green space. Whether you're a seasoned gardener or just starting out, our knowledgeable staff is here to guide you every step of the way.</p> <p>We source our plants from the best growers and take pride in offering a wide variety of species, from exotic tropical plants to hardy perennials that thrive in our local climate.</p> <a href="#plants" class="btn btn-outline-primary">View Our Collection</a> </div> </div> </div> </section> <!-- Cards Section --> <section id="plants" class="cards-section"> <div class="container"> <div class="row mb-5"> <div class="col-12 text-center"> <h2 class="display-4">Our Featured Plants</h2> <p class="lead">Discover our carefully curated selection of premium plants</p> </div> </div> <div class="row"> <div class="col-md-4"> <div class="card plant-card"> <img src="https://images.unsplash.com/photo-1497250681960-ef046c08a56e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" class="card-img-top" alt="Monstera Plant"> <div class="card-body"> <h5 class="card-title">Monstera Deliciosa</h5> <p class="card-text">The iconic Swiss Cheese Plant with beautiful split leaves that bring tropical vibes to any space.</p> <a href="#" class="btn btn-primary">View Details</a> </div> </div> </div> <div class="col-md-4"> <div class="card plant-card"> <img src="https://plus.unsplash.com/premium_photo-1679428402040-e3c93439ec13?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cGxhbnQlMjBudXJzZXJ5fGVufDB8fDB8fHww" class="card-img-top" alt="Snake Plant"> <div class="card-body"> <h5 class="card-title">Snake Plant</h5> <p class="card-text">An ultra-resilient air-purifying plant that thrives on neglect and perfect for beginners.</p> <a href="#" class="btn btn-primary">View Details</a> </div> </div> </div> <div class="col-md-4"> <div class="card plant-card"> <img src="https://images.unsplash.com/photo-1508857650881-64475119d798?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGxhbnQlMjBudXJzZXJ5fGVufDB8fDB8fHww" class="card-img-top" alt="Fiddle Leaf Fig"> <div class="card-body"> <h5 class="card-title">Fiddle Leaf Fig</h5> <p class="card-text">A statement plant with large, glossy leaves that adds dramatic flair to any interior.</p> <a href="#" class="btn btn-primary">View Details</a> </div> </div> </div> </div> <div class="row mt-4"> <div class="col-12 text-center"> <a href="#" class="btn btn-outline-primary btn-lg">View All Plants</a> </div> </div> </div> </section> <!-- Mission Section --> <section id="mission" class="mission-section"> <div class="container"> <div class="row"> <div class="col-12 text-center mb-5"> <h2 class="mission-headline">Our Mission</h2> </div> </div> <div class="row"> <div class="col-lg-8 mx-auto text-center"> <p class="lead">At Green Haven Nursery, our mission is to connect people with nature by providing the highest quality plants, expert advice, and exceptional service. We believe that plants have the power to transform lives and spaces, and we're committed to helping our customers experience that transformation.</p> <p>We strive to promote sustainable gardening practices and educate our community about the benefits of plants for both mental and physical well-being. Our team of passionate horticulturists is dedicated to sharing their knowledge and helping you succeed in your gardening journey.</p> </div> </div> </div> </section> <!-- Vision Section --> <section id="vision" class="vision-section"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6 order-lg-2 mb-4 mb-lg-0"> <img src="https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2089&q=80" alt="Our Vision" class="img-fluid vision-img"> </div> <div class="col-lg-6 order-lg-1"> <h2 class="vision-headline">Our Vision</h2> <p class="lead">We envision a world where every home and community is enriched with the beauty and benefits of plants.</p> <p>Our goal is to be the leading plant nursery in the region, known for our exceptional quality, innovative gardening solutions, and commitment to environmental sustainability. We aim to inspire a new generation of plant lovers and create a greener, healthier future for all.</p> <p>Through continuous innovation and education, we strive to make gardening accessible to everyone, regardless of their experience level or living situation.</p> </div> </div> </div> </section> <!-- Counter Section --> <section class="counter-section"> <div class="container"> <div class="row text-center"> <div class="col-md-3"> <div class="counter-item"> <div class="counter-number" data-count="5000">0</div> <div class="counter-text">Happy Customers</div> </div> </div> <div class="col-md-3"> <div class="counter-item"> <div class="counter-number" data-count="350">0</div> <div class="counter-text">Plant Varieties</div> </div> </div> <div class="col-md-3"> <div class="counter-item"> <div class="counter-number" data-count="20">0</div> <div class="counter-text">Years Experience</div> </div> </div> <div class="col-md-3"> <div class="counter-item"> <div class="counter-number" data-count="100">0</div> <div class="counter-text">Awards Won</div> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact-section"> <div class="container"> <div class="row"> <div class="col-lg-6 mx-auto"> <div class="contact-form"> <h2 class="text-center mb-4">Get In Touch</h2> <form> <div class="mb-3"> <input type="text" class="form-control" placeholder="Your Name" required> </div> <div class="mb-3"> <input type="email" class="form-control" placeholder="Your Email" required> </div> <div class="mb-3"> <input type="tel" class="form-control" placeholder="Your Phone"> </div> <div class="mb-3"> <textarea class="form-control" rows="5" placeholder="Your Message" required></textarea> </div> <div class="text-center"> <button type="submit" class="btn btn-primary">Send Message</button> </div> </form> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container footer-content"> <div class="row"> <div class="col-lg-4 mb-4 mb-lg-0"> <div class="footer-logo">Green Haven</div> <p>Your premier destination for quality plants and gardening supplies since 2003.</p> <div class="social-icons mt-3"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-pinterest"></i></a> </div> </div> <div class="col-lg-2 col-md-6 mb-4 mb-md-0"> <div class="footer-links"> <h5>Quick Links</h5> <ul> <li><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#plants">Plants</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> <div class="col-lg-2 col-md-6 mb-4 mb-md-0"> <div class="footer-links"> <h5>Plants</h5> <ul> <li><a href="#">Indoor Plants</a></li> <li><a href="#">Outdoor Plants</a></li> <li><a href="#">Flowering Plants</a></li> <li><a href="#">Succulents</a></li> </ul> </div> </div> <div class="col-lg-4 col-md-12"> <div class="footer-links"> <h5>Contact Info</h5> <ul> <li><i class="fas fa-map-marker-alt me-2"></i> 123 Garden Lane, Greensville</li> <li><i class="fas fa-phone me-2"></i> (123) 456-7890</li> <li><i class="fas fa-envelope me-2"></i> info@greenhaven.com</li> <li><i class="fas fa-clock me-2"></i> Mon-Sat: 9AM - 6PM</li> </ul> </div> </div> </div> <div class="row mt-5"> <div class="col-12 text-center"> <p class="mb-0">© 2023 Green Haven Nursery. All Rights Reserved.</p> </div> </div> </div> </footer> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <!-- Typed.js for typing animation --> <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script> </body> </html>
CSS
:root { --primary-color: #2e8b57; --secondary-color: #f8f9fa; --accent-color: #ff7f50; --dark-color: #343a40; --light-color: #ffffff; } body { font-family: 'Montserrat', sans-serif; overflow-x: hidden; } h1, h2, h3, h4 { font-family: 'Playfair Display', serif; } /* Hero Section */ .hero { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://plus.unsplash.com/premium_photo-1679428401799-56bac671abd9?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTd8fHBsYW50JTIwbnVyc2VyeXxlbnwwfHwwfHx8MA%3D%3D'); background-size: cover; background-position: center; height: 100vh; display: flex; align-items: center; color: white; position: relative; } .hero-content { z-index: 2; } .typed-text { font-size: 3.5rem; font-weight: 700; color: var(--light-color); margin-bottom: 1.5rem; } @media (max-width: 768px) { .typed-text { font-size: 2.5rem; } } /* About Section */ .about-section { padding: 5rem 0; background-color: var(--secondary-color); } .about-img { border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } .about-img:hover { transform: scale(1.03); } .tagline { font-size: 2rem; font-weight: 700; color: var(--primary-color); position: relative; display: inline-block; margin-bottom: 2rem; } .tagline::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 50%; height: 3px; background-color: var(--accent-color); } /* Cards Section */ .cards-section { padding: 5rem 0; } .plant-card { border: none; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; margin-bottom: 2rem; opacity: 0; transform: translateY(50px); } .plant-card.animate { opacity: 1; transform: translateY(0); transition: opacity 0.5s ease, transform 0.5s ease; } .plant-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); } .card-img-top { height: 250px; object-fit: cover; } .card-body { padding: 1.5rem; } .card-title { color: var(--primary-color); font-weight: 700; } /* Mission Section */ .mission-section { padding: 5rem 0; background-color: var(--light-color); } .mission-headline { font-size: 2.5rem; color: var(--dark-color); position: relative; padding-bottom: 1rem; } .mission-headline::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100px; height: 3px; background-color: var(--primary-color); } /* Vision Section */ .vision-section { padding: 5rem 0; background-color: var(--secondary-color); } .vision-headline { font-size: 2.5rem; color: var(--dark-color); position: relative; padding-bottom: 1rem; opacity: 0; transform: translateX(-50px); } .vision-headline.animate { opacity: 1; transform: translateX(0); transition: opacity 0.5s ease, transform 0.5s ease; } .vision-img { border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); opacity: 0; transform: translateX(50px); } .vision-img.animate { opacity: 1; transform: translateX(0); transition: opacity 0.5s ease, transform 0.5s ease; } /* Counter Section */ .counter-section { padding: 3rem 0; background-color: var(--primary-color); color: white; } .counter-item { text-align: center; padding: 1.5rem; transition: all 0.3s ease; } .counter-item:hover { transform: translateY(-5px); } .counter-number { font-size: 3rem; font-weight: 700; margin-bottom: 0.5rem; } .counter-text { font-size: 1.2rem; text-transform: uppercase; } /* Contact Form */ .contact-section { padding: 5rem 0; background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1462530348824-65844534c0ed?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fHBsYW50JTIwbnVyc2VyeXxlbnwwfHwwfHx8MA%3D%3D'); background-size: cover; background-position: center; color: white; } .contact-form { background-color: rgba(255, 255, 255, 0.9); padding: 2rem; border-radius: 10px; color: var(--dark-color); } .form-control { margin-bottom: 1rem; border-radius: 5px; } .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); padding: 0.5rem 2rem; border-radius: 5px; } .btn-primary:hover { background-color: #267749; border-color: #267749; } /* Footer */ .footer { padding: 4rem 0; background: url('https://images.unsplash.com/photo-1708796705570-33fd29ef67d0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fHBsYW50JTIwbnVyc2VyeXxlbnwwfHwwfHx8MA%3D%3D'); background-size: cover; background-position: center; color: white; position: relative; } .footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); } .footer-content { position: relative; z-index: 1; } .footer-logo { font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--light-color); } .footer-links h5 { margin-bottom: 1.5rem; color: var(--accent-color); } .footer-links ul { list-style: none; padding-left: 0; } .footer-links li { margin-bottom: 0.5rem; } .footer-links a { color: var(--light-color); text-decoration: none; transition: color 0.3s ease; } .footer-links a:hover { color: var(--accent-color); } .social-icons a { display: inline-block; width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; text-align: center; line-height: 40px; margin-right: 10px; color: white; transition: all 0.3s ease; } .social-icons a:hover { background-color: var(--accent-color); transform: translateY(-5px); } /* Typing Animation */ .typed-cursor { font-size: 3.5rem; color: var(--light-color); opacity: 1; animation: blink 0.7s infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @media (max-width: 768px) { .typed-cursor { font-size: 2.5rem; } }
JavaScript
// Typing Animation document.addEventListener('DOMContentLoaded', function() { var typed = new Typed('#typed-text', { strings: ["Beautiful Plants for Your Home", "Quality Nursery Since 2003", "Expert Gardening Advice", "Bring Nature Indoors"], typeSpeed: 50, backSpeed: 30, loop: true }); // Card Animation const plantCards = document.querySelectorAll('.plant-card'); const visionHeadline = document.querySelector('.vision-headline'); const visionImg = document.querySelector('.vision-img'); const animateOnScroll = () => { plantCards.forEach((card, index) => { const cardPosition = card.getBoundingClientRect().top; const screenPosition = window.innerHeight / 1.3; if (cardPosition < screenPosition) { setTimeout(() => { card.classList.add('animate'); }, index * 200); } }); const visionPosition = visionHeadline.getBoundingClientRect().top; const visionScreenPosition = window.innerHeight / 1.3; if (visionPosition < visionScreenPosition) { visionHeadline.classList.add('animate'); visionImg.classList.add('animate'); } }; window.addEventListener('scroll', animateOnScroll); animateOnScroll(); // Run once on load // Counter Animation const counters = document.querySelectorAll('.counter-number'); const speed = 200; const animateCounters = () => { counters.forEach(counter => { const target = +counter.getAttribute('data-count'); const count = +counter.innerText; const increment = target / speed; if (count < target) { counter.innerText = Math.ceil(count + increment); setTimeout(animateCounters, 1); } else { counter.innerText = target; } }); }; // Start counter when scrolled to const counterSection = document.querySelector('.counter-section'); const startCounterOnScroll = () => { const counterPosition = counterSection.getBoundingClientRect().top; const counterScreenPosition = window.innerHeight / 1.3; if (counterPosition < counterScreenPosition) { animateCounters(); window.removeEventListener('scroll', startCounterOnScroll); } }; window.addEventListener('scroll', startCounterOnScroll); startCounterOnScroll(); // Run once on load });
Output Preview
Desktop
Mobile
Fullscreen