-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
422 lines (366 loc) · 16.7 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
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
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
<!DOCTYPE html>
<html lang="en">
<head>
<title>Frontline Warriors</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface:400,400i|Roboto+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Recursive&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link rel="stylesheet" href="fonts/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="fonts/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header role="banner">
<nav class="navbar navbar-expand-lg bg-dark ">
<div class="container-fluid">
<a class="navbar-brand " href="index.html">Heros In Action</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample05"
aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample05">
<ul class="navbar-nav pl-md-5 ml-auto">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#heroes">Our Heros</a>
</li>
<li class="nav-item">
<a class="nav-link" href="form.html">Register Heros</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="slider-item overlay" data-stellar-background-ratio="0.5"
style="background-image: url('images/frontline_hero.png');">
<div class="container">
<div class="row slider-text align-items-center justify-content-center">
<div class="col-lg-12 text-center col-sm-12">
<h1 class="mb-4" data-aos="fade-up" data-aos-delay="100">Salute to the Frontline Warriors of this Pandemic</h1>
</div>
</div>
</div>
</div>
<div class="section" id="about">
<br />
<center>
<div class="col-md-8 text-center">
<h2 class="mb-4 section-title">About the Pandemic</h2>
<p>The COVID‑19 pandemic, also known as the coronavirus pandemic, is an
ongoing global pandemic of coronavirus disease 2019 (COVID‑19), caused
by severe acute respiratory syndrome coronavirus 2 (SARS‑CoV‑2).The
outbreak was first identified in December 2019 in Wuhan, China.</p>
</div>
</center>
<br /><br /><br />
<div class="container">
<div class="row">
<div class="col-lg-6 ml-auto pl-lg-4 mb-5 order-2">
<img src="images/cor2.png" alt="Image" class="img-fluid mb-5">
<span class="d-block text-uppercase text-primary">About US</span>
<h2 class="mb-4 section-title">Why Heroes ?</h2>
<p>Our heroes don’t wear capes, they wear masks and white coats; our heroes don’t fight monsters, they fight pandemics.</p>
<p class="mb-5">The corona-virus pandemic outbreak has created panic
all around the world. People are forced to stay indoors and are asked
to follow social distancing. As you sit in front of your television
screens, cribbing about being forcefully confined to your home
because of the pandemic, there are heroes who have been fighting out
there, with the brightest smiles on their faces. <br />
After witnessing these selfless services, every human would agree
that our heroes are not those who jump floors on our screens but
those who get out of their protective shelters to provide us with
vegetables and groceries. Our heroes are not the ones who have
superpowers but the ones who without any powers, are out there
helping us during the pandemic outbreak. All the doctors, nurses,
delivery boys and all other people who are helping us during this
time need special applause. <br />
Even with millions in our accounts, we are incapable of paying for
the kind of work they have been doing in this tough time. A salute,
a clap, a few words of appreciation might not make much difference
to you but it's sure to make a difference in the lives of those
providing us essential services. <br />
The aim of our initiative is to provide the much needed recognition
to our frontline warriors for their work and bring them into <thead>
limelight of the society. <br />
</thead>
</p>
<p><a href="form.html" class="btn btn-outline-black">Learn How To Register</a></p>
</div>
<div class="col-lg-6 order-1">
<figure class="img-dotted-bg">
<img src="images/cor1.png" alt="Image" class="img-fluid">
<img src="images/cor-3.png" alt="Image" class="img-fluid mb-5">
</figure>
</div>
</div>
</div>
</div>
<div class="section">
<center>
<div class="col-md-8 text-center">
<h2 class="mb-4 section-title" id="heroes">Our Frontline Heros</h2>
<p>Thank you for choosing to stay, when with our ungrateful behaviour
we pushed you away; thank you for choosing humanity, even over your
health and sanity.</p>
</div>
</center>
<br /><br />
<div class="container">
<div class="row">
<div class="col-lg-3 mb-4">
<div class="service text-center" data-aos="fade-up" data-aos-delay="">
<span class="med fa fa-user-md mb-4 d-block" ></span>
<h3>Medical Professionals</h3>
<p>We have doctors, nurses, pharmacists, paramedical staffs and
lab technicians</p>
</div>
</div>
<div class="col-lg-3 mb-4">
<div class="service text-center" data-aos="fade-up" data-aos-delay="100">
<span class="pol fa fa-shield mb-4 d-block"></span>
<h3>Security Officers</h3>
<p>We have police, security guards, relief officers in pandemic management</p>
</div>
</div>
<div class="col-lg-3 mb-4">
<div class="service text-center" data-aos="fade-up" data-aos-delay="200">
<span class="gov fa fa-male mb-4 d-block"></span>
<h3>Government Officials</h3>
<p>We have our civil servants, officers, ministers and the entire govenrment
</p>
</div>
</div>
<div class="col-lg-3 mb-4">
<div class="service text-center" data-aos="fade-up" data-aos-delay="300">
<span class="soc fa fa-users mb-4 d-block"></span>
<h3>Public Service Workers</h3>
<p>We have farmers, airline workers, delivery boy, ambulance drivers, shop-owners and
teachers.</p>
</div>
</div>
</div>
</div>
</div>
<div class="section portfolio-section">
<div class="container">
<div class="row mb-5 justify-content-center" data-aos="fade-up">
<div class="col-md-8 text-center">
<h2 class="mb-4 section-title">Who Are They ?</h2>
<p>Don’t forget to thank those who in this lockdown made our lives easy,
things would have been very different had they not chosen to be busy.</p>
</div>
</div>
</div>
<div class="container">
<div class="row mb-5 no-gutters">
<div class="col-sm-6 col-md-6 col-lg-6" data-aos="fade" data-aos-delay="100">
<a href="index1.html" class="work-thumb">
<div class="work-text">
<h2>Doctors, Nurses, Pharmacists and Medical Staff</h2>
<p>I stopped praying to God the day I realised that it is actually
the doctors saving our lives.</p>
<h2>Click Here</h2>
</div>
<img src="images/doc1.png" alt="Image" class="img-fluid">
</a>
</div>
<div class="col-sm-6 col-md-6 col-lg-6" data-aos="fade" data-aos-delay="200">
<a href="index2.html" class="work-thumb">
<div class="work-text">
<h2>Policeman, Security Guards and Epidemic Relief Force</h2>
<p>Thank you to the security officers who are showing up, who in spite
of the risks and fears involved, are not giving up.</p>
<h2>Click Here</h2>
</div>
<img src="images/pol1.png" alt="Image" class="img-fluid">
</a>
</div>
<div class="col-sm-6 col-md-6 col-lg-6" data-aos="fade" data-aos-delay="300">
<a href="index3.html" class="work-thumb">
<div class="work-text">
<h2>Civil Service Officers, District Administration, Ministers and Government Officials</h2>
<p>World need leaders like these, who prepare strategies and make the
work done.</p>
<h2>Click Here</h2>
</div>
<img src="images/gov1.png" alt="Image" class="img-fluid">
</a>
</div>
<div class="col-sm-6 col-md-6 col-lg-6" data-aos="fade" data-aos-delay="400">
<a href="index4.html" class="work-thumb">
<div class="work-text">
<h2>Social Workers, farmers, Shop-owners and people in epidemic Management</h2>
<p>Those who get out of their protective shelters to provide us with
vegetables and groceries.</p>
<h2>Click Here</h2>
</div>
<img src="images/soc1.png" alt="Image" class="img-fluid">
</a>
</div>
</div>
</div>
</div>
<!-- <div class="section bg-light block-11">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-md-8 text-center">
<h2 class="mb-4 section-title">Happy Client</h2>
</div>
</div>
<div class="nonloop-block-11 owl-carousel">
<div class="item">
<div class="block-33 h-100">
<div class="vcard d-flex mb-3">
<div class="image align-self-center"><img src="images/person_1.jpg" alt="Person here"></div>
<div class="name-text align-self-center">
<h2 class="heading">Carl Smith</h2>
<span class="meta">Customer Corp.</span>
</div>
</div>
<div class="text">
<blockquote>
<p>” Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat qui, ipsum debitis id
reprehenderit ut soluta possimus consectetur asperiores totam veniam quasi molestiae. Animi doloribus
accusamus eius ex laudantium vitae? “</p>
</blockquote>
</div>
</div>
</div>
<div class="item">
<div class="block-33 h-100">
<div class="vcard d-flex mb-3">
<div class="image align-self-center"><img src="images/person_2.jpg" alt="Person here"></div>
<div class="name-text align-self-center">
<h2 class="heading">Craig Darren</h2>
<span class="meta">Customer Corp.</span>
</div>
</div>
<div class="text">
<blockquote>
<p>” Lorem, ipsum dolor sit amet consectetur adipisicing elit. At, ut enim error molestias maxime
deserunt voluptate doloribus nihil nesciunt id perferendis, doloremque earum architecto ab incidunt
sunt
corrupti. Consequuntur qui ullam voluptates sapiente quod esse eum. “</p>
</blockquote>
</div>
</div>
</div>
<div class="item">
<div class="block-33 h-100">
<div class="vcard d-flex mb-3">
<div class="image align-self-center"><img src="images/person_1.jpg" alt="Person here"></div>
<div class="name-text align-self-center">
<h2 class="heading">John Smith</h2>
<span class="meta">Customer Corp.</span>
</div>
</div>
<div class="text">
<blockquote>
<p>” Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, ab? Asperiores dolore
blanditiis quis sapiente soluta aliquid officiis. “</p>
</blockquote>
</div>
</div>
</div>
<div class="item">
<div class="block-33 h-100">
<div class="vcard d-flex mb-3">
<div class="image align-self-center"><img src="images/person_2.jpg" alt="Person here"></div>
<div class="name-text align-self-center">
<h2 class="heading">John Smith</h2>
<span class="meta">Customer Corp.</span>
</div>
</div>
<div class="text">
<blockquote>
<p>” Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, accusamus? Porro fugit culpa
consequuntur dolorum. “</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div> -->
<!-- END .block-4 -->
</div>
<div class="bg-primary py-5"id = "form">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-lg-7">
<h3 class="text-white mb-2 font-weight-normal">Get Started</h3>
<p class="text-white mb-4">Appreciate the heroes by getting them registered</p>
<p class="mb-0" data-aos="fade-up" data-aos-delay="200"><a href="form.html" class="btn btn-outline-white px-4 py-3">Register Here</a></p>
</div>
</div>
</div>
</div>
<footer class="site-footer" role="contentinfo" id="contact">
<div class="container">
<div class="row mb-5">
<div class="col-md-4 mb-5">
<h3 class="mb-4">About Us</h3>
<p class="mb-5">We are a group of two website developers known as <b>"The Pumpkins"</b>.
In past few days, we have witnessed some ignorance of the society towards
our corona warriors, hence we have decided to build this website and
create some awareness by recognizing these heros who have stand apart from the
isolated world to fight the pandemic.</p>
</div>
<div class="col-md-3 ml-auto">
<h3 class="mb-4">Navigation</h3>
<ul class="list-unstyled footer-link">
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="col-md-3 mb-5">
<ul class="list-unstyled footer-link d-flex footer-social">
<li><a href="#" class="p-2"><span class="fa fa-twitter"></span></a></li>
<li><a href="#" class="p-2"><span class="fa fa-facebook"></span></a></li>
<li><a href="#" class="p-2"><span class="fa fa-linkedin"></span></a></li>
<li><a href="#" class="p-2"><span class="fa fa-instagram"></span></a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12 text-md-center text-left">
<p>
Copyright 2020 All rights reserved @ <b>The Pumpkins</b>
</p>
</div>
</div>
</div>
</footer>
<div id="loader" class="show fullscreen"><svg class="circular" width="48px" height="48px">
<circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee" />
<circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10"
stroke="#ffc107" /></svg></div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/main.js"></script>
</body>
</html>