-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
184 lines (170 loc) · 8.64 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Tailwind link -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<!-- CSS link -->
<link rel="stylesheet" href="styles.css">
<!-- Boxicons link -->
<link rel="stylesheet"
href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
<!-- Remixicons link -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Shippori+Antique&display=swap" rel="stylesheet">
<title>Green Gorilla Cleaning Company Website</title>
</head>
<body>
<header>
<a href="index.html" class="logo-text" aria-label="Green Gorilla Cleaning Company Home">GGCC</a>
<ul class="navlist">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="right-nav">
<a href="contact.html" class="h-btn">Contact</a>
<div class="bx bx-menu" id="menu-icon" aria-label="Toggle navigation"></div>
</div>
</header>
<!-- Intro -->
<section class="container containerpadding justify-center">
<div class=" grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="mt-2">
<h4>WELCOME TO GREEN GORILLA CLEANING COMPANY</h4>
<h1 class="fade-in-top">Clean Space, Clear Mind</h1>
<p>Let us clean for you. GG is committed to using the least amount of harmful chemicals as possible, not only are they bad for the environment they can be particularly harmful to those with sensitivities, pets and little ones.</p>
<a href="#services" class="otherbtn mb-4">Learn More</a>
</div>
<div class="image-container">
<img src="/images/greengorillalogo.png" alt="Green Gorilla Cleaning Company logo" class="w-full h-auto fade-in-top">
</div>
</div>
</section>
<!-- What We Offer -->
<section class="bg-gray-200" id="services">
<div class="container mx-auto flex flex-wrap items-center py-12">
<div class="text-center">
<h2 class="text-green-600 mb-6 servicesfont">Our services are customizable</h2>
<p class="px-6">We offer standard and deep cleans. Because we believe in a personal touch, we don’t give quotes until we see your space and walk through it. This allows us to be more accurate and truly understand your individual.</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 px-6">
<!-- Commercial Cleaning Card -->
<div class="card">
<div class="card-img-container">
<img src="/images/office2.jpeg" alt="Commercial Cleaning" class="card-img">
</div>
<div class="card-content">
<h4 class="p-3">Commercial Cleaning</h4>
<p>Our professional cleaners will keep your space dirt free, so you can focus on your business.</p>
<a href="/contact.html">Get a quote</a>
</div>
</div>
<!-- Residential Cleaning Card -->
<div class="card">
<div class="card-img-container">
<img src="/images/residential.jpg" alt="Residential Cleaning" class="card-img">
</div>
<div class="card-content">
<h4 class="p-3">Residential Cleaning</h4>
<p>We know you’re your home is precious. Let us take care of it for you to enjoy. Our team is dedicated to creating the peace that comes from a job well done. A la carte options available. </p>
<a href="/contact.html">Get a quote</a>
</div>
</div>
<!-- Specialized Cleaning Services -->
<div class="card">
<div class="card-img-container">
<img src="/images/laundry.jpg" alt="folding laundry" class="card-img">
</div>
<div class="card-content">
<h4 class="p-3">Specialized Cleaning</h4>
<p>A la carte options available: vaccuuming vehicle, fold and store laundry, holiday decoration removal, specialized organization of a space, plant care, patio and porch care, and wiping out refrigerator.</p>
<a href="/contact.html">Get a quote</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="testimonials bg-gray-100 relative">
<img src="/images/cleanphoto5.jpg" alt="Background image for testimonials" class="object-cover rounded shadow-lg w-full h-full absolute inset-0 opacity-40">
<div class="container mx-auto px-6 py-12">
<h2 class="text-center text-3xl font-semibold mb-6 text-black">Happy Clients</h2>
<ul class="testimonial-list">
<!-- Testimonial 1 -->
<li class="testimonial-item">
<p class="testimonial-quote">"Green Gorilla Cleaning Company has been cleaning our office space for a couple of years. They do an excellent job, are very thorough, always dependable and always go the extra mile to ensure all of the small details are perfect."</p>
<cite class="testimonial-author">– Brandee</cite>
</li>
<!-- Testimonial 2 -->
<li class="testimonial-item">
<p class="testimonial-quote">"Green Gorilla Cleaning Company are true professionals! I appreciate how often they communicate with me and their prices are reasonable. My cleaner does a great job cleaning our home. As a full-time working mom with kids going in every direction, I appreciate her so much!"</p>
<cite class="testimonial-author">– Penney</cite>
</li>
</ul>
</div>
</section>
<!-- Ready for a cleaner space -->
<section class="bg-gray-100 text-gray-800">
<div class="container">
<div class="text-center">
<h2 class="text-3xl font-semibold text-green-600 mb-6">Ready for a Cleaner Space?</h2>
<p class="mb-8 text-lg md:text-xl text-center">Reach out to us and let's make your space shine!</p>
<a href="/contact.html" class="bg-green-600 text-black py-3 px-6 rounded-full text-lg font-medium hover:bg-green-700 transition-colors">Contact Us</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer py-6">
<div class=" px-6 mx-auto space-y-6 divide-y divide-gray-400 md:space-y-12 divide-opacity-50">
<div class="grid grid-cols-12">
<div class="pb-6 col-span-full md:pb-0 md:col-span-6">
<a href="index.html" class="flex justify-center space-x-3 md:justify-start">
<div class="flex items-center justify-center w-12 h-12 rounded-full "></div>
<span class="self-center text-2xl font-semibold">Green Gorilla Cleaning Company</span>
</a>
</div>
<div class="col-span-6 text-center md:text-left md:col-span-3">
<p class="pb-1 text-lg font-medium">Services</p>
<ul>
<li>
<a href="services.html" class="footer-hover">Commercial</a>
</li>
<li>
<a href="services.html" class="footer-hover">Residential</a>
</li>
</ul>
</div>
<div class="col-span-6 text-center md:text-left md:col-span-3">
<p class="pb-1 text-lg font-medium"> Menu</p>
<ul>
<li>
<a href="index.html" class="footer-hover">Home</a>
</li>
<li>
<a href="services.html" class="footer-hover">Services</a>
</li>
<li>
<a href="contact.html" class="footer-hover">Contact</a>
</li>
</ul>
</div>
</div>
<div class="grid justify-center pt-6">
<div class="flex flex-col text-sm md:block lg:col-start-1 md:space-x-6 text-center">
<span>©2023 Green Gorilla Cleaning Company. All rights reserved</span>
</div>
</div>
</div>
</footer>
<!-- ScrollReveal -->
<script src="https://unpkg.com/scrollreveal"></script>
<!-- JS link -->
<script src="script.js"></script>
</body>
</html>