-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
180 lines (174 loc) · 10.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
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="src/styles/commomsettings/commomsettings.css">
<link rel="stylesheet" href="src/styles/section1/section1.css">
<link rel="stylesheet" href="src/styles/section2/section2.css">
<link rel="stylesheet" href="src/styles/section3/section3.css">
<link rel="stylesheet" href="src/styles/section4/section4.css">
<link rel="stylesheet" href="src/styles/section5/section5.css">
<link rel="stylesheet" href="src/styles/section6/section6.css">
<link rel="stylesheet" href="src/styles/responsive/responsive.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<title>Netflix Clone</title>
</head>
<body>
<div class="container">
<!-- Section 1 -->
<section class="section-1">
<div class="our-story-header-wrapper">
<span class="logo">
<img src="./src/assets/images/Netflix-Logo.png" alt="" srcset="">
</span>
<div class="language">
<select data-uia="language-picker-header" class="ui-select medium" id="lang-switcher-header-select" tabindex="0" placeholder="lang-switcher">
<option selected="" lang="pt" value="/br/" data-language="pt" data-country="BR">Português</option>
<option value="English">English</option>
</select>
</div>
<a href="#">Entrar</a>
</div>
<div class="our-story-card-text">
<h1>Filmes, séries e muito mais. Sem limites.</h1>
<h2>Assista onde quiser. Cancele quando quiser.</h2>
<h3>Pronto para assistir? Informe seu email para criar ou reiniciar sua assinatura.</h3>
<div class="logar">
<input type="email" name="Email" placeholder="Email" id="" maxlength="50">
<button>Vamos lá<span> <div class="fas fa-arrow-right"></div></span></button>
</div>
</div>
</section>
<!-- End Of Section 1 -->
<!-- Section 2 -->
<section class="section-2">
<div class="wrapper-container">
<div class="esq">
<h1>Aproveite na TV.</h1>
<h2>Assista em Smart TVs, PlayStation, Xbox, Chromecast, Apple TV, aparelhos de Blu-ray e outros dispositivos.</h2>
</div>
<div class="dir">
<div class="tv">
<img src="./src/assets/images/tv-removebg-preview.png" alt="" srcset="">
<video src="./src/videos/video-tv-0819.m4v" id="videoTv" autoplay="true" muted loop></video>
<img class="img" src="./src/assets/images/tv-removebg-preview.png" alt="" srcset="">
</div>
</div>
</div>
</section>
<!-- End Of Section 2 -->
<!-- Section 3 -->
<section class="section-3">
<section class="wrapper-container">
<div class="esq">
<div class="tv">
<img src="./src/assets/images/mobile-0819.jpg" id="telefone" alt="" srcset="">
<div class="borda">
<img src="./src/assets/images/boxshot.png" alt="" srcset="">
<div class="legenda">
<h3>Stranger Things</h3>
<h4>Download em andamento...</h4>
</div>
</div>
</div>
</div>
<div class="dir">
<h1>Baixe séries para assistir offline.</h1>
<h2>Salve seus títulos favoritos e sempre tenha algo para assistir.</h2>
</div>
</section>
</section>
<!-- End Of Section 3 -->
<!-- Section 4 -->
<section class="section-4">
<div class="wrapper-container">
<div class="esq">
<h1>Assista quando quiser.</h1>
<h2>Assista no celular, tablet, Smart TV ou notebook sem pagar a mais por isso.</h2>
</div>
<div class="dir">
<div class="tv">
<img src="./src/assets/images/device-pile-removebg.png" alt="" srcset="">
<video src="./src/videos/video-devices.m4v" id="videoTv" autoplay="true" muted loop></video>
<img class="img" src="./src/assets/images/device-pile-removebg.png" alt="" srcset="">
</div>
</div>
</div>
</section>
<!-- End Of Section 4 -->
<!-- Section 5 -->
<section class="section-5">
<section class="wrapper-container">
<div class="esq">
<div class="tv">
<img src="./src/assets/images/AAAABWGB3YOpSh2wA7OOZQYD-MkalQ0oJEy-YEEpoPKAIenLtZf5lKeERDdKj-u6WnZx9wx_QuiDVHkGM_1QmVQt9yxM7mKjevBNHKFz.png" id="infantil" alt="" srcset="">
</div>
</div>
<div class="dir">
<h1>Crie perfis para crianças.</h1>
<h2>Deixe as crianças se aventurarem com seus personagens favoritos em um espaço feito só para elas, sem pagar a mais por isso.</h2>
</div>
</section>
</section>
<!-- End Of Section 5 -->
<!-- Section 6 -->
<section class="section-6">
<div class="faq">
<h2>Perguntas frequentes</h2>
<ul class="faq-list">
<li class="faq-list-item">
<button class="faq-question"> O que é o Netflix? <div class="open"> <div class="one"></div> <div class="two"></div> </div> </button>
<div class="faq-answer closed">
<span>A Netflix é um serviço de transmissão online que oferece uma ampla variedade de séries, filmes e documentários premiados em milhares de aparelhos conectados à internet. Você pode assistir a quantos filmes e séries quiser, quando e onde quiser, sem comerciais – tudo por um preço mensal bem acessível. Aqui você sempre encontra novidades. A cada semana, adicionamos novas séries e filmes.</span>
</div>
</li>
<li class="faq-list-item">
<button class="faq-question"> Quanto custa a Netflix? <div class="open"> <div class="one"></div> <div class="two"></div> </div> </button>
<div class="faq-answer closed">
<span>Assista à Netflix no seu celular, tablet, Smart TV, notebook ou aparelho de streaming por uma taxa mensal única. Os planos variam de R$25,90 a R$55,90 por mês. Sem contrato nem taxas extras.</span>
</div>
</li>
<li class="faq-list-item">
<button class="faq-question"> Onde posso assistir? <div class="open"> <div class="one"></div> <div class="two"></div> </div> </button>
<div class="faq-answer closed">
<span>Assista onde quiser, quando quiser. Faça login com sua conta Netflix em netflix.com para começar a assistir no computador ou em qualquer aparelho conectado à Internet compatível com o aplicativo Netflix, como Smart TVs, smartphones, tablets, aparelhos de streaming e videogames.<br><br> Você também pode baixar a sua série favorita com o aplicativo Netflix para iOS, Android ou Windows 10. Use downloads para levar a Netflix para onde quiser sem precisar de conexão com a Internet. Leve a Netflix com você para qualquer lugar.</span>
</div>
</li>
<li class="faq-list-item">
<button class="faq-question"> Como faço para cancelar? <div class="open"> <div class="one"></div> <div class="two"></div> </div> </button>
<div class="faq-answer closed">
<span>A Netflix é flexível. Não há contratos nem compromissos. Você pode cancelar a sua conta na internet com apenas dois cliques. Não há taxa de cancelamento – você pode começar ou encerrar a sua assinatura a qualquer momento.</span>
</div>
</li>
<li class="faq-list-item">
<button class="faq-question"> O que eu posso assistir na Netflix? <div class="open"> <div class="one"></div> <div class="two"></div> </div> </button>
<div class="faq-answer closed">
<span>A Netflix tem um grande catálogo de filmes, documentários, séries, originais Netflix premiados e muito mais. Assista o quanto quiser, quando quiser.</span>
</div>
</li>
<li class="faq-list-item">
<button class="faq-question"> A Netflix é adequada para crianças? <div class="open"> <div class="one"></div> <div class="two"></div> </div> </button>
<div class="faq-answer closed">
<span>A experiência infantil da Netflix faz parte da sua assinatura para que as crianças se divirtam em seu próprio espaço com séries e filmes familiares sob a supervisão dos responsáveis.<br><br> O recurso de controle parental, incluso nos perfis para crianças e protegido por PIN, permite restringir a classificação etária do conteúdo que as crianças podem ver e bloquear títulos específicos que você não quer que elas assistam.</span>
</div>
</li>
</ul>
</div>
<div class="our-story-card-text">
<h3>Pronto para assistir? Informe seu email para criar ou reiniciar sua assinatura.</h3>
<div class="logar">
<input type="email" name="Email" placeholder="Email" id="" maxlength="50">
<button>Vamos lá<span> <div class="fas fa-arrow-right"></div></span></button>
</div>
</div>
</section>
<!-- End Of Section 6 -->
</div>
<script src="./src/scripts/script.js"></script>
</body>
</html>