sitegremio/index.html at main · tuliothaua/sitegremio · 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
<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/sitegremio/front-end/arquivos/style.css">
    <link rel="icon" type="image/png" href="/sitegremio/front-end/arquivos/img/gremio-logo-escudo-2.png">
    <title>GRÊMIO - HISTORY HUB</title>
</head>

<body>
    <nav class="nav">
        <div class="container">
        <h1 class="logo" id="logoArea">
            <audio id="meuAudio2">
                <source src="/sitegremio/front-end/arquivos/aud/gremio-radio-globo.mp3" type="audio/mpeg">
                Seu navegador não suporta a tag de áudio.
            </audio>

            <a id="gifContainer1" href="/sitegremio/front-end/arquivos/gif/giphy.gif">
                <img id="gremio1" src="/sitegremio/front-end/arquivos/img/images.jpeg" alt="Logo do Grêmio">
                <span class="titulogremio">Grêmio o imortal!</span>
            </a>
        </h1>


            <ul>
                <li><a href="/sitegremio/front-end/abas/lendas.html" class="current">︽ LENDAS</a></li>
                <li><a href="/sitegremio/front-end/abas/historia.html">História</a></li>
                <li><a href="/sitegremio/front-end/abas/titulos.html">Títulos</a></li>
               <li>
                <li>
                    <a href="/sitegremio/front-end/abas/gremioarcade.html" class="arcadelink neon-arcade-link">
                        🕹️ <span class="arcade-text-cyan">Grêmio</span> - <span class="arcade-text-red">Arcade</span>
                    </a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="hero">
        <div class="container">
            <h1 class="titulo1">
                <span class="letra azul" style="animation-delay: 0s;">B</span>
                <span class="letra preto" style="animation-delay: 0.1s;">E</span>
                <span class="letra branco" style="animation-delay: 0.2s;">M</span>
                <span>&nbsp;</span>
                <span class="letra azul" style="animation-delay: 0.3s;">V</span>
                <span class="letra preto" style="animation-delay: 0.4s;">I</span>
                <span class="letra branco" style="animation-delay: 0.5s;">N</span>
                <span class="letra azul" style="animation-delay: 0.6s;">D</span>
                <span class="letra preto" style="animation-delay: 0.7s;">O</span>
                <span>&nbsp;</span>
                <span class="letra branco" style="animation-delay: 0.8s;">A</span>
                <span class="letra azul" style="animation-delay: 0.9s;">O</span>
                <span>&nbsp;</span>
                <span class="letra preto" style="animation-delay: 1s;">S</span>
                <span class="letra branco" style="animation-delay: 1.1s;">I</span>
                <span class="letra azul" style="animation-delay: 1.2s;">T</span>
                <span class="letra preto" style="animation-delay: 1.3s;">E</span>
                <span>&nbsp;</span>
                <span class="letra branco" style="animation-delay: 1.4s;">D</span>
                <span class="letra azul" style="animation-delay: 1.5s;">O</span>
                <span>&nbsp;</span>
                <span class="letra preto" style="animation-delay: 1.6s;">I</span>
                <span class="letra branco" style="animation-delay: 1.7s;">M</span>
                <span class="letra azul" style="animation-delay: 1.8s;">O</span>
                <span class="letra preto" style="animation-delay: 1.9s;">R</span>
                <span class="letra branco" style="animation-delay: 2s;">T</span>
                <span class="letra azul" style="animation-delay: 2.1s;">A</span>
                <span class="letra preto" style="animation-delay: 2.2s;">L</span>
            </h1>
            <p>Onde ecoa o hino, pulsa a paixão azul, preta e branca!</p>
        </div>
    </div>
    <div style="text-align: center;">
        <audio id="meuAudio">
            <source src="/sitegremio/front-end/arquivos/aud/Hino do Grêmio.mp3" type="audio/mpeg">
            Seu navegador não suporta a tag de áudio.
        </audio>

        <div id="gifContainer"></div>
        <button id="playButton">♫ TOCAR HINO!</button>
    </div>

    <section class="container content" style="margin-bottom: 50px;">
        <hr>
        <h3>O maior do Sul</h3>
        <p>

            Ok, vamos ser justos: o Inter tem Mundial, sim. Mas quando o assunto é grandeza, tradição e peso da camisa,
            o Grêmio continua sendo o maior do Sul — e não é por acaso.

            O Grêmio tem história escrita com raça e títulos. Somos tricampeões da América, temos uma torcida fiel que
            canta até nos momentos mais difíceis, e um clube que nunca abaixa a cabeça.
            Não é só sobre taça, é sobre identidade, paixão e presença.

            Enquanto alguns vivem de um grande momento, o Grêmio constrói uma história consistente. Está nos livros, nos
            gramados e no coração da sua torcida:

            "Grêmio não se compara, se respeita!"

            Imortal Tricolor: mais que um time, uma nação. 💙🤍🖤
        </p>
        <br>
        <hr>
    </section>

    <div class="espaço"></div>

    <footer>
        <a href="#">&copy; Túlio T. Dutra e</a>  <a href="#">Kauê T. Barbosa ♕</a>
    </footer>

    <script src="/sitegremio/front-end/arquivos/script.js"></script>
</body>

</html>