Welcome to Green Nursery Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nursery Plant Center</title> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&family=Poppins:wght@400;600&display=swap" rel="stylesheet"> </head> <body> <section class="hero"> <div class="overlay"></div> <div class="hero-content"> <h1>Welcome to Green Nursery</h1> <p>Bring nature closer to home with our wide variety of plants, flowers & trees. Freshness and greenery delivered to you.</p> <button>Explore Plants</button> </div> </section> <!-- GSAP Animations --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> </body> </html>
CSS
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; overflow-x: hidden; } .hero { position: relative; height: 100vh; background: url('https://plus.unsplash.com/premium_photo-1663076538857-8e712ff5b25f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fHBsYW50JTIwY2VudGVyfGVufDB8fDB8fHww') center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: #fff; } .overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); } .hero-content { position: relative; text-align: center; padding: 40px 30px; border-radius: 20px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); max-width: 650px; z-index: 2; } .hero-content h1 { font-family: 'Playfair Display', serif; font-size: 3.2rem; margin-bottom: 20px; color: #ffffff; } .hero-content p { font-size: 1.1rem; margin-bottom: 25px; color: #d8fbd8; } .hero-content button { padding: 14px 35px; font-size: 1rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, #4caf50, #2e7d32); border: none; border-radius: 30px; cursor: pointer; transition: 0.3s; } .hero-content button:hover { transform: scale(1.08); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } @media(max-width: 768px) { .hero-content h1 { font-size: 2.2rem; } .leaf { display: none; } }
JavaScript
gsap.from(".hero-content h1", { y: 100, opacity: 0, duration: 1.2, ease: "power4.out" }); gsap.from(".hero-content p", { y: 60, opacity: 0, duration: 1, delay: 0.3, ease: "power3.out" }); gsap.from(".leaf", { y: 50, opacity: 0, duration: 1.5, stagger: 0.4, ease: "power2.out" }); // Floating effect gsap.to(".leaf", { y: 20, repeat: -1, yoyo: true, ease: "sine.inOut", duration: 3, stagger: 0.5 });
Output Preview
Desktop
Mobile
Fullscreen