-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
302 lines (260 loc) · 15.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
<!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">
<title>A Safe Place | Peace for your Mind |</title>
<!-- Webpage Icon -->
<link rel="icon" href="Images/favicon.ico">
<!-- CSS Bootstrap -->
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- JS Bootstrap scripts-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Implementing image icons using the 'Fonts Awesome' website -->
<script src="https://kit.fontawesome.com/4686dd3488.js" crossorigin="anonymous"></script>
<!-- Importing the CSS file -->
<link rel="stylesheet" href="CSS/main_page_style.css">
<!-- Importing Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Alice&family=Cormorant+Garamond:ital@1&family=Old+Standard+TT&family=Oleo+Script+Swash+Caps&family=Vidaloka&display=swap" rel="stylesheet">
<!-- Importing the Cursor Style for the webpage -->
<link rel="stylesheet" href="CSS/cursor.css">
</head>
<body>
<!-- Using the class of cursor to alter it-->
<div class="whole-body"></div>
<!-- ================================================================== -->
<div id="topmost-container">
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg">
<h4 class="navbar-brand">|A Safe Space |</h4>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://medium.com/tag/mental-health" target="_blank" rel="noopener noreferrer">Stories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://medium.com/" target="_blank" rel="noopener noreferrer">Write your story</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://open.spotify.com/show/2yEIZxL5ZR2EyY7AVqNeI1" target="_blank" rel="noopener noreferrer">Podcast</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="https://www.who.int/health-topics/mental-health" target="_blank" rel="noopener noreferrer"">Mental Health- WHO</a>
<a class="dropdown-item" href="https://www.practo.com/consult/ask-a-psychiatrist-online" target="_blank" rel="noopener noreferrer">Want to consult a Psychiatrist?</a>
</div>
</li>
</ul>
</div>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
</div>
<!-- ============================================================== -->
<!-- First glance or the intro carousel-->
<center>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block-w-100" src="Images/Importance of Mental Health.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block-w-200" src="Images/Human Brain.png" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block-w-300" src="Images/Awareness.png" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</center>
<!-- Introduction to the ngo-->
<div id="intro-section">
<h2 class="ngo-heading"><b>We are a non-profit organization that aims to<br> destigmatize Mental Health by spreading Awareness</b></h2><br>
<img class="ngo-faq" src="Images/FAQs Mental Health.jpeg">
<h4 class="ngo-text1">For over 20 years, we have been committed to make people <br>aware about Mental Health around the world.</h4>
<!-- <img class="help-1" src="Images/Help-1.jpg"> -->
<h4 class="ngo-text1">We cannot achieve our goals on our own. We work together with businesses, <br> government, and nonprofits, and each partner plays a specific role in accelerating progress.</h4>
<img class="help-2" src="Images/Help-2.jpg">
</div>
<!-- ============================================================== -->
<div id="center-container">
<h1> <b>What is Mental Health?</b> </h1><br>
<p> Mental health includes our emotional, psychological, and social well-being. <br>It affects how we think, feel, and act.</p><br>
<p> It also helps determine how we handle stress, relate to others, and make healthy choices.</p><br>
<p> Mental health is important at every stage of life, from childhood and adolescence <br>through adulthood.
Although the terms are often used interchangeably, poor mental health <br>and mental illness are not the same.
</p><br>
<p> A person can experience poor mental health and not be diagnosed with a mental illness. </p><br>
<p>Likewise, a person diagnosed with a mental illness can experience periods of <br>physical, mental, and social well-being.</p>
<h2><b>Why is mental health important for overall health?</b></h2>
<p>Mental and physical health are equally important components of overall health.</p>
<p>For example, depression increases the risk for many types of physical health problems, <br>particularly long-lasting conditions like diabetes, heart disease, and stroke.</p>
<p>Similarly, the presence of chronic conditions can increase the risk for mental illness.</p>
<br>
<h2><b>Reasons to care for Mental Health</b></h2>
<p>Maintaining a positive mental health and treating any mental health conditions is crucial<br> to stabilizing constructive behaviors, emotions, and thoughts.</p>
<p>Focusing on mental health care can increase productivity, enhance our self-image, and improve relationships. </p>
<p>For example, heart disease and stress are related to Mental Health, <br>So managing stress might have a positive outcome on heart disease.</p>
<br>
<!-- List -->
<ul><h4>Other benefits of taking care of our mental health can include:</h4>
<li><p>Improving one's mood.</p></li>
<li><p>Reducing Anxiety.</p></li>
<li><p>Creating an enhanced sense of inner peace.</p></li>
<li><p>Thinking more clearly.</p></li>
<li><p>Improving relationships & increasing one's self esteem.</p></li>
</ul>
</div>
<!-- First Artistic Image -->
<img class="first-image-art" src="Images/First Image.jpg">
<!-- Giphy image-->
<img class="second-image-gif" src="Images/Mental Health Matters.gif">
<!-- ============================================================== -->
<!-- Professional Help Section -->
<div id="middle-container">
<h2 class="help"> <b>Signs You Need To See A Therapist (And How To Find The Right One?)</b></h2>
<p>We all experience stress, anxiety, mood swings and other forms of emotional distress at one point or another in our lives.</p>
<p>Whether it's because of a professional setback, rejection, financial issues, relationships, personal loss or some other reason.</p>
<p>Maybe you're feeling low or empty and are unable to "snap out of it". Or, maybe you're noticing certain negative patterns in your lifestyle that you can't seem to break.</p>
<p> Sometimes the signs of mental or emotional distress are obvious. But at other times, they are harder to pinpoint. </p><br>
<h3> <i>What is Psychotherapy?</i></h3>
<p>Often, people freak out when they hear the word "therapy".</p>
<p> But contrary to common misconception, psychotherapy isn't just for those who are struggling with mental illness.
<br>It can be beneficial for anyone who is experiencing stress, intense emotions or life transitions and wants to improve their life. <br>
</p>
<img class="consult-2" src="Images/Consult Image-2.jpg">
<h4>The main types of psychotherapy include:</h4><br>
<ol>
<li><p> Interpersonal Psychotherapy <br> (Centers on improving interpersonal relationships and social functioning of an individual) </p></li>
<li><p> Psychoanalytic psychotherapy <br>(Used for treating depression, PTSD and other psychological disorders) </p></li>
<li><p> Cognitive analytical therapy <br>(Emphasizes on investigating past behaviour and belief, negative behavioural patterns, etc.)</p></li>
<li><p> Systemic psychotherapy <br>(analyzes interactions and dynamics of people in relationships, eg: couples therapy)</p></li>
<li><p> Humanistic therapy <br>(focuses on developing a strong sense of self and reaching one's potential)</p></li>
</ol>
<br>
<h3> Should you see a Therapist?</h3>
<p>It's important to remember that reaching out is not a sign of weakness, but a significant step toward the path of self-care.</p>
<p>And the sooner you seek help, the faster you can get back on track. </p>
<img class="consult-1" src="Images/Consult Image-1.jpg">
<h4>Here are nine critical signs it's time to get professional help, according to mental health experts:</h4>
<ul>
<li><p>You're having difficulty regulating your emotions.</p></li>
<li><p>You aren't performing as effectively at work or school. </p></li>
<li><p>You're experiencing changes or disruptions in sleep or appetite.</p></li>
<li><p>You're struggling to build and maintain relationships.</p></li>
<li><p> You've experienced trauma.</p></li>
<li><p>You no longer enjoy activities you typically did.</p></li>
<li><p>You're grieving.</p></li>
<li><p>You want to improve yourself but don't know where to start.</p></li>
<li><p>You're using substance or sex to cope.</p></li>
</ul>
</div>
<!-- ============================================================== -->
<!-- Card Section-->
<section id="consult">
<center>
<h1 class="consult-text1">Consult Top Psychologists in India today</h1>
<p class="consult-text">Top Therapists, Counsellors, Mental Health Experts in India.</p>
<img class="therapy" src="Images/Therapist.jpg">
</center>
<br>
<div class="row">
<div class="consult-column col-lg-4 col-md-6">
<div class="card">
<div class="card text-white mb-3">
<div class="card-header">
<h1>Dr. Bhargav Gupta</h1>
</div>
<div class="card-body">
<h3>Psychiatrist, 6 yrs experience</h3>
<p>Apollo Hospital, Maharashtra</p>
<p>Available from 8AM - 6PM</p>
<p>English, Hindi, Marathi</p>
<button class="btn btn-lg btn-block btn-success" type="button">Sign Up</button>
</div>
</div> <!--Background-->
</div>
</div><!--Column large-->
<div class="consult-column col-lg-4 col-md-6">
<div class="card">
<div class="card text-white mb-3">
<div class="card-header">
<h1>Dr. Aman Shah</h1>
</div>
<div class="card-body">
<h3>Therapist, 10 yrs experience</h3>
<p>Institute of Human Behaviour & Allied Sciences, Delhi</p>
<p>Available from 9AM - 5PM</p>
<p>English, Hindi</p>
<button class="btn btn-lg btn-block btn-outline-success" type="button">Sign Up</button>
</div>
</div> <!--Background-->
</div>
</div><!--Column large-->
<div class="consult-column col-lg-4">
<div class="card">
<div class="card text-white mb-3">
<div class="card-header">
<h1>Dr. Shruti Dash</h1>
</div>
<div class="card-body">
<h3>Counsellor, 10 yrs experience</h3>
<p>Ace Mind Clinic, Haryana</p>
<p>Available from 9AM - 5PM</p>
<p>Online Consultation</p>
<button class="btn btn-lg btn-block btn-success" type="button">Sign Up</button>
</div>
</div> <!--Background-->
</div>
</div> <!--Column large-->
</div> <!--row-->
</section>
<!-- ============================================================== -->
<!-- Copyright Section -->
<div id="last-container">
<section class="colored-section" id="cta">
<div class="container-fluid">
<h2 class="big-heading">Know more about your Mental Health. <br>
<img class="faqs" src="Images/Last Section Ngo.gif">
<br>Also available on:</h2>
<button class="download-button btn btn-lg btn-dark" type="button"><i class="fab fa-apple"></i> Download</button>
<button class="download-button btn btn-lg brn-light" type="button"><i class="fab fa-google-play"></i> Download</button>
</div>
</section>
<!-- Footer -->
<footer class="white-section" id="footer">
<div class="container-fluid">
<i class="fa-brands fa-facebook-square"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-instagram-square"></i>
<i class="fa-solid fa-envelopes-bulk"></i>
<p>© Copyright | A Safe Space 2022</p>
</div>
</div>
</body>
</html>