-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
216 lines (208 loc) · 10.4 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
<!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="Feeling like monke lately? Don't worry, we all have been there. Let's play some games and channel our inner
zen mode to calm down our monkeness!" />
<title>Mind Monke | Feeling like monke lately? Don't worry, we all have been there.</title>
<link rel="icon" type="image/png" sizes="32x32" href="/img/icon.jpg">
<!-- Link the 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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<!-- Link the CSS -->
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<nav class="navbar">
<div class="logo">
<h2>Mind Monke</h2>
</div>
<div class="hamburgerIcon" onclick="handler(this)">
<p class="bar1"></p>
<p class="bar2"></p>
<p class="bar3"></p>
</div>
<ul class="navlist">
<li class="listItem"><a href="#activitiesSection">Activities</a></li>
<li class="listItem"><a href="#moreInfoSection">More Info</a></li>
<li class="listItem"><a href="#contact">Resources</a></li>
</ul>
<div class="buttons">
<button id="login" class="navbarButtons">Login</button>
<button id="signUp" class="navbarButtons">Sign Up</button>
</div>
</nav>
<header class="header">
<article class="content">
<h1><span class="colored">Mind Monke</span> is here to help you.</h1>
<p>"Feeling like monke lately? Don't worry, we all have been there. Let's play some games and channel our inner
zen mode to calm down our monkeness!"
</p>
<button class="getStarted">Get Started</button>
</article>
<div class="illustration">
<img src="/img/mascot2.png" alt="Mind Monke Mascot">
</div>
</header>
<main>
<section class="sectionIntro" id="activitiesSection">
<div class="sectionIntroContainer">
<h2>Activities</h2>
<p>"Sitting all day at your desk: no laughing, playing, or exercise makes you anxious, dull, and inactive. Take
a little time off and play with Mind Monke!"
</p>
</div>
</section>
<div id="cards">
<div class="toggleCards">
<span class="cardsTag defaultSwitch" id="meditating" onclick="displayCards(this.id)">Meditation</span>
<span class="cardsTag" id="playing" onclick="displayCards(this.id)">Coping Activities</span>
<span class="cardsTag" id="music" onclick="displayCards(this.id)">Listen to Music</span>
</div>
</div>
<section id="cardsContent">
<div id="meditatingCard" class="card default">
<div class="illustrationsTab">
<img src="/img/mascotMeditate.png" alt="Mind Monke Meditating">
</div>
<div class="intro">
<h2>Meditate with Me</h2>
<p>"Meditate With Me to calm down your inner monke and channel your mind to a more
productive state. I used to jump around all day and get nothing done, then I discovered meditation.
Meditation helps me and it'll help you too!"
</p>
<div class="buttonsContainer">
<button id="meditateWithMonke" class="getStarted"><a
href="\activities\activity1\index.html">Start.</a></button>
</div>
</div>
</div>
<div id="playingCard" class="card">
<div class="illustrationsTab">
<img src="/img/mascotSleep.png" alt="Mind Monke Sleeping">
</div>
<div class="intro">
<h2>Monke Sleeps a lot</h2>
<p> I am a monke and I don't know about you but I am not an owl. So I eat a lot and sleep a lot.
And that helps me cope with all the climbing and running all day long.
</p>
<div class="buttonsContainer">
<button id="playWithMonke" class="getStarted"><a
href="\activities\activity2\index.html">Perform.</a></button>
</div>
</div>
</div>
<div id="musicCard" class="card">
<div class="illustrationsTab">
<img src="/img/mascotMusic.png" alt="Mind Monke Enjoying Music">
</div>
<div class="intro">
<h2>Listen to Music with me.</h2>
<p>Music is good. And I also like to dance to good music, or maybe sometimes
I like to just sit and listen to it while watching a bird on a tree, or thinking about
banana trees.
</p>
<div class="buttonsContainer">
<button id="musicWithMonke" class="getStarted"><a
href="\activities\activity3\index.html">Listen.</a></button>
</div>
</div>
</section>
<section class="sectionIntro" id="moreInfoSection">
<div class="sectionIntroContainer">
<h2>More Info</h2>
<p> "Even though we all feel like monke sometimes, it doesn't always feel the same. Learn more in-depth about
the ways we may feel and what can be done to combat them."
</p>
</div>
</section>
<section class="content" id="middle">
<div class="contentContainers">
<div class="illustrations">
<img src="img/meditation.svg" alt="A woman Meditating">
</div>
<div class="writing">
<h2>Anxiety</h2>
<p>
"Anxiety is defined as a diffuse, vague, or very unpleasant feeling of fear and apprehension. The word
"anxiety" is derived from the Latin word i.e. "Angere", meaning to choke or strange. Meditation is one of
the most common techniques used to combat anxiety. Read more
<a href="https://raahee.in/blog/anxiety-disorder-types-symptoms-and-treatment-ypjk7z" target="_blank">
on this page</a>
</p>
</div>
</div>
<div class="contentContainers" id="rightAlign">
<div class="illustrations">
<img src="img/walkingOutside.svg" alt="A person walking in the park">
</div>
<div class="writing r">
<h2>Stress</h2>
<p>"Stress is normal when responding to a demand or threat as it keeps us safe, but if you find yourself
constantly frazzled in situations that don't demand it, there may be a problem. Taking time off and spending
it with loved ones can be some of the best ways to combat stress." Read more about it <a
href="https://www.verywellmind.com/stress-and-health-3145086" target="_blank">here</a>
</p>
</div>
</div>
<div class="contentContainers">
<div class="illustrations">
<img src="img/joyRideLaughing.svg" alt=" A person Joyriding on a Toy">
</div>
<div class="writing">
<h2>Depression</h2>
<p>"It's natural to feel sad after experiencing a painful event. But when the feeling turns into a long term
one and we begin to feel helpless, sadness can turn to depression. Awareness of our social circle and
prioritizing our health are two common ways of coping." Read more about <a
href="https://www.healthline.com/health/depression" target="_blank">depression here</a></p>
</div>
</div>
</section>
<section id="contact">
<div class="contactContainer">
<p>Mind Monke is changing lives
<p>
<h2>Stay up-to-date with what we’re doing</h2>
</div>
<div class="contactForm">
<input type="email" name="email" id="emailId" placeholder="Enter your email address: ">
<img src="/img/icon-error.svg" alt="Error!" id="errorImg">
<button class="blackBtn" id="contactUs">Contact Us</button>
<p id="errorMessage"><em>Whoops make sure its an email</em></p>
</div>
</section>
</main>
<footer>
<div class="socialIcons">
<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'>
<title>Logo Instagram</title>
<path
d='M349.33 69.33a93.62 93.62 0 0193.34 93.34v186.66a93.62 93.62 0 01-93.34 93.34H162.67a93.62 93.62 0 01-93.34-93.34V162.67a93.62 93.62 0 0193.34-93.34h186.66m0-37.33H162.67C90.8 32 32 90.8 32 162.67v186.66C32 421.2 90.8 480 162.67 480h186.66C421.2 480 480 421.2 480 349.33V162.67C480 90.8 421.2 32 349.33 32z' />
<path
d='M377.33 162.67a28 28 0 1128-28 27.94 27.94 0 01-28 28zM256 181.33A74.67 74.67 0 11181.33 256 74.75 74.75 0 01256 181.33m0-37.33a112 112 0 10112 112 112 112 0 00-112-112z' />
</svg>
<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'>
<title>Logo Twitter</title>
<path
d='M496 109.5a201.8 201.8 0 01-56.55 15.3 97.51 97.51 0 0043.33-53.6 197.74 197.74 0 01-62.56 23.5A99.14 99.14 0 00348.31 64c-54.42 0-98.46 43.4-98.46 96.9a93.21 93.21 0 002.54 22.1 280.7 280.7 0 01-203-101.3A95.69 95.69 0 0036 130.4c0 33.6 17.53 63.3 44 80.7A97.5 97.5 0 0135.22 199v1.2c0 47 34 86.1 79 95a100.76 100.76 0 01-25.94 3.4 94.38 94.38 0 01-18.51-1.8c12.51 38.5 48.92 66.5 92.05 67.3A199.59 199.59 0 0139.5 405.6a203 203 0 01-23.5-1.4A278.68 278.68 0 00166.74 448c181.36 0 280.44-147.7 280.44-275.8 0-4.2-.11-8.4-.31-12.5A198.48 198.48 0 00496 109.5z' />
</svg>
<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'>
<title>Logo Facebook</title>
<path
d='M480 257.35c0-123.7-100.3-224-224-224s-224 100.3-224 224c0 111.8 81.9 204.47 189 221.29V322.12h-56.89v-64.77H221V208c0-56.13 33.45-87.16 84.61-87.16 24.51 0 50.15 4.38 50.15 4.38v55.13H327.5c-27.81 0-36.51 17.26-36.51 35v42h62.12l-9.92 64.77H291v156.54c107.1-16.81 189-109.48 189-221.31z'
fill-rule='evenodd' />
</svg>
<div class="attributions">
<span>website by : <a href="https://github.com/29deepanshutyagi">Deepanshu Tyagi</a></span>
<!-- <span>Illustration and Content by: <a href="https://github.com/"></a></span> -->
</div>
</div>
</footer>
</body>
<script src="/js/app.js"></script>
</html>