generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
461 lines (444 loc) · 27.3 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
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
<!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">
<meta name="description" content="The Dog House - Professional Dog Grooming in Prestatyn, North Wales">
<!-- Font awesome icons-->
<script src="https://kit.fontawesome.com/2d6908b6f2.js" crossorigin="anonymous"></script>
<!-- Favicon icon location -->
<link rel="icon" href="assets/images/favicon-32x32.png">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- Main Stylesheet -->
<link href="assets/css/styles.css" rel="stylesheet">
<title>The Dog House</title>
</head>
<body class="txt-color-3">
<!-- Header -->
<header>
<!-- Fixed Navbar with collapsible hamburger menu for smaller devices -->
<nav class="navbar navbar-expand-lg bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img class="logo" src="assets/images/the-dog-house-logo.png" alt="The Dog House Logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav mb-2 mb-lg-0 ">
<li class="nav-item">
<a class="nav-link txt-color-3" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link txt-color-3" href="#services-section">Services</a>
</li>
<li class="nav-item">
<a class="nav-link txt-color-3" href="#gallery-section">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link txt-color-3" href="#testimonials-section">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link txt-color-3" href="#contact-section">Contact</a>
</li>
<li class="nav-item">
<a href="#book-section"
class="btn btn-outline-success book-btn-nav txt-color-1 bg-color-3 book-link">Book</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Seperator -->
<!-- Seperator top class used to push the content down below the header -->
<div class="container-fluid seperator seperator-top fixed-top bg-color-2">
<div class="row">
<div class="col">
<p><a class="txt-color-1" href="tel:01745886609" target="_blank">01745 886609</a></p>
</div>
</div>
</div>
<!-- Hero Section -->
<section id="hero-section">
<div class="container-fluid text-bg-dark">
<div class="row hero-row bg-color-1">
<div class="col-md-6 hero-columns hero-header txt-color-3">
<h1>The Dog House</h1>
<h2>Professional Dog Grooming</h2>
<a href="#book-section" class="btn btn-outline-success hero-button txt-color-1 bg-color-3">Book</a>
</div>
<div class="col-md-6 hero-columns text-center">
<!-- SRCSET's used to aid page loading (see readme for snippet) -->
<img class="hero-image"
sizes="(max-width: 576px) 576px, (max-width: 768px) 768px, (min-width: 769px) 769px"
src="assets/images/hero-image-lg.webp"
srcset="assets/images/hero-image-sm.webp 576w, assets/images/hero-image-md.webp 768w, assets/images/hero-image-lg.webp 2048w"
alt="Groomed Border Collie">
</div>
</div>
</div>
</section>
<!-- Services Section-->
<!-- Anchor class used to bring the user to the top of the section -->
<span class="anchor" id="services-section"></span>
<section>
<div class="container-fluid txt-color-1 sections-container">
<div class="row">
<!-- Bootstrap columns used to centre the section header in larger views -->
<div class="col-md-3"></div>
<div class="col-12 col-md-6 section-header text-center">
<h2>Services</h2>
<p>We take pride in caring for each dog as our own. Choose from our range of services to pamper your
pooch</p>
</div>
<div class="col-md-3"></div>
</div>
<div class="row gx-5 gy-5 services-items-row">
<!-- Single column layout for small devices, 2 columns foe medium devices and three columns for large devices -->
<div class="col-12 col-md-6 col-lg-4 service-item">
<h3 class="first-service-item txt-color-1"><i class="fa-solid fa-dog" aria-hidden="true"></i> Full
Groom</h3>
<p>Includes a pre-groom, 2 shampoo washes, blow dry, full body styling, eyes and ears cleaned and
nails clipped</p>
</div>
<div class="col-12 col-md-6 col-lg-4 service-item">
<h3><i class="fa-solid fa-spa" aria-hidden="true"></i> Spa Treatment</h3>
<p>Treat your pooch to our hydrating Argan oil conditioning treatment and wildwash paw and nose balm
</p>
</div>
<div class="col-12 col-md-6 col-lg-4 service-item">
<h3><i class="fa-solid fa-hands-bubbles" aria-hidden="true"></i> Wash & Go</h3>
<p>Full use of all our facilities for 30 minutes, including our full-height bath, professional
drier, microfibre towels and even cologne</p>
</div>
<div class="col-12 col-md-6 col-lg-4 service-item">
<h3><i class="fa-solid fa-paw" aria-hidden="true"></i> Paw & Nails</h3>
<p>Allow our groomers to trim your dogs nails. We file the nails too so they are neater, smoother
and safer.</p>
</div>
<div class="col-12 col-md-6 col-lg-4 service-item">
<h3><i class="fa-solid fa-shield-dog" aria-hidden="true"></i> Ear Cleaning</h3>
<p>Ears checked and wax removed. Ear hair trim as required</p>
</div>
<div class="col-12 col-md-6 col-lg-4 service-item">
<h3><i class="fa-solid fa-bath" aria-hidden="true"></i> Bath & Brush</h3>
<p>This includes a wash with 2 shampoos, dry, nail clipping, ear cleaning and a brush</p>
</div>
</div>
</div>
</section>
<!-- Gallery Section -->
<span class="anchor" id="gallery-section"></span>
<section>
<div class="container-fluid sections-container bg-color-1 gallery-container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-12 col-md-6 section-header text-center">
<h2>Gallery</h2>
<p>Our pooches are our pride and joy and we delight in keeping them healthy, clean and positively
gorgeous</p>
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-12 col-md-4">
<img class="img-fluid rounded"
sizes="(max-width: 576px) 100vw, (max-width: 768px) 100vw, (min-width: 769px) 100vw"
src="assets/images/gallery-image-1-lg.webp"
srcset="assets/images/gallery-image-1-sm.webp 576w, assets/images/gallery-image-1-md.webp 768w, assets/images/gallery-image-1-lg.webp 2048w"
alt="Groomed black Cockapoo posing on a green armchair">
<img class="img-fluid rounded"
sizes="(max-width: 576px) 100vw, (max-width: 768px) 100vw, (min-width: 769px) 100vw"
src="assets/images/gallery-image-2-lg.webp"
srcset="assets/images/gallery-image-2-sm.webp 576w, assets/images/gallery-image-2-md.webp 768w, assets/images/gallery-image-2-lg.webp 2048w"
alt="Groomed Rough Collie Dog posing on a green armchair">
<img class="img-fluid rounded"
sizes="(max-width: 576px) 100vw, (max-width: 768px) 100vw, (min-width: 769px) 100vw"
src="assets/images/gallery-image-3-lg.webp"
srcset="assets/images/gallery-image-3-sm.webp 576w, assets/images/gallery-image-3-md.webp 768w, assets/images/gallery-image-3-lg.webp 2048w"
alt="Groomed Bischon Fris relaxing on a green armchair">
<img class="img-fluid rounded"
sizes="(max-width: 576px) 100vw, (max-width: 768px) 100vw, (min-width: 769px) 100vw"
src="assets/images/gallery-image-4-lg.webp"
srcset="assets/images/gallery-image-4-sm.webp 576w, assets/images/gallery-image-4-md.webp 768w, assets/images/gallery-image-4-lg.webp 2048w"
alt="Groomed apricot Cocakpoo posing on a green armchair">
</div>
<div class="col-12 col-md-4">
<img class="img-fluid rounded"
sizes="(max-width: 576px) 100vw, (max-width: 768px) 100vw, (min-width: 769px) 100vw"
src="assets/images/gallery-image-5-lg.webp"
srcset="assets/images/gallery-image-5-sm.webp 576w, assets/images/gallery-image-5-md.webp 768w, assets/images/gallery-image-5-lg.webp 2048w"
alt="Groomed brown and white Cocker Spaniel on a green armchair">
<img class="img-fluid rounded"
sizes="(max-width: 576px) 100vw, (max-width: 768px) 100vw, (min-width: 769px) 100vw"
src="assets/images/gallery-image-6-lg.webp"
srcset="assets/images/gallery-image-6-sm.webp 576w, assets/images/gallery-image-6-md.webp 768w, assets/images/gallery-image-6-lg.webp 2048w"
alt="Two groomed Cocker Spaniels relaxing on a green armchair">
<img class="img-fluid rounded"
sizes="(max-width: 576px) 100vw, (max-width: 768px) 100vw, (min-width: 769px) 100vw"
src="assets/images/gallery-image-7-lg.webp"
srcset="assets/images/gallery-image-7-sm.webp 576w, assets/images/gallery-image-7-md.webp 768w, assets/images/gallery-image-7-lg.webp 2048w"
alt="Groomed black Cocker Spaniel posing on the grooming table">
<img class="img-fluid rounded"
sizes="(max-width: 576px) 100vw, (max-width: 768px) 100vw, (min-width: 769px) 100vw"
src="assets/images/gallery-image-8-lg.webp"
srcset="assets/images/gallery-image-8-sm.webp 576w, assets/images/gallery-image-8-md.webp 768w, assets/images/gallery-image-8-lg.webp 2048w"
alt="Groomed fawn French Bull Dog looking out of the salon window">
</div>
<!-- The next div of 4 images is hidden on small devices for better user experience -->
<div class="col-12 col-md-4 d-none d-md-block">
<img class="img-fluid rounded"
sizes="(max-width: 576px) 100vw, (max-width: 768px) 100vw, (min-width: 769px) 100vw"
src="assets/images/gallery-image-9-lg.webp"
srcset="assets/images/gallery-image-9-sm.webp 576w, assets/images/gallery-image-9-md.webp 768w, assets/images/gallery-image-9-lg.webp 2048w"
alt="Groomed fawn Cocker Spaniel puppy on the grooming table">
<img class="img-fluid rounded"
sizes="(max-width: 576px) 100vw, (max-width: 768px) 100vw, (min-width: 769px) 100vw"
src="assets/images/gallery-image-10-lg.webp"
srcset="assets/images/gallery-image-10-sm.webp 576w, assets/images/gallery-image-10-md.webp 768w, assets/images/gallery-image-10-lg.webp 2048w"
alt="Groomed puppy Cockapoo on the shop floor">
<img class="img-fluid rounded"
sizes="(max-width: 576px) 100vw, (max-width: 768px) 100vw, (min-width: 769px) 100vw"
src="assets/images/gallery-image-11-lg.webp"
srcset="assets/images/gallery-image-11-sm.webp 576w, assets/images/gallery-image-11-md.webp 768w, assets/images/gallery-image-11-lg.webp 2048w"
alt="Groomed Schnauzer posing in a green armchair">
<img class="img-fluid rounded"
sizes="(max-width: 576px) 100vw, (max-width: 768px) 100vw, (min-width: 769px) 100vw"
src="assets/images/gallery-image-12-lg.webp"
srcset="assets/images/gallery-image-12-sm.webp 576w, assets/images/gallery-image-12-md.webp 768w, assets/images/gallery-image-12-lg.webp 2048w"
alt="Groomed Cocker Spaniel relaxing in a green armchair">
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<span class="anchor" id="testimonials-section"></span>
<section>
<div class="container-fluid sections-container testimonials-container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-12 col-md-6 section-header text-center">
<h2 class="txt-color-1">Testimonials</h2>
<p class="txt-color-1">Hear what our lovely customers and their pooches think of us. Customer
service is at the heart of
our business</p>
</div>
<div class="col-md-3"></div>
</div>
<div class="row gx-5 gy-5 ms-sm-3 me-sm-3 mb-4">
<article class="col-12 col-md-6">
<div class="row testimonial-item rounded bg-color-1">
<!-- Column width larger for the image on smaller devices to keep correct proportions and prevent overlap with the testimonial text -->
<div class="col-5 col-md-4 mt-3 text-center">
<figure class="figure">
<!-- Image size and file size reduced appropriately for the image size used -->
<img src="assets/images/rosie-300w.webp" class="figure-img img-fluid rounded-circle"
alt="Rosie the black Cockapoo posing in her back garden">
<figcaption class="figure-caption text-center txt-color-3">Rosie</figcaption>
</figure>
</div>
<div class="col-7 col-md-8 testimonial-text pe-3">
<h3 class="testimonial-title mt-3">Leah Hughes <span class="testimonial-subtitle">(Rosie's
Mum)</span></h3>
<p class="txt-color-2"><strong class="testimonial-strong">Great service</strong> and made Rosie feel right at home. Her coat never
looked and smelt so good!
Thanks for taking care of her. We'll be back for a pamper again soon</p>
</div>
</div>
</article>
<article class="col-12 col-md-6 mb-4">
<div class="row testimonial-item rounded bg-color-1">
<div class="col-5 col-md-4 mt-3 text-center">
<figure class="figure">
<img src="assets/images/brandi-300w.webp" class="figure-img img-fluid rounded-circle"
alt="Brandi the chocolate cockapoo sitting in a green chair">
<figcaption class="figure-caption text-center txt-color-3">Brandi</figcaption>
</figure>
</div>
<div class="col-7 col-md-8 testimonial-text pe-3">
<h3 class="testimonial-title mt-3">Abby Humphreys <span
class="testimonial-subtitle">(Brandi's Mum)</span></h3>
<p class="txt-color-2">Perfect service. <strong class="testimonial-strong">Friendly and helpful</strong> from the outset. I couldn't
have felt more comfortable leaving my pooch to have her groom. </p>
</div>
</div>
</article>
</div>
<div class="row gx-5 gy-5 ms-sm-3 me-sm-3 mb-4">
<article class="col-12 col-md-6">
<div class="row testimonial-item rounded bg-color-1">
<div class="col-5 col-md-4 mt-3 text-center">
<figure class="figure">
<img src="assets/images/bear-300w.webp" class="figure-img img-fluid rounded-circle"
alt="Bear relaxing in the green chair at the groomers">
<figcaption class="figure-caption text-center txt-color-3">Bear</figcaption>
</figure>
</div>
<div class="col-7 col-md-8 testimonial-text pe-3">
<h3 class="testimonial-title mt-3">Rebecca Sheen <span class="testimonial-subtitle">(Bear's
Mum)</span></h3>
<p class="txt-color-2"><strong class="testimonial-strong">Highly recommend</strong> The Dog House. Bear came home smelling amazing. He
loved his pamper. Thanks again</p>
</div>
</div>
</article>
<article class="col-12 col-md-6">
<div class="row testimonial-item rounded bg-color-1">
<div class="col-5 col-md-4 mt-3 text-center">
<figure class="figure">
<img src="assets/images/molly-300w.webp" class="figure-img img-fluid rounded-circle"
alt="Molly the Spaniel relaxing in the groomer green armchair">
<figcaption class="figure-caption text-center txt-color-3">Molly</figcaption>
</figure>
</div>
<div class="col-7 col-md-8 testimonial-text pe-3">
<h3 class="testimonial-title mt-3">Caroline Riley <span
class="testimonial-subtitle">(Molly's Mum)</span></h3>
<p class="txt-color-2">Holly was <strong class="testimonial-strong">absolutely fantastic</strong> from start to finish! She listened to
what I wanted and had full knowledge of how to cut a cocker spaniel</p>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- Book Appointment Section -->
<span class="anchor" id="book-section"></span>
<section>
<div class="container-fluid sections-container bg-color-1 book-container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-12 col-md-6 section-header form-header text-center">
<h2>Book an Appointment</h2>
<p class="phone phone-book">To book an appointment at The Dog House or for all general enquiries, call us on <a
class="txt-color-2" href="tel:01745886609" target="_blank">01745 886609</a> or fill in the contact form
below for a call back.</p>
</div>
<div class="col-md-3"></div>
</div>
<div class="container-fluid">
<!-- Code Institute form page used for action attribute. This is will be replaced for live site using javascript -->
<form action="https://formdump.codeinstitute.net/" method="POST" target="_blank">
<div class="row ms-5 me-5">
<!-- Each label and attribute spans full width on small devices for readibility purposes-->
<div class="col-12 col-md-6">
<div class="mb-3">
<label for="fullname" class="form-label">Owner's Name:</label>
<input type="text" name="name" class="form-control" id="fullname" placeholder="Enter your name"
required>
</div>
</div>
<div class="col-12 col-md-6">
<div class="mb-3">
<label for="email" class="form-label">Email address:</label>
<input type="email" name="email" class="form-control" id="email"
placeholder="Enter your email address" required>
</div>
</div>
</div>
<div class="row ms-5 me-5">
<div class="col-12 col-md-6">
<div class="mb-3">
<label for="phone" class="form-label">Phone number:</label>
<input type="number" name="phone" class="form-control" id="phone"
placeholder="Enter your phone number" required>
</div>
</div>
<div class="col-12 col-md-6">
<div class="mb-3">
<label for="dog" class="form-label">Dog breed: (optional)</label>
<input type="text" name="breed" class="form-control" id="dog" placeholder="Enter your dog's breed">
</div>
</div>
</div>
<div class="row ms-5 me-5">
<div class="col">
<div class="mb-3">
<label for="message" class="form-label">Message: (optional)</label>
<textarea class="form-control" name="message" id="message" rows="3"
placeholder="Enter your message here"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col text-center">
<button type="submit" class="btn btn-outline-success txt-color-1 bg-color-3">Send
Message</button>
</div>
</div>
</form>
</div>
</div>
</section>
<!-- Seperator -->
<div class="container-fluid seperator bg-color-2">
<div class="row">
<div class="col social-links">
<p>
<!-- Social Links to live pages used with permission from the Owners of The Dog House -->
<a class="txt-color-1" href="https://www.facebook.com/profile.php?id=100083360560310" target="_blank">
<i class="fa-brands fa-facebook txt-color-1"></i>
<!-- As there is no text in this section (icons used) the sr-only class was introduced to help with accessibility -->
<span class="sr-only">Facebook</span>
</a>
<a class="ms-5 ps-5 me-5 pe-5 txt-color-1" href="https://www.instagram.com/thedoghousenw/" target="_blank">
<i class="fa-brands fa-instagram"></i>
<span class="sr-only">Instagram</span>
</a>
<a class="txt-color-1" href="https://www.tiktok.com/@thedoghousenw" target="_blank">
<i class="fa-brands fa-tiktok"></i>
<span class="sr-only">Tiktok</span>
</a>
</p>
</div>
</div>
</div>
<!-- Footer -->
<span class="anchor" id="contact-section"></span>
<footer>
<div class="container-fluid bg-dark sections-container contact-container">
<div class="row ms-3 me-3">
<div class="col-md-3"></div>
<div class="col-12 col-md-6 section-header text-center">
<h2>Contact Us</h2>
<p>Pop in and say hello, phone us for more information or hop on over to our socials to get to know
us more</p>
</div>
<div class="col-md-3"></div>
</div>
<div class="row gx-5 gy-5 contact-items-row text-center">
<div class="col-12 col-lg-4 contact-item">
<h3 class="first-service-item"><i class="fa-solid fa-door-open" aria-hidden="true"></i> Opening
Hours</h3>
<p>Mon - Sat 09:00am - 08:00pm</p>
<p>Sunday Closed</p>
<p>Out of hours by arrangement</p>
</div>
<div class="col-12 col-lg-4 contact-item">
<h3><i class="fa-solid fa-location-dot" aria-hidden="true"></i> Address</h3>
<p>4A Meliden Rd</p>
<p>Prestatyn</p>
<p>LL19 9RT</p>
</div>
<div class="col-12 col-lg-4 contact-item">
<h3><i class="fa-solid fa-address-book" aria-hidden="true"></i> Get in Touch</h3>
<p class="phone contact-phone">Phone: <a class="txt-color-3" href="tel:01745886609" target="_blank">01745 886609</a>
</p>
<p class="email-anchor">Email: <a class="txt-color-3"
href="mailto:[email protected]" target="_blank">[email protected]</a></p>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous">
</script>
</body>
</html>