This repository has been archived by the owner on Jul 12, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
251 lines (236 loc) · 9.13 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
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
<title>COVID-19 Awareness</title>
<!-- CSS -->
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="responsive.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymou+++++s" />
<body>
<main>
<!-- Navigation -->
<nav class="header-container">
<button class="hamburger" id="hamburger">
<i class="fas fa-bars"></i>
</button>
<ul class="nav-ul" id="nav-ul">
<li><a class="active" href="#main">Main</a></li>
<li><a data-scroll href="#about">About</a></li>
<li><a data-scroll href="#symptoms">Symptoms</a></li>
<li><a data-scroll href="#prevention">Prevention</a></li>
</ul>
</nav>
<!-- FIRST SECTION -->
<section class="first-section" id="main">
<h1>COVID-19 Awareness <br></bt><span>All COVID data for the US</span></h1>
<!-- Stats Block -->
<section class="stat-block">
<section class="info-table">
<span class="info-icon"><i class="fas fa-lungs-virus" aria-hidden="true"></i></span>
<h2>Cases:</h2>
<p id="data"></p>
</section>
<section class="info-table">
<span class="info-icon"><i class="fas fa-heartbeat" aria-hidden="true"></i></span>
<h2>Pending:</h2>
<p id="recovered"></p>
</section>
<section class="info-table">
<span class="info-icon"><i class="fas fa-skull-crossbones" aria-hidden="true"></i></span>
<h2>Deaths:</h2>
<p id="deaths"></p>
</section>
</section>
</section>
<!-- SECOND SECTION -->
<section class="second-section" id="about">
<!-- Titles -->
<section class="titles">
<h4>Coronavirus Awareness</h4>
<h2>What is COVID-19?</h2>
<p class="info">
Coronavirus is an infectious disease caused by severe acute
respiratory syndrome coronavirus 2. It was first identified in
December 2019 in Wuhan, China, and has since spread globally,
resulting in an ongoing pandemic. As of 14 May 2020, more than 4.37
million cases have been reported across 188 countries and
territories, resulting in more than 297,000 deaths. More than 1.56
million people have recovered. Common symptoms include fever, cough,
fatigue, shortness of breath, and loss of smell and taste.While the
majority of cases result in mild symptoms, some progress to acute
respiratory distress syndrome (ARDS), multi-organ failure, septic
shock, and blood clots.The virus is primarily spread between people
during close contact, most often via small droplets produced by
coughing, sneezing, and talking.
</p>
<a href="https://www.who.int/health-topics/coronavirus" class="btn effect-1" target="_blank">Learn More</a>
</section>
<section class="column-2">
<section class="column-2-media">
<img
src="https://user-images.githubusercontent.com/63928803/94612378-15eaa480-02b4-11eb-88ff-aac086fafc50.jpg"
alt="" />
</section>
</section>
</section>
<!-- THIRD SECTION -->
<section class="third-section" id="symptoms">
<!-- Titles -->
<section class="titles">
<h4>Coronavirus Awareness</h4>
<h2>COVID-19 Common Symptoms</h2>
</section>
<!-- Symptoms Grid -->
<ol class="symptoms-grid">
<li class="symptoms-info">
<div>
<h4>Most common symptoms:</h4>
<ul>
<li>Fever</li>
<li>Dry cougha</li>
<li>Tiredness</li>
<li>Loss of taste or smell</li>
</ul>
</div>
</li>
<li class="symptoms-info">
<div>
<h4>Less common symptoms:</h4>
<ul>
<li>Sore throat</li>
<li>Diarrhea</li>
<li>Red or irritated eyes</li>
<li>Aches and pains</li>
</ul>
</div>
</li>
<li class="symptoms-info">
<div>
<h4>Serious symptoms:</h4>
<ul>
<li>Shortness of breath</li>
<li>Chest pain</li>
<li>Chest pressure</li>
<li>Loss of speech or movement</li>
</ul>
</div>
</li>
</ol>
</section>
<!-- FOURTH SECTION -->
<section class="fourth-section">
<!-- Titles -->
<section class="titles">
<h4>Coronavirus Awareness</h4>
<h2>Prevention Tips</h2>
</section>
<!-- Fourth Section Tips-->
<section class="fourth-section-tips" id="prevention">
<!-- Tips Grid -->
<section class="tips-grid">
<section>
<span class="info-icon"><i class="fas fa-hands-wash"></i></span>
<h4>WASH YOUR HANDS</h4>
<p>
Use soap and water or an alcohol-based hand rub. This will kill
viruses that may be on your hands.
</p>
</section>
<section>
<span class="info-icon"><i class="fas fa-people-arrows"></i></span>
<h4>SOCIAL DISTANCE</h4>
<p>
Maintain a safe distance from anyone who is coughing or sneezing.
</p>
</section>
<section>
<span class="info-icon"><i class="fas fa-handshake-slash"></i></span>
<h4>LESS PHYSICAL CONTACT</h4>
<p>
Avoid shaking hands, hugging or kissing people unless you are in a
close contact with them on a daily basis.
</p>
</section>
<section>
<span class="info-icon"><i class="fas fa-head-side-cough-slash"></i></span>
<h4>RESPIRATORY HYGIENE</h4>
<p>
Cover your mouth and nose with your bent elbow or tissue when you
cough or sneeze.
</p>
</section>
<section>
<span class="info-icon"><i class="fas fa-laptop-house"></i></span>
<h4>STAY HOME</h4>
<p>
Self-isolate even with minor symptoms such as cough, headache,
mild fever, until you recover.
</p>
</section>
<section>
<span class="info-icon"><i class="far fa-newspaper"></i></span>
<h4>BE INFORMED</h4>
<p>
Keep up to date on the latest information from trusted sources,
such as WHO or your local health authorities.
</p>
</section>
</section>
</section>
</section>
<!-- FIFTH SECTION -->
<section class="fifth-section">
<div class="section-five-image"></div>
<section class="info-container">
<h3>COVID-19 PREVENTION</h3>
<p>
Recommended measures to prevent infection include frequent hand
washing, maintaining physical distance from others (especially from
those with symptoms), quarantine (especially for those with
symptoms), covering coughs, and keeping unwashed hands away from the
face.In addition, the use of a face covering is recommended for
those who suspect they have the virus and their caregivers.
</p>
</section>
</section>
<!-- FOOTER -->
<footer>
<section class="credit">
<p>All rights reserved © COVID-19 AWARENESS 2021</p>
<p>
Made with <span><i class="fas fa-mug-hot"></i></span> by<a href="https://github.com/catherineisonline" _blank>
Catherine</a>
</p>
</section>
<section class="useful-links">
<h3>Useful links</h3>
<ul>
<li><a href="https://github.com/catherineisonline/covid19-awareness" target="_blank">Project Repository</a>
</li>
<li><a href="https://www.who.int/health-topics/coronavirus#tab=tab_1" target="_blank">Covid-19 Info</a>
</li>
<li><a href="https://documenter.getpostman.com/view/11144369/Szf6Z9B3?version=latest" target="_blank">Covid-19
API</a>
</li>
</ul>
</section>
<section class="disclaimer">
<p>
DISCLAIMER: THIS WEBSITE DOES NOT PROVIDE MEDICAL ADVICE The information,
including but not limited to, text, graphics, images and other material
contained on this website are for informational purposes only. The purpose
of this website is to promote broad consumer understanding and knowledge
of various health topics. It is not intended to be a substitute for
professional medical advice, diagnosis or treatment.
</p>
</section>
</footer>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="javascript.js"></script>
</body>
</html>