forked from lexach91/team-5-january-hackathon
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
462 lines (431 loc) · 23.1 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
462
<!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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
type="text/css" />
<meta name="description"
content="Clover offers its customers the opportunity to relax, unwind and focus on their mental health">
<link href="assets/images/logo.PNG" type="image/x-icon" rel="icon">
<link href="assets/css/style.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/hamburgers.min.css">
<title>Clover</title>
</head>
<body>
<div id="top"></div>
<header class="container-fluid p-0">
<div class="row justify-content-center logo-row">
<div class="logo">
<img src="assets/images/logo.PNG" alt="Clover brand logo">
</div>
<div class="center-text heading">
<a href="index.html" aria-label="Click here to go to the home page"><span>Clover</span></a>
</div>
<div class="logo">
<img src="assets/images/logo.PNG" alt="Clover brand logo">
</div>
</div>
<button id="hamburger" class="hamburger hamburger--elastic-r" type="button"
aria-label="Click to display menu on smaller screens">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<nav id="menu-bar">
<ul class="menu-items">
<li>
<a href="stress.html" aria-label="Click here to go our stress page">Stress</a>
</li>
<li>
<a href="exercise.html" aria-label="Click here to go our exercise page">Exercise</a>
</li>
<li>
<a href="concentration.html" aria-label="Click here to go our concentration page">Concentration</a>
</li>
<li>
<a href="sleep.html" aria-label="Click here to go our sleep page">Sleep</a>
</li>
</ul>
</nav>
<div class="row pink-spacer">
<div class="col-12"></div>
</div>
</header>
<main class="container-fluid">
<!-- go to top button -->
<div class="row justify-content-center">
<div class="col-12">
<a href="#top" class="go-to-top" aria-label="Click here to go to the top of the page">
<i class="fas fa-angle-double-up"></i>
</a>
</div>
</div>
<h2 id="slogan-1">Working from home...</h2>
<div class="row justify-content-center flower-row">
<div class="grid-item top-left">
<div class="content content-1">
<h3>Stress</h3>
<p>Stress is a normal part of life. In a society where we are continually surrounded by work it is
important to reflect on these emotions and develop ways to manage them.</p>
</div>
<div class="heart-link" id="image-1"></div>
</div>
<div class="grid-item top-right">
<div class="heart-link" id="image-2"></div>
<div class="content content-2">
<h3>Exercise</h3>
<p>Working from home is the new norm which means our bodies are sat for a vast amount of the day.
Throughout the day try to find small ways to move and get outdoors.</p>
</div>
</div>
<div class="grid-item bottom-left">
<div class="content content-3">
<p>It is harder than ever to remain focussed on tasks with the distractions of phones, children and
meetings. We aim to provide strategies to overcome and work alongside these distractions.
</p>
<h3>Concentration</h3>
</div>
<div class="heart-link" id="image-3"></div>
</div>
<div class="grid-item bottom-right">
<div class="heart-link" id="image-4"></div>
<div class="content content-4">
<p>Half of our lives are spent sleeping so when you can't seem to get it right your world may seem to come
crumbling down. We offer ways to improve your sleep and make you feel more rested.</p>
<h3>Sleep</h3>
</div>
</div>
</div>
<h2 id="slogan-2">...doesn't mean being alone</h2>
<section class="container-fluid about-us-section">
<div class="row">
<div class="col-12 green-spacer"></div>
</div>
<div class="row about-us-positioning">
<div class="col-2 arrow-left">
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<i class="fas fa-arrow-left" aria-label="Click me to revel new about information"></i>
</a>
</div>
<div class="col-8 about-us">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card review">
<div class="card-body">
<h5 class="card-title">Review from Jane</h5>
<p class="card-text">When being forced into working from home, life turns up side down.
To me, Clover has been a never ending source of inspiration during this period. Thank you!</p>
<span>
<i class="fa fa-star checked"></i>
</span>
<span>
<i class="fa fa-star checked"></i>
</span>
<span>
<i class="fa fa-star checked"></i>
</span>
<span>
<i class="fa fa-star checked"></i>
</span>
<span>
<i class="fa fa-star"></i>
</span>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card review">
<div class="card-body">
<h5 class="card-title">Review from Pat</h5>
<p class="card-text">I have always had problems when it comes to motivating myself to exercise.
These past two years have not made it easier, but Clover has!</p>
<span>
<i class="fa fa-star checked"></i>
</span>
<span>
<i class="fa fa-star checked"></i>
</span>
<span>
<i class="fa fa-star checked"></i>
</span>
<span>
<i class="fa fa-star checked"></i>
</span>
<span>
<i class="fa fa-star checked"></i>
</span>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card review">
<div class="card-body">
<h5 class="card-title">Review from Matt</h5>
<p class="card-text">
I have been working from home for the past two years and I have never felt like I was working from home.
</p>
<span>
<i class="fa fa-star checked"></i>
</span>
<span>
<i class="fa fa-star checked"></i>
</span>
<span>
<i class="fa fa-star checked"></i>
</span>
<span>
<i class="fa fa-star checked"></i>
</span>
<span>
<i class="fa fa-star"></i>
</span>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card review">
<div class="card-body">
<h5 class="card-title">Review from Dan</h5>
<p class="card-text">
I would like to thank Clover for helping me with my stress. I have been able to get through the stress of working from home and I am so grateful for the help.
</p>
<span>
<i class="fa fa-star checked"></i>
</span>
<span>
<i class="fa fa-star checked"></i>
</span>
<span>
<i class="fa fa-star checked"></i>
</span>
<span>
<i class="fa fa-star checked"></i>
</span>
<span>
<i class="fa fa-star checked"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-2 arrow-right">
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<i class="fas fa-arrow-right" aria-label="Click me to reveal new about information"></i>
</a>
</div>
</div>
<div class="row">
<div class="col-12 green-spacer"></div>
</div>
</section>
<section class="container-fluid meet-team-section">
<div class="row">
<div class="col-12 meet-team-header">
<h2>Meet the Team</h2>
</div>
</div>
<div class="row" id="large-meet-team">
<div class="col-sm-6 col-md-3 team-id">
<div class="row team-id-image"><img src="assets/images/person1.jpg" alt="Picture of person 1"></div>
<div class="row team-text">
<p><strong>Mark Tilbert</strong></p>
<p>Mark is our exercise mental health specialist at clover. He offers guidance for those wanting
to test their limits or support to those who are starting to improve their mental health
through exercise.</p>
</div>
</div>
<div class="col-sm-6 col-md-3 team-id">
<div class="row team-id-image"><img src="assets/images/person2.jpg" alt="Picture of person 2"></div>
<div class="row team-text">
<p><strong>Kayleigh Spencer</strong></p>
<p>Kayleigh's specialism is orientated around stress, anxiety and depression. She has a wealth
of techniques that will help to keep your worries at equilibrium leaving you feeling happier
and more in control. </p>
</div>
</div>
<div class="col-sm-6 col-md-3 team-id">
<div class="row team-id-image"><img src="assets/images/person3.jpg" alt="Picture of person 3"></div>
<div class="row team-text">
<p><strong>Heather Parmenter</strong></p>
<p>Heather works predominently on stratergies to improve retention within the workplace. She
provides ways to heighten concentration and mentally stimulate the brain.
</p>
</div>
</div>
<div class="col-sm-6 col-md-3 team-id">
<div class="row team-id-image"><img src="assets/images/person4.jpg" alt="Picture of person 4"></div>
<div class="row team-text">
<p><strong>Joseph Ward</strong></p>
<p>Joseph is our sleep specialist at clover who basis his ideas soley on research. He has a
wealth of knowledge around sleep disorders and uses these to inform his practice. </p>
</div>
</div>
</div>
<div class="row" id="small-meet-team">
<div class="row">
<div class="col-6 small-image-about"><img src="assets/images/person1.jpg" alt="Picture of person 1">
</div>
<div class="col-6 small-text-about">
<p><strong>Mark Tilbert</strong></p>
<p>Mark is our exercise mental health specialist at clover. He offers guidance for those wanting
to test their limits or support to those who are starting to improve their mental health
through exercise.</p>
</div>
</div>
<div class="row">
<div class="col-6 small-text-about">
<p><strong>Kayleigh Spencer</strong></p>
<p>Kayleigh's specialism is orientated around stress, anxiety and depression. She has a wealth
of techniques that will help to keep your worries at equilibrium leaving you feeling happier
and more in control. </p>
</div>
<div class="col-6 small-image-about about-line"><img src="assets/images/person2.jpg"
alt="Picture of person 1"></div>
</div>
<div class="row">
<div class="col-6 small-image-about about-line"><img src="assets/images/person3.jpg"
alt="Picture of person 1"></div>
<div class="col-6 small-text-about">
<p><strong>Heather Parmenter</strong></p>
<p>Heather works predominently on stratergies to improve retention within the workplace. She
provides ways to heighten concentration and mentally stimulate the brain.
</p>
</div>
</div>
<div class="row">
<div class="col-6 small-text-about">
<p><strong>Joseph Ward</strong></p>
<p>Joseph is our sleep specialist at clover who basis his ideas soley on research. He has a
wealth of knowledge around sleep disorders and uses these to inform his practice. </p>
</div>
<div class="col-6 small-image-about about-line"><img src="assets/images/person4.jpg"
alt="Picture of person 1"></div>
</div>
</div>
</section>
<!-- _________ Support Area _____________ -->
<section class="container-fluid" id="supportArea">
<h3>Support Networks</h3>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-3">
<div>
<h4><a href="https://www.mentalhealthireland.ie/mindfulness/" target="_blank"><img
src="assets/images/imgHMI.jpg" alt=""></a> </h4>
</div>
<ul>
<li>Contact Us: (01) 284 1166</li>
<li>info@mentalhealthireland.ie</li>
</ul>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div>
<h4><a href="https://www.nhs.uk/" target="_blank"><img src="assets/images/imgNHS.jpg"
alt=""></a>
</h4>
</div>
<ul>
<li>Contact Us: 111</li>
<li>info@nhs.uk</li>
</ul>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div>
<h4><a href="https://www.samaritans.org/ireland/samaritans-ireland/" target="_blank"><img
src="assets/images/imgSamaritan.jpg" alt=""></a>
</h4>
</div>
<ul>
<li>Contact Us: 116 123</li>
<li>info@samaritans.org</li>
</ul>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div>
<h4><a href="https://www.calm.com/es" target="_blank"><img src="assets/images/imgCalm.jpg"
alt=""></a> </h4>
</div>
<ul>
<li>Contact Us: 154 725</li>
<li>info@clam.org</li>
</ul>
</div>
</div>
</section>
<section class="container-fluid ratings">
<div class="row">
<div class="col-12 green-spacer"></div>
</div>
<div class="row">
<div class="col-4 ratings-icon"><i class="fas fa-medal" aria-hidden="true"></i></div>
<div class="col-4 ratings-icon"><i class="fas fa-users" aria-hidden="true"></i></div>
<div class="col-4 ratings-icon"><i class="fas fa-star" aria-hidden="true"></i></div>
</div>
<div class="row">
<div class="col-4 rating-text">
<h4><strong>102.8K Ratings</strong></h4>
<p>on IOS and Google Play</p>
</div>
<div class="col-4 rating-text">
<h4><strong>40M Subscribers</strong></h4>
<p>Across all platforms</p>
</div>
<div class="col-4 rating-text">
<h4><strong>4.8 Stars</strong></h4>
<p>Average Rating</p>
</div>
</div>
</section>
<section class="container-fluid newsletter">
<div class="row newsletter">
<div class="col-12 center-text newsletter">
<h3>Sign up for our newsletter</h3>
</div>
<form action="#" class="container">
<div id="subscribe-form" class="row justify-content-center">
<div class="col-auto col-md-4 form-group">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email"
required>
<p id="message-field"></p>
</div>
<div class="col-auto form-group submitButtom">
<button id="subscribe" type="submit" class="btn btn-success"
aria-label="Click here to subscribe to our newsletter">
<i class="fas fa-arrow-alt-circle-right"></i>
</button>
</div>
</div>
</form>
</div>
</section>
</main>
<footer>
<ul>
<li><a href="https://www.facebook.com/" target="_blank" rel="noopener"
aria-label="Click here to go to our facebook page"><i class="fab fa-facebook"></i></a></li>
<li><a href="https://www.twitter.com/" target="_blank" rel="noopener"
aria-label="Click here to go to our twitter page"><i class="fab fa-twitter"></i></a></li>
<li><a href="https://www.instagram.com/" target="_blank" rel="noopener"
aria-label="Click here to go to our instagram page"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://www.youtube.com/" target="_blank" rel="noopener"
aria-label="Click here to go to our youtube page"><i class="fab fa-youtube"></i></a></li>
</ul>
<p>Copyright © Clover</p>
</footer>
<!-- font awesome script -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/0d880835d2.js" crossorigin="anonymous"></script>
<script src="assets/js/script.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
</script>
<script src="https://smtpjs.com/v3/smtp.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
</body>
</html>