-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
515 lines (492 loc) · 27 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
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" property="description" content="Disney+ es el hogar de tus películas y series favoritas de Disney, Pixar, Marvel, Star Wars y National Geographic. ¡Suscribite ahora!">
<!-- Preload -->
<link rel="preload" href="CSS/normalize.css" as="style">
<link rel="preload" href="CSS/style.css" as="style">
<link rel="preload" href="CSS/header.css" as="style">
<link rel="preload" href="CSS/main.css" as="style">
<link rel="preload" href="CSS/section.css" as="style">
<link rel="preload" href="CSS/question.css" as="style">
<link rel="preload" href="fonts/AvenirLTStd-Roman.woff" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="fonts/AvenirLTStd-Book.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="fonts/AvenirLTStd-Black.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="CSS/normalize.css">
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="CSS/header.css">
<link rel="stylesheet" href="CSS/main.css">
<link rel="stylesheet" href="CSS/section.css">
<link rel="stylesheet" href="CSS/question.css">
<title>Disney+ | Tus historias favoritas, todas en un mismo lugar</title>
</head>
<body>
<header class="hero">
<nav class="nav nav__primary">
<div class="nav__container">
<ol class="nav__list">
<li class="nav__item">
<a class="cta cta--nav" rel= "noreferrer noopener" href="https://github.com/Matias-Paz">INICIAR SESIÓN</a>
</li>
</ol>
</div>
</nav>
<nav class="nav nav__secundary nav--opacity">
<div class="nav__container nav__container--flex">
<div class="nav__figure">
<img class="nav__img" src="img/logo.svg" width="1045" height="569" alt="Disney Logo" loading="lazy">
</div>
<ol class="nav__list nav__items">
<li class="nav__item">
<a class="cta cta--secundary" rel= "noreferrer noopener" href="https://github.com/Matias-Paz">SUSCRIBITE AHORA</a>
</li>
<li class="nav__item">
<a class="cta cta--nav" rel= "noreferrer noopener" href="https://github.com/Matias-Paz">INICIAR SESIÓN</a>
</li>
</ol>
</div>
</nav>
<div class="hero__main">
<picture class="hero__figure">
<img class="hero__img hero__img--logo" src="img/logo.svg" width="1045" height="569" alt="Disney Logo" loading="lazy">
</picture>
<div class="hero__container">
<p class="hero__paragraph">Tus historias favoritas, todas en un mismo lugar.</p>
<ul class="hero__lists">
<li class="hero__list">
<picture class="hero__figure hero__figure--height">
<img class="hero__img hero__img--height" src="img/desktop/disney-star-combo.webp" alt="logo de disney, star y combo" width="1348" height="286" loading="lazy">
</picture>
<a class="cta cta--hero" rel= "noreferrer noopener" href="https://github.com/Matias-Paz">SUSCRIBITE AHORA</a>
</li>
<li class="hero__list">
<picture class="hero__figure hero__figure--height">
<img class="hero__img hero__img--width hero__img--height" src="img/desktop/disney-star-lionsgate--small.webp" alt="disney, star y lionsgate" width="1348" height="286" loading="lazy">
</picture>
<a class="cta cta--hero" rel= "noreferrer noopener" href="https://github.com/Matias-Paz">SUSCRIBITE AHORA</a>
</li>
</ul>
<a class="hero__link" rel= "noreferrer noopener" href="https://github.com/Matias-Paz">Suscribirme solo a Disney+</a>
</div>
</div>
</header>
<main class="main">
<section class="texts container">
<h2 class="title">Elegí tu plan</h2>
<p class="paragraph">Podés cancelar en cualquier momento.</p>
</section>
<div class="main__plan">
<div class="main__cards">
<div class="main__card">
<div class="main__container">
<p class="main__title">Disney+</p>
<picture class="main__figure">
<img class="main__img" src="img/logo.svg" width="1045" height="569" alt="Disney Logo" loading="lazy">
</picture>
<a class="cta cta--main" rel= "noreferrer noopener" href="https://github.com/Matias-Paz">ARS 599/mes (FINAL)*</a>
</div>
</div>
<div class="main__card">
<div class="main__container">
<div class="main__message">
<p class="main__subtitle">Más popular</p>
</div>
<p class="main__title">Combo+</p>
<picture class="main__figure">
<img class="main__img" src="img/desktop/disney-star-combo.webp" alt="logo de disney, star y combo" width="1348" height="286" loading="lazy">
</picture>
<a class="cta cta--main" rel= "noreferrer noopener" href="https://github.com/Matias-Paz">ARS 1.499/mes (FINAL)*</a>
</div>
</div>
<div class="main__card">
<div class="main__container">
<p class="main__title">Star+ Disney+ LIONSGATE+</p>
<picture class="main__figure main__figure--width">
<img class="main__img main__img--width" src="img/desktop/disney-star-lionsgate--big.webp" alt="disney, star y lionsgate" width="1348" height="286" loading="lazy">
</picture>
<a class="cta cta--main" rel= "noreferrer noopener" href="https://github.com/Matias-Paz">ARS 1.729/mes (FINAL)*</a>
</div>
</div>
</div>
<div class="main__details">
<div class="main__detail">
<p class="main__paraghaph">Precio anual</p>
<div class="main__items">
<div class="main__item">
<div class="main__text">
<a class="main__link" rel= "noreferrer noopener" href="https://github.com/Matias-Paz">ARS 5.999/año (final)*</a>
<p class="main__subparagraph">¡12 meses al precio de 10!</p>
</div>
</div>
<div class="main__item">
<picture class="main__picture">
<img class="main__img main__picture--width" src="img/incorrect.svg" alt="logo incorrect" loading="lazy">
</picture>
</div>
<div class="main__item">
<picture class="main__picture">
<img class="main__img main__picture--width" src="img/incorrect.svg" alt="logo incorrect" loading="lazy">
</picture>
</div>
</div>
</div>
<div class="main__detail">
<p class="main__paraghaph">Estrenos de películas, series originales y clásicos de Disney, Pixar, Marvel, Star Wars y National Geographic</p>
<div class="main__items">
<div class="main__item">
<picture class="main__picture">
<img class="main__img" src="img/correct.svg" alt="logo correct" loading="lazy">
</picture>
</div>
<div class="main__item">
<picture class="main__picture">
<img class="main__img" src="img/correct.svg" alt="logo correct" loading="lazy">
</picture>
</div>
<div class="main__item">
<picture class="main__picture">
<img class="main__img" src="img/correct.svg" alt="logo correct" loading="lazy">
</picture>
</div>
</div>
</div>
<div class="main__detail">
<p class="main__paraghaph">Deportes en vivo de las mejores ligas del mundo y los torneos más importantes de ESPN</p>
<div class="main__items">
<div class="main__item">
<picture class="main__picture">
<img class="main__img main__picture--width" src="img/incorrect.svg" alt="logo incorrect" loading="lazy">
</picture>
</div>
<div class="main__item">
<picture class="main__picture">
<img class="main__img" src="img/correct.svg" alt="logo correct" loading="lazy">
</picture>
</div>
<div class="main__item">
<picture class="main__picture">
<img class="main__img" src="img/correct.svg" alt="logo correct" loading="lazy">
</picture>
</div>
</div>
</div>
<div class="main__detail">
<p class="main__paraghaph">Producciones locales y películas, series y programas de TV premiados exclusivos de Star+</p>
<div class="main__items">
<div class="main__item">
<picture class="main__picture">
<img class="main__img main__picture--width" src="img/incorrect.svg" alt="logo incorrect" loading="lazy">
</picture>
</div>
<div class="main__item">
<picture class="main__picture">
<img class="main__img" src="img/correct.svg" alt="logo correct" loading="lazy">
</picture>
</div>
<div class="main__item">
<picture class="main__picture">
<img class="main__img" src="img/correct.svg" alt="logo correct" loading="lazy">
</picture>
</div>
</div>
</div>
<div class="main__detail">
<p class="main__paraghaph">Dispositivos para reproducción en simultáneo</p>
<div class="main__items">
<div class="main__item">
<p class="main__number">4</p>
</div>
<div class="main__item">
<p class="main__number">4 + 4</p>
</div>
<div class="main__item">
<p class="main__number">4 + 4 + 4</p>
</div>
</div>
</div>
<div class="main__detail">
<p class="main__paraghaph">Descargas para ver tus favoritos sin conexión ni demoras</p>
<div class="main__items">
<div class="main__item">
<picture class="main__picture">
<img class="main__img" src="img/correct.svg" alt="logo correct" loading="lazy">
</picture>
</div>
<div class="main__item">
<picture class="main__picture">
<img class="main__img" src="img/correct.svg" alt="logo correct" loading="lazy">
</picture>
</div>
<div class="main__item">
<picture class="main__picture">
<img class="main__img" src="img/correct.svg" alt="logo correct" loading="lazy">
</picture>
</div>
</div>
</div>
<div class="main__detail">
<p class="main__paraghaph">Dispositivos para reproducción en simultáneo</p>
<div class="main__items">
<div class="main__item">
<p class="main__number">7</p>
</div>
<div class="main__item">
<p class="main__number">7 + 7</p>
</div>
<div class="main__item">
<p class="main__number">7 + 7 + 5</p>
</div>
</div>
</div>
<div class="main__detail">
<p class="main__paraghaph">Controles parentales para proteger a tu familia</p>
<div class="main__items">
<div class="main__item">
<picture class="main__picture">
<img class="main__img" src="img/correct.svg" alt="logo correct" loading="lazy">
</picture>
</div>
<div class="main__item">
<picture class="main__picture">
<img class="main__img" src="img/correct.svg" alt="logo correct" loading="lazy">
</picture>
</div>
<div class="main__item">
<picture class="main__picture">
<img class="main__img" src="img/correct.svg" alt="logo correct" loading="lazy">
</picture>
</div>
</div>
</div>
<p class="main__condition main__condition--container">*El precio podría variar en caso de que el pago se realice en otras plataformas. Podrían aplicar cargos de terceros. </p>
</div>
</div>
</main>
<section class="section">
<div class="section__container container">
<div class="section__details">
<picture>
<source media="(min-width: 1025px)" srcset="img/desktop/devices.webp">
<img src="img/desktop/devices.webp" alt="4 Devices" loading="lazy" width="1200" height="960">
</picture>
<div class="texts">
<h3 class="title">Cuando quieras, donde quieras</h3>
<p class="paragraph">Disfrutalo en tu pantalla favorita, ya sea tu TV, tableta, computadora, teléfono y otros. Viví una experiencia única con una amplia selección de títulos en 4K. Además, podés ver en cuatro pantallas en simultáneo para que nadie se quede afuera.</p>
</div>
</div>
<div class="galery">
<div class="texts">
<h3 class="title">Originales Disney+ exclusivos</h3>
<p class="paragraph">Disfrutá de películas, series y documentales nunca antes vistos. Solo en Disney+.</p>
</div>
<div class="galery__container">
<ul class="galery__lists">
<li class="galery__list">
<picture>
<source media="(min-width: 1025px)" srcset="img/desktop/the-beatles.webp">
<img src="img/desktop/the-beatles.webp" alt="The Beatles: Get Back" loading="lazy" width="630" height="378">
</picture>
</li>
<li class="galery__list">
<picture>
<source media="(min-width: 1025px)" srcset="img/desktop/boba-fett.webp">
<img src="img/desktop/boba-fett.webp" alt="The Book of Boba Fett" loading="lazy" width="630" height="378">
</picture>
</li>
<li class="galery__list">
<picture>
<source media="(min-width: 1025px)" srcset="img/desktop/what-If.webp">
<img src="img/desktop/what-If.webp" alt="What If" loading="lazy" width="630" height="378">
</picture>
</li>
<li class="galery__list">
<picture>
<source media="(min-width: 1025px)" srcset="img/desktop/olaf.webp">
<img src="img/desktop/olaf.webp" alt="Olaf Presents" loading="lazy" width="630" height="378">
</picture>
</li>
<li class="galery__list">
<picture>
<source media="(min-width: 1025px)" srcset="img/desktop/luca.webp">
<img src="img/desktop/luca.webp" alt="Disney Pixar Luca" loading="lazy" width="630" height="378">
</picture>
</li>
<li class="galery__list">
<picture>
<source media="(min-width: 1025px)" srcset="img/desktop/monsters.webp">
<img src="img/desktop/monsters.webp" alt="Monsters at Work" loading="lazy" width="630" height="378">
</picture>
</li>
<li class="galery__list">
<picture>
<source media="(min-width: 1025px)" srcset="img/desktop/earth.webp">
<img src="img/desktop/earth.webp" alt="Welcome to Earth" loading="lazy" width="630" height="378">
</picture>
</li>
<li class="galery__list">
<picture>
<source media="(min-width: 1025px)" srcset="img/desktop/hawkeye.webp">
<img src="img/desktop/hawkeye.webp" alt="Hawkeye" loading="lazy" width="630" height="378">
</picture>
</li>
<li class="galery__list">
<picture>
<source media="(min-width: 1025px)" srcset="img/desktop/diary-of-a-wimpy-kid.webp">
<img src="img/desktop/diary-of-a-wimpy-kid.webp" alt="Diary of a Wimpy Kid" loading="lazy" width="630" height="378">
</picture>
</li>
</ul>
</div>
</div>
<div class="promocion">
<picture class="promocion__picture">
<source media="(max-width: 768px)" srcset="img/mobile/the-lion-king-mobile.webp">
<source media="(min-width: 1025px)" srcset="img/desktop/the-lion-king-desktop.png">
<img src="img/desktop/the-lion-king-desktop.png" width="1943" height="1133" alt="The Lion King" loading="lazy">
</picture>
<div class="texts">
<h3 class="title">Descargá series y películas</h3>
<p class="paragraph">Descargas ilimitadas para ver lo que quieras, cuando quieras. Llevá tus historias favoritas siempre con vos, incluso sin conexión.</p>
</div>
</div>
<div class="items">
<h3 class="title">Disponible en tus dispositivos favoritos</h3>
<div class="items__container">
<div class="items__item">
<figure class="items__figure">
<img src="img/icon-computer.webp" alt="Computer Icon" class="section__img">
</figure>
<h4 class="subtitle">Computadoras</h4>
<p>Chrome OS <br>
MacOS <br>
PC Windows </p>
</div>
<div class="items__item">
<picture class="items__figure">
<img src="img/icon-tv.webp" alt="Tv Icon" class="section__img">
</picture>
<h4 class="subtitle">TV</h4>
<p>Amazon Fire TV <br>
Android TV <br>
Apple TV <br>
Chromecast <br>
LG <br>
Roku <br>
Samsung</p>
</div>
<div class="items__item">
<picture class="items__figure">
<img src="img/icon-game-console2.webp" alt="Game Console Icon" class="section__img">
</picture>
<h4 class="subtitle">Consolas</h4>
<p>PS4 <br>
PS5 <br>
Xbox One <br>
Xbox Series X <br>
Xbox Series S</p>
</div>
<div class="items__item">
<picture class="items__figure">
<img src="img/icon-mobile-tablet.webp" alt="Mobile & Tablet Icon" class="section__img">
</picture>
<h4 class="subtitle">Celulares y tabletas</h4>
<p>Tabletas Amazon Fire <br>
Celulares y tabletas Android <br>
iPhone y iPad</p>
</div>
</div>
</div>
</div>
</section>
<section class="question">
<h2 class="title">Preguntas frecuentes</h2>
<div class="question__container container">
<div class="dropdown">
<input class="dropdown__checkbox dropdown__checkbox--none" type="checkbox" id="dropdown__menu--1">
<label class="dropdown__menu" for="dropdown__menu--1">
<span class="dropdown__title">¿Qué incluye Disney+?</span>
<span class="dropdown__icon dropdown__icon--hidden"> - </span>
<span class="dropdown__icon dropdown__icon--show"> + </span>
</label>
<div class="dropdown__content">
<div class="dropdown__info">
<p>Beneficios de la suscripción a Disney+:</p>
<ul class="dropdown__lists">
<li class="dropdown__list">Experiencia de entretenimiento exclusiva.</li>
<li class="dropdown__list">Las mejores historias de Disney, Pixar, Marvel, Star Wars y National Geographic, todo en un mismo lugar.</li>
<li class="dropdown__list">Groupwatch: compartí tus historias favoritas, aunque estés lejos.</li>
<li class="dropdown__list">Descargas ilimitadas hasta en diez dispositivos compatibles.</li>
<li class="dropdown__list">Más de 300 títulos en 4K UHD y HDR.</li>
<li class="dropdown__list">Hasta cuatro pantallas a la vez: ¡disfrutan todos!</li>
<li class="dropdown__list">IMAX Enhanced: disponible en algunos títulos de Marvel y en todos los dispositivos compatibles con Disney+.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="question__container container">
<div class="dropdown">
<input class="dropdown__checkbox dropdown__checkbox--none" type="checkbox" id="dropdown__menu--2">
<label class="dropdown__menu" for="dropdown__menu--2">
<span class="dropdown__title">¿Ya tenés Disney+ o Star+ y querés Combo+?</span>
<span class="dropdown__icon dropdown__icon--hidden"> - </span>
<span class="dropdown__icon dropdown__icon--show"> + </span>
</label>
<div class="dropdown__content">
<div class="dropdown__info">
<p>Con Combo+:</p>
<ul class="dropdown__lists">
<li class="dropdown__list">Descontaremos el valor de tu suscripción actual del precio de Combo+. (¡Sí, para el plan anual también!).</li>
<li class="dropdown__list">Si tenés una suscripción mensual, el valor que pagás mensualmente se descontará del precio final de Combo+.</li>
<li class="dropdown__list">Si tenés una suscripción anual, dividiremos el precio que pagaste en 12 partes iguales y descontaremos ese precio mensualmente del precio final de Combo+.</li>
<li class="dropdown__list">Te llegará un correo electrónico con el detalle de los cargos apenas confirmes el pago.</li>
<li class="dropdown__list">Recordá que podés cancelar en cualquier momento.</li>
</ul>
<p>La suscripción a Combo+ es únicamente mensual, por el momento.</p>
</div>
</div>
</div>
</div>
<div class="question__container container">
<div class="dropdown">
<input class="dropdown__checkbox dropdown__checkbox--none" type="checkbox" id="dropdown__menu--3">
<label class="dropdown__menu" for="dropdown__menu--3">
<span class="dropdown__title">¿Cómo puedo pagar?</span>
<span class="dropdown__icon dropdown__icon--hidden"> - </span>
<span class="dropdown__icon dropdown__icon--show"> + </span>
</label>
<div class="dropdown__content">
<div class="dropdown__info">
<p>Podés pagar con tarjeta de crédito, débito, Mercado Pago o también a través de terceros, como App Store de Apple, Mercado Libre y proveedores locales de TV, telefonía e internet.</p>
</div>
</div>
</div>
</div>
<div class="question__container container">
<div class="dropdown">
<input class="dropdown__checkbox dropdown__checkbox--none" type="checkbox" id="dropdown__menu--4">
<label class="dropdown__menu" for="dropdown__menu--4">
<span class="dropdown__title">¿Cómo puedo ver el contenido 16+ y 18+?</span>
<span class="dropdown__icon dropdown__icon--hidden"> - </span>
<span class="dropdown__icon dropdown__icon--show"> + </span>
</label>
<div class="dropdown__content">
<div class="dropdown__info">
<p>Con una suscripción a Disney+ en Latinoamérica, tenés que actualizar los controles parentales de tu perfil para acceder al catálogo completo que incluye contenido 16+ y 18+. Podés restringir el contenido así como agregar un PIN de bloqueo en cada perfil. También podés dejar los controles parentales como están y seguir disfrutando Disney+ en un ambiente 14+ con la opción de modificarlos cuando quieras en Editar perfiles.</p>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="footer__container container">
<p class="footer__copyright">© Disney. Todos los derechos reservados. | Diseñado por Matias Paz</p>
</div>
</footer>
<script src="index.js"></script>
</body>
</html>