-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
105 lines (96 loc) · 5.49 KB
/
Copy pathindex.html
File metadata and controls
105 lines (96 loc) · 5.49 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EcoCleanse | Professional Eco-Friendly Cleaning</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Quicksand:wght@500;700&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<a href="index.html" class="logo">Eco<span>Cleanse</span></a>
<div class="nav-links">
<a href="index.html">Home</a>
<a href="services.html">Services</a>
<a href="#" class="btn btn-main" style="padding: 10px 20px; font-size: 0.9rem;">Book Online</a>
</div>
</nav>
<header class="hero" style="padding: 100px 8%; background: linear-gradient(135deg, #ffffff 0%, #f0f7f2 100%); display: flex; align-items: center; gap: 50px;">
<div class="hero-text" style="flex: 1;">
<h1 style="font-size: 3.8rem; line-height: 1.1; color: var(--eco-green); margin-bottom: 25px;">We Clean.<br>You Relax.</h1>
<p>Deerfield's premier eco-friendly cleaning service. We remove toxins and allergens using premium Shaklee organic solutions.</p>
<br>
<a href="#booking" class="btn btn-main">View Instant Pricing</a>
</div>
<div class="hero-image" style="flex: 1;">
<img src="https://images.unsplash.com/photo-1584622781564-1d987f7333c1?auto=format&fit=crop&q=80&w=1000" alt="Clean Kitchen" style="width: 100%; border-radius: 30px; box-shadow: 20px 20px 0px var(--marigold);">
</div>
</header>
<div class="trust-bar" style="background: #2d3436; color: white; padding: 40px 8%; display: flex; justify-content: space-around; flex-wrap: wrap; text-align: center;">
<div class="stat"><h3 style="color: var(--marigold); font-size: 2rem;">500+</h3><p>Homes Cleaned</p></div>
<div class="stat"><h3 style="color: var(--marigold); font-size: 2rem;">100%</h3><p>Eco-Friendly</p></div>
<div class="stat"><h3 style="color: var(--marigold); font-size: 2rem;">4.9/5</h3><p>Google Rating</p></div>
</div>
<section>
<div class="section-title">
<h2>How it Works</h2>
<p>Our seamless booking process takes less than 60 seconds.</p>
</div>
<div class="grid">
<div style="text-align: center;">
<div style="width: 60px; height: 60px; background: var(--eco-green); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; margin: 0 auto 20px;">1</div>
<h3>Choose Your Time</h3>
<p>Select a date and time that fits your schedule using our live booking calendar.</p>
</div>
<div style="text-align: center;">
<div style="width: 60px; height: 60px; background: var(--eco-green); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; margin: 0 auto 20px;">2</div>
<h3>We Clean Eco-Style</h3>
<p>Our background-checked professionals arrive with non-toxic supplies to scrub your space.</p>
</div>
<div style="text-align: center;">
<div style="width: 60px; height: 60px; background: var(--eco-green); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; margin: 0 auto 20px;">3</div>
<h3>Enjoy Your Home</h3>
<p>Step into a fresh, toxin-free environment. Your satisfaction is 100% guaranteed.</p>
</div>
</div>
</section>
<section class="checklist-bg">
<div class="checklist-container">
<div style="flex: 1;">
<h2>The Eco-Clean Standard</h2>
<p>Unlike standard cleaners, we touch every surface. Here is what's included in every standard residential visit:</p>
<div class="checklist-items">
<div class="check-item">Sanitize Countertops</div>
<div class="check-item">Vacuum & Mop Floors</div>
<div class="check-item">Scrub Sinks & Tubs</div>
<div class="check-item">Dust All Surfaces</div>
<div class="check-item">Empty All Trash</div>
<div class="check-item">Clean Mirror/Glass</div>
<div class="check-item">Stovetop Degreasing</div>
<div class="check-item">Microwave Interior</div>
</div>
</div>
<div style="flex: 1;">
<img src="https://images.unsplash.com/photo-1556911220-e15b29be8c8f?auto=format&fit=crop&q=80&w=800"
style="width: 100%; border-radius: 20px;"
alt="Eco-friendly cleaning supplies">
</div>
</div>
<div class="specialized-footer">
<h3 style="color: var(--eco-green); margin-bottom: 10px;">Our Specialized Cleaning</h3>
<p>Looking for office cleaning, natural stone care, or post-construction?</p>
<a href="services.html" style="color: var(--eco-green); font-weight: 700; text-decoration: underline; display: inline-block; margin-top: 10px;">
View Full Service Menu & Details
</a>
</div>
</section>
<section style="text-align: center; background: var(--eco-green); color: white;">
<h2 style="color: white; font-size: 2.5rem; margin-bottom: 20px;">Ready for a fresh start?</h2>
<a href="#" class="btn btn-main">Book Your Eco-Clean Now</a>
</section>
<footer class="footer-light">
<p>© 2026 EcoCleanse Chicago. Family Owned & Operated.</p>
</footer>
</body>
</html>