-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
311 lines (307 loc) · 11.8 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Babcock Landscaping Co</title>
<script src="https://cdn.tailwindcss.com"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" />
</head>
<body>
<!-- Header -->
<header class="bg-lime-700 text-white py-3 px-6 sticky top-0 w-full z-10">
<div class="max-w-7xl mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<a href="#home" class="text-white">
<h1 class="text-white font-semibold text-xl">
Babcock Landscaping Co.
</h1>
</a>
</div>
<nav class="hidden md:block">
<ul class="flex space-x-8 font-semibold">
<li>
<a
href="#about"
class="text-lg hover:text-lime-100 transition duration-300">
About Us
</a>
</li>
<li class="relative">
<a
href="#services"
class="text-lg hover:text-lime-100 transition duration-300">
Services
</a>
</li>
<li>
<a
href="#contact"
class="text-lg hover:text-lime-100 transition duration-300">
Contact
</a>
</li>
<li>
<a
href="https://www.adminmatic.com/bl/portal"
class="text-lg hover:text-lime-100 transition duration-300">
Customer Portal
</a>
</li>
</ul>
</nav>
<div class="md:hidden pt-1">
<button id="menu-toggle" class="text-white focus:outline-none">
<svg class="h-8 w-8 fill-current" viewBox="0 0 24 24">
<path d="M3 5h18v2H3V5zm0 6h18v2H3v-2zm0 6h18v2H3v-2z" />
</svg>
</button>
</div>
</div>
<div
id="mobile-menu"
class="md:hidden fixed inset-0 bg-lime-700 text-white py-4 px-6 transform transition duration-200 ease-in-out translate-x-full">
<div class="flex justify-end">
<button class="text-white focus:outline-none menu-close">
<svg class="h-8 w-8 fill-current" viewBox="0 0 24 24">
<path
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" />
</svg>
</button>
</div>
<nav>
<ul class="flex flex-col space-y-4 font-semibold">
<li>
<a
href="#about"
class="text-lg hover:text-lime-100 transition duration-300 menu-close">
About Us
</a>
</li>
<li>
<a
href="#services"
class="text-lg hover:text-lime-100 transition duration-300 menu-close">
Services
</a>
</li>
<li>
<a
href="#contact"
class="text-lg hover:text-lime-100 transition duration-300 menu-close">
Contact
</a>
</li>
<li>
<a
href="https://www.adminmatic.com/bl/portal"
class="text-lg hover:text-lime-100 transition duration-300">
Customer Portal
</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- End Header -->
<main>
<!-- Home Section -->
<section
id="home"
class="bg-cover bg-no-repeat py-16 sm:py-24 md:py-32 lg:py-40 px-6 relative bg-gray-100"
style="
background-image: url('https://images.unsplash.com/photo-1602537675897-1285bfbcd014?auto=format&fit=crop&w=1920&q=80');
">
<div
class="max-w-2xl mx-auto relative text-center pt-8 pb-12 bg-white rounded-md opacity-90">
<img
src="logo.jpg"
alt="Babcock Landscaping Co Logo"
class="h-32 mx-auto" />
<p class="text-xl md:text-2xl mb-8">
Transforming outdoor spaces into beautiful landscapes.
</p>
<a
href="#services"
class="bg-lime-600 text-white py-3 px-8 rounded-md text-lg font-semibold hover:bg-lime-700 transition duration-300"
>Explore Our Services</a
>
</div>
</section>
<!-- End Home Section -->
<!-- About Section -->
<section id="about" class="py-24 px-6">
<div class="max-w-4xl mx-auto">
<h2 class="text-4xl font-bold mb-6 text-center">About Us</h2>
<p class="mb-6 text-lg">
Founded by Christopher Babcock in 2010,
<strong>Babcock Landscaping Co</strong> has been serving South
County Rhode Island with quality landscaping services. Our mission
is built on the principles of honesty, reliability, problem-solving,
and creative ideas.
</p>
<p class="text-lg">
We take pride in our attention to detail and use only the highest
quality materials and equipment to ensure stunning results. Our goal
is to provide our clients with unparalleled service and
craftsmanship, creating beautiful and functional outdoor spaces that
you can enjoy for years to come.
</p>
</div>
</section>
<!-- End About Section -->
<!-- Services Section -->
<section id="services" class="py-24 px-6 bg-lime-50 cursor-default">
<div class="max-w-4xl mx-auto">
<h2 class="text-4xl font-bold mb-8 text-center">Our Services</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
<div class="bg-white shadow-lg rounded-md overflow-hidden">
<img
src="https://images.unsplash.com/photo-1557429287-b2e26467fc2b"
alt="Maintenance"
class="w-full h-48 object-cover" />
<div class="p-6">
<h3 class="text-2xl font-bold mb-4">
Maintenance - Residential and Commercial
</h3>
<ul class="list-disc pl-6 text-lg">
<li>Lawn Mowing</li>
<li>Clean Ups</li>
<li>Mulch</li>
<li>Pruning</li>
<li>Fertilizer Programs</li>
<li>Tree and Shrub Plantings</li>
</ul>
</div>
</div>
<div class="bg-white shadow-lg rounded-md overflow-hidden">
<img
src="https://images.unsplash.com/photo-1536882240095-0379873feb4e"
alt="Landscape Construction"
class="w-full h-48 object-cover" />
<div class="p-6">
<h3 class="text-2xl font-bold mb-4">
Landscape Construction and Excavation
</h3>
<ul class="list-disc pl-6 text-lg">
<li>Walkways and Patios</li>
<li>Driveways</li>
<li>Lawn Installation</li>
<li>Hydroseeding</li>
<li>New Construction Excavation and Landscaping</li>
<li>Utilities and Site Work</li>
<li>Erosion and Dust Control</li>
<li>Ornamental and Screening Plantings</li>
<li>Brush cutting and lot clearing</li>
</ul>
</div>
</div>
</div>
<div class="bg-white shadow-lg rounded-md overflow-hidden">
<img
src="https://images.unsplash.com/photo-1516715094483-75da7dee9758?auto=format&fit=crop&w=1050&q=80"
alt="Commercial Snow Plowing"
class="w-full h-48 object-cover" />
<div class="p-6">
<h3 class="text-2xl font-bold mb-4">Commercial Snow Plowing</h3>
<p class="text-lg">Serving Southern Rhode Island</p>
</div>
</div>
</div>
</section>
<!-- End Services Section -->
<!-- Contact Section -->
<section id="contact" class="py-24 px-6">
<div class="max-w-4xl mx-auto">
<h2 class="text-4xl font-bold mb-8 text-center">Contact Us</h2>
<p class="mb-6 text-center text-lg">
Ready to transform your outdoor space? Contact us today to schedule
a consultation and learn more about how we can bring your
landscaping vision to life.
</p>
<div
class="flex flex-col md:flex-row justify-center items-center space-y-6 md:space-y-0 md:space-x-12 mb-6">
<a
href="https://www.adminmatic.com/bl/contact"
target="_self"
class="bg-lime-600 text-white py-3 px-8 rounded-md text-lg font-semibold hover:bg-lime-700 transition duration-300"
>Contact Us Now!</a
>
</div>
<div
class="flex flex-col md:flex-row justify-center items-center space-y-6 md:space-y-0 md:space-x-12 py-4">
<div class="text-center">
<i class="icon-phone text-4xl text-lime-600 mb-4"></i>
<p class="text-xl font-bold">Phone</p>
<p class="text-lg">401-595-6045</p>
</div>
<div class="text-center">
<i class="icon-envelope text-4xl text-lime-600 mb-4"></i>
<p class="text-xl font-bold">Email</p>
<p class="text-lg">[email protected]</p>
</div>
</div>
</div>
</section>
<!-- End Contact Section -->
</main>
<footer class="bg-gray-800 text-white py-8 px-6">
<div class="max-w-4xl mx-auto text-center">
<p class="text-lg">
© 2024 Babcock Landscaping Co. All rights reserved.
</p>
<div class="flex justify-center space-x-4 mt-4">
<a href="#" class="text-white hover:text-lime-100"
><i class="icon-facebook fa-2x"></i
></a>
<a href="#" class="text-white hover:text-lime-100"
><i class="icon-twitter fa-2x"></i
></a>
<a href="#" class="text-white hover:text-lime-100"
><i class="icon-instagram fa-2x"></i
></a>
<a href="#" class="text-white hover:text-lime-100"
><i class="icon-linkedin fa-2x"></i
></a>
</div>
</div>
</footer>
</body>
<script>
const menuToggle = document.getElementById("menu-toggle");
const menuClose = document.getElementsByClassName("menu-close");
const mobileMenu = document.getElementById("mobile-menu");
var close_menu = function () {
mobileMenu.classList.add("translate-x-full");
};
for (var i = 0; i < menuClose.length; i++) {
menuClose[i].addEventListener("click", close_menu, false);
}
menuToggle.addEventListener("click", () => {
mobileMenu.classList.remove("translate-x-full");
});
/*
var details = {
key: "aa50df-25a6ad-614ff5-893d41-e8a80f",
};
var form_body = [];
for (var property in details) {
var encodedKey = encodeURIComponent(property);
var encodedValue = encodeURIComponent(details[property]);
form_body.push(encodedKey + "=" + encodedValue);
}
form_body = form_body.join("&");
fetch("https://www.adminmatic.com/api/live", {
method: "POST",
body: form_body,
headers: {
"Content-type": "application/x-www-form-urlencoded",
},
})
.then((response) => response.json())
.then((json) => console.log(json));
*/
</script>
</html>