-
Notifications
You must be signed in to change notification settings - Fork 0
/
prevention.html
350 lines (345 loc) · 12.4 KB
/
prevention.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/prevention.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<script
src="https://kit.fontawesome.com/d502fb4d93.js"
crossorigin="anonymous"
></script>
</head>
<body>
<!-- navbar --->
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-item"><a href="index.html" class="nav-link">Home</a></li>
<li class="nav-item">
<a href="prevention.html" class="nav-link">Prevention</a>
</li>
<li class="nav-item">
<a href="resource.html" class="nav-link">Resource</a>
</li>
</ul>
</nav>
<!-- end navbar -->
<!-- setu -->
<div class="center">
<div id="aarogya-setu-container" class="aarogya-setu-container">
<span class="x">X</span>
<h4>Aarogya Setu <span>(Download An App)</span></h4>
<p class="setu-content">
Aarogya Setu is a mobile application developed by the Government of
India to connect essential health services with the people of India in
our combined fight against COVID-19
<i style="color: #00ff00;" class="fas fa-virus"></i>.
</p>
<div class="center2">
<a
href="https://play.google.com/store/apps/details?id=nic.goi.aarogyasetu&hl=en_US"
target="_blank"
>Android <i class="fa fa-android"></i
></a>
<a
href="https://apps.apple.com/in/app/aarogyasetu/id1505825357"
target="_blank"
>Iphone <i class="fa fa-apple"></i
></a>
</div>
</div>
</div>
<!-- end setu -->
<div class="prevention-quote">
<h4>STAY HOME 🏠 STAY SAFE 🌈</h4>
</div>
<div class="prevention-container">
<div class="home">
🏠
</div>
<div class="face">
<div class="eyes">
<span class="eye"></span>
<span class="eye"></span>
</div>
</div>
</div>
<div class="do">
<h1>Do's</h1>
</div>
<div class="prev-wrapper">
<div class="prev-box oneone">
<i id="mask" class="fas fa-head-side-mask"></i>
<h4>Wear Mask</h4>
<p>
Always Wear Mask If you need to go outside. It will Prevent you 90%
from the the COVID-19
<i class="fas fa-viruses" style="color: #00ff00;"></i>
Viruses.
</p>
<button
onclick="call()"
id="learn_more1"
style="text-decoration: none;"
href="#"
>
Learn more
</button>
</div>
<div class="prev-box twotwo">
<i id="hand-sparkles" class="fas fa-hands-wash"></i>
<h4>Wash Hand</h4>
<p>
Washing your hands
<i class="fas fa-hands-wash" style="color: #f3f3ac;"></i>
with soap <i class="fas fa-soap" style="color: skyblue;"></i> and
water 🌊 or using alcohol-based
<i class="fas fa-flask" style="color: dodgerblue;"></i> hand rub kills
viruses that may be on your hands.
</p>
</div>
<div class="prev-box threethree">
<i id="people-arrows" class="fas fa-people-arrows"></i>
<h4>Social Distance</h4>
<p>
Avoid going to crowded places. Why? Where people come together in
crowds <i class="fas fa-users" style="color: dodgerblue;"></i>, you
are more likely to come into close contact with someone that has
COIVD-19 <i class="fas fa-viruses" style="color: #00ff00;"></i>
(distance : 1metre (3 feets))
</p>
<button
onclick="call2()"
id="learn_more1"
style="text-decoration: none; background: blueviolet;"
href="#"
>
Learn more
</button>
</div>
<div class="prev-box four">
<i id="stopwatch-20" class="fas fa-stopwatch-20"></i>
<h4>Do Excercise || Yoga</h4>
<p>
Do <i class="fas fa-stopwatch-20" style="color: #f8ab9e;"></i>(20)
minutes Excercise 🏋🏻♀️ or Yoga 🤸🏻♂️ they helps lower the stress hormones
that compromise the immune system, while also conditioning the lungs
and respiratory tract.
</p>
<a
style="text-decoration: none; background: #ee836e;"
href="resource.html"
>Learn more</a
>
</div>
<div class="prev-box five">
<i id="house-user" class="fas fa-house-user"></i>
<h4>Stay Home</h4>
<p>
It’s important to understand that even when people appear not to have
symptoms of coronavirus (COVID-19)
<i class="fas fa-viruses" style="color: #00ff00;"></i>, they may still
be carrying the virus
<i class="fas fa-virus" style="color: #00ff00;"></i>. Where you’re
meeting people who aren’t from your household, your risk of catching
coronavirus can increase depending on the situation.
</p>
</div>
<div class="prev-box six">
<i id="hospital-user" class="fas fa-hospital-user"></i>
<h4>Download Aarogya Setu</h4>
<p>
The App is aimed at augmenting the initiatives of the Government of
India, particularly the Department of Health 💟 , in proactively
reaching out to and informing the users of the app regarding risks
<i class="fas fa-exclamation-triangle" style="color: #ffff00;"></i> ,
best practices and relevant advisories pertaining to the containment
of COVID-19 <i class="fas fa-viruses" style="color: #00ff00;"></i>
</p>
<a
target="_blank"
style="text-decoration: none; background: rgb(46, 182, 87);"
href="https://play.google.com/store/apps/details?id=nic.goi.aarogyasetu&hl=en_US"
>Android <i class="fa fa-android"></i> </a
><a
target="_blank"
style="text-decoration: none; background: rgb(46, 182, 87);"
href="https://apps.apple.com/in/app/aarogyasetu/id1505825357"
>Iphone <i class="fa fa-apple"></i
></a>
</div>
</div>
<div class="do">
<h1>Must</h1>
</div>
<div class="prev-wrapper2">
<div class="prev-box oneone">
<i id="head-side-cough" class="fas fa-eye"></i>
<h4>Avoid Touching</h4>
<p>
Avoid touching eyes 👁 ,nose 👃 and mouth 👄 because Hands touch many
surfaces and can pick up viruses
<i class="fas fa-viruses" style="color: #fd4321;"></i>. Once
contaminated, hands can transfer the virus
<i class="fas fa-virus" style="color: #fd4321;"></i> to your eyes,
nose or mouth. From there, the virus can enter your body and infect
</p>
</div>
<div class="prev-box twotwo">
<i id="head-side-virus" class="fas fa-head-side-virus"></i>
<h4>Afraid too much!</h4>
<p>
Don't Afraid too much about COVID-19
<i class="fas fa-viruses" style="color: #fd4321;"></i> just relax do
the do's ☝🏻. This is the time for learning new things & spend time
with family 👪
</p>
<a
style="text-decoration: none; background: #fd4321;"
href="resource.html"
>Learn more</a
>
</div>
<div class="prev-box threethree">
<i id="viruses" class="fas fa-viruses"></i>
<h4>Symptoms</h4>
<p>
Having COVID-19 Symbtoms
<i class="fas fa-head-side-cough" style="color: #fd4321;"></i>. Do a
Medical Checkup.💖
</p>
</div>
</div>
<div class="do" id="autodata1">
<h1>WHO's Do's && Don't</h1>
</div>
<div class="prev-wrapper4">
<div class="prev-box oneone">
<i id="head-side-mask" class="fas fa-head-side-mask"></i>
<h4>WHO Do's</h4>
<p>
How to Wear a Medical Mask Safely?
</p>
<a
target="_blank"
href="https://www.who.int/images/default-source/health-topics/coronavirus/masks-infographic---final-(web---rgb).png?sfvrsn=c67232f0_1"
download
>(Do's)</a
>
</div>
<div class="prev-box twotwo">
<i id="head-side-virus" class="fas fa-head-side-virus"></i>
<h4>WHO Don't</h4>
<p>
How to Wear a Medical Mask Safely?
</p>
<a
target="_blank"
style="background: #fd4321;"
href="https://www.who.int/images/default-source/health-topics/coronavirus/masks-infographic---final-(web---rgb)2.png?sfvrsn=3bcd5aa0_1"
download
>(Don't)</a
>
</div>
</div>
<div class="do">
<h1>Fabric Mask</h1>
</div>
<div class="fabric-mask">
<a
target="_blank"
href="https://www.who.int/images/default-source/health-topics/coronavirus/clothing-masks-infographic--web---part-1.png?sfvrsn=679fb6f1_1"
>Fabric Mask Do's only</a
>
<a
target="_blank"
href="https://www.who.int/images/default-source/health-topics/coronavirus/clothing-masks-infographic---web---part-2.png?sfvrsn=d7b0f88d_1"
>Fabric Mask Don't only</a
>
<a
target="_blank"
href="https://www.who.int/images/default-source/health-topics/coronavirus/clothing-masks-infographic---(web)-logo-who.png?sfvrsn=b15e3742_1"
>Fabric Mask Do's + Don't</a
>
</div>
<div class="do" id="autodata2">
<h1>
5 Safety Tips
<i class="fas fa-check" style="color: #00ff00;"></i>
</h1>
<p style="font-size: 32px;">While Going Outside</p>
</div>
<div class="fabric-mask">
<a target="_blank"
>Wear Mask
<i class="fas fa-check" style="color: #00ff00;"></i>
</a>
<a target="_blank"
>Wear Gloves
<i class="fas fa-check" style="color: #00ff00;"></i>
</a>
<a target="_blank"
>Wash Hands Before Get inside your Home
<i class="fas fa-check" style="color: #00ff00;"></i>
</a>
<a target="_blank"
>Social Distance (1 metre ~ 3 feets)
<i class="fas fa-check" style="color: #00ff00;"></i>
</a>
<a target="_blank" style="margin-bottom: 42px;"
>Clean the Purchased Items
<i class="fas fa-check" style="color: #00ff00;"></i>
</a>
</div>
<footer>
<div class="developer">
<p>
Developed && Designed by
<a id="dev" href="https://github.com/aravindakrishnan"
>Aravinda krishnan 🙂</a
>
</p>
<ul class="icon-container">
<li class="icon">
<a
target="_blank"
id="instagram"
href="https://www.instagram.com/arvi_tech/"
><i class="fa fa-instagram"></i
></a>
</li>
<li class="icon">
<a
target="_blank"
href="https://www.facebook.com/aravinda.krishnan.58"
><i id="facebook" class="fa fa-facebook"></i
></a>
</li>
<li class="icon">
<a target="_blank" href="https://github.com/aravindakrishnan"
><i id="github" class="fa fa-github"></i
></a>
</li>
<li class="icon">
<a
target="_blank"
href="https://linkedin.com/in/aravinda-krishnan-852a89179"
><i id="linkedin" class="fa fa-linkedin"></i
></a>
</li>
</ul>
</div>
</footer>
<script>
window.noZensmooth = true;
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zenscroll/4.0.2/zenscroll-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/prev.js"></script>
</body>
</html>