Spaces:
Running
Running
File size: 19,976 Bytes
9842f26 1d90e65 9842f26 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 |
<!DOCTYPE html>
<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> |