HTML-e-CSS/index.html at main · melnik1808/HTML-e-CSS · 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
<!DOCTYPE html><html lang="pt-BR"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>O Chapéu Seletor de Hogwarts</title>
    <link rel="stylesheet" href="style.css"></head><body>

    <div class="container">
        <section class="secao-chapeu">
            <h1>O Chapéu Seletor</h1>
            <p>Descubra a qual casa de Hogwarts você pertence!</p>

            <button id="btn-selecionar">Colocar o Chapéu</button>

            <div id="resultado" class="escondido">
                <h2>Sua casa é...</h2>
                <p id="nome-casa"></p>
            </div>
        </section>

        <section class="secao-personagens">
            <h2>Personagens Principais</h2>
            <div class="grid-personagens">
                <div class="card-personagem grifinoria">
                    <h3>Harry Potter</h3>
                    <span class="tag-casa">Grifinória</span>
                    <p>O "Menino que Sobreviveu", famoso por derrotar Lord Voldemort quando bebê e o herói principal da saga.</p>
                </div>

                <div class="card-personagem grifinoria">
                    <h3>Hermione Granger</h3>
                    <span class="tag-casa">Grifinória</span>
                    <p>A bruxa mais brilhante de sua idade. Sua inteligência e raciocínio rápido salvaram o trio inúmeras vezes.</p>
                </div>

                <div class="card-personagem grifinoria">
                    <h3>Rony Weasley</h3>
                    <span class="tag-casa">Grifinória</span>
                    <p>O melhor amigo de Harry, vindo de uma grande família bruxa. É leal e ótimo em xadrez bruxo.</p>
                </div>

                <div class="card-personagem corvinal">
                    <h3>Luna Lovegood</h3>
                    <span class="tag-casa">Corvinal</span>
                    <p>Uma bruxa excêntrica, mas extremamente inteligente e observadora, que vê o mundo de forma única.</p>
                </div>

                <div class="card-personagem sonserina">
                    <h3>Severo Snape</h3>
                    <span class="tag-casa">Sonserina</span>
                    <p>O misterioso mestre das poções cujas verdadeiras lealdades permanecem um mistério até o fim da saga.</p>
                </div>
            </div>
        </section>

        <section class="secao-filmes">
            <h2>A Saga dos 8 Filmes</h2>
            <div class="linha-tempo-filmes">
                <article class="filme">
                    <h3>1. Pedra Filosofal (2001)</h3>
                    <p>Harry descobre que é um bruxo, vai para Hogwarts e protege a Pedra Filosofal de Voldemort.</p>
                </article>

                <article class="filme">
                    <h3>2. A Câmara Secreta (2002)</h3>
                    <p>Um monstro antigo é libertado em Hogwarts, petrificando alunos. Harry precisa encontrar a Câmara.</p>
                </article>

                <article class="filme">
                    <h3>3. O Prisioneiro de Azkaban (2004)</h3>
                    <p>O perigoso assassino Sirius Black foge de Azkaban e segredos sobre o passado de Harry vêm à tona.</p>
                </article>

                <article class="filme">
                    <h3>4. O Cálice de Fogo (2005)</h3>
                    <p>Harry participa do perigoso Torneio Tribruxo, que culmina no temido retorno físico de Lord Voldemort.</p>
                </article>

                <article class="filme">
                    <h3>5. A Ordem da Fênix (2007)</h3>
                    <p>Harry treina secretamente a "Armada de Dumbledore" para se preparar para a guerra eminente.</p>
                </article>

                <article class="filme">
                    <h3>6. O Enigma do Príncipe (2009)</h3>
                    <p>Harry descobre o segredo da imortalidade de Voldemort através do estudo das Horcruxes.</p>
                </article>

                <article class="filme">
                    <h3>7. Relíquias da Morte - Parte 1 (2010)</h3>
                    <p>O trio deixa Hogwarts e viaja pelo mundo para caçar e destruir as Horcruxes de Voldemort.</p>
                </article>

                <article class="filme">
                    <h3>8. Relíquias da Morte - Parte 2 (2011)</h3>
                    <p>O confronto final com a épica Batalha de Hogwarts, decidindo o destino do mundo bruxo.</p>
                </article>
            </div>
        </section>
    </div>

    <script src="script.js"></script></body></html>
</html>