-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
139 lines (139 loc) · 6.38 KB
/
index.html
File metadata and controls
139 lines (139 loc) · 6.38 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HBO Max</title>
<link rel="stylesheet" href="./assets/styles/reset.css">
<link rel="stylesheet" href="./assets/styles/index.css">
<link rel="stylesheet" href="./assets/styles/login.css">
</head>
<body>
<header class="header">
<nav>
<div class="nav__container">
<a href="#"><img src="./assets/images/hbo-logo.svg" alt="HBO MAX Logo"></a>
<div class="nav__items">
<button id="loginBtn" type="button">Entrar</button>
<div id="loginModal" class="modal">
<div class="modal-content">
<div class="modal-close">
<span class="close">×</span>
</div>
<div class="modal-form">
<form id="loginForm">
<label for="username">E-mail: </label>
<input type="email" id="username" name="username"><br><br>
<label for="password">Senha: </label>
<input type="password" id="password" name="password"><br><br>
<button type="submit">Acessar</button>
</form>
</div>
</div>
</div>
<a href="#cards">Assine agora</a>
</div>
</div>
</nav>
<div class="header__content">
<div class="header__channels">
<img src="./assets/images/hbo.png" alt="Logo HBO">
<img src="./assets/images/dc.png" alt="Logo dc">
<img src="./assets/images/wb.png" alt="Logo wb">
<img src="./assets/images/cartoon-network_neutral.png" alt="Logo Cn">
<img src="./assets/images/max_originals.png" alt="Logo Max ">
</div>
<div class="header__tittles">
<h2>Curta as melhores histórias</h2>
<h1>Para todo mundo</h1>
</div>
<div class="header__divider"></div>
<div class="header__offer">
<h3>Assinaturas a partir de</h3>
<h1>R$14,15 <span>/mês*</span></h1>
<div class="offer__link">
<a href="#cards">Assine agora</a>
<p>*aplicável ao plano anual com o pagamento antecipado.</p>
</div>
</div>
</div>
</header>
<main>
<section class="subscription__container">
<div class="subscription__content">
<h1>Conheça nossos planos e economize na assinatura trimestral ou anual com o pagamento antecipado.</h1>
</div>
<div class="subscription__cards" id="cards">
<div class="card mobile">
<div class="card__tittle">
<h3>Mobile</h3>
<h2> <span>R$ 19,90 </span>/mês</h2>
</div>
<div class="card__infos">
<ul>
<li>Aproveite em smartphones e tablets, onde quiser.</li>
<li>Assista em 1 tela por vez.</li>
<li>Tenha conteúdo em resolução adaptada para cada dispositivo.</li>
<li>Baixe suas séries e filmes favoritos, assista onde e quando quiser.</li>
</ul>
</div>
<div class="card__button">
<button class="card-button-1">Escolher o plano mobile</button>
</div>
</div>
<div class="card multiscreen">
<div class="card__tittle">
<h3>Multitelas</h3>
<h2> <span>R$ 27,90</span> /mês</h2>
</div>
<div class="card__infos">
<ul>
<li>Aproveite em todos os seus dispositivos.</li>
<li>Chromecast e Airplay disponíveis.</li>
<li>Assista em até 3 telas ao mesmo tempo.</li>
<li>Tenha conteúdo em alta definição, com qualidade 4K.</li>
<li>Baixe suas séries e filmes favoritos, assista onde e quando quiser.</li>
<li>Crie até 5 perfis diferentes.</li>
</ul>
</div>
<div class="card__button">
<button class="card-button-2">Escolher o Plano Multitelas</button>
</div>
</div>
</div>
</section>
<section class="grid__container">
<h1>Descubra novos universos</h1>
<div class="grid__items">
<div class="grid__card"></div>
<div class="grid__card"></div>
<div class="grid__card"></div>
<div class="grid__card"> </div>
<div class="grid__card"></div>
<div class="grid__card"></div>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__content">
<div class="footer__links">
<a href="">Agora na HBO Max</a>
<a href="">Em breve</a>
<a href="">Filme em destaque</a>
<a href="">Séries</a>
<a href="">Ajuda</a>
</div>
<div class="footer__rights">
<p>© 2022 WarnerMedia Direct Latin America, LLC. Todos os direitos reservados. HBO Max é usado sob licença.</p>
</div>
<div class="footer__social">
<a href=""><img src="./assets/images/fb_0.png" alt="Facebook logo"></a>
<a href=""><img src="./assets/images/twitter_0.png" alt="Twitter logo"></a>
<a href=""><img src="./assets/images/instagram_0.png" alt="Instagram logo"></a>
<a href=""><img src="./assets/images/youtube_0.png" alt="Youtube logo"></a>
</div>
</div>
</footer>
<script src="./assets/scripts/script.js" defer></script>
</body>
</html>