generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
389 lines (314 loc) · 15.8 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
<!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="Mindfullness and Mental Well Being Website">
<meta name="keywords" content="Mindfullness, mental health, stress, positivity">
<link rel="stylesheet" href="assets/css/style.css">
<script src="https://kit.fontawesome.com/394cced9ae.js" crossorigin="anonymous"></script>
<script src="script.js"></script>
<link type="image/png" sizes="32x32" rel="icon" href="assets/images/favicon.png">
<title>Be Kind To Your Mind</title>
</head>
<body>
<header>
<!-- Logo and Title -->
<div class="logo-div">
<div class="outer-circle">
<div class="circle">
<a href="./index.html" aria-label="Return to Homepage"><img src="assets/images/logo.webp"
class="logo" alt="Be Kind To Your Mind Logo"></a>
</div>
</div>
<div class="logo-text-div">
<h1 class="logo-text"> Be Kind To Your Mind</h1>
</div>
<!-- Navigation -->
<div class="nav">
<a href="./index.html" aria-label="Go to Homepage" class="active">Home</a>
<a href="./mindfulness.html" aria-label="Go Mindfulness page ">Mindfulness</a>
<a href="./support.html" aria-label="Go to Support page">Support</a>
</div>
</div>
</header>
<!-- Daily Quote -->
<section class="quote-section">
<div id="quoteBlock">
<div class="quote-content-div">
<h2 class="quoteheader">Daily Quote for </h2>
<h2 id="date" class="quoteheader"> .</h2>
<h2 id="quote-text"> “There is hope, even when your brain tells you there isn’t.” ― John Green</h2>
</div>
</div>
<!-- About Mindfullness -->
</section>
<section class="paragraph-section">
<div class="outer-para-div">
<div class="left-para-div">
<h2>What is Mindfulness? <i class="fa-solid fa-brain"></i></h2>
<p class="index-para-text"> Mindfulness is the practice of ‘being fully present in the moment’.
It’s a different sort of awareness to the ‘automatic pilot’ that we are so often immersed
in – like when we’re driving or walking
and don’t notice the details of the journey because we’re lost in thought.
It can often be very difficult to be ‘in the moment’ as we can very easily become distracted by what
is
going on around us or by our own thoughts. People can ‘train’ to be more mindful in many ways such
as
through doing mindfulness courses, listening to cds, reading books or participating in mindfulness
retreats, although probably the most helpful way to learn is with an experienced mindfulness teacher
</p>
</div>
<div class="right-para-div">
<h2>Is Mindfulness new? <i class="fa-solid fa-person-praying"></i></h2>
<p class="index-para-text">Mindfulness has been part of Judeo Christian and Buddhist teachings for
centuries.
In 1979 Jon Kabat Zinn developed an eight-week programme called Mindfulness Based Stress Reduction
(MBSR) to teach mindfulness to people who had chronic illness and pain. Kabat Zinn is an American
molecular biologist who is now Professor of Medicine Emeritus and he demonstrated through research
that mindfulness was very beneficial. The MBSR programme was later adapted by three psychologists,
Prof. Zindel Segal,
Prof. Mark Williams and Prof. John Teasdale as Mindfulness Based Cognitive Therapy (MBCT)
to prevent relapse of depression.</p>
</div>
<div class="learn-more-btn-div">
<br>
<a href="mindfulness.html" class="learn-btn">Read More</a>
</div>
</div>
</section>
<!-- Techniques to improve mental health section -->
<section class="techniques-section">
<div class="technique-header-div">
<h2 class="section-header" id="techniques-header"> Techniques To Improve Your Mental Health</h2>
</div>
<div class="techniques-container">
<div class="techniques-box" id="exercise-card" title="A Woman performing stretches">
<div class="info">
<div class="card-text">
<h2>Exercise</h2>
<p> Being active is not only great for your physical health and fitness.Evidence also shows it
can also improve your mental wellbeing</p>
<br>
<a href="mindfulness.html" class="tech-btn">Read More</a>
</div>
</div>
</div>
<div class="techniques-box" id="connect-card" title="two women talking on a bench">
<div class="info">
<div class="card-text">
<h2>Connect with People</h2>
<p> Phone calls and social networks have their place, but few things can beat the
stress-busting,
mood-boosting power of quality face-to-face time with other people,
especially those you love and people who energize you
</p>
<br>
<a href="mindfulness.html" class="tech-btn">Read More</a>
</div>
</div>
<!-- <button class="technique-btn" aria-label="Read More about Socialising and Mental Health">Read -->
<!-- More</button> -->
</div>
<div class="techniques-box" id="diet-card"
title="a plate of healthy food contained eggs avocados and bread">
<div class="info">
<div class="card-text">
<h2>Healthy Diet</h2>
<p> Foods that can support your mood include fatty fish rich in omega-3s,
nuts (walnuts, almonds, cashews and peanuts), avocados, beans, leafy greens (spinach, kale
and Brussels sprouts),
and fresh fruit such as blueberries.</p>
<br>
<a href="mindfulness.html" class="tech-btn">Read More</a>
</div>
</div>
</div>
<div class="techniques-box" id="sleep-card" title="A man sleeping in bed">
<div class="info">
<div class="card-text">
<h2>Don't Skimp on Sleep</h2>
<p>It matters more than you think. Sleep is our body and mind's best way to recharge and
rejuvenate.
One way to get sleep better is to take a break from the stimulation of screens — TV, phones,
tablets or computers —
in the hours before bedtime. Consider reading or listening to relaxing music instead.</p>
<br>
<a href="mindfulness.html" class="tech-btn">Read More</a>
</div>
</div>
</div>
</div>
</section>
<!-- 5 Second Stress Relief Section -->
<section id="stressRelief">
<h2 class="section-header"> 5 Second Stress Relievers</h2>
<div class="container-stress">
<div class="stressRelief_div">
<div class="relief">
<br>
<img src="assets/images/speak-icon.webp" class="relief-img"
alt="A character performing a speak action">
<p> Speak it out</p>
</div>
<div class="relief">
<br>
<img src="assets/images/breath-icon.webp" class="relief-img"
alt="A character performing a breathe action">
<p>Get Some Fresh Air</p>
</div>
<div class="relief">
<br>
<img src="assets/images/write-icon.webp" class="relief-img"
alt="A hand performing a writing action">
<p>Write it Down</p>
</div>
<div class="relief">
<br>
<img src="assets/images/yoga-icon.webp" class="relief-img"
alt="A character performing a yoga pose action">
<p>Strike a Pose </p>
</div>
<div class="relief">
<br>
<img src="assets/images/sun-icon.webp" class="relief-img" alt="An icon displaying a sun">
<p>Think of a Happy Place</p>
</div>
<div class="relief">
<br>
<img src="assets/images/posture-icon.webp" class="relief-img"
alt="An icon displaying a straight posture ">
<p>Correct your Posture</p>
</div>
<div class="relief">
<br>
<img src="assets/images/candle-icon.webp" class="relief-img" alt="An icon displaying a candle">
<p> Light a Scented Candle</p>
</div>
<div class="relief">
<br>
<img src="assets/images/pet-icon.webp" class="relief-img" alt="An icon displaying a cat and a dog">
<p>Cuddle your Pet</p>
</div>
<div class="relief">
<br>
<img src="assets/images/fruit-icon.webp" class="relief-img"
alt="An icon displaying a piece of fruit">
<p>Eat Fresh Fruit</p>
</div>
<div class="relief">
<br>
<img src="assets/images/dance-icon.webp" class="relief-img"
alt="A character performing a dance action ">
<p>Bust a Move</p>
</div>
</div>
</div>
</section>
<!-- Top Rated Mental Health Apps and Podcast -->
<section id="carousel-section">
<div class="podcast-carousel">
<h2 class="carousel-header">Top Mental Health Podcasts</h2>
<div class="slideshow-container">
<div class="mySlides1">
<a href="https://www.tenpercent.com/podcast" target="_blank"
aria-label="Visit ten percent happier podcast web page"><img
src="assets/images/10percentpod-logo.webp" style="width:100%"
alt="10 percent happier podcast logo"></a>
</div>
<div class="mySlides1">
<a href="http://www.sleepwithmepodcast.com/" target="_blank"
aria-label="Visit sleep with me podcast web page"><img
src="assets/images/sleepwithme-pod-banner.webp" style="width:100%"
alt="sleep with me podcast logo"></a>
</div>
<div class="mySlides1">
<a href="https://psychcentral.com/blog/show" target="_blank"
aria-label="Visit the pysch central podcast web page"><img
src="assets/images/insidementalhealth-pod-banner.webp" style="width:100%"
alt="pysch central logo"></a>
</div>
<div class="mySlides1">
<a href="https://hiddenbrain.org/" target="_blank" aria-label="Visit hidden brain podcast web page">
<img src="assets/images/hiddenbrain-pod-banner.webp" style="width:100%"
alt="hidden brain logo"></a>
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
</div>
<div class="app-carousel">
<h2 class="carousel-header">Top Mental Health Apps</h2>
<div class="slideshow-container">
<div class="mySlides2">
<a href="https://www.headspace.com/" target="_blank" aria-label="Visit headspace app web page"><img
src="assets/images/headspace-app-banner.webp" style="width:100%"
alt="Headspace App logo"></a>
</div>
<div class="mySlides2">
<a href="https://hminnovations.org/meditation-app" target="_blank"
aria-label="Visit healthy minds app web page"><img
src="assets/images/healthyminds-app-banner.webp" style="width:100%"
alt="healthyminds app logo"></a>
</div>
<div class="mySlides2">
<a href="https://www.smilingmind.com.au/" target="_blank"
aria-label="Visit smiling mind app webpage"><img src="assets/images/smilingmind-app-banner.webp"
style="width:100%" alt="smiling mind app logo"></a>
</div>
<div class="mySlides2">
<a href="https://www.calm.com/" target="_blank" aria-label="Visit Calm app web page"><img
src="assets/images/calm-app-banner.webp" style="width:100%" alt="Calm app logo"></a>
</div>
<a class="prev" onclick="plusSlides(-1, 1)" href="javascript:void(0)">❮</a>
<a class="next" onclick="plusSlides(1, 1)" href="javascript:void(0)">❯</a>
</div>
</div>
</section>
<!-- Footer Display site logo -->
<footer>
<div class="logo-div">
<div class="outer-circle">
<div class="circle">
<a href="index.html" aria-label="Go to Homepage"><img src="assets/images/logo.webp" class="logo"
alt="Be Kind To Your Mind logo"></a>
</div>
</div>
<div class="logo-text-div">
<h1 class="logo-text"> Be Kind To Your Mind</h1>
</div>
</div>
</footer>
<!-- Script to get current date for daily quote section -->
<script>
var date = new Date();
var current_date = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
document.getElementById("date").innerHTML = current_date;
</script>
<!-- Script for carousel, Credit to W3Schools -->
<script>
let slideIndex = [1, 1];
let slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
let i;
let x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {
slideIndex[no] = 1
}
if (n < 1) {
slideIndex[no] = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no] - 1].style.display = "block";
}
</script>
</body>
</html>