portalMultiverso/noticia1.html at main · PettaDev/portalMultiverso · 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
135
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Um site de notícias Geek para você ficar atualizado">
    <title>Notícias GEEK</title>
    <link rel="stylesheet" type="text/css" href="estilos.css">
    <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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Righteous&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Sarala:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Righteous&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
    <!-- Para colocar cabeçalho da página -->
    <header class="cabecalho">
        <img class="cabecalho-logo" src="imgs/logo1.svg" href="index.html" alt="Logo do site geek">
        <nav class="cabecalho-menu">
            <a class="cabecalho-menu-item" href="index.html">Home</a>
            <a class="cabecalho-menu-item" href="https://discord.gg/geek" target="_blank">Comunidade</a>
            <a class="cabecalho-menu-item" href="noticia1.html">Notícias</a>
            <a class="cabecalho-menu-item" href="faq.html">FAQ</a>
        </nav>
        <div class="menuH">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div>
    </header>

    <!-- Corpo da página -->
    <main class="container">
        <span class="titulo-card">Top 3 Jogos de 2023</span>
        <div class="card-container">
            <div class="card">
                <img src="imgs/baldurs-gate-3-1024x576.jpg">
                <div class="card-content">
                    <h1>Baldur's Gate III</h1>
                    <p>Jogo do Ano pela The Game Awards e já é tido por muitos como o melhor RPG de todos os tempos.</p>
                    <a href="https://baldursgate3.game/" class="card-button" target="_blank">R$ 199,99</a>
                </div>
            </div>
            <div class="card">
                <img src="imgs/zelda-tears-kingdom-rating-1024x576.jpg">
                <div class="card-content">
                    <h1>Zelda</h1>
                    <p>Tears of the Kingdom é não só um dos melhores jogos de 2023, mas também um dos melhores jogos de todos os tempos.</p>
                    <a href="https://www.nintendo.com/pt-br/store/products/the-legend-of-zelda-tears-of-the-kingdom-switch/" class="card-button" target="_blank">R$ 357,99</a>
                </div>
            </div>
            <div class="card">
                <img src="imgs/metroid-prime-1024x576.jpg">
                <div class="card-content">
                    <h1>Metroid Prime</h1>
                    <p>Metroid é um deleite para os fãs nostálgicos e uma introdução emocionante para os novos jogadores. </p>
                    <a href="https://www.nintendo.com/pt-br/store/products/metroid-prime-remastered-switch/" class="card-button" target="_blank">R$ 199,00</a>
                </div>
            </div>
        </div>
            <span class="titulo-card">Cinema e TV</span>
            <div class="card-container">
                <div class="card">
                   <img src="imgs/mandaloriam1024.jpg">
                    <div class="card-content">
                        <h1>The Mandalorian</h1>
                        <p>A série "The Mandalorian", do universo Star Wars, está sendo muito bem recebida pela crítica e pelos fãs, principalmente devido ao personagem Baby Yoda.</p>
                        <a href="https://www.disney.com.br/disneyplus/the-mandalorian" class="card-button" target="_blank">Assista</a>
                    </div>
                </div>
                <div class="card">
                    <img src="imgs/no way home.jpg">
                     <div class="card-content">
                         <h1>Homem-Aranha</h1>
                         <p>"Homem-Aranha: Sem volta para Casa" | grande sucesso de bilheteria e foi elogiado pela forma como lidou com o multiverso e como trouxe personagens antigos.</p>
                         <a href="https://www.primevideo.com/-/pt/detail/Spider-Man-No-Way-Home/0SDO00WXTPDLAM99CK7DB9ZMPT" class="card-button" target="_blank">Assista</a>
                     </div>
                 </div>

            </div>

    </main>

    <!-- Rodapé da página -->
        <footer>
            <ul class="social_icon">
                <li><a href="https://github.com/PettaDev" target="_blank"><ion-icon name="logo-github"></ion-icon></a></li>
                <li><a href="https://www.linkedin.com/in/gustavoteixeira2005/" target="_blank"><ion-icon name="logo-linkedin"></ion-icon></a></li>
            </ul>
            <p style="color: white;">©PettaDev | All Rights Reserved</p>
        </footer>

        <script>
            const body = document.querySelector("body");
            const barras = document.querySelectorAll(".bar"); // Capturando as barras do menu Hambúrger.
            const telaMenu = document.querySelector("nav"); // Capturando a tela do menu Hambúrger.
            let menuAtivado = false;
            console.log(body, barras[0], barras[1], barras[2], telaMenu)
            document.addEventListener("click", event => {
                    const element = event.target;

                    if(element.classList.contains("bar") || element.classList.contains("menuH")){
                        let menu = [barras[0], barras[1], barras[2]];

                        if(menuAtivado){ // Usando codição de ímpar ou par no contador.
                            menu[0].style.transform = "rotate(0deg) translate(0px, 0px)";
                            menu[1].style.opacity = "1";
                            menu[2].style.transform = "rotate(0deg) translate(0px, 0px)";
                            body.classList.remove("overfHidden");
                            telaMenu.style.display = "none";

                            return menuAtivado = false;
                        };

                        // Não será acionado o trecho abaixo, caso a condição acima seja verdadeira por conta do "return".
                        menu[0].style.transform = "rotate(-45deg) translate(-8px, 8px)";
                        menu[1].style.opacity = "0";
                        menu[2].style.transform = "rotate(45deg) translate(-8px, -8px)";
                        body.classList.add("overfHidden");
                        telaMenu.style.display = "flex";

                        menuAtivado = true;
                    };

                    if(element.classList.contains('btn')){
                        setTimeout(()=>{
                            let btn = document.querySelector(".btn");
                        },)
                    }
                });
        </script>

        <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>
</html>