-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
152 lines (151 loc) · 8.13 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spider Man - LandingPage</title>
<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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="dist/css/main.css">
</head>
<body>
<header class="header">
<div class="header__container">
<img class="header__logo" src="dist/images/aranha_logo.png" alt="logo aranha">
<ul class="header__links">
<li class="header__links__item">
<a href="#">Sobre</a>
</li>
<li class="header__links__item">
<a href="#">Receber atualizacoes</a>
</li>
</ul>
</div>
</header>
<section class="hero">
<div class="hero__content">
<h3>Spider-Man</h3>
<div class="hero__content__icons">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i>
</div>
<p>O Homem-Aranha (Spider-Man), o alter ego de Peter Parker, é um super-herói que aparece nas revistas em quadrinhos publicadas pela Marvel Comics. Criado pelo escritor/editor Stan Lee e pelo escritor/artista Steve Ditko, o Homem-Aranha apareceu pela primeira vez na Amazing Fantasy #15 (10 de agosto de 1962), durante a Era de Prata dos quadrinhos.</p>
<div class="button">
<a href="#">Primeiro filme que assisti</a>
<a class="bestMovie" href="#">Melhor filme</a>
</div>
</div>
</section>
<section class="movies">
<h3>Spider-Man Movies</h3>
<nav class="movies__tabs">
<button data-tab-button="spider1" class="movies__tabs__button movies__tabs__button--is-active">Homem-Aranha Classico</button>
<button data-tab-button="spider2" class="movies__tabs__button">Espetacular Homem-Aranha</button>
<button data-tab-button="spider3" class="movies__tabs__button">Homem-Aranha MCU</button>
</nav>
<ul data-tab-id="spider1" class="movies__list movies__list--is-active">
<li class="movies__list__item">
<img src="dist/images/homem_aranha_classico/homem_aranha1_classico.jpg" alt="homem aranha 1">
</li>
<li class="movies__list__item">
<img src="dist/images/homem_aranha_classico/homem_aranha2.jpg" alt="homem aranha 2">
</li>
<li class="movies__list__item">
<img src="dist/images/homem_aranha_classico/homem_aranha3_classico.jpg" alt="homem aranha 3">
</li>
</ul>
<ul data-tab-id="spider2" class="list2 movies__list movies__list--is-active">
<li class="movies__list__item">
<img src="dist/images/espetacular_homem_aranha/espetacular_homem_aranha1.jpg" alt="homem aranha 1">
</li>
<li class="movies__list__item">
<img src="dist/images/espetacular_homem_aranha/espetacular_homem_aranha2.jpg" alt="homem aranha 2">
</li>
</ul>
<ul data-tab-id="spider3" class="movies__list">
<li class="movies__list__item">
<img src="dist/images/homem_aranha_mcu/homem_aranha1.jpg" alt="homem aranha 1">
</li>
<li class="movies__list__item">
<img src="dist/images/homem_aranha_mcu/homem_aranha2.jpg" alt="homem aranha 2">
</li>
<li class="movies__list__item">
<img src="dist/images/homem_aranha_mcu/homem_aranha3.jpg" alt="homem aranha 3">
</li>
</ul>
</section>
<section class="form">
<div class="forms">
<h4>Receba atualizacoes</h4>
<form class="form__formulario">
<label for="nome">Nome: </label>
<input type="text" id="nome" required>
<label for="email">E-mail: </label>
<input type="email" id="email" required>
<label for="cpf">CPF: </label>
<input type="number" id="cpf">
<button type="submit">Enviar</button>
</form>
</div>
<div class="faq">
<h4>Perguntas frenquentes</h4>
<ul class="faq__questions">
<li class="faq__questions__item">
<div data-faq-question class="faq__questions__item__question">
O que vou receber em meu e-mail?
</div>
<div class="faq__questions__item__answer">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde, laboriosam? Laboriosam, quibusdam suscipit? Deserunt totam cupiditate atque unde. Quaerat tenetur laudantium ad reprehenderit veritatis reiciendis ipsam similique accusantium provident magni?</p>
</div>
</li>
<li class="faq__questions__item">
<div data-faq-question class="faq__questions__item__question">
Onde assistir Homem Aranha?
</div>
<div class="faq__questions__item__answer">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde, laboriosam? Laboriosam, quibusdam suscipit? Deserunt totam cupiditate atque unde. Quaerat tenetur laudantium ad reprehenderit veritatis reiciendis ipsam similique accusantium provident magni?</p>
</div>
</li>
<li class="faq__questions__item">
<div data-faq-question class="faq__questions__item__question">
Onde comprar HQS do Homem Aranha?
</div>
<div class="faq__questions__item__answer">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde, laboriosam? Laboriosam, quibusdam suscipit? Deserunt totam cupiditate atque unde. Quaerat tenetur laudantium ad reprehenderit veritatis reiciendis ipsam similique accusantium provident magni?</p>
</div>
</li>
</ul>
</div>
</section>
<footer class="footer">
<div class="footer__container">
<ul class="footer__links">
<li class="footer__item">
<a href="#">Termos e Condicoes de Uso</a>
</li>
<li class="footer__item">
<a href="#">Política de privacidade</a>
</li>
<li class="footer__item">
<a href="#">Proteção de Dados no Brasil</a>
</li>
<li class="footer__item">
<a href="#">Anúncios personalizados</a>
</li>
<li class="footer__item">
<a href="#">Ajuda</a>
</li>
</ul>
<p>© 2025 Spider-Man e suas empresas afiliadas. Todos os direitos reservados.</p>
<p>A programação do conteúdo varia de acordo com o plano. Para usar o site, é necessário se inscrever e ter mais de 18 anos de idade. Conteúdo sujeito a disponibilidade.
O serviço do site é comercializado por Marvel Studio (Brasil) Ltda., World Trade Center, Av. Das Nações Unidas, 12.551, 12.555, 12.559, Piso 10, São Paulo/SP - CEP 04578-903, Brasil e CNPJ/M 73.042.962/0004-20</p>
</div>
</footer>
<script src="dist/js/main.js"></script>
</body>
</html>