-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
324 lines (221 loc) · 9.46 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
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Covid-19 Website Design Tutorial</title>
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<!-- custom css file link -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- header section starts -->
<header>
<a href="#" class="logo">c<span class="fas fa-virus"></span>ovid-19</a>
<div id="menu" class="fas fa-bars"></div>
<nav class="navbar">
<ul>
<li><a class="active" href="#home">home</a></li>
<li><a href="#protect">protect</a></li>
<li><a href="#symtoms">symtoms</a></li>
<li><a href="#prevent">prevent</a></li>
<li><a href="#handwash">handwash</a></li>
<!-- <li><a href="#aboutus">About us</a></li> -->
</ul>
</nav>
</header>
<!-- header section ends -->
<!-- home section starts -->
<section class="home" id="home">
<div class="content">
<span>Covid-19</span>
<h3>stay safe, stay home</h3>
<p>Coronaviruses (CoV) are a large family of viruses that cause illness ranging from the common cold to more severe diseases.<br> If COVID-19 is spreading in your community, stay safe by taking some simple precautions, such as physical distancing, wearing a mask, avoiding crowds, cleaning your hands, and coughing into a bent elbow or tissue. <br> <b>Do it all!</b></p>
</div>
<div class="image">
<img src="images/home-img.png" alt="">
</div>
</section>
<!-- home section ends -->
<section class="protect" id="protect">
<h1 class="heading">take steps to <span>protect</span> yourself</h1>
<div class="box-container">
<div class="box">
<img src="images/protect-1.png" alt="">
<h3>Wear A Face Mask</h3>
<p>Masks should be used as part of a comprehensive strategy of measures to suppress transmission and save lives; the use of a mask alone is not sufficient to provide an adequate level of protection against COVID-19.</p>
</div>
<div class="box">
<img src="images/protect-2.png" alt="">
<h3>Wash Your Hands</h3>
<p>Handwashing is one of the best ways to protect yourself and your family from getting sick. Learn when and how you should wash your hands to stay healthy.If soap and water are not readily available, you can use an alcohol-based hand sanitizer </p>
</div>
<div class="box">
<img src="images/protect-3.png" alt="">
<h3>Avoid Close Contact</h3>
<p> Put 6 feet of distance between yourself and people who don’t live in your household.
Remember that some people without symptoms may be able to spread virus.
Stay at least 6 feet (about 2 arm lengths) from other people.
</p>
</div>
</div>
</section>
<!-- symtoms section starts -->
<section class="symtoms" id="symtoms">
<div class="content">
<h1 class="heading">What Are The Main <span>Symptoms?</span></h1>
<p>COVID-19 affects different people in different ways. Most infected people will develop mild to moderate illness and recover without hospitalization.<br> average it takes 5–6 days from when someone is infected with the virus for symptoms to show, however it can take up to 14 days.<br> immediate medical attention if you have serious symptoms. Always call before visiting your doctor or health facility.<br><br>
<b>These are some of the major symptoms:</b></p>
<ul>
<div class="one">
<li>fever</li>
<li>Tiredness</li>
<li>Dry Cough</li>
</div>
<div class="two">
<li>Sore Throat</li>
<li>Aches and Pains</li>
<li>Shortness of Breath</li>
</div>
</ul>
</div>
<div class="image">
<img src="images/symptoms-img.png" alt="">
</div>
</section>
<!-- symtoms section ends -->
<!-- prevent section starts -->
<section class="prevent" id="prevent">
<div class="row">
<div class="image">
<img src="images/dont-img.png" alt="">
</div>
<div class="content">
<h1 class="heading">things <span>not to do</span> during covid</h1>
<p>Extensive research is being conducted by various countries to contain this spread. In this situation, every one of us should take all the measures possible to avoid an infection.</p>
<ul>
<li> Do not believe everything on the internet</li>
<li>Do Not Touch Your Face or Nose</li>
<li>Do not panic!</li>
<li>Do not go to crowded places</li>
</ul>
</div>
</div>
<div class="row">
<div class="content">
<h1 class="heading">things <span>to do</span> during covid</h1>
<p>The coronavirus pandemic has taken everybody by alarm. The internet is filled with information about the virus and its spread, many of it also wrong, causing panic among the people. </p>
<ul>
<li>Wash Your Hands For 20 sec</li>
<li>Wear a Mask </li>
<li>Seek Medical Care Regularly</li>
<li>Cough & sneeze into your elbow</li>
</ul>
</div>
<div class="image">
<img src="images/do-img.png" alt="">
</div>
</div>
</section>
<!-- prevent section ends -->
<!-- handwash section starts -->
<section class="handwash" id="handwash">
<h1 class="heading">how to <span>wash you hand</span> properly</h1>
<div class="box-container">
<div class="box">
<span>1</span>
<img src="images/hadnwash-1.png" alt="">
<h3>Apply Soap on Hand</h3>
</div>
<div class="box">
<span>2</span>
<img src="images/hadnwash-2.png" alt="">
<h3>Palm to Palm</h3>
</div>
<div class="box">
<span>3</span>
<img src="images/hadnwash-3.png" alt="">
<h3>Between Fingers</h3>
</div>
<div class="box">
<span>4</span>
<img src="images/hadnwash-4.png" alt="">
<h3>Back of The Hands</h3>
</div>
<div class="box">
<span>5</span>
<img src="images/hadnwash-5.png" alt="">
<h3>clean with water</h3>
</div>
<div class="box">
<span>6</span>
<img src="images/hadnwash-6.png" alt="">
<h3>Use Towel to Dry</h3>
</div>
</div>
</section>
<!-- handwash section ends -->
<!-- spread section starts -->
<!-- <section class="spread" id="spread">
<h1 class="heading">how Covid-19 <span>spreads</span> over the world</h1>
<div class="image"></div>
</section> -->
<section class="prevent" id="handwash">
<h1 style="color: aliceblue;">ASK ANY QUESTIONS</h1><br>
<div> <iframe src='https://webchat.botframework.com/embed/covidbbott-bot?s=PkweQ8JQckI.CpqEMw7SGCkunXBxYWlB4Nb0A0caNAO-cvk0G9Nih24' style='min-width: 400px; width: 100%; min-height: 500px;'></iframe></div>
</section>
<!-- spread section ends -->
<!-- footer section starts -->
<section class="footer">
<div class="box-container">
<div class="box">
<h3>about us</h3>
<p>this Website is basically a informative template for the covid-19 virus and I have built this website using html (for structuring the webssite), css (for styling of the website) and jQuery (for functionality of webpage).<br>
hope you like it! </p>
</div>
<!-- <div class="box">
<h3>locations</h3>
<a href="#">india</a>
<a href="#">USA</a>
<a href="#">russia</a>
<a href="#">japan</a>
<a href="#">france</a>
<a href="#">africa</a>
<a href="#">spain</a>
</div> -->
<!-- <div class="box">
<h3>quick links</h3>
<a href="#">home</a>
<a href="#">protect</a>
<a href="#">symtoms</a>
<a href="#">prevent</a>
<a href="#">handwash</a>
<a href="#">spread</a>
</div> -->
<div class="box">
<h3>contact info</h3>
<p> <i class="fas fa-phone"></i> +123-456-7890. </p>
<p> <i class="fas fa-envelope"></i> example@gmail.com </p>
<p> <i class="fas fa-map-marker-alt"></i> mumbai, india - 400104. </p>
<!-- <div class="share">
<a href="#" class="fab fa-youtube"></a>
<a href="#" class="fab fa-facebook-f"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
</div> -->
</div>
</div>
<h1 class="credit"> created by <a href="#">sakethB</a> all rights reserved! </h1>
</section>
<!-- 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="js/script.js"></script>
</body>
</html>