covid_lp/index.html at master · PASSIONCORNERS/covid_lp · GitHub

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
<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" />
    <!-- Font -->
    <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=Domine:wght@400;700&family=Red+Hat+Display:wght@700&display=swap"
      rel="stylesheet"
    />
    <!-- Main Style -->
    <link rel="stylesheet" href="./css/main.css" />
    <title>Covid Landing Page</title>
  </head>
  <body>
    <!-- Overlay -->
    <section id="overlay"></section>
    <!-- Header -->
    <header class="container">
      <div class="wrapper">
        <nav class="navbar">
          <!-- logo -->
          <div class="navbar__logo">
            <img src="./img/logo.png" alt="logo" />
            <p>covid-19</p>
          </div>
          <!-- links -->
          <ul class="navbar__links">
            <li class="navbar__link"><a href="#banner">overview</a></li>
            <li class="navbar__link"><a href="#contagion">contagion</a></li>
            <li class="navbar__link"><a href="#symptoms">symptoms</a></li>
            <li class="navbar__link"><a href="#todo">prevention</a></li>
            <a href="#contact"><button class="navbar__btn">contact</button></a>
          </ul>
          <!-- icon -->
          <div class="navbar__ham">
            <div class="navbar__icon"></div>
          </div>
        </nav>
      </div>
    </header>
    <!-- Banner -->
    <section id="banner">
      <div class="container">
        <div class="banner__img">
          <img
            src="./img/banner.png"
            alt="girl sitting on couch illustration"
          />
        </div>
        <div class="banner__desc">
          <h4 class="banner__tag">covid-19 alert</h4>
          <h1 class="banner__title">
            stay at home quarantine to stop corona virus
          </h1>
          <p class="banner__detail">
            There is no specific medicine to prevent or treat coronavirus
            disease (COVID-19). People may need supportive care to.
          </p>
          <div class="banner__btn">
            <a href="#contact"><button>let us help</button></a>
          </div>
        </div>
      </div>
    </section>
    <!-- What Is -->
    <section id="whatis">
      <div class="container">
        <div class="whatis__img">
          <img src="./img/whatis-img.png" alt="virus illustration" />
        </div>
        <div class="whatis__desc">
          <h4 class="section__tag">what is covid-19</h4>
          <h3 class="section__title">corona virus</h3>
          <p class="section__detail">
            Corona viruses are a type of virus. There are many different kinds,
            and some cause disease. A newly identified type has caused a recent
            outbreak of respiratory illness now called COVID-19.Lauren Sauer,
            M.S., the director of operations with the Johns Hopkins Office of
            Critical Event Preparedness and Response
          </p>
          <div class="whatis__btn">
            <a href="#symptoms"><button>learn more</button></a>
          </div>
        </div>
      </div>
    </section>
    <!-- Contagion -->
    <section id="contagion" class="pt">
      <div class="container">
        <div class="wrapper">
          <div class="section__heading">
            <h4 class="section__tag">covid-19</h4>
            <h3 class="section__title">contagion</h3>
            <p class="section__detail">
              Corona viruses are a type of virus. There are many different
              kinds, and some cause disease. A newly identified type
            </p>
          </div>
          <div class="contagion__cards">
            <!-- card 1 -->
            <div class="contagion__card">
              <img src="./img/cont-1.png" alt="girl coughing illustration" />
              <h2>air transmission</h2>
              <p>
                Objectively evolve tactical expertise before extensible
                initiatives. Efficiently simplify
              </p>
            </div>
            <!-- card 2 -->
            <div class="contagion__card">
              <img src="./img/cont-2.png" alt="holding hands illustration" />
              <h2>human contacts</h2>
              <p>
                Washing your hands is one of thesimplest ways you can protect
              </p>
            </div>
            <!-- card 3 -->
            <div class="contagion__card">
              <img src="./img/cont-3.png" alt="cup illustration" />
              <h2>containted objects</h2>
              <p>
                Use the tissue while sneezing,In this way, you can protect your
                droplets.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Symptoms -->
    <section id="symptoms" class="pt">
      <div class="container">
        <div class="wrapper">
          <div class="section__heading">
            <h4 class="section__tag">covid-19</h4>
            <h3 class="section__title">symptoms</h3>
            <p class="section__detail">
              Corona viruses are a type of virus. There are many different
              kinds, and some cause disease. A newly identified type has caused
              a recent outbreak of respiratory
            </p>
          </div>
          <div class="symptoms__img">
            <img src="./img/symp-img.png" alt="female character illustration" />
          </div>
        </div>
      </div>
    </section>
    <!-- Todo -->
    <section id="todo" class="pt">
      <div class="container">
        <div class="todo__dec-1">
          <img src="./img/todo-dec-l.png" alt="virus illustration" />
        </div>
        <div class="todo__dec-2">
          <img src="./img/todo-dec-rs.png" alt="virus illustration" />
        </div>
        <div class="todo__dec-3">
          <img src="./img/todo-dec-rb.png" alt="virus illustration" />
        </div>
        <div class="wrapper">
          <div class="section__heading">
            <h4 class="section__tag">covid-19</h4>
            <h3 class="section__title">what should you do</h3>
            <p class="section__detail">
              Corona viruses are a type of virus. There are many different
              kinds, and some cause disease. A newly identified type has caused
            </p>
          </div>
          <div class="todo__steps">
            <!-- step 1 -->
            <div class="todo__step">
              <div class="todo__step-desc center">
                <span
                  >01
                  <div class="ml">
                    <h5>wear masks</h5>
                    <p>
                      Continually seize impactful vortals rather than
                      future-proof supply chains. Uniquely exploit emerging
                      niches via fully tested meta-services. Competently pursue
                      standards compliant leadership skills vis-a-vis pandemic
                      "outside the box" thinking. Objectively
                    </p>
                  </div>
                </span>
              </div>
              <div class="todo__step-img">
                <img
                  src="./img/todo-img-1.png"
                  alt="female character illustration"
                />
              </div>
            </div>
            <!-- step 2 -->
            <div class="todo__step">
              <div class="todo__step-desc">
                <span
                  >02
                  <div class="ml">
                    <h5>wash your hands</h5>
                    <p>
                      Continually seize impactful vortals rather than
                      future-proof supply chains. Uniquely exploit emerging
                      niches via fully tested meta-services. Competently pursue
                      standards compliant leadership skills vis-a-vis pandemic
                      "outside the box" thinking. Objectively Continually seize
                      impactful vortals
                    </p>
                  </div>
                </span>
              </div>
              <div class="todo__step-img">
                <img
                  src="./img/todo-img-2.png"
                  alt="female character illustration"
                />
              </div>
            </div>
            <!-- step 3 -->
            <div class="todo__step">
              <div class="todo__step-desc">
                <span
                  >03
                  <div class="ml">
                    <h5>use nose rag</h5>
                    <p>
                      Continually seize impactful vortals rather than
                      future-proof supply chains. Uniquely exploit emerging
                      niches via fully tested meta-services. Competently pursue
                      standards compliant leadership skills vis-a-vis pandemic
                      "outside the box" thinking. Objectively
                    </p>
                  </div></span
                >
              </div>
              <div class="todo__step-img">
                <img
                  src="./img/todo-img-3.png"
                  alt="female character illustration"
                />
              </div>
            </div>
            <!-- step 4 -->
            <div class="todo__step">
              <div class="todo__step-desc">
                <span
                  >04
                  <div class="ml">
                    <h5>avoid contacts</h5>
                    <p>
                      Continually seize impactful vortals rather than
                      future-proof supply chains. Uniquely exploit emerging
                      niches via fully tested meta-services. Competently pursue
                      standards compliant leadership skills vis-a-vis pandemic
                    </p>
                  </div></span
                >
              </div>
              <div class="todo__step-img">
                <img
                  src="./img/todo-img-4.png"
                  alt="female character illustration"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Contact -->
    <section id="contact" class="pt">
      <div class="container">
        <div class="wrapper">
          <div class="contact__title">
            <h1>Have Question in mind? Let us help you</h1>
          </div>
          <form class="contact__form">
            <input type="text" placeholder="Please enter your email..." />
            <button>send</button>
          </form>
        </div>
      </div>
    </section>
    <!-- Footer -->
    <footer class="pt">
      <div class="container">
        <div class="wrapper">
          <div class="footer__top">
            <!-- logo -->
            <div class="navbar__logo">
              <img src="./img/logo.png" alt="logo" />
              <p>covid-19</p>
            </div>
            <!-- links -->
            <ul class="footer__links">
              <li class="footer__link"><a href="#banner">overview</a></li>
              <li class="footer__link"><a href="#contagion">contagion</a></li>
              <li class="footer__link"><a href="#symptoms">symptoms</a></li>
              <li class="footer__link"><a href="#todo">prevention</a></li>
            </ul>
            <!-- socials -->
            <div class="footer__socials">
              <!-- fb -->
              <a href="#">
                <svg
                  width="11"
                  height="21"
                  viewBox="0 0 11 21"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <g fill="currentColor">
                    <path
                      d="M10.6162 0.290178V3.53125H8.68876C7.98489 3.53125 7.51018 3.67857 7.26465 3.97321C7.01911 4.26786 6.89634 4.70982 6.89634 5.29911V7.61942H10.4934L10.0146 11.2533H6.89634V20.5714H3.13965V11.2533H0.00906814V7.61942H3.13965V4.94308C3.13965 3.42076 3.56524 2.24219 4.41643 1.40737C5.26762 0.564359 6.40118 0.142856 7.8171 0.142856C9.02023 0.142856 9.95326 0.191963 10.6162 0.290178Z"
                    />
                  </g>
                </svg>
              </a>
              <!-- yt -->
              <a href="#">
                <svg
                  width="23"
                  height="16"
                  viewBox="0 0 23 16"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <g fill="currentColor">
                    <path
                      d="M9.42386 10.9911L15.3658 7.92187L9.42386 4.81585V10.9911ZM11.6951 0.408482C13.0701 0.408482 14.396 0.428943 15.6727 0.469865C16.9577 0.502603 17.8989 0.539434 18.4964 0.580357L19.3926 0.629464C19.4008 0.629464 19.4704 0.637648 19.6013 0.654017C19.7323 0.662202 19.8264 0.674479 19.8837 0.690847C19.941 0.699032 20.0351 0.715401 20.1661 0.739954C20.3052 0.764508 20.4239 0.797246 20.5221 0.838169C20.6203 0.879092 20.7349 0.932291 20.8658 0.997767C20.9968 1.06324 21.1236 1.14509 21.2464 1.2433C21.3692 1.33333 21.4879 1.43973 21.6024 1.5625C21.6515 1.61161 21.7129 1.68936 21.7866 1.79576C21.8684 1.89397 21.9871 2.13132 22.1426 2.50781C22.3063 2.8843 22.4168 3.29762 22.4741 3.74777C22.5396 4.27158 22.5887 4.83222 22.6214 5.42969C22.6623 6.01897 22.6869 6.4814 22.6951 6.81696V7.30804V8.97768C22.7033 10.1644 22.6296 11.3512 22.4741 12.5379C22.4168 12.9881 22.3145 13.3973 22.1672 13.7656C22.0198 14.1257 21.8889 14.3754 21.7743 14.5145L21.6024 14.7232C21.4879 14.846 21.3692 14.9565 21.2464 15.0547C21.1236 15.1447 20.9968 15.2225 20.8658 15.2879C20.7349 15.3452 20.6203 15.3943 20.5221 15.4353C20.4239 15.4762 20.3052 15.5089 20.1661 15.5335C20.0351 15.558 19.9369 15.5785 19.8714 15.5949C19.8141 15.6031 19.72 15.6153 19.589 15.6317C19.4663 15.6399 19.4008 15.644 19.3926 15.644C17.3383 15.7995 14.7724 15.8772 11.6951 15.8772C10.0009 15.8609 8.52766 15.8363 7.27543 15.8036C6.03138 15.7626 5.21293 15.7299 4.82007 15.7054L4.21851 15.6562L3.77654 15.6071C3.4819 15.5662 3.25682 15.5253 3.10132 15.4844C2.954 15.4435 2.74529 15.3575 2.4752 15.2266C2.2133 15.0956 1.98413 14.9278 1.7877 14.7232C1.7386 14.6741 1.67312 14.6004 1.59127 14.5022C1.51761 14.3958 1.39894 14.1544 1.23525 13.7779C1.07974 13.4014 0.973342 12.9881 0.916051 12.5379C0.850574 12.0141 0.797375 11.4576 0.756452 10.8683C0.723714 10.2708 0.703253 9.80432 0.695068 9.46875V8.97768V7.30804C0.686884 6.12128 0.760545 4.93452 0.916051 3.74777C0.973342 3.29762 1.07565 2.89248 1.22297 2.53237C1.37029 2.16406 1.50124 1.91034 1.61583 1.7712L1.7877 1.5625C1.90229 1.43973 2.02096 1.33333 2.14373 1.2433C2.2665 1.14509 2.39336 1.06324 2.52431 0.997767C2.65526 0.932291 2.76985 0.879092 2.86806 0.838169C2.96627 0.797246 3.08086 0.764508 3.21181 0.739954C3.35095 0.715401 3.44916 0.699032 3.50645 0.690847C3.56374 0.674479 3.65787 0.662202 3.78882 0.654017C3.91977 0.637648 3.98934 0.629464 3.99752 0.629464C6.05184 0.482143 8.61769 0.408482 11.6951 0.408482Z"
                    />
                  </g>
                </svg>
              </a>
              <!-- twitter -->
              <a href="#">
                <svg
                  width="20"
                  height="16"
                  viewBox="0 0 20 16"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <g fill="currentColor">
                    <path
                      d="M19.7348 2.15178C19.1865 2.95387 18.5235 3.63728 17.746 4.20201C17.7542 4.31659 17.7583 4.48847 17.7583 4.71763C17.7583 5.78162 17.6028 6.84561 17.2917 7.9096C16.9807 8.9654 16.506 9.98028 15.8676 10.9542C15.2374 11.9282 14.4845 12.7917 13.6087 13.5446C12.733 14.2894 11.6772 14.8869 10.4413 15.3371C9.20544 15.779 7.88364 16 6.4759 16C4.25789 16 2.22813 15.4066 0.386614 14.2199C0.673073 14.2526 0.992269 14.269 1.3442 14.269C3.18572 14.269 4.82672 13.7042 6.26719 12.5748C5.40782 12.5584 4.63847 12.2965 3.95916 11.7891C3.27984 11.2734 2.81333 10.6187 2.55961 9.82478C2.82969 9.8657 3.07932 9.88616 3.30849 9.88616C3.66042 9.88616 4.00827 9.84115 4.35202 9.75112C3.43535 9.56287 2.67419 9.10863 2.06853 8.38839C1.47106 7.65997 1.17233 6.81696 1.17233 5.85937V5.81027C1.72888 6.12128 2.32635 6.28906 2.96474 6.31362C2.42456 5.9535 1.99487 5.48289 1.67568 4.90178C1.35648 4.32068 1.19688 3.69048 1.19688 3.01116C1.19688 2.29092 1.37694 1.62388 1.73706 1.01004C2.72739 2.22954 3.93051 3.20759 5.34644 3.9442C6.77054 4.67262 8.29286 5.07775 9.9134 5.1596C9.84792 4.84859 9.81519 4.54576 9.81519 4.25112C9.81519 3.15439 10.1999 2.22135 10.9692 1.45201C11.7467 0.674479 12.6839 0.285714 13.7806 0.285714C14.9264 0.285714 15.8922 0.703125 16.6779 1.53795C17.57 1.36607 18.4089 1.04687 19.1947 0.580357C18.8918 1.52158 18.3107 2.25 17.4513 2.76562C18.2125 2.68378 18.9737 2.47917 19.7348 2.15178Z"
                    />
                  </g>
                </svg>
              </a>
            </div>
          </div>
          <div class="footer__bottom">
            <p>2021 &copy; All rights reserved by pixelspark.co</p>
          </div>
        </div>
      </div>
    </footer>
    <script src="./js/main.js"></script>
  </body>
</html>