Nursery Plant Center About Us
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 - About Us</title> <!-- AOS Animation Library --> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> <!-- GSAP Animation --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script> </head> <body class="m-0 p-0 relative"> <!-- Floating Leaves --> <div class="leaf" style="top:10%; left:5%;"></div> <div class="leaf" style="top:30%; right:10%;"></div> <div class="leaf" style="bottom:15%; left:20%;"></div> <!-- About Section --> <section class="w-screen h-screen flex flex-col md:flex-row items-center justify-center px-6 md:px-16"> <!-- Left Content --> <div class="w-full md:w-1/2 space-y-6 text-center md:text-left" data-aos="fade-right"> <h2 class="text-4xl md:text-5xl font-bold text-green-800">About GreenLeaf Nursery</h2> <p class="text-lg text-gray-700 leading-relaxed"> At GreenLeaf Nursery, we nurture plants with love and care. From indoor plants to exotic flowers and eco-friendly garden solutions, we help you bring nature closer to your home and workplace. ? </p> <button class="px-8 py-3 bg-green-600 text-white font-semibold rounded-xl shadow-lg hover:bg-green-800 transition transform hover:scale-105"> Explore Plants </button> </div> <!-- Right Image Grid --> <div class="w-full md:w-1/2 grid grid-cols-2 gap-4 mt-10 md:mt-0 md:pl-12" data-aos="fade-left"> <div class="card rounded-2xl overflow-hidden shadow-xl"> <img src="https://plus.unsplash.com/premium_photo-1673203734665-0a534c043b7f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fHBsYW50fGVufDB8fDB8fHww" alt="Indoor Plants" class="w-full h-full object-cover"> </div> <div class="card rounded-2xl overflow-hidden shadow-xl"> <img src="https://images.pexels.com/photos/1005058/pexels-photo-1005058.jpeg" alt="Flower Pots" class="w-full h-full object-cover"> </div> <div class="card rounded-2xl overflow-hidden shadow-xl col-span-2"> <img src="https://images.pexels.com/photos/2123246/pexels-photo-2123246.jpeg" alt="Nursery Garden" class="w-full h-64 md:h-80 object-cover"> </div> </div> </section> </body> </html>
CSS
body { font-family: 'Poppins', sans-serif; background: #f6fff8; } .card img { transition: transform 0.6s ease; } .card:hover img { transform: scale(1.1) rotate(-2deg); } .leaf { position: absolute; width: 40px; height: 40px; background: url('https://cdn-icons-png.flaticon.com/512/765/765514.png') no-repeat center/contain; opacity: 0.7; }
JavaScript
AOS.init({ duration: 1200, once: true, }); // Floating leaf animations with GSAP gsap.to(".leaf", { y: 30, repeat: -1, yoyo: true, ease: "sine.inOut", duration: 3, stagger: 0.5 }); // Button bounce animation gsap.from("button", { scale: 0.8, opacity: 0, duration: 1, ease: "back.out(1.7)", delay: 1 });
Output Preview
Desktop
Mobile
Fullscreen