-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
164 lines (140 loc) · 8.15 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
161
162
163
164
<!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="stylesheet" href="./src/css/reset.css">
<link rel="stylesheet" href="./src/css/estilo.css">
<link rel="stylesheet" href="./src/css/responsivo.css">
<title>Spy x Family</title>
</head>
<body>
<main class="personagens">
<div class="personagem selecionado">
<img class="imagem" src="./src/imagens/personagem-anya.jpg" alt="personagem-anya">
<div class="conteudo">
<i class="logo"></i>
<h2 class="nome-personagem">Anya Forger</h2>
<p class="descricao">Anya é uma criança órfã com habilidades telepáticas, o que significa que ela pode ler mentes. Ela foi adotada por Twilight, o protagonista masculino, como parte de uma missão para se infiltrar em uma escola de elite e se aproximar do diretor, que é um alvo de espionagem.</p>
</div>
</div>
<div class="personagem">
<img class="imagem" src="./src/imagens/personagem-loid.png" alt="personagem-loid">
<div class="conteudo">
<i class="logo"></i>
<h2 class="nome-personagem">Lloyd Forger</h2>
<p class="descricao">Para cumprir sua missão, Loid precisa criar uma falsa identidade como um pai de família. Ele decide adotar Anya, uma adorável garota com habilidades telepáticas, como parte de sua cobertura. Ele também assume o nome de "Lloyd Forger" para esconder sua verdadeira identidade.</p>
</div>
</div>
<div class="personagem">
<img class="imagem" src="./src/imagens/personagem-yor.png" alt="personagem-yor">
<div class="conteudo">
<i class="logo"></i>
<h2 class="nome-personagem">Yor Forger</h2>
<p class="descricao">Yor é uma mulher atraente e mortalmente habilidosa em combate. Ela vive uma vida dupla como assassina e é contratada para realizar missões de alto risco e eliminar alvos específicos. No entanto, sua vida muda drasticamente quando ela é recrutada para participar de uma missão que envolve se casar com um espião chamado Loid Forger e formar uma família falsa como parte de sua cobertura.</p>
</div>
</div>
<div class="personagem">
<img class="imagem" src="./src/imagens/personagem-bond.png" alt="personagem-bond">
<div class="conteudo">
<i class="logo"></i>
<h2 class="nome-personagem">Bond</h2>
<p class="descricao">Bond é um cão da raça Border Collie, que Anya adota no decorrer da série. Ele é um personagem não antropomórfico, mas desempenha um papel importante na história como um membro amado da família adotiva de Loid, Yor e Anya.
Bond é extremamente inteligente e leal a Anya. Ele é treinado para realizar várias tarefas e é frequentemente visto auxiliando Anya em sua vida diária. Além disso, seu comportamento cômico e fofo contribui para o charme geral da série.</p>
</div>
</div>
<div class="personagem">
<img class="imagem" src="./src/imagens/personagem-franky.avif" alt="personagem-franky">
<div class="conteudo">
<i class="logo"></i>
<h2 class="nome-personagem">Franky Franklin</h2>
<p class="descricao">Franky Franklin é um homem corpulento e musculoso, com uma aparência intimidante, que contrasta com sua personalidade amigável e gentil. Ele é um guarda-costas contratado por Loid Forger para proteger sua família adotiva enquanto eles estão envolvidos em missões de espionagem perigosas.</p>
</div>
</div>
<div class="personagem">
<img class="imagem" src="./src/imagens/personagem-henr.png
" alt="personagem-Henry">
<div class="conteudo">
<i class="logo"></i>
<h2 class="nome-personagem">Henry Henderson</h2>
<p class="descricao">Henry Henderson é um homem maduro e experiente no campo da espionagem. Ele é visto como um mentor para Loid Forger, ajudando-o em várias missões e fornecendo orientações e conselhos. Henry é um agente confiável e habilidoso, conhecido por sua habilidade estratégica e conhecimento profundo do mundo da espionagem.</p>
</div>
</div>
<div class="personagem">
<img class="imagem" src="./src/imagens/personagem-desmond.jpg" alt="personagem-desmond">
<div class="conteudo">
<i class="logo"></i>
<h2 class="nome-personagem">Desmond</h2>
<p class="descricao">Desmond é o diretor da Eden Academy, uma escola de elite no mundo fictício de "Spy x Family." Ele se torna um alvo importante de espionagem na trama da série. Como diretor de uma escola tão prestigiosa, Desmond é uma figura de destaque na sociedade e tem acesso a informações valiosas.</p>
</div>
</div>
<div class="personagem">
<img class="imagem" src="./src/imagens/personagem-damian.webp" alt="personagem-damian">
<div class="conteudo">
<i class="logo"></i>
<h2 class="nome-personagem">Damian</h2>
<p class="descricao">Damian é o filho do diretor da Eden Academy, Desmond, tornando-o uma figura influente na escola de elite em que Anya Forger, a filha adotiva com habilidades telepáticas da família Forger, está matriculada. Damian também é colega de classe de Anya na Eden Academy.</p>
</div>
</div>
<div class="personagem">
<img class="imagem" src="./src/imagens/personagem-yuri.png" alt="personagem-yuri">
<div class="conteudo">
<i class="logo"></i>
<h2 class="nome-personagem">Yuri Briar</h2>
<p class="descricao">Yuri Briar é o irmão mais novo de Yor Forger e um homem de 20 anos que trabalha no Serviço de Segurança do Estado. Ele mantém seu emprego no SSE em segredo de sua irmã e, em vez disso, finge ser um funcionário público normal no Ministério das Relações Exteriores.</p>
</div>
</div>
</main>
<ul class="botoes">
<li>
<button class="botao selecionado">
<img src="./src/imagens/face-anya.png" alt="face-anya">
</button>
</li>
<li>
<button class="botao">
<img src="./src/imagens/face-loid.png" alt="face-loid">
</button>
</li>
<li>
<button class="botao ">
<img src="./src/imagens/face-yor.png" alt="face-yor">
</button>
</li>
<li>
<button class="botao ">
<img src="./src/imagens/face-bond.png" alt="face-bond">
</button>
</li>
<li>
<button class="botao ">
<img src="./src/imagens/face-franky.jpg" alt="face-franky">
</button>
</li>
<li>
<button class="botao ">
<img src="./src/imagens/face-henry.webp" alt="face-henry">
</button>
</li>
<li>
<button class="botao ">
<img src="./src/imagens/face-desmond.webp" alt="face-desmond">
</button>
</li>
<li>
<button class="botao ">
<img src="./src/imagens/face-damian.webp" alt="face-damian">
</button>
</li>
<li>
<button class="botao ">
<img src="./src/imagens/face-yuri.jpg" alt="face-yuri">
</button>
</li>
</ul>
<script src="./src/js/index.js"></script>
</body>
</html>