-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
542 lines (540 loc) · 20.6 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
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
<!DOCTYPE html>
<html lang="pt-BR">
<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" />
<title>Clone Disney+</title>
<link
rel="shortcut icon"
href="./dist/images/favicon.ico"
type="image/x-icon"
/>
<link rel="stylesheet" href="dist/css/main.css" />
</head>
<body>
<header class="header">
<div class="header__container">
<h1>
<img
class="header__logo"
src="./dist/images/disneyplus.svg"
alt="Disney +"
/>
</h1>
<ul class="header__links">
<li class="header__links__item">
<a href="#" class="button button--secundary">Assine agora</a>
</li>
<li class="header__links__item">
<a href="#" class="button button--dark">Entrar</a>
</li>
</ul>
</div>
</header>
<section class="hero">
<div class="hero__content">
<div class="hero__content__branding">
<img src="./dist/images/disneyplus.svg" alt="Disney +" />
</div>
<h3 class="title--small">As melhores histórias em um só lugar.</h3>
<p>
<a href="#" class="link-text">Assinar o Disney+</a>
<br />
<span class="text">R$ 27,90/mês ou R$ 279,90/ano à vista*</span>
</p>
<ul class="hero__content__combos">
<li class="hero__content__combos__combo">
<img
src="./dist/images/logos/disney_star_plus.png"
alt="logo disney e star+"
/>
<button class="button">Assine agora</button>
<span class="text--small">R$ 45,90/mês*</span>
</li>
<li class="hero__content__combos__combo">
<img
src="./dist/images/logos/disney_star_plus.png"
alt="logo disney e star+"
/>
<button class="button">Assine agora</button>
<span class="text--small">R$ 55,90/mês*</span>
</li>
</ul>
<p class="text--small">
*O preço pode variar caso a assinatura seja feita através de outras
plataformas.
</p>
</div>
</section>
<section class="shows">
<nav class="shows__tabs">
<button
data-tab-button="em_breve"
class="shows__tabs__button shows__tabs__button--is-active"
>
Em breve
</button>
<button data-tab-button="populares" class="shows__tabs__button">
Mais populares
</button>
<button data-tab-button="star_plus" class="shows__tabs__button">
Mais no Star+
</button>
</nav>
<ul data-tab-id="em_breve" class="shows__list shows__list--is-active">
<li class="shows__list__item">
<img
src="./dist/images/em_breve/desencantada.jpg"
alt="desencantada"
/>
</li>
<li class="shows__list__item">
<img src="./dist/images/em_breve/lobisomem.jpg" alt="lobisomem" />
</li>
<li class="shows__list__item">
<img
src="./dist/images/em_breve/sem_limites.jpg"
alt="dsem_limites"
/>
</li>
<li class="shows__list__item">
<img src="./dist/images/em_breve/spidey.jpg" alt="spidey" />
</li>
<li class="shows__list__item">
<img
src="./dist/images/em_breve/the_santa_clauses.jpg"
alt="the_santa_clauses"
/>
</li>
<li class="shows__list__item">
<img src="./dist/images/em_breve/willow.jpg" alt="willow" />
</li>
</ul>
<ul data-tab-id="populares" class="shows__list shows__list">
<li class="shows__list__item">
<img src="./dist/images/mais_populares/bluey.jpg" alt="bluey" />
</li>
<li class="shows__list__item">
<img
src="./dist/images/mais_populares/cavaleira_da_lua.jpg"
alt="cavaleira_da_lua"
/>
</li>
<li class="shows__list__item">
<img
src="./dist/images/mais_populares/o_incrivel_dr_pol.jpg"
alt="o_incrivel_dr_pol"
/>
</li>
<li class="shows__list__item">
<img src="./dist/images/mais_populares/obi_wan.jpg" alt="obi_wan" />
</li>
<li class="shows__list__item">
<img src="./dist/images/mais_populares/red.jpg" alt="red" />
</li>
<li class="shows__list__item">
<img
src="./dist/images/mais_populares/tudo_igual_sqn.jpg"
alt="tudo_igual_sqn"
/>
</li>
</ul>
<ul data-tab-id="star_plus" class="shows__list shows__list">
<li class="shows__list__item">
<img src="./dist/images/mais_no_star_plus/belair.jpg" alt="belair" />
</li>
<li class="shows__list__item">
<img
src="./dist/images/mais_no_star_plus/libertadores.jpg"
alt="libertadores"
/>
</li>
<li class="shows__list__item">
<img src="./dist/images/mais_no_star_plus/nba.jpg" alt="nba" />
</li>
<li class="shows__list__item">
<img
src="./dist/images/mais_no_star_plus/os_simpson.jpg"
alt="os_simpson"
/>
</li>
<li class="shows__list__item">
<img
src="./dist/images/mais_no_star_plus/premier_league.jpg"
alt="premier_league"
/>
</li>
<li class="shows__list__item">
<img
src="./dist/images/mais_no_star_plus/the_kardashians.jpg"
alt="the_kardashians"
/>
</li>
</ul>
</section>
<section class="plans">
<h2 class="title--big">Escolha seu plano</h2>
<ul class="plans__list">
<li class="plans__list__item">
<img
src="./dist/images/logos/disneyplus_underline.png"
alt="disney plus"
/>
<strong class="title--small"> R$ 27,90/mês* </strong>
<p class="text--big">
Na Disney+ você encontra as últimas estreias do cinema, originais e
clássicos inesquecíveis.
</p>
<button class="button">Assine agora</button>
</li>
<li class="plans__list__item">
<img
src="./dist/images/logos/disney_star_plus_sm.png"
alt="disney plus"
/>
<strong class="title--small"> R$ 45,90/mês* </strong>
<p class="text--big">
Assine Disney+ e Star+ juntos. Economize e aproveite agora os dois
serviços por um preço único.
</p>
<button class="button">Assine agora</button>
</li>
<li class="plans__list__item">
<img
src="./dist/images/logos/disney_star_plus_starzplay_underline.png"
alt="disney plus"
/>
<strong class="title--small"> R$ 55,90/mês* </strong>
<p class="text--big">
Disney+, Star+ e STARZPLAY em um plano especial. Assine agora os
três serviços juntos.
</p>
<button class="button">Assine agora</button>
</li>
</ul>
<p class="text--small">
*O preço pode variar caso a assinatura seja feita através de outras
plataformas.
</p>
</section>
<section class="image-text-section">
<img
src="./dist/images/tv_pc_tablet_celular.png"
alt="imagem com tv, pc e celular"
/>
<div class="image-text-section__text_container">
<h2 class="title">Assista do seu jeito</h2>
<p class="text--big">
Aproveite a tela grande da TV ou assista no tablet, laptop, celular e
outros aparelhos. Nossa seleção de títulos em 4K não para de crescer.
Além disso, para a felicidade de todos, é possível assistir em até 4
telas ao mesmo tempo.
</p>
</div>
</section>
<section class="image-text-section image-text-section--image-full-width">
<picture>
<source
media="(max-width:768px)"
srcset="./dist/images/fundo_rei_leao_celular.png"
/>
<img src="./dist/images/fundo_rei_leao.png" alt="Rei leão" />
</picture>
<div
class="image-text-section__text_container image-text-section--image-full-width__text_container"
>
<h2 class="title">Baixe filmes e séries</h2>
<p class="text--big">
Baixe e assista quando você quizer. Assim seu favoritos estão sempre
com você, até mesmo sem internet.
</p>
</div>
</section>
<section class="available-devices">
<h2 class="title">Disponível nos seus dispositivos favoritos</h2>
<ul class="available-devices__list">
<li class="available-devices__list__item">
<img
src="./dist/images/dispositivos/computador.png"
alt="computador"
/>
<h4 class="title--small">Computador</h4>
<ul class="text">
<li>Chrome OS</li>
<li>MacOS</li>
<li>PC Windows</li>
</ul>
</li>
<li class="available-devices__list__item">
<img src="./dist/images/dispositivos/tv.png" alt="TV" />
<h4 class="title--small">TV</h4>
<ul class="text">
<li>Amazon Fire TV</li>
<li>Android TV</li>
<li>Apple TV</li>
<li>Chromecast</li>
<li>TVs LG</li>
<li>Roku</li>
<li>Samsung</li>
</ul>
</li>
<li class="available-devices__list__item">
<img
src="./dist/images/dispositivos/videogames.png"
alt="videogame"
/>
<h4 class="title--small">Videogames</h4>
<ul class="text">
<li>PS4</li>
<li>PS5</li>
<li>Xbox One</li>
<li>Xbox Series X</li>
<li>Xbox Series S</li>
</ul>
</li>
<li class="available-devices__list__item">
<img src="./dist/images/dispositivos/celular.png" alt="celular" />
<h4 class="title--small">Celulares e Tablets</h4>
<ul class="text">
<li>Tablets Amazon Fire</li>
<li>Celulares e tablets Android</li>
<li>iPhone e iPad</li>
</ul>
</li>
</ul>
</section>
<section class="faq">
<h2 class="title">Perguntas frequentes</h2>
<ul class="faq__questions">
<li class="faq__questions__item">
<div class="faq__questions__item__question" data-faq-question>
O que é o Disney+?
</div>
<div class="faq__questions__item__answer text--big">
Disney + é a casa de streaming da Disney, Pixar, Marvel, Star Wars,
National Geographic e muito mais. De novos lançamentos a seus
clássicos favoritos e originais exclusivos, há algo para todos.
</div>
</li>
<li class="faq__questions__item">
<div class="faq__questions__item__question" data-faq-question>
Quanto custa o Disney+?
</div>
<div class="faq__questions__item__answer text--big">
Disney+ Basic: Disney+ (com anúncios) pelo preço de US$ 7,99/mês
</div>
<div class="faq__questions__item__answer text--big">
Disney+ Premium: Disney+ (sem anúncios) pelo preço de US$ 10,99/mês
ou US$ 109,99/ano
</div>
</li>
<li class="faq__questions__item">
<div class="faq__questions__item__question" data-faq-question>
O que posso assistir no Disney+?
</div>
<div class="faq__questions__item__answer text--big">
Com o Disney+, você pode escolher entre uma coleção sempre crescente
de histórias.
</div>
<div class="faq__questions__item__answer text--big">
Novos lançamentos e clássicos atemporais
</div>
<div class="faq__questions__item__answer text--big">
Novos filmes e séries originais exclusivos
</div>
<div class="faq__questions__item__answer text--big">
Especiais emocionantes e eventos de streaming por tempo limitado
</div>
<div class="faq__questions__item__answer text--big">
Reminiscências nostálgicas e temporadas anteriores de seus programas
favoritos
</div>
<div class="faq__questions__item__answer text--big">
Toda a Saga Skywalker e grande parte do Universo Cinematográfico
Marvel
</div>
<div class="faq__questions__item__answer text--big">
Shorts amados e experimentais
</div>
<div class="faq__questions__item__answer text--big">
Documentários, séries sem roteiro e muito mais
</div>
</li>
<li class="faq__questions__item">
<div class="faq__questions__item__question" data-faq-question>
O que posso assistir na Disney+?
</div>
<div class="faq__questions__item__answer text--big">
O aplicativo Disney+ está disponível em dispositivos móveis,
navegadores da web, consoles de jogos, decodificadores e smart TVs.
Para obter uma lista completa de dispositivos suportados, clique
<a href="#">aqui</a> .
</div>
</li>
<li class="faq__questions__item">
<div class="faq__questions__item__question" data-faq-question>
O que está incluído nos planos Disney+ com e sem anúncios?
</div>
<div class="faq__questions__item__answer text--big">
Agora você pode obter os seguintes planos com o Disney+ e escolher
sua experiência de streaming:
</div>
<div class="faq__questions__item__answer text--big">
Disney+ Basic: Disney+ (com anúncios) por US$ 7,99/mês
</div>
<div class="faq__questions__item__answer text--big">
Milhares de clássicos e originais premiados
</div>
<div class="faq__questions__item__answer text--big">
A capacidade de assistir em quatro telas ao mesmo tempo, sem nenhum
custo extra
</div>
<div class="faq__questions__item__answer text--big">
Mais de 300 títulos em 4K UHD e HDR
</div>
<div class="faq__questions__item__answer text--big">
Disney+ Premium: Disney+ (sem anúncios) por US$ 10,99/mês ou US$
109,99/ano
</div>
<div class="faq__questions__item__answer text--big">
Milhares de clássicos e originais premiados
</div>
<div class="faq__questions__item__answer text--big">
A capacidade de assistir em quatro telas ao mesmo tempo, sem nenhum
custo extra
</div>
<div class="faq__questions__item__answer text--big">
Mais de 300 títulos em 4K UHD e HDR
</div>
<div class="faq__questions__item__answer text--big">
Downloads ilimitados em até 10 dispositivos
</div>
<div class="faq__questions__item__answer text--big">Groupwatch</div>
<div class="faq__questions__item__answer text--big">Dolby Atmos</div>
</li>
<li class="faq__questions__item">
<div class="faq__questions__item__question" data-faq-question>
O que é o Pacote Disney?
</div>
<div class="faq__questions__item__answer text--big">
Os planos Disney Bundle incluem assinaturas para Disney+ e Hulu, ou
Disney+, Hulu e ESPN+, a preços com desconto, em comparação com o
preço de varejo de cada assinatura quando adquirida separadamente.
</div>
<div class="faq__questions__item__answer text--big">
Escolha entre os seguintes planos Disney Bundle:
</div>
<div class="faq__questions__item__answer text--big">
Disney Bundle Duo Basic por US$ 9,99/mês, que inclui Disney+ (com
anúncios) e Hulu (com anúncios)
</div>
<div class="faq__questions__item__answer text--big">
Disney Bundle Trio Basic por US$ 12,99/mês, que inclui Disney+ (com
anúncios), Hulu (com anúncios) e ESPN+ (com anúncios)
</div>
<div class="faq__questions__item__answer text--big">
Disney Bundle Trio Premium por US$ 19,99/mês, que inclui Disney+
(sem anúncios), Hulu (sem anúncios) e ESPN+ (com anúncios)
</div>
<div class="faq__questions__item__answer text--big">
Com o Disney+, você obtém novos lançamentos, clássicos, séries e
originais dos criadores da Disney, Pixar, Marvel, Star Wars e Nat
Geo.
</div>
<div class="faq__questions__item__answer text--big">
Com o Hulu, você pode curtir sucessos atuais, clássicos do conforto,
originais premiados e filmes sobre os quais todo mundo está falando.
</div>
<div class="faq__questions__item__answer text--big">
E com o ESPN+, você pode transmitir esportes ao vivo, milhares de
eventos ao vivo, as principais ligas e torneios, ESPN+ Originals e a
biblioteca 30 for 30 completa. Além disso, obtenha acesso exclusivo
a artigos premium, ferramentas de fantasia e arquivos.
</div>
<div class="faq__questions__item__answer text--big">
<a href="#">Obtenha todos os três</a> e comece a transmitir agora!
</div>
</li>
</ul>
</section>
<footer class="footer">
<div class="footer__container">
<img
class="footer__logo"
src="./dist/images/disneyplus.svg"
alt="Disney+"
/>
<ul class="footer__links">
<li class="footer__links__item">
<div class="language-selector">
<img src="./dist/images/icones/globe.svg" alt="globo" />
<select>
<option>English</option>
<option selected>Português</option>
</select>
</div>
</li>
<li class="footer__links__item">
<a href="#" class="text--small">Acordo de Assinante</a>
</li>
<li class="footer__links__item">
<a href="#" class="text--small">Política de Privacidade</a>
</li>
<li class="footer__links__item">
<a href="#" class="text--small"
>Seus direitos de privacidade na Califórnia</a
>
</li>
<li class="footer__links__item">
<a href="#" class="text--small"
>Não venda minhas informações pessoais</a
>
</li>
<li class="footer__links__item">
<a href="#" class="text--small"
>Política de privacidade on-line infantil</a
>
</li>
<li class="footer__links__item">
<a href="#" class="text--small">Legendas ocultas</a>
</li>
<li class="footer__links__item">
<a href="#" class="text--small">Anúncios com base em interesse</a>
</li>
<li class="footer__links__item">
<a href="#" class="text--small">Dispositivos suportados</a>
</li>
<li class="footer__links__item">
<a href="#" class="text--small">Ajuda</a>
</li>
<li class="footer__links__item">
<a href="#" class="text--small">Presente Disney+</a>
</li>
<li class="footer__links__item">
<a href="#" class="text--small">Sobre nós</a>
</li>
<li class="footer__links__item">
<a href="#" class="text--small">Programa de Parceiros Disney+</a>
</li>
<li class="footer__links__item">
<a href="#" class="text--small">Pacote Disney</a>
</li>
</ul>
<p class="text--small">
® 2022 Disney, Disney+ e The Walt Disney Company. Todos os direitos
reservados. Serviço de assinatura paga. Conteúdo sujeito a
disponibilidade.
</p>
<p class="text--small">
Disney+ é um serviço pago, baseado em assinatura e sujeito a termos e
condições. O serviço Disney+ é comercializado por The Walt Disney
Company (Brasil) Ltda., World Trade Center, Av. Das Nações Unidas,
12.551, 12.555, 12.559, Piso 10, São Paulo/SP – CEP 04578-903, Brasil
e CNPJ/M 73.042.962/0004-20
</p>
</div>
</footer>
<script src="./dist/js/main.js"></script>
</body>
</html>