Projeto-OnePiece-MapaDevWeek/index.html at main · leoestevves/Projeto-OnePiece-MapaDevWeek · GitHub

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
<!DOCTYPE html>
<html lang="en">
<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">
    <title>Escolha seu personagem - MapaDev Week</title>
    <link rel="stylesheet" href="./src/css/reset.css">
    <link rel="stylesheet" href="./src/css/variaveis.css">
    <link rel="stylesheet" href="./src/css/fontes.css">
    <link rel="stylesheet" href="./src/css/animacoes.css">
    <link rel="stylesheet" href="./src/css/estilos.css">
    <link rel="stylesheet" href="./src/css/responsivo.css">

</head>
<body>
    <main>
        <header class="cabecalho">
            <h1 class="titulo">Character Select</h1>
        </header>
        <div class="selecao-de-personagens">
            <div class="personagem-grande personagem-jogador-1">
                <img src="./src/imagens/luffy.png" alt="Personagem selecionado jogador 1"
                id="personagem-jogador-1">
                <div class="nome">
                    <h2 id="nome-jogador-1">Monkey D. Luffy</h2>
                </div>
            </div>


            <ul class="lista-de-personagens">
                <li class="personagem selecionado" id="luffy" data-name="Monkey D. Luffy">
                    <span class="tag">1P</span>
                    <img src="./src/imagens/luffy-icon.jpg" alt="Personagem Luffy">
                </li>

                <li class="personagem" id="zoro" data-name="Roronoa Zoro">
                    <span class="tag">1P</span>
                    <img src="./src/imagens/zoro-icon.jpg" alt="Personagem Zoro">
                </li>

                <li class="personagem" id="nami" data-name="Nami">
                    <span class="tag">1P</span>
                    <img src="./src/imagens/nami-icon.jpg" alt="Personagem Nami">
                </li>

                <li class="personagem" id="hancock" data-name="Boa Hancock">
                    <span class="tag">1P</span>
                    <img src="./src/imagens/hancock-icon.jpg" alt="Personagem Hancock">
                </li>

                <li class="personagem" id="sanji" data-name="Vinsmoke Sanji">
                    <span class="tag">1P</span>
                    <img src="./src/imagens/sanji-icon.jpg" alt="Personagem Sanji">
                </li>

                <li class="personagem jogador-2-selecionado" id="teach" data-name="Marshall D. Teach">
                    <span class="tag">2P</span>
                    <img src="./src/imagens/Teach-icon.jpg" alt="Personagem Luffy">
                </li>

                <li class="personagem" id="law" data-name="Trafalgar D. Law">
                    <span class="tag">1P</span>
                    <img src="./src/imagens/Law-icon.jpg" alt="Personagem Law">
                </li>

                <li class="personagem" id="kid" data-name="Eustass Kid">
                    <span class="tag">1P</span>
                    <img src="./src/imagens/Kid-icon.jpg" alt="Personagem Kid">
                </li>

                <li class="personagem" id="doflamingo" data-name="Donquixote Doflamingo">
                    <span class="tag">1P</span>
                    <img src="./src/imagens/doflamingo-icon.jpg" alt="Personagem Doflamingo">
                </li>

            </ul>


            <div class="personagem-grande personagem-jogador-2">
                <img src="./src/imagens/teach.png" alt="Personagem selecionado jogador 2"
                id="personagem-jogador-2">
                <div class="nome">
                    <h2>Marshall D. Teach</h2>
                </div>
            </div>
        </div>
    </main>
    <script src="./src/js/index.js"></script>
</body>
</html>