generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
382 lines (358 loc) · 21.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--https://n8finch.com/disable-phone-number-linking-ios-safari-->
<meta name="format-detection" content="telephone=no">
<meta name="description" content="Professional and reliable cat sitting services in North West London.
Enjoy your time away knowing your cats feel safe and relaxed in their own home.">
<meta name="keywords" content="cat sitting, cat sitter, cat, house sitter, London, North West London">
<meta name="author" content="Katsit London">
<title>Katsit London</title>
<!--https://www.w3.org/2005/10/howto-favicon-->
<link rel="icon" href="assets/images/flavicon.png" type="image/png">
<!--Bootstrap-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!--Flickity carousel-->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<!--Font Awesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<!--Ian Lunn hover open resources - from User Centric mini-project-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css" integrity="sha512-csw0Ma4oXCAgd/d4nTcpoEoz4nYvvnk21a8VA2h2dzhPAvjbUIK6V3si7/g/HehwdunqqW18RwCJKpD7rL67Xg==" crossorigin="anonymous" />
<!--Google fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<!--Scrollspy https://getbootstrap.com/docs/4.5/components/scrollspy/-->
<body data-spy="scroll" data-target="#navigation" data-offset="10" class="bg--white">
<header class="container-fluid">
<!--https://getbootstrap.com/docs/4.0/components/navbar/-->
<nav class="navbar navbar-expand-p fixed-top bg--dark txt--white" id="navigation">
<a class="navbar-brand" href="#home"><img src="assets/images/logo.png" width="30" height="30" alt="Katsit London logo"><br>Katsit London</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<!--Styling toggler button 'https://stackoverflow.com/questions/42586729/bootstrap-4-change-hamburger-toggler-color'-->
<i class="fas fa-bars toggle-btn navbar-toggler-icon txt--white"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto bg--dark">
<!-- Solution for menu to collapse back on click
https://stackoverflow.com/questions/42401606/how-to-hide-collapsible-bootstrap-4-navbar-on-click-->
<li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
<a class="nav-link page-scroll" href="#home">Home</a>
</li>
<li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
<a class="nav-link page-scroll" href="#services">Services</a>
</li>
<li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
<a class="nav-link page-scroll" href="#about">About me</a>
</li>
<li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
<a class="nav-link page-scroll" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
<a class="nav-link page-scroll" href="#areas">Areas covered</a>
</li>
<li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
<a class="nav-link page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
<!--Hero image-->
<section class="container-fluid bg-img-features hero-background">
<!--semantics & header styles - https://www.solodev.com/blog/web-design/how-to-adjust-header-styles-with-css-and-bootstrap.stml-->
<div class="anchors" id="home">
<h1>home</h1>
</div>
<div class="jumbotron jumbotron-fluid jumbotron-container txt--white">
<div class="container">
<h2 class="p-jumbotron">North West London</h2>
<hr class="hr-jumbotron bg--white">
<h3 class="h-jumbotron">Professional & Reliable</h3>
<hr class="hr-jumbotron bg--white">
<h4 class="p-jumbotron">Cat Sitting Services</h4>
<p class="p-promo">Arrange a meet & greet to get 10% off your first booking </p>
<a class="btn btn-style bg--green txt--btn hvr-fade" href="#contact" role="button">Contact us
</a>
</div>
</div>
</section>
<!--Services section-->
<section class="container-fluid bg--white section-layout bottom-padding">
<div class="anchors" id="services">services</div>
<div class="row">
<div class="col-12 service-intro-p">
<h2 class="section-heading">Our services</h2>
<hr class="section-divider bg--brown">
<p class="service-intro-p">
Enjoy your time away knowing that your cat is safe and relaxed in the comfort of their own home.
</p>
<p><span>All our visits include:</span></p>
</div>
</div>
<div class="row service-row">
<div class="col-sm-12 col-md-auto">
<div class="container service-container">
<ul class="fa-ul">
<li><span class="fa-li txt--brown"><i class="fas fa-check"></i></span>Bowls cleaned</li>
<li><span class="fa-li txt--brown"><i class="fas fa-check"></i></span>Food refilled and water refreshed</li>
<li><span class="fa-li txt--brown"><i class="fas fa-check"></i></span>Litter tray cleaned</li>
<li><span class="fa-li txt--brown"><i class="fas fa-check"></i></span>Grooming</li>
<li><span class="fa-li txt--brown"><i class="fas fa-check"></i></span>Lots of cuddles and play</li>
<li><span class="fa-li txt--brown"><i class="fas fa-check"></i></span>Administration of medicine if required</li>
<li><span class="fa-li txt--brown"><i class="fas fa-check"></i></span>Daily text updates with images and videos of your cat</li>
<li><span class="fa-li txt--brown"><i class="fas fa-check"></i></span>Pick up the post</li>
<li><span class="fa-li txt--brown"><i class="fas fa-check"></i></span>Move the bins</li>
<li><span class="fa-li txt--brown"><i class="fas fa-check"></i></span>Water the plants</li>
</ul>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="row price-container">
<div class="col-xs-12 col-sm-4 col-md-12 price-item bg-img-features price-img1">
<h3 class="h5">1 visit a day</h3>
<h4 class="h5">£15</h4>
</div>
<div class="col-xs-12 col-sm-4 col-md-12 price-item bg-img-features price-img2">
<h3 class="h5">2 visits a day</h3>
<h4 class="h5">£25</h4>
</div>
<div class="col-xs-12 col-sm-4 col-md-12 price-item bg-img-features price-img3">
<h3 class="h5">Overnight stay</h3>
<h4 class="h5">£60</h4>
</div>
</div>
</div>
<div class="col-12 serv-button-container">
<a class="btn btn-style bg--green txt--btn hvr-fade" href="#contact" role="button">Contact us</a>
</div>
</div>
</section>
<!--About us section-->
<section class="container-fluid section-layout">
<div class="anchors" id="about">about me</div>
<div class="row md-reverse">
<div class="col-sm-12 col-md-6 bg--beige">
<div class="container about-container">
<h2 class="section-heading">About me</h2>
<hr class="section-divider bg--dark">
<p class="personal-intro-p">
My name is Sian and I am a qualified veterinary nurse with extensive knowledge and experience of
cats.
I have volunteered with many animal charities such as the Mayhew and Battersea home for cats and
dogs, helping nursing and hosting cats so that they could find their forever homes.
I am also the proud human of Elmer.
</p>
<div class="row credentials-container">
<div class="col-4 credentials-item">
<div class="credentials-box">
<div class="credentials-text">
<h3 class="h6 credentials-headings">Feline First Aid Qualified</h3>
</div>
</div>
</div>
<div class="col-4 credentials-item">
<div class="credentials-box">
<div class="credentials-text">
<h3 class="h6 credentials-headings">DBS Checked</h3>
</div>
</div>
</div>
<div class="col-4 credentials-item">
<div class="credentials-box">
<div class="credentials-text">
<h3 class="h6 credentials-headings">Fully Insured</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 bg-img-features bg-img-about"></div>
</div>
</section>
<!--Testimonials-->
<section class="container-fluid section-layout bottom-padding">
<div class="anchors" id="testimonials">testimonials</div>
<div class="row">
<div class="col-12">
<h2 class="section-heading">Testimonials</h2>
<hr class="section-divider bg--brown">
</div>
</div>
<!--carousel https://flickity.metafizzy.co/options.html#setup and https://codepen.io/desandro/pen/zxRYMP-->
<div class="carousel" data-flickity='{"wrapAround": true, "imagesLoaded": true, "cellAlign": "left"}'>
<div class="carousel-cell is-initial-select">
<div class="bg-img-features img-testimonial1 img-block"></div>
<h3 class="h5">Alex Jones</h3>
<p class="testimonial-text">
<i class="fas fa-quote-left"></i>
Wonderful services, I’ve been using Katsit for a while now and my cat is always content and relaxed when we come home.
I couldn't be me more happy with the care Sian provided. I received daily updates of my cat and the plants were well looked after. <i class="fas fa-quote-right"></i>
</p>
</div>
<div class="carousel-cell">
<div class="bg-img-features img-testimonial2 img-block"></div>
<h3 class="h5">Valentina Crisby</h3>
<p class="testimonial-text"><i class="fas fa-quote-left"></i> Katsit has been absolutely brilliant with my aging cat
Oliver. Sian has been staying overnight when I needed to travel for work and has provided excellent care and managed his health condition
perfectly. <i class="fas fa-quote-right"></i>
</p>
</div>
<div class="carousel-cell">
<div class="bg-img-features img-testimonial3 img-block"></div>
<h3 class="h5">Joe Tanning</h3>
<p class="testimonial-text">
<i class="fas fa-quote-left"></i> Katsit London has provided outstanding care for our cat, who has a serious medical condition.
We can now go away with peace of mind having found a person we can trust to look after our cat. <i class="fas fa-quote-right"></i>
</p>
</div>
<div class="carousel-cell">
<div class="bg-img-features img-testimonial4 img-block"></div>
<h3 class="h5">Carlos Menza</h3>
<p class="testimonial-text">
<i class="fas fa-quote-left"></i>
We were a bit anxious to leave our kittens for the first time
and Sian provided all the reinsurance we needed. We received regular videos
of
Merlin
and Sasha playing and purring. We will definitively use Katsit again.
<i class="fas fa-quote-right"></i>
</p>
</div>
<div class="carousel-cell">
<div class="bg-img-features img-testimonial5 img-block"></div>
<h3 class="h5">Milly Smith</h3>
<p class="testimonial-text">
<i class="fas fa-quote-left"></i>
Since I went back to work full time, Katsit have
been providing excellent care for Angel, my rescue cat with a very anxious nature, visiting him once a day. Angel is a lot more
relaxed now and Sian also took some amazing photos.
<i class="fas fa-quote-right"></i>
</p>
</div>
</div>
</section>
<!--Areas we cover section-->
<section class="container-fluid section-layout">
<div class="anchors" id="areas">areas</div>
<div class="row">
<div class="col-sm-12 col-md-6 bg--beige bottom-padding">
<div class="container area-container">
<h2 class="section-heading">Areas we cover</h2>
<hr class="section-divider bg--dark">
<p>We cover the following areas:</p>
<ul class="area-list">
<li>Cricklewood</li>
<li>Dollis Hill </li>
<li>Harlesden</li>
<li>Kensal Rise</li>
<li>Kensal Green</li>
<li>Kilburn</li>
<li>Maida Hill</li>
<li>Maida Vale</li>
<li>Queen’s Park</li>
<li>St John's Wood</li>
<li>West Hampstead</li>
<li>Willesden Green</li>
</ul>
<p>If you live outside these areas get in touch today to see if we can help.</p>
</div>
</div>
<div class="col-sm-12 col-md-6 map-column">
<!--Embedded map from www.carto.com-->
<iframe title="Area we cover map" class="map-frame" src="https://lemocla.carto.com/builder/f65987c8-ec09-4491-806a-3e9cc0c5a05e/">
</iframe>
</div>
</div>
</section>
<!--Contact us-->
<section class="container-fluid section-layout">
<div class="anchors" id="contact">contact</div>
<div class="row">
<div class="col-12">
<h2 class="section-heading">Contact us</h2>
<hr class="section-divider bg--brown">
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="container contact-details-container">
<p>Get in touch today to arrange a meet & greet or to get further information about our services. </p>
<hr>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-phone-alt contact-details-i"></i></span> Tel. 0208 2901 982</li>
<li><span class="fa-li"><i class="fas fa-envelope contact-details-i"></i></span> Email: [email protected]</li>
</ul>
<hr class="hr-hide">
</div>
</div>
<div class="col-sm-12 col-md-6 bottom-padding">
<div class="container form-container">
<!--Form - https://getbootstrap.com/docs/4.5/components/forms/-->
<form class="needs-validation" action="#home">
<div class="form-group">
<label for="fullname">Full name</label>
<input type="text" class="form-control" id="fullname" name="fullname" required>
</div>
<!--email-->
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<!--subject-->
<div class="form-group">
<label for="subject">Subject - please select:</label>
<select class="form-control" id="subject" name="subject">
<option value="general_queries">General queries</option>
<option value="meetup">Meet & Greet</option>
</select>
</div>
<!--message-->
<div class="form-group">
<label for="message">Enter your message</label>
<textarea class="form-control" id="message" name="message" rows="6" cols="30" required></textarea>
</div>
<!--button-->
<button type="submit" id="submit" class="d-block mx-auto btn btn-style bg--green txt--btn hvr-fade">Submit</button>
</form>
<!--End form-->
</div>
</div>
</div>
</section>
<!--Footer-->
<footer class="container-fluid bg--dark txt--white">
<div class="row">
<div class="col-sm-12 col-md-6 ft-left">
<div class="container">
<h2 class="h6 footer-headings">Contact details</h2>
<p><i class="fas fa-phone-alt"></i> Tel. 0208 2901 982<br>
<i class="fas fa-envelope"></i> Email: [email protected]
</p>
</div>
</div>
<div class="col-sm-12 col-md-6 ft-right">
<div class="ft-right-element">
<h2 class="h6 footer-headings">Find us on social media</h2>
<!--Links & icons accessibility - https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility-->
<p class="ft-social-icons">
<a class=" txt--white hvr-icon-grow" href="https://en-gb.facebook.com/" target="_blank" rel="noopener noreferrer" aria-label="open facebook in a new tab"><i class="fab fa-facebook-square hvr-icon" aria-hidden="true"></i></a>
<a class="txt--white hvr-icon-grow" href="https://twitter.com/" target="_blank" rel="noopener noreferrer" aria-label="open twitter in a new tab"><i class="fab fa-twitter-square hvr-icon" aria-hidden="true"></i></a>
<a class="txt--white hvr-icon-grow" href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer" aria-label="open instagram in a new tab"><i class="fab fa-instagram-square hvr-icon" aria-hidden="true"></i></a>
</p>
<p class="copyright-p">Copyright @ katsit london 2020</p>
</div>
</div>
</div>
</footer>
<!--Bootstrap-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!--Flickity carousel-->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
</body>
</html>