-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
176 lines (166 loc) · 5.55 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
165
166
167
168
169
170
171
172
173
174
175
176
<!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" />
<!-- FAVICON -->
<link
rel="shortcut icon"
href="./src/images/tripulacao-luffy.png"
type="image/png"
/>
<!-- CSS -->
<link rel="stylesheet" href="./src/css/reset.css" />
<link rel="stylesheet" href="./src/css/style.css" />
<link rel="stylesheet" href="./src/css/responsivo.css" />
<!-- JAVASCRIPT -->
<script defer src="./src/js/main.js"></script>
<title>One Piece | Bruno Dórea</title>
<!-- GOOGLE FONTS -->
<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"
/>
<!-- GOOGLE TAG (gtag.js) -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-TJQ2XJZPTD"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-TJQ2XJZPTD");
</script>
</head>
<body>
<main class="personagens">
<div class="personagem">
<img
class="imagem"
src="./src/images/personagem-tony-chopper.png"
alt="Personagem"
/>
<div class="conteudo">
<i class="logo"></i>
<h2 class="nome-personagem">Tony Chopper</h2>
<p class="descricao">
Esta pequena rena ganhou a habilidade de mudar sua forma e de pensar
como humanos após comer a fruta Hito Hito no Mi. Chopper é um
valioso membro da tripulação dos Piratas do Chapéu de Palha, atuando
como médico da tripulação.
</p>
</div>
</div>
<div class="personagem">
<img
class="imagem"
src="./src/images/personagem-roronoa-zoro.png"
alt="Personagem"
/>
<div class="conteudo">
<i class="logo"></i>
<h2 class="nome-personagem">Roronoa Zoro</h2>
<p class="descricao">
Primeiro pirata (segundo membro se contarmos com Luffy) a se juntar
à tripulação de Piratas do Chapéu de Palha, Zoro aceitou o convite
de Luffy após o capitão salvar sua vida.
</p>
</div>
</div>
<div class="personagem selecionado">
<img
class="imagem"
src="./src/images/personagem-monkey-d-luffy.png"
alt="Personagem"
/>
<div class="conteudo">
<i class="logo"></i>
<h2 class="nome-personagem">Monkey D. Luffy</h2>
<p class="descricao">
Luffy do Chapéu de Palha, como ficou conhecido, é o protagonista do
anime, e o fundador e capitão da tripulação Piratas do Chapéu de
Palha. Desde muito jovem, tem como seu maior sonho um dia encontrar
o lendário tesouro de Gol D. Roger, para se tornar o novo Rei dos
Piratas.
</p>
</div>
</div>
<div class="personagem">
<img
class="imagem"
src="./src/images/personagem-nami.png"
alt="Personagem"
/>
<div class="conteudo">
<i class="logo"></i>
<h2 class="nome-personagem">Nami</h2>
<p class="descricao">
Uma órfã de guerra, ainda criança Nami foi adotada por Bell-mère,
uma mulher da Marinha. Enquanto crescia ao lado de sua irmã adotiva
Nojiko, Nami já demonstrava sua paixão por desenhar mapas, sonhando
em um dia fazer o mapa de todo o mundo.
</p>
</div>
</div>
<div class="personagem">
<img
class="imagem"
src="./src/images/personagem-sanji.png"
alt="Personagem"
/>
<div class="conteudo">
<i class="logo"></i>
<h2 class="nome-personagem">Sanji</h2>
<p class="descricao">
Também conhecido como "Perna Negra" Sanji, este pirata foi o quinto
a integrar a tripulação de Luffy. Suas ações como pirata lhe
renderam a terceira maior recompensa entre os membros do Chapéu de
Palha, além de atuar como cozinheiro oficial do grupo.
</p>
</div>
</div>
</main>
<ul class="botoes">
<li>
<button class="botao tony_cursor" id="chopper">
<img
src="./src/images/tripulacao-chopper.png"
alt="Tripulação Tony Chopper"
/>
</button>
</li>
<li>
<button class="botao zoro_cursor" id="zoro">
<img
src="./src/images/tripulacao-zoro.png"
alt="Tripulação Roronoa Zoro"
/>
</button>
</li>
<li>
<button class="botao luffy_cursor selecionado" id="luffy">
<img
src="./src/images/tripulacao-luffy.png"
alt="Tripulação Monkey D. Luffy"
/>
</button>
</li>
<li>
<button class="botao nami_cursor" id="nami">
<img src="./src/images/tripulacao-nami.png" alt="Tripulação Nami" />
</button>
</li>
<li>
<button class="botao sanji_cursor" id="sanji">
<img src="./src/images/tripulacao-sanji.png" alt="Tripulação Sanji" />
</button>
</li>
</ul>
</body>
</html>