Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Make It Eco | Ecological Landscape Design</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#2E7D32', | |
| secondary: '#4CAF50', | |
| accent: '#8BC34A', | |
| dark: '#1B5E20', | |
| light: '#E8F5E9' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section --> | |
| <section class="relative h-screen flex items-center justify-center bg-gradient-to-br from-primary to-dark overflow-hidden"> | |
| <div class="absolute inset-0 bg-black opacity-40"></div> | |
| <div class="absolute inset-0 bg-[url('http://static.photos/nature/1200x630/42')] bg-cover bg-center"></div> | |
| <div class="relative z-10 text-center px-4 max-w-4xl mx-auto"> | |
| <h1 class="text-5xl md:text-7xl font-bold text-white mb-6">Make It <span class="text-accent">Eco</span></h1> | |
| <p class="text-xl md:text-2xl text-white mb-8">Transforming spaces into sustainable, beautiful landscapes that work with nature</p> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <a href="#services" class="px-8 py-3 bg-accent hover:bg-yellow-500 text-dark font-semibold rounded-full transition duration-300">Our Services</a> | |
| <a href="#contact" class="px-8 py-3 border-2 border-white hover:bg-white hover:text-dark text-white font-semibold rounded-full transition duration-300">Get a Quote</a> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> | |
| <a href="#about" class="text-white"> | |
| <i data-feather="chevron-down" class="w-10 h-10"></i> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark mb-6">Our <span class="text-primary">Eco</span> Philosophy</h2> | |
| <p class="text-gray-700 mb-6">At Make It Eco, we believe in creating landscapes that are not just beautiful, but also sustainable and beneficial to the ecosystem. Our designs incorporate native plants, water conservation techniques, and organic materials.</p> | |
| <p class="text-gray-700 mb-8">We work closely with nature rather than against it, creating spaces that thrive with minimal intervention and maximum environmental benefit.</p> | |
| <div class="flex flex-wrap gap-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="check-circle" class="text-primary mr-2"></i> | |
| <span>Native Plant Specialists</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="check-circle" class="text-primary mr-2"></i> | |
| <span>Water-Wise Designs</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="check-circle" class="text-primary mr-2"></i> | |
| <span>Sustainable Materials</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="relative rounded-xl overflow-hidden shadow-xl"> | |
| <img src="http://static.photos/nature/640x360/23" alt="Eco landscape" class="w-full h-auto"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-6"> | |
| <h3 class="text-white text-xl font-semibold">Sustainable Design in Action</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-light"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">Our <span class="text-primary">Services</span></h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Comprehensive ecological landscape solutions tailored to your space and sustainability goals</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden transition-transform duration-300 hover:scale-105"> | |
| <div class="h-48 bg-[url('http://static.photos/garden/640x360/1')] bg-cover bg-center"></div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary p-3 rounded-full mr-4"> | |
| <i data-feather="tree" class="text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark">Native Plant Design</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Landscapes featuring indigenous plants that require less water and support local wildlife.</p> | |
| <a href="#contact" class="text-primary font-semibold hover:underline">Learn more →</a> | |
| </div> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden transition-transform duration-300 hover:scale-105"> | |
| <div class="h-48 bg-[url('http://static.photos/water/640x360/2')] bg-cover bg-center"></div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary p-3 rounded-full mr-4"> | |
| <i data-feather="droplet" class="text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark">Water Management</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Rainwater harvesting, permeable paving, and drought-resistant solutions.</p> | |
| <a href="#contact" class="text-primary font-semibold hover:underline">Learn more →</a> | |
| </div> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden transition-transform duration-300 hover:scale-105"> | |
| <div class="h-48 bg-[url('http://static.photos/outdoor/640x360/3')] bg-cover bg-center"></div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary p-3 rounded-full mr-4"> | |
| <i data-feather="home" class="text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark">Residential Eco-Design</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Transform your backyard into a sustainable oasis with edible gardens and wildlife habitats.</p> | |
| <a href="#contact" class="text-primary font-semibold hover:underline">Learn more →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Gallery --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">Our <span class="text-primary">Work</span></h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">See how we've transformed spaces while preserving and enhancing the environment</p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="relative group overflow-hidden rounded-xl shadow-lg"> | |
| <img src="http://static.photos/garden/640x360/4" alt="Project 1" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"> | |
| <h3 class="text-white text-xl font-bold">Urban Oasis</h3> | |
| </div> | |
| </div> | |
| <div class="relative group overflow-hidden rounded-xl shadow-lg"> | |
| <img src="http://static.photos/garden/640x360/5" alt="Project 2" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"> | |
| <h3 class="text-white text-xl font-bold">Native Meadow</h3> | |
| </div> | |
| </div> | |
| <div class="relative group overflow-hidden rounded-xl shadow-lg"> | |
| <img src="http://static.photos/garden/640x360/6" alt="Project 3" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"> | |
| <h3 class="text-white text-xl font-bold">Permeable Patio</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#contact" class="inline-block px-8 py-3 bg-primary hover:bg-dark text-white font-semibold rounded-full transition duration-300">View More Projects</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 bg-light"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">Client <span class="text-primary">Stories</span></h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Hear what our clients say about our ecological approach</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> | |
| <img src="http://static.photos/people/200x200/1" alt="Client" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Sarah Johnson</h4> | |
| <p class="text-gray-500 text-sm">Homeowner</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4">"Our yard has transformed into a thriving ecosystem that attracts butterflies and birds while using 60% less water than before!"</p> | |
| <div class="flex text-accent"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> | |
| <img src="http://static.photos/people/200x200/2" alt="Client" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Michael Chen</h4> | |
| <p class="text-gray-500 text-sm">Business Owner</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4">"The sustainable courtyard Make It Eco designed for our office has become our employees' favorite space and reduced our water bill significantly."</p> | |
| <div class="flex text-accent"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> | |
| <img src="http://static.photos/people/200x200/3" alt="Client" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Emily Rodriguez</h4> | |
| <p class="text-gray-500 text-sm">Community Leader</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4">"Their work on our community park has educated residents about native plants while creating a beautiful, low-maintenance space for all to enjoy."</p> | |
| <div class="flex text-accent"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-dark text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row"> | |
| <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to <span class="text-accent">Make It Eco</span>?</h2> | |
| <p class="text-gray-300 mb-8">Contact us for a consultation on how we can transform your space into an ecological masterpiece.</p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-primary p-3 rounded-full mr-4"> | |
| <i data-feather="mail" class="text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Email Us</h4> | |
| <a href="mailto:[email protected]" class="text-gray-300 hover:text-accent transition">[email protected]</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary p-3 rounded-full mr-4"> | |
| <i data-feather="phone" class="text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Call Us</h4> | |
| <a href="tel:+18005551234" class="text-gray-300 hover:text-accent transition">(800) 555-1234</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary p-3 rounded-full mr-4"> | |
| <i data-feather="map-pin" class="text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Visit Us</h4> | |
| <p class="text-gray-300">123 Greenway Blvd, Eco City, EC 12345</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <form class="bg-white rounded-xl shadow-lg p-8"> | |
| <h3 class="text-2xl font-bold text-dark mb-6">Get a Free Quote</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label for="name" class="block text-gray-700 mb-1">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-gray-700 mb-1">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="project" class="block text-gray-700 mb-1">Project Type</label> | |
| <select id="project" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <option value="">Select a project type</option> | |
| <option value="residential">Residential Landscape</option> | |
| <option value="commercial">Commercial Space</option> | |
| <option value="garden">Edible Garden</option> | |
| <option value="water">Water Management</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-gray-700 mb-1">Tell us about your project</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"></textarea> | |
| </div> | |
| <button type="submit" class="w-full py-3 bg-primary hover:bg-dark text-white font-semibold rounded-lg transition duration-300">Send Message</button> | |
| </div> | |
| </form> | |
| </body> | |
| </html> |