-
Notifications
You must be signed in to change notification settings - Fork 0
/
serie.html
162 lines (131 loc) · 7.33 KB
/
serie.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
<!-- Tela de detalhes da série (serie.html)
Página com três seções que apresentam informações sobre uma série específica, sendo:
(1) informações gerais: detalhes gerais da série em questão com LAYOUT PERSONALIZADO INDIVIDUALMENTE em que cada pessoa deve definir pelo menos 5 itens a serem apresentados (imagem, descritivo da série, plataforma de exibição, outros detalhes) e um botão para tornar a série uma favorita
(2) elenco: foto e nome dos participantes da série
(3) Temporadas e episódios: informações sobre as temporadas e episódios já lançados ou planejados para a série com LAYOUT PERSONALIZADO INDIVIDUALMENTE em que cada pessoa deve escolher como as informações serão dispostas. -->
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="description" content="Um site de filmes com algumas funcionalidades básicas">
<meta name="keywords" content="HTML, CSS, JavaScript, Bootstrap">
<meta name="author" content="Eduarda Vieira">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/svg+xml" href="./assets/images/logo.png">
<title>Duda Flix</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=arrow_forward" />
<!-- Boostrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Swiper JS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<link rel="stylesheet" href="./assets/css/index.css">
</head>
<body>
<!-- nav -->
<nav class="navbar navbar-expand-lg bg-body-tertiary px-4">
<div class="container-fluid">
<a href="index.html" class="px-3">
<img width="80px" src="./assets/images/logo.png" alt="Duda Flix"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo02">
<ul class="navbar-nav ">
<span class="m-1"><img src="./assets/images/icon/heart.svg" alt=""></span>
<li class="nav-item">
<h5 class="explorar"><a class="nav-link" href="explorer.html">Explorar</a></h5>
</li>
</ul>
</div>
</div>
</nav>
<!-- nav -->
<!-- nav -->
<div class="container mt-3">
<h3 class="t-autor">Descrição</h3>
<p class="m-4">Na série The Chosen - Os Escolhidos, acompanha-se os principais momentos de uma grande narrativa religiosa. Em uma nova adaptação dos acontecimentos da Bíblia, na Galileia do século I, Jesus de Nazaré (Jonathan Roumie), um homem simples e de uma família humilde de carpinteiros, auxilia as pessoas à sua volta, independente de suas crenças, origens e aparência. Na companhia de 12 homens, escolhidos para serem seus discípulos, ele ampara os necessitados compartilhando palavras e ações de bondade por onde passa.</p>
<h3 class="t-autor my-3">Personagens</h3>
<div class="container-card swiper">
<div class="card-wrapper">
<ul class="card-list swiper-wrapper">
<li class="card-item swiper-slide">
<a href="" class="card-link">
<img src="./assets/images/personagens/jesus.jpg" alt="" class="card-image">
<h2 class="card-title">Jesus</h2>
<p class="card-text">Jonathan Roumie</p>
</a>
</li>
<li class="card-item swiper-slide">
<a href="" class="card-link">
<img src="./assets/images/personagens/pedro.jpg" alt="" class="card-image">
<h2 class="card-title">Pedro</h2>
<p class="card-text">Shahar Isaac</p>
</a>
</li>
<li class="card-item swiper-slide">
<a href="" class="card-link">
<img src="./assets/images/personagens/mateus.jpg" alt="" class="card-image">
<h2 class="card-title">Mateus</h2>
<p class="card-text"> Paras Patel</p>
</a>
</li>
<li class="card-item swiper-slide">
<a href="" class="card-link">
<img src="./assets/images/personagens/joao.jpg" alt="" class="card-image">
<h2 class="card-title">João</h2>
<p class="card-text"> George Xanthis</p>
</a>
</li>
<li class="card-item swiper-slide">
<a href="" class="card-link">
<img src="./assets/images/personagens/maria.jpg" alt="" class="card-image">
<h2 class="card-title">Maria Madalena</h2>
<p class="card-text"> Elizabeth Tabish</p>
</a>
</li>
</ul>
<div class="swiper-pagination"></div>
<div class="swipper-slider-button swiper-button-prev"></div>
<div class="swipper-slider-button swiper-button-next"></div>
</div>
</div>
<div class="content mt-5">
<div class="row">
<div class="col-lg-4 mb-4">
<h3 class="t-autor">Onde é exibida a série </h3>
<!-- <h4>Netflix</h4> -->
<img class="plataforma" src="./assets/images/plataformas/netflix.webp" alt="">
<div class="my-3">
<span class="titulo mt-3">Genêro: </span><span>Drama</span>
</div>
</div>
<div class="col-lg-8">
<h3 class="t-autor titulo-temp">Temporadas e episódios</h3>
<div class="temp">
<span class="temporada">1 temporada: </span><span class="episodeos">8 episódios</span>
</div>
<div class="temp">
<span class="temporada">2 temporada: </span><span class="episodeos">8 episódios</span>
</div>
<div class="temp">
<span class="temporada">3 temporada: </span><span class="episodeos">8 episódios</span>
</div>
<div class="temp">
<span class="temporada">4 temporada: </span><span class="episodeos">8 episódios</span>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>Eduarda Vieira | 2024</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="./assets/js/card-slider.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="./assets/js/carrossel.js"></script>
</body>
</html>