generated from Code-Institute-Org/ci-full-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
395 lines (368 loc) · 20.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/3a4645c4d4.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" type="text/css">
<title>Mental Health Matters</title>
</head>
<body>
<div class="container-wrapper">
<!-- Header -->
<header>
<!-- Nav bar -->
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">Mental Health Matters</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fa-solid fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
aria-expanded="false">
Resources
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#" target="_blank" rel="noopener">Factors that affect
mental health</a>
<a class="dropdown-item" href="#" target="_blank" rel="noopener">Getting help for your
mental health</a>
<a class="dropdown-item" href="#" target="_blank" rel="noopener">Supporting someone else
with their mental</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" target="_blank" rel="noopener">Mental health within
different communities</a>
<a class="dropdown-item" href="#" target="_blank" rel="noopener">Resources for working
with young people</a>
<a class="dropdown-item" href="#" target="_blank" rel="noopener">Training courses and
materials</a>
</div>
</li>
</ul>
</div>
</nav>
</header>
</div>
<!-- Hero section -->
<div class="hero-section">
<div class="container-fluid hero-container">
<div class="opaque-overlay"> </div>
<div class="row">
<div class="col-12">
<section class="callout jumbotron text-center">
<h1 class="jumbotron-header display-3">Mental Health Matters</h1>
<hr class="block-divider">
<p class="lead">Mental health is one of the most important foundations for a healthy and
long
life.
We want to build a society with good mental health where everybody can thrive.</p>
<hr class="my-4">
<a class="btn btn-primary btn-lg hero-btn hvr-grow" target="_blank" rel="noopener" href="#"
role="button">Learn
more</a>
</section>
</div>
</div>
</div>
</div>
<!-- Info cards -->
<section class="info-cards">
<div class="container text-center">
<div class="row">
<div class="col d-flex justify-content-center">
<div class="card" style="width: 20rem;">
<img src="assets/images/tadeusz-lakota-QzGPZuj5fYM-unsplash.webp" class="card-img-top"
alt="Someone sitting on the edge of a lake looking at the water with his back to the camera">
<div class="card-body">
<h5 class="card-title">
Factors that affect mental health
</h5>
<p class="card-text">
Learn more about the different biological, psychological, and social factors
that
can
impact mental health.
</p>
<a href="#" target="_blank" rel="noopener" class="btn btn-primary hvr-grow">Learn
More</a>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="card" style="width: 20rem;">
<img src="assets/images/sweet-life-h0VBeMToLIo-unsplash.webp" class="card-img-top"
alt="Someone sitting with a hot drink looking out of the window">
<div class="card-body">
<h5 class="card-title">
Getting help for your mental health
</h5>
<p class="card-text">
Find out how you can help yourself, what external support is available, and what to
do
in a crisis. </p>
<a href="#" target="_blank" rel="noopener" class="bbtn btn-primary hvr-grow">Learn
More</a>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="card" style="width: 20rem;">
<img src="assets/images/kaylee-garrett-GaprWyIw66o-unsplash.webp" class="card-img-top"
alt="A group of five people doing yoga on the beach">
<div class="card-body">
<h5 class="card-title">
Mental health within different communities
</h5>
<p class="card-text">
Discover mental health information, tips, and advice that's relevant for different
groups of people.
</p>
<a href="#" target="_blank" rel="noopener" class="btn btn-primary hvr-grow">Learn
More</a>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="card" style="width: 20rem;">
<img src="assets/images/umit-bulut-qbTC7ZwJB64-unsplash.webp" class="card-img-top"
alt="A close up image of someones arms leaning over a wooden fence overlooking a lake">
<div class="card-body">
<h5 class="card-title">
Supporting someone else with their mental health
</h5>
<p class="card-text">
You can do many things to help if someone you know is experiencing mental
ill-health.
</p>
<a href="#" target="_blank" rel="noopener" class="btn btn-primary hvr-grow">Learn
More</a>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="card" style="width: 20rem;">
<img src="assets/images/matheus-ferrero-TkrRvwxjb_8-unsplash.webp" class="card-img-top"
alt="Four uoung people sit on a hill with their backs to the camera overlooking the view of a green landscape">
<div class="card-body">
<h5 class="card-title">
Resources for working with young people
</h5>
<p class="card-text">
Explore all our resources designed to support schools, education staff, caregivers
and
young people to look after their mental health and wellbeing.</p>
<a href="#" target="_blank" rel="noopener" class="btn btn-primary hvr-grow">Learn
More</a>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="card" style="width: 20rem;">
<img src="assets/images/timur-shakerzianov-mYNR1upvnZM-unsplash.webp" class="card-img-top"
alt="A mixed group of people sit on chairs in rows facing forwards listing or watching an event take place">
<div class="card-body">
<h5 class="card-title">
Training courses and materials
</h5>
<p class="card-text">
We offer courses and resources to help you learn more about mental health, how to
support the well-being of others.
</p>
<a href="#" target="_blank" rel="noopener" class="btn btn-primary hvr-grow">Learn
More</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- World Mental Health Day section -->
<section class="wmhd-section">
<div class="container text-center">
<div class="row">
<div class="col d-flex justify-content-center">
<div class="card" style="width: 30rem;">
<img src="assets/logos/WorldMentalHealthDayLogo-white.webp" class="card-img-top"
alt="World Mental Health Day Logo">
<div class="card-body">
<h3 class="wmhd-title">
World Mental Health Day
</h3>
<p class="card-text">
On World Mental Health Day, let’s all come together to talk about mental health and
show
everyone that
mental
health matters.</p>
<p class="card-text">This year, the theme is workplace mental health. Check out our
resources for
workplaces,
schools, communities and more!
</p>
<a href="https://www.mentalhealth.org.uk/our-work/public-engagement/world-mental-health-day"
target="_blank" rel="noopener" class="btn btn-primary hvr-grow">Get Involved</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- External Resource section -->
<div class="external-container">
<div class="container">
<div class="row">
<div class="col d-flex justify-content-center">
<div class="card">
<div class="samaritans-logo"><img src="assets/logos/Samaritans_2019.svg.webp"
class="card-img-top" alt="The Samaritans log"></div>
<div class="card-body text-center">
<a href="https://www.samaritans.org/" target="_blank" rel="noopener"
class="btn btn-primary hvr-grow">Get Help</a>
</div>
</div>
</div>
<div class="col justify-content-center">
<div class="card">
<div class="nhs-logo"><img src="assets/logos/nhs.webp" class="card-img-top" alt="The NHS logo">
</div>
<div class="card-body text-center nhs-btn">
<a href="https://www.nhs.uk/nhs-services/mental-health-services/" target="_blank"
rel="noopener" class="btn btn-primary hvr-grow">Find Out More</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Quote cards section -->
<div class="container quote-container">
<div id="quoteCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="d-flex justify-content-center">
<blockquote class="blockquote text-center">
<p class="mb-0"> "We would never tell someone with a broken leg that they should
stop wallowing and get it together. We don’t
consider taking medication for an ear infection something to be ashamed of. We
shouldn’t treat mental health
conditions any differently.”
<footer class="blockquote-footer">Michelle Obama</footer>
</blockquote>
</div>
</div>
<div class="carousel-item">
<div class="d-flex justify-content-center">
<blockquote class="blockquote text-center">
<p class="mb-0"> "The most beautiful people we have known are those who have known
defeat, known suffering, known struggle,
known loss, and have found their way out of the depths. These persons have … an
understanding of life that
fills them with compassion … a deep loving concern. Beautiful people do not just
happen."
</p>
<footer class="blockquote-footer">Elisabeth Kübler-Ross</footer>
</blockquote>
</div>
</div>
<div class="carousel-item">
<div class="d-flex justify-content-center">
<blockquote class="blockquote text-center">
<p class="mb-0">" Sometimes self-care is exercise and eating right. Sometimes it’s
spending time with loved ones or taking a
nap … Whatever soothes your soul."
</p>
<footer class="blockquote-footer">Nanea Hoffman</footer>
</blockquote>
</div>
</div>
<div class="carousel-item">
<div class="d-flex justify-content-center">
<blockquote class="blockquote text-center">
<p class="mb-0">"Your time is limited, so don’t waste it living someone else’s
life."</p>
<footer class="blockquote-footer">Steve Jobs</footer>
</blockquote>
</div>
</div>
<div class="carousel-item">
<div class="d-flex justify-content-center">
<blockquote class="blockquote text-center">
<p class="mb-0">“Happiness can be found even in the darkest of times, if one only
remembers to turn on the light.”</p>
<footer class="blockquote-footer">Albus Dumbledore from Harry Potter and the
Prisoner of Azkaban</footer>
</blockquote>
</div>
</div>
<div class="carousel-item">
<div class="d-flex justify-content-center">
<blockquote class="blockquote text-center">
<p class="mb-0"> “It is during our darkest moments that we must focus to see the
light.”
</p>
<footer class="blockquote-footer">Aristotle</footer>
</blockquote>
</div>
</div>
<div class="carousel-item">
<div class="d-flex justify-content-center">
<blockquote class="blockquote text-center">
<p class="mb-0">“There is a crack in everything, that’s how the light gets in”
</p>
<footer class="blockquote-footer">
<p class="mb-0"> “It is during our darkest moments that we must focus to see the
</footer>
</blockquote>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<ul id="social-networks">
<li>
<a href="https://www.facebook.com/" target="_blank" rel="noopener"
aria-label="Visit our Facebook page (opens in a new tab)">
<i class="fa-brands fa-facebook"></i></a>
</li>
<li>
<a href="https://www.twitter.com/" target="_blank" rel="noopener"
aria-label="Visit our Twitter page (opens in a new tab)">
<i class="fa-brands fa-twitter-square"></i></a>
</li>
<li>
<a href="https://www.youtube.com/" target="_blank" rel="noopener"
aria-label="Visit our YouTube page (opens in a new tab)">
<i class="fa-brands fa-youtube-square"></i></a>
</li>
<li>
<a href="https://www.instagram.com/" target="_blank" rel="noopener"
aria-label="Visit our Instagram page (opens in a new tab)">
<i class="fa-brands fa-instagram"></i></a>
</li>
</ul>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
</script>
</body>
</html>