-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
253 lines (247 loc) · 12.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<title> PracticaSemana3Vacunacion </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/estilos.css"
</head>
<body>
<div class="header">
<header class="header__container">
<h2 class="header__logo"> Vacunacion </h2>
<nav class="header__nav">
<ul class="header__links">
<li class="header__link"><a href="#"> Database </a></li>
<li class="header__link"><a href="#"> Education </a></li>
<li class="header__link"><a href="#"> News </a></li>
<li class="header__link"><a href="#"> Regulation </a></li>
<li class="header__link"><a class="BotonPrimario" href="#"> Hoax Buster </a></li>
</ul>
</nav>
</header>
</div>
<div class="hero">
<main class="hero__left">
<h1 class="hero__title"> Combate al virus con vacunas </h1>
<p class="hero__description"> Detengamos esta pandemia matando al virus con una vacuna, no permita que usted y su familia se infecten </p>
<div class="hero__features">
<div class="hero__feature">
<img src="img/verificar.png" width="32" height="32" viewBox="0 0 24 24" fill="none">
</div>
<p> Mejor Protección </p>
<div class="hero__feature">
<img src="img/estrella.png" wiwidth="32" height="32" viewBox="0 0 24 24" fill="none">
</div>
<p> Vacunas Seleccionadas </p>
</div>
<div>
<p> Programe sus vacunas </p>
</div>
</main>
<div class="hero__right"><img class="hero__image" src="img/female-nurse.jpg">
</div>
</div>
<section class="marcavacuna">
<img src="https://cdn.cdnlogo.com/logos/a/62/astra-zeneca-1.svg" width="1420" height="100" alt="">
<img src="img/Sinovac_logo.svg" width="1420" height="100" alt="">
<img src="https://cdn.cdnlogo.com/logos/p/89/pfizer-2021.svg"width="1420" height="100" alt="">
<img src="https://cdn.cdnlogo.com/logos/m/92/moderna.svg"width="1420" height="100" alt="">
</section>
<section class="section vacuna">
<div>
<div>
<h2 class="section__title"> ¿Por qué deberia Vacunarme? </h2>
<p class="seciton__description"> Para evitar cualquier duda sobre la aplicación de la vacuna COVID-19, identifique los siguientes 4 beneficios de la vacunación COVID-19: </p>
</div>
</div>
<ul class="benefits">
<li class="benefits__item card">
<div>
<img src="img/slider_48px.png" width="32" height="32" viewBox="0 0 24 24" fill="#3f36cd" alt="">
</div>
<h3 class="benefits__title"> Reduce la propagación de los virus </h3>
<p class="benefits__description little"> Se ha demostrado que la vacuna es eficaz para evitar que alguien se infecte con el Coronavirus. </p>
</li>
<li class="benefits__item card">
<div>
<img src="img/approval_40px.png" width="32" height="32" viewBox="0 0 24 24" fill="#3f36cd" alt="">
</div>
<h3 class="benefits__title"> Formación de anticuerpos </h3>
<p class="benefits__description little"> Se ha demostrado que la vacuna COVID-19 ayuda a formar la respuesta de anticuerpos del sistema inmunitario. </p>
</li>
<li class="benefits__item card">
<div>
<img src="img/user_groups_40px.png" width="32" height="32" viewBox="0 0 24 24" fill="#3f36cd" alt="">
</div>
<h3 class="benefits__title"> Proteger a las personas cercanas </h3>
<p class="benefits__description little"> Los beneficios de la vacunación contra el COVID-19 son que la vacuna que recibimos también puede ayudar a proteger a las personas que nos rodean. </p>
</li>
<li class="benefits__item card">
<div>
<img src="img/combo_chart_40px.png" width="32" height="32" viewBox="0 0 24 24" fill="none" alt="">
</div>
<h3 class="benefits__title"> Crear inmunidad de grupo </h3>
<p class="benefits__description little"> La vacunación con COVID-19 también es beneficiosa para crear inmunidad de grupo o inmunidad de rebaño. </p>
</li>
</ul>
</section>
<section class="section beforeVaccine">
<div class="beforeVaccine__left">
<img class="beforeVaccine__image" src="img/female-with-mask.png" >
</div>
<div class="beforeVaccine__right">
<h2 class="section__title"> Recomendaciones antes de la vacuna </h2>
<p class="section__description"> El éxito de las vacunas está fuertemente influenciado por la fuerza del sistema inmunológico del cuerpo. Por lo tanto, hay varias cosas que se pueden intentar para que la vacuna COVID-19 funcione: </p>
<ul class="beforeVaccine__list">
<li class="card">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none">
<path d="m18.54 4.12-5.5-2.06a3.48 3.48 0 0 0-2.07 0l-5.5 2.06a3.18 3.18 0 0 0-1.92 2.77v8.1c0 .81.53 1.88 1.18 2.36l5.5 4.11c.97.73 2.56.73 3.53 0l5.5-4.11a3.34 3.34 0 0 0 1.18-2.36v-8.1a3.16 3.16 0 0 0-1.9-2.77Zm-3.86 9.85c-.15.15-.34.22-.53.22s-.38-.07-.53-.22l-1.59-1.59-1.64 1.64c-.15.15-.34.22-.53.22s-.38-.07-.53-.22a.75.75 0 0 1 0-1.06l1.64-1.64-1.6-1.6a.75.75 0 0 1 0-1.06.75.75 0 0 1 1.06 0l1.59 1.59 1.55-1.55a.75.75 0 0 1 1.06 0c.29.29.29.77 0 1.06l-1.55 1.55 1.59 1.59c.3.3.3.77.01 1.07Z" fill="#3f36cd"/>
</svg>
</div>
<h3> Evitar ingerir bebidas alcoholicas </h3>
<button class="BotonSecundario" type="button"><i class="fa-solid fa-chevron-down"></i></button>
</li>
<li class="card">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none">
<path d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81v8.37C2 19.83 4.17 22 7.81 22h8.37c3.64 0 5.81-2.17 5.81-5.81V7.81C22 4.17 19.83 2 16.19 2Zm-.83 12.3c.29.29.29.77 0 1.06-.15.15-.34.22-.53.22s-.38-.07-.53-.22l-2.3-2.3-2.3 2.3c-.15.15-.34.22-.53.22s-.38-.07-.53-.22a.75.75 0 0 1 0-1.06l2.3-2.3-2.3-2.3a.75.75 0 0 1 0-1.06.75.75 0 0 1 1.06 0l2.3 2.3 2.3-2.3a.75.75 0 0 1 1.06 0c.29.29.29.77 0 1.06l-2.3 2.3 2.3 2.3Z" fill="#3f36cd"/>
</svg>
</div>
<h3> Evitar el estrés </h3>
<button class="BotonSecundario" type="button"><i class="fa-solid fa-chevron-down"></i></button>
</li>
<li class="card">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none">
<path d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81v8.37C2 19.83 4.17 22 7.81 22h8.37c3.64 0 5.81-2.17 5.81-5.81V7.81C22 4.17 19.83 2 16.19 2ZM9.11 16.9a.5.5 0 0 1-.5.5H5.82a.5.5 0 0 1-.5-.5v-4.62c0-.63.51-1.14 1.14-1.14h2.15c.28 0 .5.22.5.5v5.26Zm4.78 0a.5.5 0 0 1-.5.5H10.6a.5.5 0 0 1-.5-.5V7.74c0-.63.51-1.14 1.14-1.14h1.52c.63 0 1.14.51 1.14 1.14v9.16h-.01Zm4.79 0a.5.5 0 0 1-.5.5h-2.79a.5.5 0 0 1-.5-.5v-3.55c0-.28.22-.5.5-.5h2.15c.63 0 1.14.51 1.14 1.14v2.91Z" fill="#3f36cd"/>
</svg>
</div>
<h3> Alimentarse correctamente </h3>
<button class="BotonSecundario" type="button"><i class="fa-solid fa-chevron-down"></i></button>
</li>
<li class="card">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none">
<path d="M15 22a.76.76 0 0 1-.75-.75V2.75c0-.41.34-.75.75-.75s.75.34.75.75v18.5c0 .41-.34.75-.75.75Z" fill="#3f36cd"/>
<path d="M18 20h-3V4h3a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4ZM6 4a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H6Zm1.75 11.5c0 .41-.34.75-.75.75s-.75-.34-.75-.75v-7c0-.41.34-.75.75-.75s.75.34.75.75v7Z" fill="#3f36cd"/>
</svg>
</div>
<h3> Dormir lo suficiente </h3>
<button class="BotonSecundario" type="button"><i class="fa-solid fa-chevron-down"></i></button>
</li>
<li class="card">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none">
<path d="M16.44 3.1c-1.81 0-3.43.88-4.44 2.23A5.55 5.55 0 0 0 7.56 3.1 5.57 5.57 0 0 0 2 8.7c0 1.18.19 2.28.52 3.3 1.58 5 6.45 8 8.86 8.81.34.12.9.12 1.24 0 2.41-.82 7.28-3.8 8.86-8.8.33-1.03.52-2.13.52-3.32a5.57 5.57 0 0 0-5.56-5.59Z" fill="#3f36cd"/>
</svg>
</div>
<h3> Realizar ejercicio </h3>
<button class="BotonSecundario" type="button"><i class="fa-solid fa-chevron-down"></i></button>
</li>
</ul>
</div>
</section>
<section class="section emergencyContact">
<div class="emergencyContact__left">
<h2 class="section__title"> Contactos de Emergencia </h2>
<p class="section__description"> Póngase en contacto con uno de los siguientes contactos si usted o su familia se sienten mal y tienen síntomas similares como Covid-19, asegúrese también de cuidarse antes de informarnos:</p>
<ul class="contactList">
<li class="contactList__item card">
<div>
<div>
<img src="img/ringer_volume_32px.png" width="32" height="32" viewBox="0 0 12 12" fill="#3f36cd" alt="">
</div>
<div>
<p> Telefono </p>
<span> 021.123.145.14 </span>
</div>
</div>
<button class="BotonSecundario" type="button">Call Now</button>
</li>
<li class="contactList__item card">
<div>
<div>
<img src="img/chat_64px.png" width="32" height="32" viewBox="0 0 24 24" fill="#3f36cd">
</div>
<div>
<p> Chat </p>
<span> 021.123.145.14 </span>
</div>
</div>
<button class="BotonSecundario" type="button">Chat Now</button>
</li>
<li class="contactList__item card">
<div>
<div>
<img src="img/zoom_64px.png" width="32" height="32" viewBox="0 0 24 24" fill="#3f36cd" alt="">
</div>
<div>
<p> Video Llamada </p>
<span> 021.123.145.14 </span>
</div>
</div>
<button class="BotonSecundario" type="button">Video Call Now</button>
</li>
<li class="contactList__item card">
<div>
<div>
<img src="img/mail_48px.png" width="32" height="32" viewBox="0 0 24 24" fill="#3f36cd" alt="">
</div>
<div>
<p> Mensage </p>
<span> 021.123.145.14 </span>
</div>
</div>
<button class="BotonSecundario" type="button">Message Now</button>
</li>
</ul>
</div>
<div class="emergencyContact__right">
<img src="img/male-nurse.png" alt="front-view-male-nurse">
</div>
</section>
<footer class="footer">
<div class="footer__big">
<div class="footer__text">
<h2> Vacunación </h2>
<p> Nuestra objetivo es ayudar en la pandemia en curso </p>
</div>
<div></div>
<div class="footer__about">
<p> Acerca </p>
<ul class="footer__links">
<li class="footer__link"><a href="#"> Acerca de Nosotros </a></li>
<li class="footer__link"><a href="#"> Caracteristicas </a></li>
<li class="footer__link"><a href="#"> Noticias & Blog</a></li>
</ul>
</div>
<div class="footer__company">
<p> Compañia </p>
<ul class="footer__links">
<li class="footer__link"><a href="#"> ¿Cómo trabajamos? </a></li>
<li class="footer__link"><a href="#"> Capital </a></li>
<li class="footer__link"><a href="#"> Securidad </a></li>
</ul>
</div>
<div class="footer__support">
<p> Soporte </p>
<ul class="footer__links">
<li class="footer__link"><a href="#"> Preguntas Frecuentes </a></li>
<li class="footer__link"><a href="#"> Centro de servicio </a></li>
<li class="footer__link"><a href="#"> Contacto </a></li>
</ul>
</div>
</div>
<div class="footer__little">
<p>© 2022 Vacunacion. Todos los derechos reservados </p>
<div>
<a href="#"> Terminos & Condiciones</a>
<br>
<a href="#"> Politica de Privacidad </a>
</div>
</div>
</footer>
</body>
</html>