[Projeto] Projeto Página de favoritos | HTML e CSS: cabeçalho, footer e variáveis CSS

3
respostas

por CICERO BORGES

| 6.5k xp | 7 posts

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles/styles.css">
</head>

<body>
    <header>
        <nav class="menu">
            <h1 class="menu__titulo">MEUS ANIMES, SERIES E FILMES FAVORITOS</h1>
            <section class="menu__classes">
                <a class="meu__link" href="animes.html">ANIMES</a>
                <a class="meu__link" href="animes.html">SERIE</a>
                <a class="meu__link" href="animes.html">FILMES</a>
            </section>
        </nav>
    </header>
    <main class="conteudo-principal">
        <h2 class="titulo__secao">Filmes</h2>
        <section class="secao__conteudo">
            <img class="imagem__capa" src="./assets/filmes/TrovaoTropical.jpg" alt="Trovão Tropical">
            <img class="imagem__capa" src="./assets/filmes/Trilogiadosdolares.jpg" alt="Trilogia dos Dólares">
            <img class="imagem__capa" src="./assets/filmes/PsicopataAmericano.jpg" alt="Psicopata Americano">
            <img class="imagem__capa" src="./assets/filmes/ilhadomedo.jpg" alt="Ilha do medo">
            <img class="imagem__capa" src="./assets/filmes/ODuble.jpg" alt="O duble">
            <img class="imagem__capa" src="./assets/filmes/BatmanBegins.jpg" alt="">
            <img class="imagem__capa" src="./assets/filmes/DoisCarasLegais.jpg" alt="">
            <img class="imagem__capa" src="./assets/filmes/drive.jpg" alt="">
            <img class="imagem__capa" src="./assets/filmes/trainingday.jpg" alt="">
            <img class="imagem__capa" src="./assets/filmes/avengers-endgame-vingadores-ultimato.jpg" alt="">
        </section>
        <h2 class="titulo__secao">Animes</h2>        
        <section class="secao__conteudo">
            <img class="imagem__capa" src="./assets/Animes/hajimenoippo.jpg" alt="hajimenoippo">
            <img class="imagem__capa" src="./assets/Animes/onepiece.jpg" alt="onepiece">
            <img class="imagem__capa" src="./assets/Animes/berserk.jpg" alt="berserk">
            <img class="imagem__capa" src="./assets/Animes/bleach.jpg" alt="bleach">
            <img class="imagem__capa" src="./assets/Animes/dragonball.jpg" alt="dragonball">
            <img class="imagem__capa" src="./assets/Animes/FullmetalAlchemist.jpg" alt="FullmetalAlchemist">
            <img class="imagem__capa" src="./assets/Animes/hxh.png" alt="hunterxhunter">
            <img class="imagem__capa" src="./assets/Animes/jjk.jpg" alt="jjk">
            <img class="imagem__capa" src="./assets/Animes/kurokonobasket.jpg" alt="kurokonobasket">
            <img class="imagem__capa" src="./assets/Animes/onepunchman.jpg" alt="onepunchman">
        </section>
        <h2 class="titulo__secao">Serie</h2> 
         <section class="secao__conteudo">
            <img class="imagem__capa" src="./assets/Series/BreakingBad.jpg" alt="Breaking Bad">
            <img class="imagem__capa" src="./assets/Series/Game_of_Thrones_Temporada_1_Poster.jpg" alt="Game of Thrones">
            <img class="imagem__capa" src="./assets/Series/Dexter.jpg" alt="Dexter">
            <img class="imagem__capa" src="./assets/Series/bettercallsaul.jpg" alt="Better Call Saul">
            <img class="imagem__capa" src="./assets/Series/peaky-blinders.jpg" alt="Peaky Blinders">
            <img class="imagem__capa" src="./assets/Series/theoffice.jpg" alt="The Office">
            <img class="imagem__capa" src="./assets/Series/Vikings.jpg" alt="Vikings">
            <img class="imagem__capa" src="./assets/Series/Supernatural-Segunda_Temporada_(Blu-ray).jpg" alt="Supernatural">
            <img class="imagem__capa" src="./assets/Series/thebigbang.jpg" alt="The Big Bang Theory">
            <img class="imagem__capa" src="./assets/Series/doishomensemeio.jpg" alt="Two and a Half Men">
         </section>
    </main>
    <footer></footer>
</body>

</html>

3 respostas

por CICERO BORGES

| 6.5k xp | 7 posts

3 semanas atrás

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

*{
    margin: 0;
    padding: 0;
}

.menu{
    display: flex;
    justify-content: space-between;
    font-family: "Oswald", sans-serif;
    font-size: 18px;
    color: #8E1616;
    background-color: #000000 ;
    padding: 30px;
    
}

.menu:hover{
    background-color: #2A004E;
    
}
.menu__titulo:hover{
    color: #FCF259;
    transition: color 0.3s ease;
}


.menu__classes{
    
    font-size: 24px;
    font-weight: 600;
    display: flex;
    gap: 25px;
    
}

.meu__link{
    text-decoration: none;
    color: #8E1616;
}

.meu__link:hover{
    color: #FCF259;
    transition: color 0.3s ease;
}

.conteudo-principal{
    background-image: url('../assets/papel-de-parede-abstrato-de-fumaca-colorida-design-de-fundo-estetico.jpg');
    background-size: cover;
    
    min-height: 100vh
}
.titulo__secao{
    display: flex;
    justify-content: center;
    font-family: "Oswald", sans-serif;
    color: #FCF259;
    font-size: 30px;
    padding-top: 25px;

}
.secao__conteudo{
    display: flex;
    flex-wrap: wrap;
    padding: 30px;
    justify-content: center;
    gap: 30px;
}

.imagem__capa{
    flex: 1 1 180px; 
    max-width: 200px; 
    height: 300px;
    border-radius: 20px;
}

por CICERO BORGES

| 6.5k xp | 7 posts

3 semanas atrás

imagem do site com 90% de zoom

por Daniel Nogueira

| 618.9k xp | 1146 posts

Alura Scuba Team Analista de Suporte Educacional

2 semanas atrás

Olá, Cícero! Como vai?

Mandou muito bem no projeto! Continue resolvendo os desafios e compartilhando com a comunidade Alura.

Observei que você explorou o uso do HTML semântico para estruturar o conteúdo, utilizou muito bem o agrupamento de seções com section e main para organizar os temas e ainda compreendeu a importância dos atributos alt nas imagens para acessibilidade e SEO.

Uma dica interessante para o futuro é usar rotas diferentes para cada tipo de conteúdo (series.html, filmes.html e animes.html) para melhorar a navegação. Dessa forma:

<a class="meu__link" href="filmes.html">Filmes</a>
<a class="meu__link" href="series.html">Séries</a>
<a class="meu__link" href="animes.html">Animes</a>

Resultado: Facilidade de manutenção e navegação mais clara para o usuário.

Isso faz com que seu projeto fique escalável em um cenário com centenas de elementos.

Para saber mais:

Sugestão de conteúdo para você mergulhar ainda mais sobre o tema:

[Documentação] - nav

Fico à disposição! E se precisar, conte sempre com o apoio do fórum.

Abraço e bons estudos!

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!