-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
210 lines (196 loc) · 10.5 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
<!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" />
<!-- Bootstrap CSS import -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous" />
<!-- Bootstrap Icons import -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" />
<link rel="shortcut icon" href="./img/html-icon.png" type="image/x-icon" />
<link rel="stylesheet" href="./css/homepage.css" />
<link rel="stylesheet" href="./css/global.css" />
<title>SeriesFlix</title>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-black navbar-dark sticky-top" style="min-height: 20px;">
<div class="container">
<a href="./index.html" class="navbar-brand">
<img style="height: 3.5rem;" src="./img/seriesflix.png" alt="SeriesFlix Logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="./pages/criticas.html" class="nav-link">Críticas</a>
</li>
<li class="nav-item">
<a href="./pages/top-10.html" class="nav-link">Top 10</a>
</li>
<li class="nav-item">
<a href="./pages/lancamentos.html" class="nav-link">Lançamentos</a>
</li>
<li class="nav-item">
<a href="./pages/generos.html" class="nav-link">Gêneros</a>
</li>
<li class="nav-item">
<a href="./pages/curiosidades.html" class="nav-link">Curiosidades</a>
</li>
</ul>
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="./pages/reg.html" class="nav-link">Registre-se</a>
</li>
<li class="nav-item">
<a href="./pages/login.html" class="nav-link">Login</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Content -->
<main class="bg-dark">
<!-- PARALLAX-BANNER -->
<div class="parallax-banner d-flex align-items-center justify-content-center">
<div class="container text-center text-white">
<h1>As melhores informações sobre séries ao alcance de um click!</h1>
<a class="btn btn-hover btn-danger btn-lg mt-3 fw-bold" role="button"
href="./pages/lancamentos.html">CONFIRA AS NOVIDADES</a>
</div>
</div>
<!-- Section Top-10 -->
<section class="bg-dark">
<div class="container text-center text-white p-5">
<img style="width: 5rem; padding-bottom: 2rem;" src="./img/homepage/icons/question.png"
alt="Ícone de interrogação">
<h2 class="pb-4">Na dúvida sobre o que assistir?</h2>
<p class="fs-4">
Acesse o nosso TOP-10 para conhecer as melhores séries de acordo com os nossos leitores. A sua
próxima série pode estar por aqui!
</p>
<a class="btn btn-hover btn-warning btn-lg mt-3 fw-bold" role="button"
href="./pages/top-10.html">TOP-10</a>
</div>
</section>
<!-- Section Fique por dentro -->
<section class="bg-warning">
<div class="container text-center p-5">
<img style="width: 5rem; padding-bottom: 2rem;" src="./img/homepage/icons/location.png"
alt="Ícone de interrogação">
<h2>Explore os melhores conteúdos sobre as séries que você acompanha</h2>
<div class="row d-flex align-items-center justify-content-center">
<div class="col-box col-md mt-5 d-flex flex-column align-items-center justify-content-center">
<h3>Críticas</h3>
<p class="fs-5">
Críticas sobre as melhores séries para você ficar por dentro de tudo!
</p>
<a class="btn btn-hover btn-danger btn-lg mt-3 fw-bold" role="button"
href="./pages/criticas.html">CRÍTICAS</a>
</div>
<div class="col-box col-md mt-5 d-flex flex-column align-items-center justify-content-center">
<h3>Gêneros</h3>
<p class="fs-5">
Saiba tudo sobre os principais gêneros do momento!
</p>
<a class="btn btn-hover btn-danger btn-lg mt-3 fw-bold" role="button"
href="./pages/generos.html">GÊNEROS</a>
</div>
<div class="col-box col-md mt-5 d-flex flex-column align-items-center justify-content-center">
<h3>Curiosidades</h3>
<p class="fs-5">
Já conhece as curiosidades sobre a sua série predileta?
</p>
<a class="btn btn-hover btn-danger btn-lg mt-3 fw-bold" role="button"
href="./pages/curiosidades.html">CURIOSIDADES</a>
</div>
</div>
</div>
</section>
<!-- Section Equipe -->
<section class="py-5 px-2">
<div class="equipe-container container p-3">
<h2 class="text-center py-2">Conheça o time que tornou esse projeto possível</h2>
<div class="row text-center">
<div class="col-md mt-5">
<img class="img-profile" src="./img/homepage/profile-pictures/lays.png"
alt="Foto de perfil Lays Maiara Assunção">
<p class="mt-2 fs-5 fw-bold">Lays Maiara Assunção</p>
<a href="https://www.linkedin.com/in/lays-maiara-assunção-alves-995720221/" target="_blank">
<i class="bi bi-linkedin" style="font-size: 2rem"></i>
</a>
</div>
<div class="col-md mt-5">
<img class="img-profile" src="./img/homepage/profile-pictures/joao-eloi.png"
alt="Foto de perfil João Eduardo Eloi">
<p class="mt-2 fs-5 fw-bold">João Eduardo Eloi</p>
<a href="https://www.linkedin.com/in/joão-eduardo-da-conceição-eloi-533a19187/" target="_blank">
<i class="bi bi-linkedin" style="font-size: 2rem"></i>
</a>
</div>
<div class="col-md mt-5">
<img class="img-profile" src="./img/homepage/profile-pictures/gustavo.jpg"
alt="Foto de perfil Gustavo Medeiros">
<p class="mt-2 fs-5 fw-bold">Gustavo Medeiros</p>
<a href="https://www.linkedin.com/in/gustavo-medeiros-385931213/" target="_blank">
<i class="bi bi-linkedin" style="font-size: 2rem"></i>
</a>
</div>
</div>
<div class="row text-center">
<div class="col-md mt-5">
<img class="img-profile" src="./img/homepage/profile-pictures/mauricio.jpg"
alt="Foto de perfil Mauricio Gregory">
<p class="mt-2 fs-5 fw-bold">Mauricio Gregory</p>
<a href="https://www.linkedin.com/in/mauriciogregory/" target="_blank">
<i class="bi bi-linkedin" style="font-size: 2rem"></i>
</a>
</div>
<div class="col-md mt-5">
<img class="img-profile" src="./img/homepage/profile-pictures/kantuta.png"
alt="Foto de perfil Kantuta Molina">
<p class="mt-2 fs-5 fw-bold">Kantuta Molina</p>
<a href="https://www.linkedin.com/in/kantuta-molina-1a447128/" target="_blank">
<i class="bi bi-linkedin" style="font-size: 2rem"></i>
</a>
</div>
<div class="col-md mt-5">
<img class="img-profile" src="./img/homepage/profile-pictures/lelia.png"
alt="Foto de perfil Lelia Salles">
<p class="mt-2 fs-5 fw-bold">Lelia Salles</p>
<a href="https://www.linkedin.com/in/leliasalles/" target="_blank">
<i class="bi bi-linkedin" style="font-size: 2rem"></i>
</a>
</div>
</div>
<div class="row text-center">
<div class="col-md mt-5">
<img class="img-profile" src="./img/homepage/profile-pictures/pedro.jpg"
alt="Foto de perfil Pedro Henrique Cardoso">
<p class="mt-2 fs-5 fw-bold">Pedro Henrique Cardoso</p>
<a href="https://www.linkedin.com/in/pedroh-cardoso/" target="_blank">
<i class="bi bi-linkedin" style="font-size: 2rem"></i>
</a>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer py-4 bg-black text-white-50">
<div class="container text-center">
<medium>Copyright © 2021 SeriesFlix</medium>
</div>
</footer>
<!-- / Footer -->
<!-- Bootstrap JS import -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"></script>
<!-- / Bootstrap JS import -->
</body>
</html>