8
respostas

[Projeto] Desafio: pagina de favoritos/minha biografia

Boa noite, fiz meu primeiro projeto meio que mesclando uma pagina de favoritos, meio uma semi biografia dos meus gostos. aceito também dicas de como eu poderia melhorar essa minha pagina.

Pagina Inicial

INDEX.HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>É DISSO QUE EU GOSTO</title>
    <link rel="stylesheet" href="./style/style.css">
</head>
<body>
   <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="index.html">Eu</a>
            <a class="cabecalho__menu__link" href="musicas.html">Musicas</a>
            <a class="cabecalho__menu__link" href="filmes.html">Filmes</a>
            <a class="cabecalho__menu__link" href="series.html">Series</a>
            <a class="cabecalho__menu__link" href="animes-hqs.html">Animes/HQs</a>
        </nav>
   </header>
   <main class="apresentacao">
    <section class="apresentacao__conteudo">
        <h1 class="apresentacao__conteudo__titulo">Eu sou <strong class="titulo-destaque">Gabriel Hods</strong></h1>
        <p class="apresentacao__conteudo__texto">Olá! Meu nome é Gabriel Hods, entusiasta em tecnologia, amante de músicas diferentonas e fora do padrão, fã de boas histórias contadas, independentemente da mídia em que aparecem.
        Em geral, eu sempre acabo gostando de coisas únicas e que boa parte das pessoas não conhece ou que já não estão mais tão em alta, ou mesmo se perdendo no tempo.</p>
        <p class="apresentacao__conteudo__texto">Atualmente, estou estudando FRONT-END e estou curtindo muito o processo de aprendizagem. Mas também sou curioso em design gráfico, a parte visual sempre me pega de jeito, hehehe.</p>
        <p class="apresentacao__conteudo__texto">Quero acreditar que um dia meus hobbies e criações possam chegar a mais pessoas, para que todas tenham a chance de conhecer esse universo imenso de coisas interessantes e legais, em que me baseio e referencio, me fazendo ser criativo.</p>    
    <div class="apresentacao__links">
        <h2 class="apresentacao__links__subtitulo">Conheça meus Hobbies</h2>
        <a class="apresentacao__links__link" href="https://www.youtube.com/@explorermindschannel">
            <img src="./assets/youtube.png">
            YouTube
        </a>
        <a class="apresentacao__links__link" href="https://www.deviantart.com/explorerminds">
            <img src="./assets/devianart.png">
            DeviantART
        </a>
        <a class="apresentacao__links__link" href="https://explorermindspage.blogspot.com/">
            <img src="./assets/blogger.png">
            Blogger
        </a>
    </div>
    </section>
    <a class="apresentacao__links__profile">
        <img src="/assets/Profile.png" alt="Foto do Gabriel Hods">
    </a>
   </main>
   <footer class="rodape">
    <p>GHODS entertainment 2025 All Rights Reserved</p>
   </footer> 
</body>
</html>
8 respostas

Pagina Musicas

MUSICAS.HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Musicas</title>
    <link rel="stylesheet" href="./style/style.css">
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="index.html">Eu</a>
            <a class="cabecalho__menu__link" href="musicas.html">Musicas</a>
            <a class="cabecalho__menu__link" href="filmes.html">Filmes</a>
            <a class="cabecalho__menu__link" href="series.html">Series</a>
            <a class="cabecalho__menu__link" href="animes-hqs.html">Animes/HQs</a>
        </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao__grid__conteudo">
        <h1 class="apresentacao__conteudo__titulo">É aqui que eu me <strong class="titulo-destaque">desconecto...</strong></h1>
        <p class="apresentacao__conteudo__texto">Posso até dizer que o que me tornei hoje, como pessoa, devo muito a isso: tanto na época em que era apenas um jovem revoltado e que fazia muita merda ouvindo Korn e Deadmau5, quanto quando fui para camadas mais profundas de muitos sentimentos com Nine Inch Nails, ou até mesmo quando queria apenas relaxar e pensar na vida com Pink Floyd.</p>
        <p class="apresentacao__conteudo__texto">Tenho como referência pessoas geniais e criativas que passaram por muita coisa, pelo fundo do poço e pela superação: Trent Reznor e Jonathan Davis, os pais do estilo industrial e nu metal. Por onde esses caras passam, pode ter certeza de que tem coisa boa.</p>
        <p class="apresentacao__conteudo__texto">E apenas uma ressalva: qual a dificuldade de juntarem o NIN com o Korn em um show só, caras? Sei que o JD é fã de Nine Inch Nails, e olha só que foda, o Trent é fã de Pink Floyd. Isso que eu fico sempre pensando: as coisas boas sempre serão referenciadas em trabalhos novos de outros artistas.</p>
        <div class="imagens__grid">
            <a href="https://pt.wikipedia.org/wiki/Nine_Inch_Nails" target="_blank">
            <figure class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/nin-logo.jpg" alt="Foto da banda Nine Inch Nails">
                <figcaption>Nine Inch Nails</figcaption>
            </figure>
            </a>
            <a href="https://pt.wikipedia.org/wiki/Korn" target="_blank">
            <figure  class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/korn-logo.png" alt="Foto da banda Korn">
                <figcaption>Korn</figcaption>
            </figure>
            </a>
            <a href="https://pt.wikipedia.org/wiki/Deadmau5" target="_blank">
            <figure  class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/Deadmau5-Logo.jpg" alt="Foto do DJ Deadmau5">
            <figcaption>Deadmau5</figcaption>
            </figure></a>
            <a href="https://pt.wikipedia.org/wiki/The_Prodigy" target="_blank">
            <figure  class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/the-prodigy-logo.jpg" alt="Foto da banda The Prodigy">
            <figcaption>The Prodigy</figcaption>
            </figure></a>
            <a href="https://pt.wikipedia.org/wiki/Pink_Floyd" target="_blank">
            <figure  class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/pink-floyd-logo.jpg" alt="Foto da banda Pink Floyd">
            <figcaption>Pink Floyd</figcaption>
            </figure></a>
            <a href="https://pt.wikipedia.org/wiki/Muse" target="_blank">
            <figure  class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/muse-logo.jpg" alt="Foto da banda Muse">
            <figcaption>Muse</figcaption>
            </figure></a>
            <a href="https://pt.wikipedia.org/wiki/Foo_Fighters" target="_blank">
            <figure  class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/foo-fighters-logo.png" alt="Foto da banda Foo Fghters">
            <figcaption>Foo Fighters</figcaption>
            </figure></a>
            <a href="https://pt.wikipedia.org/wiki/Pendulum" target="_blank">
            <figure  class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/Pendulum-logo.png" alt="Foto da banda Pendulum">
            <figcaption>Pendulum</figcaption>
            </figure></a>
        </div>
    </section>
    </main>
    <footer class="rodape">
        <p>GHODS entertainment 2025 All Rights Reserved</p>
       </footer> 
</body>
</html>

Pagina Filmes

FILMES.HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Filmes</title>
    <link rel="stylesheet" href="./style/style.css">
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="index.html">Eu</a>
            <a class="cabecalho__menu__link" href="musicas.html">Musicas</a>
            <a class="cabecalho__menu__link" href="filmes.html">Filmes</a>
            <a class="cabecalho__menu__link" href="series.html">Series</a>
            <a class="cabecalho__menu__link" href="animes-hqs.html">Animes/HQs</a>
        </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao__grid__conteudo">
        <h1 class="apresentacao__conteudo__titulo">Parar para refletir ? <strong class="titulo-destaque">(ou não)</strong></h1>
        <p class="apresentacao__conteudo__texto">Adoro aquela trama que, de algum jeito, te surpreende, fazendo algo muito foda, seja em uma história nunca vista antes, mostrando uma forma nova de ver os pecados capitais ou apenas apresentando uma criatura incrível (eu amo Alien, hehehe). Não me importo também se, às vezes, fica um final aberto; se for bem feito, eu levo tranquilamente. E, como vocês já perceberam, sou muito fã de Christopher Nolan e David Fincher. Me falem se tem algum filme deles que não é bom.</p>
        <p class="apresentacao__conteudo__texto">Indo para curiosidades inúteis (hehehe), Fincher já afirmou em textos da internet que gosta de trabalhar com Trent Reznor, do Nine Inch Nails. Sendo assim, temos a obra-prima "Se7en" tocando "Closer", e temos a trilha sonora feita por ele também. Mais uma? O pedestal de JD, do Korn, chamado de "The Bitch", é feito por H.R. Giger, o mesmo responsável pela criação visual de Alien. Parece que temos incríveis artistas referenciando outros incríveis artistas.</p>
        <div class="imagens__grid">
            <a href="https://www.imdb.com/pt/title/tt0114369/?ref_=nv_sr_srsg_0_tt_5_nm_3_in_0_q_se7e" target="_blank">
            <figure class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/se7en-logo.jpg" alt="Foto do Filme Seven">
            <figcaption>Se7en (1995)</figcaption>
            </figure></a>
            <a href="https://www.imdb.com/pt/title/tt0078748/?ref_=nv_sr_srsg_2_tt_6_nm_0_in_0_q_alien" target="_blank">
            <figure class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/alien-logo.jpg" alt="Foto do Filme Alien">
            <figcaption>Alien (1979)</figcaption>
            </figure></a>
            <a href="https://www.imdb.com/pt/title/tt1130884/?ref_=nv_sr_srsg_0_tt_8_nm_0_in_0_q_ilha%2520do%2520medo" target="_blank">
            <figure class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/ilha-do-medo-logo.jpg" alt="Foto do Filme Ilha do medo">
            <figcaption>Ilha do Medo (2010)</figcaption>
            </figure></a>
            <a href="https://www.imdb.com/pt/title/tt0209144/?ref_=nv_sr_srsg_4_tt_8_nm_0_in_0_q_amnesia" target="_blank">
            <figure class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/amnesia.jpg" alt="Foto do Filme Amnesia">
            <figcaption>Amnesia (2000)</figcaption>
            </figure></a>
            <a href="https://www.imdb.com/pt/title/tt1375666/?ref_=fn_all_ttl_1" target="_blank">
            <figure class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/a-origem-logo.jpg" alt="Foto do Filme A origem">
            <figcaption>A origem (2010)</figcaption>
            </figure></a>

CONTINUAÇÃO FILMES.HTML

<a href="https://www.imdb.com/pt/title/tt2267998/?ref_=nv_sr_srsg_1_tt_7_nm_0_in_0_q_garota%2520ex" target="_blank">
            <figure class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/garota-exemplar-logo.jpg" alt="Foto do Filme Garota Exemplar">
            <figcaption>Garota Exemplar (2014)</figcaption>
            </figure></a>
            <a href="https://www.imdb.com/pt/title/tt27911000/?ref_=nv_sr_srsg_0_tt_8_nm_0_in_0_q_terrifie" target="_blank">
            <figure class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/terrifier-3-logo.jpg" alt="Foto do Filme Terrifier 3">
            <figcaption>Terrifier 3 (2024)</figcaption>
            </figure></a>
            <a href="https://www.imdb.com/pt/title/tt8772262/?ref_=nv_sr_srsg_3_tt_8_nm_0_in_0_q_midsomar" target="_blank">
            <figure class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/midsomar-logo.jpg" alt="Foto do Filme Midsomar">
            <figcaption>Midsomar (2019)</figcaption>
            </figure></a>
            <a href="https://www.imdb.com/pt/title/tt1502407/?ref_=nv_sr_srsg_3_tt_8_nm_0_in_0_q_halloween%2520" target="_blank">
            <figure class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/hallowenn-logo.jpg" alt="Foto do Filme Halloween">
            <figcaption>Halloween (2018)</figcaption>
            </figure></a>
            <a href="https://www.imdb.com/pt/title/tt0133093/?ref_=nv_sr_srsg_1_tt_7_nm_0_in_0_q_matrix" target="_blank">
            <figure class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/Matrix-logo.webp" alt="Foto do Filme Matrix">
            <figcaption>Matrix (1999)</figcaption>
            </figure></a>
            <a href="https://www.imdb.com/pt/title/tt0107290/?ref_=nv_sr_srsg_0_tt_8_nm_0_in_0_q_jurassic%2520park" target="_blank">
            <figure class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/jurassic-park-logo.webp" alt="Foto do Filme Jurrassic Park">
            <figcaption>Jurassic Park (1993)</figcaption>
            </figure></a>
        </div>
    </section>
    </main>
    <footer class="rodape">
        <p>GHODS entertainment 2025 All Rights Reserved</p>
       </footer> 
</body>
</html>

Pagina Series

SERIES.HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Series</title>
    <link rel="stylesheet" href="./style/style.css">
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="index.html">Eu</a>
            <a class="cabecalho__menu__link" href="musicas.html">Musicas</a>
            <a class="cabecalho__menu__link" href="filmes.html">Filmes</a>
            <a class="cabecalho__menu__link" href="series.html">Series</a>
            <a class="cabecalho__menu__link" href="animes-hqs.html">Animes/HQs</a>
        </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao__grid__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Só mais um <strong class="titulo-destaque">episódio.</strong></h1>
        <p class="apresentacao__conteudo__texto">Mitologias que podem ser criadas e trabalhadas em uma série: não há muitos filmes que conseguem fazer igual. Com muito mais tempo de tela, muitas camadas e profundidades são criadas para os personagens, fazendo aquela sensação de sempre querer assistir a pelo menos mais um episódio.</p>
        <p class="apresentacao__conteudo__texto">Você vê o percurso da vida de Walter White, de um simples professor de química a alguém a ser temido no mundo do tráfico, ou até mesmo descobre o que está acontecendo na cabeça de Elliot Alderson; ninguém esperava aquele final. O que eu acho mais incrível é quando um mesmo escritor, Vince Gilligan, emplaca dois grandes sucessos: "Breaking Bad" e "Arquivo X". Tem que ser muito gênio para conseguir essa dádiva.</p>
        <div class="imagens__grid">
            <a href="https://www.imdb.com/pt/title/tt0106179/?ref_=nv_sr_srsg_0_tt_8_nm_0_in_0_q_arquivo%2520x" target="_blank">
            <figure class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/The-X-Files-logo.jpg" alt="Foto da Serie Arquivo X">
            <figcaption>Arquivo X (1993 - 2018)</figcaption>
            </figure></a>
            <a href="https://www.imdb.com/pt/title/tt1124373/?ref_=nv_sr_srsg_0_tt_8_nm_0_in_0_q_sons%2520o" target="_blank">
            <figure class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/soa-logo.jpg" alt="Foto da Serie Sons Of Anarchy">
            <figcaption>Sons Of Anarchy (2008 - 2014)</figcaption>
            </figure></a>
            <a href="https://www.imdb.com/pt/title/tt2306299/?ref_=nv_sr_srsg_0_tt_8_nm_0_in_0_q_vikings" target="_blank"><figure class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/vikings-logo.jpg" alt="Foto da Serie Vikings"><figcaption>Vikings (2013 - 2020)</figcaption>
            </figure></a>
            <a href="https://www.imdb.com/pt/title/tt0903747/?ref_=nv_sr_srsg_0_tt_7_nm_1_in_0_q_breaking%2520" target="_blank"><figure class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/breaking-bad-logo.jpeg" alt="Foto da Serie Breaking Bad">
            <figcaption>Breaking Bad (2008 - 2013)</figcaption></figure></a>
            <a href="https://www.imdb.com/pt/title/tt2741602/?ref_=nv_sr_srsg_0_tt_6_nm_2_in_0_q_blacklist" target="_blank"><figure class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/the-blacklist-logo.jpg" alt="Foto da Serie Blacklist">
            <figcaption>Blacklist (2013 - 2023)</figcaption></figure></a>
            <a href="https://www.imdb.com/pt/title/tt4158110/?ref_=nv_sr_srsg_0_tt_7_nm_1_in_0_q_mr%2520robot" target="_blank"><figure class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/mr-robot-logo.jpg" alt="Foto da Serie Mr Robot">
            <figcaption>Mr Robot (2015 - 2019)</figcaption></figure></a>
            <a href="https://www.imdb.com/pt/title/tt2861424/?ref_=nv_sr_srsg_0_tt_8_nm_0_in_0_q_rick%2520and%2520" target="_blank"><figure class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/rick-and-morty-poster.jpg" alt="Foto da Serie Rick And Morty">
            <figcaption>Rick And Morty (2013 - ATUAL)</figcaption></figure></a>
            <a href="https://www.imdb.com/pt/title/tt0229889/?ref_=nv_sr_srsg_0_tt_8_nm_0_in_0_q_el%2520chavo" target="_blank">
            <figure class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/chaves.jpg" alt="Foto da Serie Chaves">
                <figcaption>Chaves (1973 - 1980)</figcaption></figure></a>
        </div>
    </section>
    </main>
    <footer class="rodape">
        <p>GHODS entertainment 2025 All Rights Reserved</p>
       </footer> 
</body>
</html>

Pagina Anime e HQs

ANIMES E HQs.HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animes e HQs</title>
    <link rel="stylesheet" href="./style/style.css">
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="index.html">Eu</a>
            <a class="cabecalho__menu__link" href="musicas.html">Musicas</a>
            <a class="cabecalho__menu__link" href="filmes.html">Filmes</a>
            <a class="cabecalho__menu__link" href="series.html">Series</a>
            <a class="cabecalho__menu__link" href="animes-hqs.html">Animes/HQs</a>
        </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao__grid__conteudo">
        <h1 class="apresentacao__conteudo__titulo"><strong class="titulo-destaque">Zawarudo</strong> ou <strong class="titulo-destaque">Ave Fênix</strong> ?</h1>
    <p class="apresentacao__conteudo__texto">O mundo dos animes e histórias em quadrinhos foi a porta de entrada para esse mundo de criação e fantasia. Sempre fiquei preso nessas coisas e até hoje nunca larguei. Tudo bem que tenho minha opinião sobre adaptações: prefiro, ao invés do mangá, a história adaptada em anime, e, em contrapartida, prefiro as HQs às histórias feitas em filmes. A propósito, acho que poucas pessoas estão preferindo os filmes de super-herói nos cinemas.</p>
    <p class="apresentacao__conteudo__texto">Pensando bem, a arte desenhada quebra os limites da criatividade. Você pode desenhar o que quiser, em qualquer tipo de universo, sem se limitar a atores, diretores ou cenas quase impossíveis de serem criadas.</p>
    <p class="apresentacao__conteudo__texto">É incrível um mundo onde existe um caderninho em que eu escrevo o nome de uma pessoa e ela morre (hehehe).</p>
        <div class="imagens__grid">
            <a href="https://www.imdb.com/pt/title/tt0434665/?ref_=nv_sr_srsg_0_tt_7_nm_1_in_0_q_bleach" target="_blank">
            <figure class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/bleach-logo.jpeg" alt="Foto do anime Bleach">
            <figcaption>Bleach (2004 - ATUAL)</figcaption>
            </figure></a>
            <a href="https://www.imdb.com/pt/title/tt2359704/?ref_=nv_sr_srsg_6_tt_2_nm_6_in_0_q_jojo" target="_blank">
            <figure  class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/jojo-poster.jpg" alt="Foto do anime jojo">
            <figcaption>Jojo (2012 - ATUAL)</figcaption>
            </figure></a>
            <a href="https://www.imdb.com/pt/title/tt0161952/?ref_=nv_sr_srsg_0_tt_8_nm_0_in_0_q_saint%2520se" target="_blank">
            <figure  class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/saint-seiya-logo.jpg" alt="Foto do anime cavaleiros do zodiaco">
            <figcaption>Cavaleiros do Zodiaco (1994 - 2004)</figcaption>
            </figure></a>
            <a href="https://www.imdb.com/pt/title/tt0210418/?ref_=nv_sr_srsg_0_tt_8_nm_0_in_0_q_digimon" target="_blank">
            <figure  class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/digimon-logo.jpg" alt="Foto do anime digimon">
            <figcaption>Digimon Adventure (1999 - 2000)</figcaption>
            </figure></a>
            <a href="https://www.imdb.com/pt/title/tt0877057/?ref_=nv_sr_srsg_1_tt_7_nm_0_in_0_q_death%2520n" target="_blank">
            <figure  class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/death-note-logo.jpg" alt="Foto do anime death note">
            <figcaption>Death Note (2006 - 2007)</figcaption>
            </figure></a>
            <a href="https://www.imdb.com/pt/title/tt0495212/?ref_=nv_sr_srsg_3_tt_5_nm_3_in_0_q_hellsing%2520" target="_blank">
            <figure  class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/hellsing-logo.jpg" alt="Foto do anime Hellsing Ultimate">
            <figcaption>Hellsin Ultimate (2006 - 2012)</figcaption>
            </figure></a>
            <a href="https://www.imdb.com/pt/title/tt13616990/?ref_=nv_sr_srsg_0_tt_8_nm_0_in_0_q_chainsaw" target="_blank">
            <figure  class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/chainsaw-man-logo.jpg" alt="Foto do anime Chainsaw man">
            <figcaption>Chainsaw Man (2022 - ATUAL)</figcaption>
            </figure></a>

CONTINUAÇÃO ANIMES E HQs.HTML

<a href="https://www.imdb.com/pt/title/tt9335498/?ref_=nv_sr_srsg_0_tt_8_nm_0_in_0_q_demon%2520sla" target="_blank">
            <figure  class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/demon-slayer-logo.jpg" alt="Foto do anime Demom slayer">
            <figcaption>Demon Slayer (2019 - ATUAL)</figcaption>
            </figure></a>
            <a href="https://marvel.fandom.com/wiki/Avengers_vs._X-Men_(Event)" target="_blank">
            <figure  class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/AvsX-logo.jpg" alt="Foto do hq vingadores vs xmen">
            <figcaption>Vingadores VS X-Men HQ (2012)</figcaption>
            </figure></a>
            <a href="https://marvel.fandom.com/pt-br/wiki/Dinastia_M" target="_blank">
            <figure  class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/dinastia-m-logo.jpg" alt="Foto do hq dinastia M">
            <figcaption>Dinastia M HQ (2005)</figcaption>
            </figure></a>
            <a href="https://marvel.fandom.com/pt-br/wiki/Guerra_Civil_(Evento)" target="_blank">
            <figure  class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/guerra-civil-logo.jpg" alt="Foto do hq guerra civil">
            <figcaption>Gurra Civil HQ (2006 - 2007)</figcaption>
            </figure></a>
            <a href="https://marvel.fandom.com/pt-br/wiki/Guerra_Civil_II" target="_blank">
            <figure  class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/guerra-civil2-logo.webp" alt="Foto do hq guerra civil 2">
            <figcaption>Gurra Civil 2 HQ (2016)</figcaption>
            </figure></a>
            <a href="https://marvel.fandom.com/wiki/Infinity_Gauntlet_(Event)" target="_blank">
            <figure  class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/saga-infinito-logo.jpg" alt="Foto do hq saga do infinito">
            <figcaption>Desafio do Infinito HQ (1999)</figcaption>
            </figure></a>
            <a href="https://marvel.fandom.com/pt-br/wiki/Guerras_Secretas_(Evento_de_2015)" target="_blank">
            <figure  class="itens__descricao">
                <img class="imagens__grid__scale" src="/assets/secret-wars-logo.jpg" alt="Foto do hq guerras secretas">
            <figcaption>Guerras Secretas HQ (2015)</figcaption>
            </figure></a>
        </div>
    </section>
    </main>
    <footer class="rodape">
        <p>GHODS entertainment 2025 All Rights Reserved</p>
       </footer> 
</body>
</html>

STYLE.CSS

@import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Condensed:wght@100;200;300;400;500;600;700;800;900&family=Zen+Dots&display=swap');

:root {
    --cor-primaria: #00224D;
    --cor-secundaria: #A0153E;
    --cor-terciaria: #FF204E;
    --cor-hover: #5D0E41;

    --fonte-primaria: "Zen Dots", sans-serif;
    --fonte-secundaria: "Encode Sans Condensed", sans-serif;
}

*{
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none; /* Remove o sublinhado */
    color: inherit; /* Mantém a cor do texto igual à cor do elemento pai */
}

body{
    box-sizing: border-box;
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
}

.cabecalho {
    padding: 0% 5% 0% 0%;
    background-color: var(--cor-terciaria);
}

.cabecalho__menu {
    display: flex;
    justify-content: flex-end;
    position: relative;
    gap: 80px;
}

.cabecalho__menu__link {
    font-family: var(--fonte-secundaria);
    font-size: 24px;
    font-weight: 600;   
    font-size: 30px;
    position: relative;
    z-index: 1;
    color: var(--cor-primaria);
    text-decoration: none;
}

.cabecalho__menu__link::before {
    font-family: var(--fonte-secundaria);
    font-size: 24px;
    font-weight: 600;   
    font-size: 30px;
    content: "";
    position: absolute;
    background-color: #ccc;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transform: scale(0);
    z-index: -1;
}

.cabecalho__menu__link:hover::before {
    color: var(--cor-hover);
    background-color: #ce072f;
    height: 100%;
    transform: scale(1);
    border-top: 3px solid #80001a;
    border-left: 3px solid #80001a;
}

.titulo-destaque{
    color: var(--cor-terciaria);
}

.apresentacao{
    padding: 3% 5%;
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.apresentacao__conteudo{
    width: 1080px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.imagens__grid{
    display: flex;
    flex-wrap: wrap;
    padding: 5%;
    align-content: flex-start;
    justify-content: center;
    gap: 40px;
}

.itens__descricao {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: var(--fonte-secundaria);
    font-size: 24px;
    text-align: center;
    font-weight: 700;
}

.imagens__grid__scale{
    width: 200px;
    height: 250px;
}

.apresentacao__grid__conteudo{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.apresentacao__conteudo__titulo{
    font-size: 36px;
    font-family: var(--fonte-primaria);
}

.apresentacao__conteudo__texto{
    font-size: 24px;
    font-family: var(--fonte-secundaria);
}

.apresentacao__links{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.apresentacao__links__subtitulo{
    font-family: var(--fonte-primaria);
    font-weight: 400;
    font-size: 24px;
}

.apresentacao__links__link { 
    border: 2px solid var(--cor-terciaria);
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 378px;
    text-align: center;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    clip-path: polygon(25% 0%, 100% 0, 75% 100%, 0% 100%);
    color: var(--cor-secundaria);
    background-color: #FF204E;
    font-family: var(--fonte-secundaria);
}

.apresentacao__links__profile img {
    max-width: 105%;
    height: auto;
}

.apresentacao__links__link:hover {
    cursor: pointer;
    background-color: var(--cor-hover);
}

.rodape {
    padding: 24px;
    color: var(--cor-primaria);
    background-color: var(--cor-terciaria);
    text-align: center;
    font-family: var(--fonte-secundaria);
    font-size: 24px;
    font-weight: 400;
}

Olá! Muito criativo! O projeto revela sua personalidade. Eu também amava The Prodigy quando era mais jovem. Em termos de design, recomendo deixar o fundo mais escuro ou a fonte bordô em vez de vermelha. Nesse cor do fundo, o texto principal é difícil de ler. Mas o projeto é seu, cabe a você decidir. Parabéns!