1
resposta

[Dúvida] Mao na massa

css

@import url('https://fonts.googleapis.com/css2?family=Anta&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anta&family=Comic+Neue&display=swap');

*{ /*reset margem */
    margin: 0;
    padding: 0;
}

header { /* menu header */
    display: flex   ;
    background-color: rgb(0, 0, 57);
    padding: 1%;
    text-align: center;
    justify-content: center;
    a{
        color: lightblue;
        font-family: "Comic Neue", cursive;
        font-size: 18px;
        text-decoration: none;
    }
}

body { /* corpo */
    height: 100vh; width: 100%;
    box-sizing: border-box;
    background-color: white ;
    color:rgb(0, 0, 57);

    .destaque { /* classe strong */
        color: rgb(8, 0, 255);
        font-weight: bolder;
    }

    header { /* menu header */
        display: flex   ;
        background-color: rgb(0, 0, 57);
        padding: 1%;
        text-align: center;
        justify-content: center;
        a{
            color: lightblue;
            font-family: "Comic Neue", cursive;
            font-size: 18px;
            text-decoration: none;
        }
    }
    
    .apresentacao { /* classe main */
        margin: 5% 20%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .apresentacao__conteudo { /* classe section */
        width: 700px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    .apresentacao__conteudo__titulo { /* classe titulo */
        font-size: 36px;
        font-family: "Anta", sans-serif;
    }
    
    .apresentacao__conteudo__texto { /* classe paragrafo */
        font-size: 22px;
        font-family: "Comic Neue", cursive;
    }
    

}   

.apresentacao__links { /* estilo do botao ancora */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    justify-content: space-evenly;
    
        .apresentacao__links__subtitulo { /* classe subtitulo */
        font-size: 28px;
        font-weight: 400;
        font-family: "Anta", sans-serif;
        }

        .apresentacao__links__link {
            /* background-color: rgb(8, 0, 255); */
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            color: rgb(0, 0, 57);
            border: 4px outset rgb(8, 0, 255);
            width: 370px;
            text-align: center;
            border-radius: 10px;
            font-size: 24px;
            font-family: "Anta", sans-serif;
            padding: 21px 0;
            text-decoration: none;
        }

        .apresentacao__links__link:hover {
            background-color: beige;
            color:rgb(8, 0, 255);
            border: 4px outset rgb(0, 191, 255);
            font-size: 30px;
        }
}

footer { /* estilo do rodape */
    background-color: rgb(245, 245, 230);
    text-align: center;
    a {
        color: rgb(0, 0, 57);
        font-size: 24px;
        font-family: "Anta", sans-serif;
        text-decoration: none;
    }

    p {
        color: rgb(0, 0, 57);
        font-size: 18px;
        font-family: "Comic Neue", cursive;
        padding: 0.5%;
    }

    span{ /* span feito no nome dos direitos autorais */
        font-weight: bolder;
        color: rgb(8, 0, 255);
        font-family: "Comic Neue", cursive;
        border: 1px solid rgb(8, 0, 255);
        padding: 5px;
    }
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Só n entendi do porque a barra do scroll n desaparece, acredito eu que o border-box esta correto.

1 resposta

Olá, Vinicius!

Isso ocorre devido ao tamanho do conteúdo, que excede a capacidade da tela, fazendo com que o navegador crie uma barra de rolagem. Para resolver isso, você pode fixar o seu rodapé para que ele sempre fique no final da tela, sem ultrapassar o espaço designado. Para isso, adicione o seguinte código ao seu arquivo style.css.

footer { /* estilo do rodape */
    background-color: rgb(245, 245, 230);
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    
    a {
        color: rgb(0, 0, 57);
        font-size: 24px;
        font-family: "Anta", sans-serif;
        text-decoration: none;
    }

    p {
        color: rgb(0, 0, 57);
        font-size: 18px;
        font-family: "Comic Neue", cursive;
        padding: 0.5%;
    }

    span{ /* span feito no nome dos direitos autorais */
        font-weight: bolder;
        color: rgb(8, 0, 255);
        font-family: "Comic Neue", cursive;
        border: 1px solid rgb(8, 0, 255);
        padding: 5px;
    }
}

Teste e veja se funcionou!

Uma observação é que em casos em que a tela passa o conteúdo propositalmente o footer pode ficar por cima desse conteúdo, ai neste caso recomendo que estilizer o footer para cada página.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!