-
Notifications
You must be signed in to change notification settings - Fork 0
/
home.html
189 lines (175 loc) · 8.8 KB
/
home.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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Início - Netflix</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="icon" type="image/png" href="https://assets.nflxext.com/ffe/siteui/common/icons/nficon2016.ico"/>
</head>
<body>
<div class="container">
<div class="hero">
<div id="navigator">
<span class="btn-menu" id="btn-menu">
<span></span>
<span></span>
<span></span>
</span>
<div class="menuleft" id="menuleft">
<img src="imgs/Netflix_Logo_RGB.png" alt="LogoNF" id="navlogo">
<a href="#">Início</a>
<a href="#">Séries</a>
<a href="#">Filmes</a>
<a href="#">Bombando</a>
<a href="#">Minha Lista</a>
<a href="#">Navegar por Idiomas</a>
</div>
<div class="menuright">
<img src="imgs/Netflix_Logo_RGB.png" alt="LogoNF" id="navlogo1">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
class="search-icon" data-name="Search">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14 11C14 14.3137 11.3137 17 8 17C4.68629 17 2 14.3137 2 11C2 7.68629 4.68629 5 8 5C11.3137 5 14 7.68629 14 11ZM14.3623 15.8506C12.9006 17.7649 10.5945 19 8 19C3.58172 19 0 15.4183 0 11C0 6.58172 3.58172 3 8 3C12.4183 3 16 6.58172 16 11C16 12.1076 15.7749 13.1626 15.368 14.1218L24.0022 19.1352L22.9979 20.8648L14.3623 15.8506Z"
fill="currentColor"></path>
</svg>
<a href="#">Infantil</a>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
class="Hawkins-Icon Hawkins-Icon-Standard" data-name="Notification">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M13 4.07092C16.3922 4.55624 18.9998 7.4736 18.9998 11V15.2538C20.0486 15.3307 21.0848 15.4245 22.107 15.5347L21.8926 17.5232C18.7219 17.1813 15.409 17 11.9998 17C8.59056 17 5.27764 17.1813 2.10699 17.5232L1.89258 15.5347C2.91473 15.4245 3.95095 15.3307 4.99978 15.2538V11C4.99978 7.47345 7.6076 4.55599 11 4.07086V2L13 2V4.07092ZM16.9998 15.1287V11C16.9998 8.23858 14.7612 6 11.9998 6C9.23836 6 6.99978 8.23858 6.99978 11V15.1287C8.64041 15.0437 10.3089 15 11.9998 15C13.6907 15 15.3591 15.0437 16.9998 15.1287ZM8.62568 19.3712C8.6621 20.5173 10.1509 22 11.9993 22C13.8477 22 15.3365 20.5173 15.373 19.3712C15.38 19.1489 15.1756 19 14.9531 19H9.04555C8.82308 19 8.61862 19.1489 8.62568 19.3712Z"
fill="currentColor"></path>
</svg>
<a href="/YourAccount" role="button" tabindex="0" aria-haspopup="true" aria-expanded="false"
aria-label="Amanda e Alan - Conta e Configurações"><span class="profile-link"
role="presentation"><img class="profile-icon"
src="https://occ-0-894-3852.1.nflxso.net/dnm/api/v6/K6hjPJd6cR6FpVELC5Pd6ovHRSk/AAAABVbYEW3Bkl6g7KkyJmusw_jPAXtpY6KusGOVNs-4v4vTLf6h4kETNq3ApIhFAHL2Dbe1z1T-j8gaEIw5TElx87IQfk791_g.png?r=5eb"
alt=""></span></a><span class="caret" role="presentation"></span>
</div>
</div> <!-- Fechamento do Navigator -->
<div class="alinhamento">
<div class="banner">
<img src="media/letras.webp" class="poster">
<span class="subtitle">Acompanhe as aventuras de Alvin, um esquilo brincalhão e musical que adora aprontar e aprender na companhia de seu pai humano e dos irmãos.</span>
<div class="buttons">
<button class="btn" id="btn1"><i class="fas fa-play"></i>Assistir</button>
<button class="btn" id="btn2"><i class="fas fa-plus"></i>Minha Lista</button>
</div>
</div> <!-- Fechamento do Banner -->
<!-- Categorias -->
<div class="categorias">
<span>Brasil: Top 10 em filmes Hoje</span>
<div class="slides">
<div class="movie">
<img src="media/f1.webp">
</div>
<div class="movie">
<img src="media/f2.jpg">
</div>
<div class="movie">
<img src="media/f3.webp">
</div>
<div class="movie">
<img src="media/f5.jpg">
</div>
<div class="movie">
<img src="media/f4.webp">
</div>
<div class="movie">
<img src="media/f6.jpg">
</div>
</div>
</div>
<div class="categorias">
<span>Continuar Assistindo como Alan</span>
<div class="slides">
<div class="movie">
<img src="media/f3.webp">
</div>
<div class="movie">
<img src="media/f4.webp">
</div>
<div class="movie">
<img src="media/f6.jpg">
</div>
<div class="movie">
<img src="media/f5.jpg">
</div>
<div class="movie">
<img src="media/f2.jpg">
</div>
<div class="movie">
<img src="media/f1.webp">
</div>
</div>
</div>
<div class="categorias">
<span>Em Alta</span>
<div class="slides">
<div class="movie">
<img src="media/f6.jpg">
</div>
<div class="movie">
<img src="media/f3.webp">
</div>
<div class="movie">
<img src="media/f1.webp">
</div>
<div class="movie">
<img src="media/f4.webp">
</div>
<div class="movie">
<img src="media/f5.jpg">
</div>
<div class="movie">
<img src="media/f2.jpg">
</div>
</div>
</div> <!-- Fechamento das Categorias -->
<div class="footer">
<div class="social">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-youtube"></i>
</div> <!-- Fechamento das Redes Sociais -->
<div class="flex">
<div class="info">
<ul>
<li>Audiodescrição</li>
<li>Relações com Investidores</li>
<li>Avisos Legais</li>
</ul>
</div>
<div class="info">
<ul>
<li>Central de Ajuda</li>
<li>Carreiras</li>
<li>Preferencia de Cookies</li>
</ul>
</div>
<div class="info">
<ul>
<li>Cartão pré-pago</li>
<li>Termos de Uso</li>
<li>Informações corporativas</li>
</ul>
</div>
<div class="info">
<ul>
<li>Imprensa</li>
<li>Privacidade</li>
<li>Entre em Contato</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="scripts/main.js"></script>
</body>
</html>