forked from droidmarx/MQFLIX
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathLuca.html
141 lines (126 loc) · 5.68 KB
/
Luca.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
<!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">
<link rel="stylesheet" href="./style/style.css">
<link rel="shortcut icon" href="icon/play-circle-regular.svg" type="image/x-icon">
<!--JS-->
<script src="js/script.js"></script>
<script src="https://kit.fontawesome.com/f5daf512d1.js" crossorigin="anonymous"></script>
<!--OW CSS-->
<link rel="stylesheet" href="style/owl/owl.carousel.min.css">
<link rel="stylesheet" href="style/owl/owl.theme.default.min.css">
<!--responsividade-->
<link rel="stylesheet" href="./style/responsive.css">
<title>FLIX</title>
</head>
<body>
<header>
<nav class="nav-bar">
<div class="logo">
<h3><i class="far fa-play-circle"></i> FLIX</h3>
</div>
<div class="nav-list">
<ul>
<li class="nav-item"><a class="nav-link" href="index.html">Início</a></li>
<li class="nav-item"><a class="nav-link" href="#">Séries</a></li>
<li class="nav-item"><a class="nav-link" href="#">Filmes</a></li>
<li class="nav-item"><a class="nav-link" href="#">Documentários</a></li>
</ul>
</div>
<div class="mobile-menu-icon">
<button onclick="menuShow()"><img class="icon" src="botao/menu_white_36dp.svg" alt="Menu"></button>
</div>
</nav>
<div class="mobile-menu">
<ul>
<li class="nav-item"><a class="nav-link" href="index.html">Início</a></li>
<li class="nav-item"><a class="nav-link" href="#">Séries</a></li>
<li class="nav-item"><a class="nav-link" href="#">Filmes</a></li>
<li class="nav-item"><a class="nav-link" href="#">Documentários</a></li>
</ul>
</div>
</header>
<style>
.filme-principal{
height: 50%;
font-size: 16px;
background: linear-gradient(rgba(0,0,0,.50),rgba(0,0,0,.50)100%) , url(./poster/Luca.jpg);
height: 30rem;
background-size:cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
</style>
<main>
<div class="filme-principal">
<div class="container">
<h3 class="titulo">Luca</h3>
<p class="descricao">Ambientado na bela Riviera Italiana, este longa-metragem da Disney e da Pixar acompanha as aventuras do garoto Luca durante um verão inesquecível repleto de macarronadas, gelatos e passeios incríveis de motoneta ao lado de seu novo amigo Alberto. Mas um grande segredo ameaça colocar fim à diversão: abaixo da superfície da água, eles são monstros marinhos!.</p>
</div>
<div class="botoes">
<button role="button" class="botao">
<i class="fa-solid fa-play"></i>
ASSISTIR AGORA
</button>
<button role="button" class="botao">
<i class="fa-solid fa-circle-info"></i>
MAIS INFORMAÇÔES
</button>
</div>
</div>
</main>
<div class="carrosel-filmes">
<div class="owl-carousel owl-theme">
<div class="item">
<a class="Title" href="Luca.html">Luca</a>
<img class="box-filme" src="img/mini10.jpg" alt="Luca">
</div>
<div class="item">
<a class="Title" href="A_Dama_na_Agua.html">A dama na agua</a>
<img class="box-filme" src="img/mini1.jpg" alt="A dama na agua">
</div>
<div class="item">
<a class="Title" href="A_Era_do_Gelo.html">A Era do Gelo: As Aventuras de Buck</a>
<img class="box-filme" src="img/mini9.jpg" alt="A Era do Gelo">
</div>
<div class="item">
<a class="Title" href="Clube_da_Luta.html">Clube da luta</a>
<img class="box-filme" src="img/mini3.jpg" alt="Clube da luta">
</div>
<div class="item">
<a class="Title" href="Vikings_Valhala.html">Vikings Valhala</a>
<img class="box-filme" src="img/mini4.jpg" alt="Vikings Valhala">
</div>
<div class="item">
<a class="Title" href="O_Codigo.html">O Código</a>
<img class="box-filme" src="img/mini5.jpg" alt="O Código">
</div>
<div class="item">
<a class="Title" href="A_Anatomia_de_Grey.html">A Anatomia de Grey</a>
<img class="box-filme" src="img/mini6.jpg" alt="A Anatomia de Grey">
</div>
<div class="item">
<a class="Title" href="Venon.html">Venom</a>
<img class="box-filme" src="img/mini7.jpg" alt="Venon">
</div>
<div class="item">
<a class="Title" href="Hotel_Transilvania.html">Hotel Transilvania</a>
<img class="box-filme" src="img/mini8.jpg" alt="Hotel Transilvania">
</div>
<div class="item">
<a class="Title" href="Homem_Aranha.html">Homem Aranha</a>
<img class="box-filme" src="img/mini2.jpg" alt="Homem Aranha">
</div>
</div>
</div>
<script src="js/script.js"></script>
<script src="js/owl/jquery.min.js" ></script>
<script src="js/owl/owl.carousel.min.js" ></script>
<script src="js/owl/setup.js" ></script>
</body>
</html>