dbs-website/index.html at master · pedragah/dbs-website · 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
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
<!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 rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&family=Rubik&family=Secular+One&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="src/css/reset.css">
    <link rel="stylesheet" href="./src/css/style.css">
    <link rel="stylesheet" href="./src/css/responsive.css">

    <title>DBS</title>
</head>

<body>
    <main class="personagens">
        <div class="personagem selecionado">
            <img class="imagem" src="./src/imagens/goku_mui.jpg" alt="goku_mui" />
            <div class="conteudo">
                <i class="logo"></i>
                <h2 class="nome-personagem">Goku</h2>
                <p class="descricao">Son Goku é o protagonista do anime.</p>
            </div>
        </div>

        <div class="personagem">
            <img class="imagem" src="./src/imagens/vegeta ultraego.jpg" alt="vegeta_ultraego" />
            <div class="conteudo">
                <i class="logo"></i>
                <h2 class="nome-personagem">Vegeta</h2>
                <p class="descricao">Vegeta é o princípe dos Saiyajins.</p>
            </div>
        </div>

        <div class="personagem">
            <img class="imagem" src="./src/imagens/broly.jpg" alt="broly_berserk" />
            <div class="conteudo">
                <i class="logo"></i>
                <h2 class="nome-personagem">Broly</h2>
                <p class="descricao">Broly é um Saiyajin superpoderoso.</p>
            </div>
        </div>

        <div class="personagem">
            <img class="imagem" src="./src/imagens/gohan beast.jpeg" alt="gohan_beast" />
            <div class="conteudo">
                <i class="logo"></i>
                <h2 class="nome-personagem">Gohan</h2>
                <p class="descricao">Son Gohan é o filho mais velho de Goku e ChiChi, sendo um hibrído de Sayiajin e
                    humano.</p>
            </div>
        </div>

        <div class="personagem">
            <img class="imagem" src="./src/imagens/gogeta blue.jpg" alt="gogeta blue" />
            <div class="conteudo">
                <i class="logo"></i>
                <h2 class="nome-personagem">Gogeta</h2>
                <p class="descricao">Gogeta trata-se de uma fusão entre Goku e Vegeta por meio da dança Metamoro.</p>
            </div>
        </div>

        <div class="personagem">
            <img class="imagem" src="./src/imagens/vegetto blue.jpg" alt="vegetto blue" />
            <div class="conteudo">
                <i class="logo"></i>
                <h2 class="nome-personagem">Vegetto</h2>
                <p class="descricao">Vegetto trata-se de uma fusão entre Goku e Vegeta por meio dos brincos Potara
                    cedidos pelo Kaioshin.</p>
            </div>
        </div>
        <div class="personagem">
            <img class="imagem" src="./src/imagens/oozaru.jpeg" alt="oozaru" />
            <div class="conteudo">
                <i class="logo"></i>
                <h2 class="nome-personagem">Oozaru</h2>
                <p class="descricao">Oozaru é uma forma assustadora alcançada pelos Saiyajins com cauda durante as
                    noites de Lua cheia.</p>
            </div>
        </div>
    </main>
    <ul class="botoes">
        <li>
            <button class="botao selecionado goku">
                <img src="./src/imagens/icon_goku.jpg" alt="goku icon">
            </button>
        </li>

        <li>
            <button class="botao vegeta">
                <img src="./src/imagens/icon_vegeta.jpg" alt="vegeta icon">
            </button>
        </li>

        <li>
            <button class="botao broly">
                <img src="./src/imagens/icon_broly.jpg" alt="broly icon">
            </button>
        </li>

        <li>
            <button class="botao gohan">
                <img src="./src/imagens/icon_gohan.jpg" alt="gohan icon">
            </button>
        </li>

        <li>
            <button class="botao gogeta">
                <img src="./src/imagens/icon_gogeta.jpg" alt="gogeta icon">
            </button>
        </li>

        <li>
            <button class="botao vegetto">
                <img src="./src/imagens/icon_vegetto.jpg" alt="vegetto icon">
            </button>
        </li>

        <li>
            <button class="botao oozaru">
                <img src="./src/imagens/icon_oozaru.jpg" alt="oozaru icon">
            </button>
        </li>
    </ul>
    <script src="./src/js/index.js"></script>
</body>

</html>