-
Notifications
You must be signed in to change notification settings - Fork 5
/
principal.html
174 lines (143 loc) · 7.37 KB
/
principal.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
<!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>Inicio - Netflix</title>
<link rel="shortcut icon" href="img/Logo-site.png">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="media.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=Montserrat:wght@100;200;300;400;500;600&display=swap" rel="stylesheet">
<script type="text/javascript" src="script.js" defer></script>
</head>
<body>
<!--TOPO DA PAGINA, CABEÇARIO CONTENDO: LOGO/INICIO/SÉRIES/FILMES/(MINHA LISTA - APENAS NO PC) E TODOS OS LINKS REDIRECIONANDO PARA A PÁGINA PRINCIPAL-->
<header class="cabecario">
<ul class="cabecario__lista">
<li><img src="img/Nlogo.png" alt="Netflix logo" class="nlogo"><img src="img/Netflix_logo.png" alt="Netflix logo" class="cabecario__item container__logo sumir__mobile"></li>
<li class="cabecario__item"><a href="principal.html" class="cabecario__link">Início</a></li>
<li class="cabecario__item"><a href="principal.html" class="cabecario__link">Séries</a></li>
<li class="cabecario__item"><a href="principal.html" class="cabecario__link">Filmes</a></li>
<li class="cabecario__item mobile__sumir"><a href="principal.html" class="cabecario__link">Minha lista</a></li>
</ul>
</header>
<!--FILME EM EXIBIÇÃO COM UMA BACKGROUND DO FILME(NO CELULAR É OUTRO BACKGROUND) JUNTO COM UM BOTÃO PARA ASSISTIR E UM PARA (MAIS INFORMAÇÕES - NÃO ESTÁ FUNCIONANDO, FUTURAMENTE ESTARÁ)-->
<section class="container__background">
<img src="img/Titulo.png" alt="Titulo" class="container__titulo">
<p class="container__texto__mobile">O filme de romance aclamado pela<br> crítica, com recordes de venda em<br> bilheteria, considerado uns dos<br> melhores filmes de romance.</p>
<p class="container__texto mobile__sumir">Acompanhe nesse filme a hístoria de dois adolescentes do<br> ensino médio e todos seus momentos juntos. Nesse filme<br> temos a participação de Lívia e Felipe.</p>
<div class="container__botao">
<a href="filme5.html" class="botao__assistir"><img src="img/Play.png" class="play">Assistir</a>
<button class="botao__assistir info"><img src="img/info.png" class="play"><p class="mais__info">Mais Informações</p></button>
</div>
</section>
<!--SEÇÃO CONTENDO FILMES DO ASSISTIR NOVAMENTE(OS FILMES SÃO COLOCADOS MANUALMENTE)-->
<section class="container">
<p class="container__texto">Assistir novamente</p>
<ul class="container__lista">
<li class="container__video">
<a href="filme1.html">
<img src="img/video1.png" alt="Video" class="cropped">
<div class="desc">Dois Malucos No Pedaço</div>
</a>
</li>
<li class="container__video">
<a href="filme2.html">
<img src="img/video2.png" alt="Video" class="cropped">
<div class="desc">Piscicopata Americana</div>
</a>
</li>
<li class="container__video">
<a href="filme3.html">
<img src="img/video3.png" alt="Video" class="cropped">
<div class="desc">A Princesa e o Sapo</div>
</a>
</li>
<li class="container__video">
<a href="filme4.html">
<img src="img/video4.png" alt="Video" class="cropped">
<div class="desc">Clube da Luta</div>
</a>
</li>
</ul>
</section>
<!--SEÇÃO CONTENDO FILMES DA MINHA LISTA(OS FILMES SÃO COLOCADOS MANUALMENTE)-->
<section class="container">
<p class="container__texto">Minha Lista</p>
<ul class="container__lista">
<li class="container__video">
<a href="filme5.html">
<img src="img/video5.png" alt="Video" class="cropped">
<div class="desc">The First Love</div>
</a>
</li>
<li class="container__video">
<a href="filme4.html">
<img src="img/video4.png" alt="Video" class="cropped">
<div class="desc">Clube da Luta</div>
</a>
</li>
<li class="container__video">
<a href="filme2.html">
<img src="img/video2.png" alt="Video" class="cropped">
<div class="desc">Piscicopata Americana</div>
</a>
</li>
</ul>
</section>
<!--SEÇÃO CONTENDO TODOS OS FILMES(OS FILMES SÃO COLOCADOS MANUALMENTE)-->
<section class="container">
<p class="container__texto">Todos os filmes</p>
<div id="carrosel">
<button type="button" id="btnleft"><img src="img/Carrosel-setae.png" alt="seta" class="botao__seta"></button>
<button type="button" id="btnright"><img src="img/Carrosel-setad.png" alt="seta" class="botao__seta"></button>
<div class="container__lista" id="container">
<div class="container__video carrossel_item">
<a href="filme1.html">
<img src="img/video1.png" alt="Video" class="cropped">
<div class="desc">Dois Malucos No Pedaço</div>
</a>
</div>
<div class="container__video carrossel_item">
<a href="filme2.html">
<img src="img/video2.png" alt="Video" class="cropped">
<div class="desc">Piscicopata Americana</div>
</a>
</div>
<div class="container__video carrossel_item">
<a href="filme3.html">
<img src="img/video3.png" alt="Video" class="cropped">
<div class="desc">A Princesa e o Sapo</div>
</a>
</div>
<div class="container__video carrossel_item">
<a href="filme4.html">
<img src="img/video4.png" alt="Video" class="cropped">
<div class="desc">Clube da Luta</div>
</a>
</div>
<div class="container__video carrossel_item">
<a href="filme5.html">
<img src="img/video5.png" alt="Video" class="cropped">
<div class="desc">The First Love</div>
</a>
</div>
<div class="container__video carrossel_item">
<a href="filme4.html">
<img src="img/video4.png" alt="Video" class="cropped">
<div class="desc">Clube da Luta</div>
</a>
</div>
<div id="limitador">limitador</div>
</div>
</div>
</section>
<!--RODAPE DA PAGINA-->
<footer class="rodape">
<h2 class="rodape__texto">Em breve mais coisas(ou não)</h2>
</footer>
</body>
</html>