-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
83 lines (79 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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ragnarok Online</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=Oxanium:wght@300;400;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./src/css/estilos.css">
<link rel="stylesheet" href="./src/css/reset.css">
<link rel="stylesheet" href="./src/css/responsivo.css">
</head>
<body>
<header class="cabecalho">
<img class="logo" src="./src/imagem/logo.png" alt="Logo Ragnarok">
</header>
<main class="selecao-de-personagens">
<section class="personagens">
<h1 class="titulo">Selecione um Personagem</h1>
<ul class="lista-de-personagens">
<li class="personagem selecionado" id="sniper" data-job="sn" data-nome="Sniper" data-desc="Eles se especializam em ataques à distância precisos e poderosos. O Sniper é o mestre do Arco. Nas mãos de um Snipers, o arco é um instrumento mortal capaz de causar massivos danos e carnificina. Eles ganharam uma nova habilidade chamada Falcon Assault com a ajuda de seu amigo de longa data, o falcão. Quando a amizade se fortalece, o mesmo acontece com seu poder. Eles também têm habilidades que amplificam seu domínio do arco, bem como habilidades de flecha perfurante.">
<img src="./src/imagem/job-active/sn.png" alt="Sniper" class="sniper">
</li>
<li class="personagem" id="sacer" data-job="hp" data-nome="High Priest" data-desc="">
<img src="./src/imagem/job-normal/hp.png" alt="Sacer" class="sacer">
</li>
<li class="personagem" id="sinx" data-job="ac" data-nome="Assassin Cross" data-desc="">
<img src="./src/imagem/job-normal/ac.png" alt="Assassin Cross" class="sinx">
</li>
<li class="personagem" id="gunslinger" data-job="gs" data-nome="Gunslinger" data-desc="">
<img src="./src/imagem/job-normal/gs.png" alt="Gunslinger" class="gunslinger">
</li>
<li class="personagem" id="ninja" data-job="nj" data-nome="Ninja" data-desc="">
<img src="./src/imagem/job-normal/nj.png" alt="Ninja" class="ninja">
</li>
<li class="personagem" id="paladdin" data-job="pl" data-nome="Paladino" data-desc="">
<img src="./src/imagem/job-normal/pl.png" alt="Paladdin" class="paladdin">
</li>
<li class="personagem" id="proff" data-job="pf" data-nome="Professor" data-desc="">
<img src="./src/imagem/job-normal/pf.png" alt="Professor" class="proff">
</li>
<li class="personagem" id="lord" data-job="lk" data-nome="Lord Knight" data-desc="">
<img src="./src/imagem/job-normal/lk.png" alt="Lord Knight" class="lord">
</li>
<li class="personagem" id="creator" data-job="cr" data-nome="Creator" data-desc="">
<img src="./src/imagem/job-normal/cr.png" alt="Creator" class="creator">
</li>
<li class="personagem" id="wizz" data-job="hw" data-nome="High Wizard" data-desc="">
<img src="./src/imagem/job-normal/hw.png" alt="High Wizard" class="wizz">
</li>
<li class="personagem" id="star" data-job="sg" data-nome="Star Gladiator" data-desc="">
<img src="./src/imagem/job-normal/sg.png" alt="Star Gladiator" class="star">
</li>
<li class="personagem" id="clow" data-job="cg" data-nome="Gypsy/Clown" data-desc="">
<img src="./src/imagem/job-normal/cg.png" alt="Gypsy/Clown" class="clow">
</li>
<li class="personagem" id="champ" data-job="ch" data-nome="Champion" data-desc="">
<img src="./src/imagem/job-normal/ch.png" alt="Champiom" class="champ">
</li>
<li class="personagem" id="soul" data-job="sl" data-nome="Soul Linker" data-desc="">
<img src="./src/imagem/job-normal/sl.png" alt="Soul Linker" class="soul">
</li>
<li class="personagem" id="stalker" data-job="st" data-nome="Stalker" data-desc="">
<img src="./src/imagem/job-normal/st.png" alt="Stalker" class="stalker">
</li>
</ul>
</section>
<section class="personagem-selecionado">
<img class="personagem-grande" src="./src/imagem/job-large/sn.png" alt="personagem-selecionado">
<div class="informacoes-personagem">
<h2 class="nome-personagem" id="nome-personagem">Sniper</h2>
<p class="descricao-personagem" id="descricao-personagem">Eles se especializam em ataques à distância precisos e poderosos. O Sniper é o mestre do Arco. Nas mãos de um Snipers, o arco é um instrumento mortal capaz de causar massivos danos e carnificina. Eles ganharam uma nova habilidade chamada Falcon Assault com a ajuda de seu amigo de longa data, o falcão. Quando a amizade se fortalece, o mesmo acontece com seu poder. Eles também têm habilidades que amplificam seu domínio do arco, bem como habilidades de flecha perfurante.</p>
</div>
</section>
</main>
<script src="./src/js/script.js"></script>
</body>
</html>