generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathmindfulness.html
346 lines (283 loc) · 15.7 KB
/
mindfulness.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
<!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>
<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">Home</a>
<a href="./mindfulness.html" aria-label="Go Mindfulness page " class="active">Mindfulness</a>
<a href="./support.html" aria-label="Go to Support page">Support</a>
</div>
</div>
</header>
<!-- Accordion displaying information on mental health and mindfulness -->
<div class="info-accordion">
<h1 class="mindfulness-header">Mindfulness and Mental Health <i class="fa-solid fa-brain"></i></h1>
<button class="accordion" aria-label="Find out how mindfulness works"><strong> How does Mindfulness
Work?</strong> <i class="fa-solid fa-person-praying"> </i> </button>
<div class="panel">
<div class="inner-panel">
People who practice mindfulness learn to become familiar with their own ‘habits of mind’. Through
regular practice they begin to notice how they often react rather than respond. They become more
familiar with their body-mind connection and they learn to cultivate a kinder, more compassionate
response to their own experience. To help them do this they may spend some time every day practising
some mindfulness practices such as the body scan, sitting meditation, mindful movement and mindful
eating.
</div>
</div>
<button class="accordion" aria-label="Find out how to learn mindfulness"><strong> How can I Learn
Mindfulness?</strong> <i class="fa-brands fa-leanpub"></i></button>
<div class="panel">
<div class="inner-panel">
<p>MBCT and MBSR are ‘programmes’ that have been developed particularly in health and mental health
settings to teach mindfulness. They are both grounded in Buddhist traditions of mindfulness and
have
attracted a lot of clinical research but it is important to emphasise that there are many other
ways
to learn mindfulness, including participating in retreats, listening to cds and reading books on
mindfulness..</p>
</div>
</div>
<button class="accordion" aria-label="Find out what mental health is "><strong>what is Mental
Health?</strong> <i class="fa-solid fa-hand-holding-heart"></i></button>
<div class="panel">
<div class="inner-panel">
<p>Mental health includes our emotional, psychological, and social well-being. It affects how we
think, feel, and act. It also helps determine how we handle stress, relate to others, and make
healthy choices.1 Mental health is important at every stage of life, from childhood and
adolescence through adulthood.
Although the terms are often used interchangeably, poor mental health and mental illness are not
the same. A person can experience poor mental health and not be diagnosed with a mental illness.
Likewise, a person diagnosed with a mental illness can experience periods of physical, mental,
and social well-being..</p>
</div>
</div>
<button class="accordion" aria-label="Find out why mental health is important for overall health"><strong>Why is
mental health
important for overall health?</strong> <i class="fa-solid fa-heart-pulse"></i></button>
<div class="panel">
<div class="inner-panel">
<p>Mental and physical health are equally important components of overall health. For example,
depression increases the risk for many types of physical health problems, particularly
long-lasting conditions like diabetes, heart disease, and stroke. Similarly, the presence of
chronic conditions can increase the risk for mental illness</p>
</div>
</div>
<button class="accordion" aria-label="Find out if your mental health can change over time"><strong> Can your
mental health change over time?</strong> <i class="fa-solid fa-hourglass-start"></i></button>
<div class="panel">
<div class="inner-panel">
<p>Yes, it’s important to remember that a person’s mental health can change over time, depending on
many factors. When the demands placed on a person exceed their resources and coping abilities,
their mental health could be impacted. For example, if someone is working long hours, caring for
a relative, or experiencing economic hardship, they may experience poor mental health..</p>
</div>
</div>
</div>
<!-- Video Information, Videos embed as iframes from youtube -->
<h2 id="video-header">More Information on Mental Health and Mindfulness</h2>
<div class="more-info-videos">
<div class="outer-video">
<div class="left-video">
<iframe class="iframe" width="600" height="400" src="https://www.youtube.com/embed/3nwwKbM_vJc"
title="video about mindfulness with Jon Kabat-Zinn"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
<div class="outer-video">
<div class="right-video">
<iframe class="iframe" width="600" height="400" src="https://www.youtube.com/embed/rkZl2gsLUp4"
title="Video on how to change your mental health"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
</div>
<!-- Extended Information on Techniques to improve mental health -->
<h2 class="technique-div-header">Techniques to Improve Mental Health</h2>
<div class="outer-techniques-div">
<div class="improve-techniques-div">
<div class="Exercise">
<div class="overlay-div">
<h3 class="technique-header">Exercise <i class="fa-solid fa-dumbbell"></i></h3>
<p>Exercise is not just about aerobic capacity and muscle size. Sure, exercise can improve your
physical
health and your physique, trim your waistline, improve your sex life, and even add years to
your
life. But that’s not what motivates most people to stay active.</p>
<hr><br>
<p>People who exercise regularly tend to do so because it gives them an enormous sense of
well-being.
They feel more energetic throughout the day, sleep better at night, have sharper memories,
and
feel
more relaxed and positive about themselves and their lives. And it’s also a powerful
medicine
for
many common mental health challenges.</p>
<hr><br>
<p>Research indicates that modest amounts of
exercise can make a real difference. No matter your age or fitness level, you can learn to
use
exercise as a powerful tool to deal with mental health problems, improve your energy and
outlook,
and get more out of life.</p>
</div>
</div>
<div class="Diet">
<div class="overlay-div">
<h3 class="technique-header">Diet <i class="fa-solid fa-carrot"></i></h3>
The relationship between our diet and our mental health is complex. However, research shows a
link
between what we eat and how we feel.
Eating well can help you feel better. You don’t have to make big changes to your diet, but see
if you
can try some of these tips.
<ul class="diet-technique-list">
<li>Eat regularly. This can stop your blood sugar level from dropping, which can make you
feel tired
and
bad-tempered.</li>
<li>hydrated. Even mild dehydration can affect your mood, energy level and ability to
concentrate.
</li>
<li>Eat the right balance of fats. Your brain needs healthy fats to keep working well.
They’re found
in
things such as olive oil, rapeseed oil, nuts, seeds, oily fish, avocados, milk and eggs.
Avoid
trans
fats – often found in processed or packaged foods – as they can be bad for your mood and
your
heart
health.</li>
<li>Look after your gut health. Your gut can reflect how you’re feeling: it can speed up or
slow
down if
you're stressed. Healthy food for your gut includes fruit, vegetables, beans and
probiotics.
</li>
</ul>
</div>
</div>
<div class="Connect">
<div class="overlay-div">
<h3 class="technique-header">Connect <i class="fa-solid fa-user-group"></i></h3>
<p> Spending quality time with friends or loved ones can just feel good for the soul. Ever left
a
gathering
with friends and felt refreshed and jovial? Time spent with those that you trust and that
care
about
you
is good for everyone. Too much time time on your own can make you feel lonely and out of
touch
so it
is
important to make an effort to spend time with others</p>
<br>
<p>Social networks and online interactions may give people a false sense of connectedness. We
still
need
physic in-person connections for our own mental health. Schedule time with friends
(in-person)
on a
regular basis to avoid loneliness. It doesn’t have to be a full night out. It could be a 15
minute
walk with a neighbor or meeting up for a quick coffee.</p>
<br>
<h3>Benefit of Socialization</h3>
<ul class="connect-technique-list">
<li>Better mental health – it can lighten your mood and make you feel happier</li>
<li>Lower your risk of dementia – social interaction is good for your brain health</li>
<li>Promotes a sense of safety, belonging and security</li>
</ul>
</div>
</div>
<div class="Sleep">
<div class="overlay-div">
<h3 class="technique-header">Sleep <i class="fa-solid fa-bed"></i></h3>
<p>Sleep has an important restorative function in ‘recharging’ the brain at the end of each day,
just
like we need to charge a mobile phone battery after prolonged use. Maintaining a regular
sleep-wake
cycle allows the natural rhythm of the body to be reset every day and therefore optimises
brain
functioning and can improve mental health.
Ongoing poor sleep can be a huge risk factor for the development of major depressive
disorder.
The
risk of feeling depressed and/or anxious (as well as worsening existing anxiety and
depression)
increases with the severity of insomnia, and so it is important to recognise and sort out
sleep
problems as soon as they are identified.</p>
<br>
<h3>The effects of a lack of sleep</h3>
<br>
<ul class="sleep-techniques-list">
<li>Low Mood</li>
<li>Anxiety</li>
<li>Irritability</li>
<li>Erratic Behaviour</li>
<li>Poor cognitive function </li>
</ul>
</div>
</div>
</div>
</div>
<!-- Footer Displaying 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 for Accordion - Credit to W3Schools -->
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("focused");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>
</body>
</html>