-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
112 lines (100 loc) · 7.67 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.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=Space+Grotesk:[email protected]&display=swap" rel="stylesheet" />
<script src="data.js" defer></script>
<script src="script.js" defer></script>
<title>Movie Hall</title>
</head>
<body onload="carregar(), exibirAction()">
<div class="loading">
<div class="loading__spin"></div>
<p class="loading__text"></p>
</div>
<div class="container">
<header>
<a href="">
<p class="logo"><span class="gradient-text">Movie Hall</span></p>
</a>
</header>
<div class="hero">
<h1 class="hero__headline">
Para de rolar a tela
<span class="gradient-text">te indico um filme</span>
</h1>
<p class="hero__text">Sua 🍿 não esfria com a Movie Hall, sugestão de filme é aqui.</p>
<div class="hero__btns">
<a href="#categories" class="btn">Ver sugestões</a>
<a href="javascript:void(0)" onclick="share()" class="btn">Compartilhar</a>
</div>
</div>
<div class="productions">
<img class="productions__image" src="assets/productions/universal.png" alt="amazon" />
<img class="productions__image" src="assets/productions/warner.png" alt="amazon" />
<img class="productions__image" src="assets/productions/amazon.png" alt="amazon" />
<img class="productions__image" src="assets/productions/columbia.png" alt="amazon" />
<img class="productions__image" src="assets/productions/fox.png" alt="amazon" />
<img class="productions__image" src="assets/productions/disney.png" alt="amazon" />
<img class="productions__image" src="assets/productions/netflix.png" alt="amazon" />
<img class="productions__image" src="assets/productions/paramount.png" alt="amazon" />
</div>
<div id="categories" class="categories">
<h2 class="categories__title">Categorias</h2>
<div id="categories__btns">
<button class="btn btnAction" onclick="exibirAction()">Ação</button>
<button class="btn btnSuspense" onclick="exibirSuspense()">Suspense</button>
<button class="btn btnTerror" onclick="exibirTerror()">Terror</button>
<button class="btn btnTodos" onclick="exibirTodos()">Todos</button>
</div>
<div class="categories__elements">
<!-- Ação -->
<img src="assets/movies/action/john-wick-3-parabellum.webp" alt="John Wick 3 Parabellum" title="John Wick 3 Parabellum" class="filme action" onclick="exibirModal(this)" />
<img src="assets/movies/action/nada-de-novo-no-front.jpg" alt="Nada de Novo no Front" title="Nada de Novo no Front" class="filme action" onclick="exibirModal(this)" />
<img src="assets/movies/action/resgate-2.jpg" alt="Resgate 2" title="Resgate 2" class="filme action" onclick="exibirModal(this)" />
<img src="assets/movies/action/sniper-americano.png" alt="Sniper Americano" title="Sniper Americano" class="filme action" onclick="exibirModal(this)" />
<img src="assets/movies/action/creed-nascido-para-lutar.png" alt="Creed Nascido para Lutar" title="Creed Nascido para Lutar" class="filme action" onclick="exibirModal(this)" />
<img src="assets/movies/action/guerra-mundial-z.png" alt="Guerra Mundial Z" title="Guerra Mundial Z" class="filme action" onclick="exibirModal(this)" />
<img src="assets/movies/action/rampage-destruição-total.png" alt="Rampage Destruição Total" title="Rampage Destruição Total" class="filme action" onclick="exibirModal(this)" />
<img src="assets/movies/action/tropa-de-elite.png" alt="Tropa de Elite" title="Tropa de Elite" class="filme action" onclick="exibirModal(this)" />
<!-- Suspense -->
<img src="assets/movies/suspense/fratura.jpg" alt="Fratura" title="Fratura" class="filme suspense" onclick="exibirModal(this)" />
<img src="assets/movies/suspense/fuja.jpg" alt="Fuja" title="Fuja" class="filme suspense" onclick="exibirModal(this)" />
<img src="assets/movies/suspense/corra.jpg" alt="Corra" title="Corra" class="filme suspense" onclick="exibirModal(this)" />
<img src="assets/movies/suspense/o-homem-nas-trevas-2.jpg" alt="O Homem nas Trevas 2" title="O Homem nas Trevas 2" class="filme suspense" onclick="exibirModal(this)" />
<img src="assets/movies/suspense/a-sociedade-da-neve.jpg" alt="A Sociedade da Neve" title="A Sociedade da Neve" class="filme suspense" onclick="exibirModal(this)" />
<img src="assets/movies/suspense/bird-box.jpg" alt="Bird Box" title="Bird Box" class="filme suspense" onclick="exibirModal(this)" />
<img src="assets/movies/suspense/destinos-a-deriva.jpg" alt="Destinos a Deriva" title="Destinos a Deriva" class="filme suspense" onclick="exibirModal(this)" />
<img src="assets/movies/suspense/o-poco.jpg" alt="O Poço" title="O Poço" class="filme suspense" onclick="exibirModal(this)" />
<img src="assets/movies/suspense/a-queda.jpg" alt="A Queda" title="A Queda" class="filme suspense" onclick="exibirModal(this)" />
<img src="assets/movies/suspense/nos.jpg" alt="Nós" title="Nós" class="filme suspense" onclick="exibirModal(this)" />
<img src="assets/movies/suspense/o-enfermeiro-da-noite.jpg" alt="O Enfermeiro da Noite" title="O Enfermeiro da Noite" class="filme suspense" onclick="exibirModal(this)" />
<!-- Terror -->
<img src="assets/movies/horror/mama.jpg" alt="Mama" title="Mama" class="filme terror" onclick="exibirModal(this)" />
<img src="assets/movies/horror/a-bruxa.jpg" alt="A Bruxa" title="A Bruxa" class="filme terror" onclick="exibirModal(this)" />
<img src="assets/movies/horror/boneco-do-mal.jpg" alt="Boneco do Mal" title="Boneco do Mal" class="filme terror" onclick="exibirModal(this)" />
<img src="assets/movies/horror/hereditario.jpg" alt="Hereditário" title="Hereditário" class="filme terror" onclick="exibirModal(this)" />
<img src="assets/movies/horror/midsommar.jpg" alt="Midsommar" title="Midsommar" class="filme terror" onclick="exibirModal(this)" />
<img src="assets/movies/horror/tin-e-tina.jpg" alt="Tin e Tina" title="Tin e Tina" class="filme terror" onclick="exibirModal(this)" />
<img src="assets/movies/horror/conferencia-mortal.jpg" alt="Conferência Mortal" title="Conferência Mortal" class="filme terror" onclick="exibirModal(this)" />
<img src="assets/movies/horror/convite-maldito.jpg" alt="Convite Maldito" title="Convite Maldito" class="filme terror" onclick="exibirModal(this)" />
<img src="assets/movies/horror/invocacao-do-mal-3.jpg" alt="Invocação do Mal 3" title="Invocação do Mal 3" class="filme terror" onclick="exibirModal(this)" />
<img src="assets/movies/horror/morte-morte-morte.jpg" alt="Morte Morte Morte" title="Morte Morte Morte" class="filme terror" onclick="exibirModal(this)" />
<img src="assets/movies/horror/o-telefone-preto.jpg" alt="O Telefone Preto" title="O Telefone Preto" class="filme terror" onclick="exibirModal(this)" />
</div>
<dialog class="modal"></dialog>
</div>
<footer>
<p>Movie Hall 2024 Todos os direitos reservados</p>
<p>
UX/UI e Front-End por
<a href="https://www.linkedin.com/in/udanielnogueira/" target="_blank"> Daniel Nogueira</a>
</p>
</footer>
</div>
</body>
</html>