-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
259 lines (180 loc) · 7.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MERA MAN</title>
<script src="https://kit.fontawesome.com/e9cb9b0869.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<a href="#" class="logo">Mere Man Ki Baat...</a>
<div id="menu" class="fas fa-bars"></div>
<nav class="navbar">
<a class="active" href="#home">Home</a>
<a href="#our-mission">Our Mission</a>
<a href="#baatchit">BaatChit</a>
<a href="#diary">Diary</a>
<a href="#music">Music</a>
<a href="#comic">Comics</a>
<a href="#games">Games</a>
<a href="#tracker">Tracker</a>
<a href="#footer">Contact Us</a>
</nav>
</header>
<section class="home" id="home">
<div class="content">
<h1>Mental Health is Important!</h1>
<h3>To be healthy as a whole, Mental Wellness plays a role!</h3>
<a href="#our-mission" class="btn">Our Mission</a>
</div>
</section>
<section class="our-mission" id="our-mission">
<h1 class="heading"> our-mission </h1>
<div class="box-container">
<div class="box">
<img src="./assests/what-mental.jpg" alt="">
<h3>What is Mental Health?</h3>
<p>Mental health includes our emotional, psychological, and social well-being. It is all about how people think, feel, act and behave. It is a state of well-being in which every individual realizes his or her own potential, and can cope with normal stresses of life.</p>
</div>
<div class="box">
<img src="./assests/causes2.jpeg" alt="">
<h3>Why is it Important?</h3>
<p>Mental health and physical health are closely connected. Mental health plays a major role in people's ability to maintain good physical health. Mental illnesses, such as depression and anxiety, affect people's ability to participate in health-promoting behaviors.</p>
</div>
<div class="box">
<img src="./assests/causes.png" alt="">
<h3>What causes Mental Illness?</h3>
<p>Stressful life situations, financial problems, demise of loved ones, sexual harassment, physical abuse, mental abuse, traumatic life,severe alcohol or drug use,hereditary mental illness,feelings of inferiority, reduced self-esteem, extreme social anxiety</p>
</div>
<div class="box">
<img src="./assests/solution.jpg" alt="">
<h3>Our Solution</h3>
<p>We have created an interactive website which people can use to sway away their anxiety and depression and eliminate sense of inferiority.</p>
</div>
<div class="box">
<img src="./assests/solution2.jpg" alt="">
<h3>Our Solution</h3>
<p>We make this website interactive with features like Baatchit, Diary-Entry, Music, Mood-Tracker, Comics, etc which will serve to different problems.</p>
</div>
<div class="box">
<img src="./assests/solution3.jpg" alt="">
<h3>Our Solution</h3>
<p>We Believe with our interactive website we can raise awareness about mental health and well-being and help people suffering from it.</p>
</div>
</div>
</section>
<!-- our-mission section ends -->
<!-- baatchit section starts -->
<section class="baatchit" id="baatchit">
<h1 class="heading">Baatchit-App</h1>
<pre class="baatchit-des">
Baatchit is a Chatting App which the user can
use to interact with other users on the platform.
It's a group chat app which one can use to
exchange their emotions, feelings.
</pre>
<div>
<a href="https://baatien-sai-f00f3.web.app/" target="__blank" class="box-link">Get Started</a>
</div>
</section>
<!-- baatchit section ends -->
<!-- diarys section starts -->
<section class="diary" id="diary">
<h1 class="heading">Diary-Entry</h1>
<pre class="diary-desc">
Diary-App is a tech-savvy version of personal diary.
The user can write about their daily happenings
which would make them feel light after
letting thier emotions and feelings out.
</pre>
<div>
<a href=" https://meri-diary-b2e16.web.app" target="__blank" class="box-link">Let Out Your Emotions</a>
</div>
</section>
<!-- diary section ends -->
<!-- music section starts -->
<section class="music" id="music">
<h1 class="heading">Harmony</h1>
<pre class="music-desc">
The Harmony or the Music Section is where
the users can relax and let go of all their
worries. This is where one can medidate and
listen to peaceful tunes.
</pre>
<div>
<a href="https://music-mere-man-ki.netlify.app/" target="__blank" class="box-link">Let's Dive and Get Lost</a>
</div>
</section>
<!-- music section ends -->
<!-- comic section starts -->
<section class="comic" id="comic">
<h1 class="heading">Comics</h1>
<pre class="comic-desc">
"A book is a Man's Best Friend."
Here in the Comic Section the user can
access and read from numerous available books.
This would help in increasing concentration power.
</pre>
<div>
<a href="https://keen-benz-c84090.netlify.app/" target="__blank" class="box-link">Let's Read a Book!</a>
</div>
</section>
<!-- comic section ends -->
<!-- games section starts -->
<section class="games" id="games">
<h1 class="heading">Game Zone</h1>
<pre class="game-desc">
Game Zone has few mini playables to
lighten users mood. The game has been
made such that it helps the user concentrate
and increase focus power.
</pre>
<div>
<a href="https://game1-js.netlify.app" target="__blank" class="box-link">Mr. Bouncy Bounce</a>
</div>
<div style="margin-top: 30px;">
<a href="https://game2-js.netlify.app" target="__blank" class="box-link">The Hungry Python</a>
</div>
</section>
<!-- games section ends -->
<!-- mood section starts -->
<section class="mood" id="tracker">
<h1 class="heading">Trackers</h1>
<pre class="mood-desc">
Trackers is a Feature wherein a user
can track thier state of mood over a period
of time which will help them take decision in a
better way and plan things and work accordingly.
</pre>
<div>
<a href="https://mood-tracker-sai.netlify.app/" target="__blank" class="box-link">Track Mood</a>
</div>
<div style="margin-top: 20px;">
<a href="https://todolist-sai-soumyak-nanda.herokuapp.com/" target="__blank" class="box-link">Work Todos</a>
</div>
</section>
<!-- mood section ends -->
<!-- footer section starts -->
<div class="footer" id="footer">
<h1 class="credit"> created with ❤️<a href="#"></a> copyright @ 2021 </h1>
<div class="footer-social">
<a href="https://github.com/sainanda59/MERE-MANN-KI-BAAT"><i class="fab fa-github fa-3x"></i></a>
<a href="https://www.linkedin.com/in/sainanda59/"><i class="fab fa-linkedin fa-3x"></i></a>
<a href="mailto:saisoumyaknanda@gmail.com"><i class="fas fa-envelope-open-text fa-3x"></i></a>
<a href="https://www.instagram.com/eduskool/"><i class="fab fa-instagram fa-3x"></i></a>
<a href="tel:+91797872xxxx"><i class="fas fa-phone fa-3x"></i></a>
</div>
</div>
<!-- footer section ends -->
<!-- scroll top -->
<a href="#home" class="scroll-top">
<img src="./images/scroll-img.png" alt="">
</a>
<!-- jquery cdn link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- custom js file link -->
<script src="script.js"></script>
</body>
</html>