-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
160 lines (142 loc) · 8.18 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=Rubik&family=Secular+One&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="src/imagens/spider-man-logo.png" type="image/x-icon">
<link rel="stylesheet" href="./src/css/reset.css">
<link rel="stylesheet" href="./src/css/estilos.css">
<link rel="stylesheet" href="./src/css/responsivo.css">
<title>Spider-Man: Across the Spider-Verse</title>
</head>
<body>
<main class="personagens">
<div class="personagem">
<img class="imagem" src="src/imagens/miles-morales.jpg" alt="Spider-Man Miles Morales">
<div class="conteudo">
<i class="logo"></i>
<h2 class="nome-personagem">
<span style="--d: 0s;">Spider-Man Miles Morales</span>
</h2>
</span>
<p class="descricao">
<span style="--d: .1s;">Na realidade alternativa da Terra-1610, um jovem adolescente de Nova York foi picado por uma aranha geneticamente melhorada. Quando o Peter Parker daquela dimensão foi morto, o adolescente – chamado Miles Morales – foi inspirado a assumir o manto caído. Possui força sobre-humana (sendo capaz de manter unida uma ponte em queda), agilidade e durabilidade.</span>
</p>
</div>
</div>
<div class="personagem selecionado">
<img class="imagem" src="src/imagens/spider-gwen.jpg" alt="Spider-Gwen">
<div class="conteudo">
<i class="logo"></i>
<h2 class="nome-personagem">
<span style="--d: 0s;">Spider-Gwen</span>
</h2>
<p class="descricao">
<span style="--d: .1s;">Gwen foi picada por uma aranha radioativa e ganhou poderes de aranha. Influenciada pelo código moral de seu pai, Gwen usa seus poderes para ajudar os necessitados, como seu amigo Peter Parker.</span>
</p>
</div>
</div>
<div class="personagem">
<img class="imagem" src="src/imagens/scarlet-spider-man.jpg" alt="Scarlet Spider-Man ">
<div class="conteudo">
<i class="logo"></i>
<h2 class="nome-personagem">
<span style="--d: 0s;">Scarlet Spider</span>
</h2>
<p class="descricao">
<span style="--d: .1s;">Criado por um professor maluco, o Escarlate Spider é um clone exato de Peter Parker, também conhecido como Homem-Aranha, e uma estratégia para destruir o rastreador de paredes! Tomando o nome de tio Ben e o sobrenome de solteira de tia May, Reilly, Ben Reilly supera seu propósito original e se torna um herói de pleno direito.</span>
</p>
</div>
</div>
<div class="personagem">
<img class="imagem" src="src/imagens/spider-man-2099.jpg" alt="Spider-Man 2099">
<div class="conteudo">
<i class="logo"></i>
<h2 class="nome-personagem">
<span style="--d: 0s;">Spider-Man 2099</span>
</h2>
<p class="descricao">
<span style="--d: .1s;">O geneticista de nível prodígio Miguel O’Hara adquire habilidades semelhantes às de uma aranha em um experimento que deu errado. Ele vê uma oportunidade de proteger as pessoas comuns contra corporações abusivas e decide usar seus poderes para o bem e se tornar o Homem-Aranha do ano de 2099.</span>
</p>
</div>
</div>
<div class="personagem">
<img class="imagem" src="src/imagens/spider-man-india.jpg" alt="Spider-Man Índia">
<div class="conteudo">
<i class="logo"></i>
<h2 class="nome-personagem">
<span style="--d: 0s;">Spider-Man Índia</span>
</h2>
<p class="descricao">
<span style="--d: .1s;">Assim como Parker, Prabhakar cresceu sob os cuidados de sua tia Maya e de seu tio Bhim. Apesar de viver na pobreza, a inteligência de Prabhakar rendeu-lhe uma bolsa de estudos que – com o apoio adicional da sua família – lhe permitiu frequentar uma escola ilustre em Mumbai. Seus poderes são praticamente idênticos aos do Homem-Aranha da Terra-616 e incluem força aprimorada e a capacidade de sentir o perigo.</span>
</p>
</div>
</div>
<div class="personagem">
<img class="imagem" src="src/imagens/spider-punk.jpg" alt="Spider-Punk">
<div class="conteudo">
<i class="logo"></i>
<h2 class="nome-personagem">
<span style="--d: 0s;">Spider-Punk</span>
</h2>
<p class="descricao">
<span style="--d: .1s;">Spider-Punk possui força sobre-humana (levantando pelo menos uma tonelada), velocidade, reflexos, resistência e equilíbrio. Ele possui um sentido de aranha precognitivo que avisa sobre perigo iminente, como suas contrapartes extradimensionais. Capaz de aderir e escalar paredes, ele pode produzir teias para enredar oponentes ou balançar entre edifícios.</span>
</p>
</div>
</div>
<div class="personagem">
<img class="imagem" src="src/imagens/spider-woman.jpg" alt="Spider-Woman">
<div class="conteudo">
<i class="logo"></i>
<h2 class="nome-personagem">
<span style="--d: 0s;">Spider-Woman</span>
</h2>
<p class="descricao">
<span style="--d: .1s;">Jessica Drew foi colocada em uma câmara de hibernação durante anos antes de emergir décadas depois, ainda adolescente. Aprimorada fisicamente por um soro especial derivado de uma aranha, Drew escolheu assumir o controle da vida e ficou conhecida como Spider-Woman.</span>
</p>
</div>
</div>
</main>
<ul class="botoes">
<li>
<button class="botao" id="miles">
<img src="src/imagens/miles-morales-logo.jpg" alt="Miles Morales Logo">
</button>
</li>
<li>
<button class="botao selecionado">
<img src="src/imagens/spider-gwen-logo.jpg" alt="Spider-Gwen Logo">
</button>
</li>
<li>
<button class="botao">
<img src="src/imagens/scarlet-spider-man-logo.jpg" alt="Scarlet Spider-Man Logo">
</button>
</li>
<li>
<button class="botao">
<img src="src/imagens/spider-man-2099-logo.jpg" alt="Spider-Man 2099 Logo">
</button>
</li>
<li>
<button class="botao">
<img src="src/imagens/spider-man-india-logo.jpg" alt="Spider-Man Índia Logo">
</button>
</li>
<li>
<button class="botao">
<img src="src/imagens/spider-punk-logo.jpg" alt="Spider-Punk Logo">
</button>
</li>
<li>
<button class="botao">
<img src="src/imagens/spider-woman-logo.jpg" alt="Spider-Woman Logo">
</button>
</li>
</ul>
<script src="./src/js/index.js"></script>
</body>
</html>