Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

HTML e CSS: Atividade 6

<!DOCTYPE html>
    <html lang="pt-br">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href="style.css">

            <title>by Anna ☆ - ME</title>
            <link rel="icon" href="red star.png" type="image/png">

        </head>

        <body>
            <header>eu sou o cabeçalho</header>

            <main class="apresentacao">
                <section class="apresentacao__conteudo">
                    <h1 class="apresentacao__conteudo__titulo">Quem sou... <strong class="apresentacao__conteudo__titulo__destaque">Anna?</strong></h1>

                    <hr>

                    <p class="apresentacao__conteudo__texto">Eu sou a Anna, por enquanto, apenas uma estudante, mas quero me tornar uma desenvolvedora <span class="apresentacao__conteudo__texto__destaque">Fullstack</span>. <br><br> Me acompanhe enquanto me aprimoro.</p>

                    <div class="apresentacao__links">
                        <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
                        <div class="apresentacao__links__container">
                            <a href="https://github.com/annamatkow"
                            target="_blank"
                            class="apresentacao__links__link"
                            >Github</a>
                            <a href="https://www.tiktok.com/@maltkow"
                            target="_blank"
                            class="apresentacao__links__link"
                            >Tiktok</a>
                        </div>
                    </div>
                </section>

                <img src="cortada.jpg" alt="eu mesma, um desenho de uma mulher de cabelos vermelhos no pôr do sol" class="apresentacao__imagem">
            </main>

            <footer>eu sou o rodapé</footer>
        </body>
    </html>
        <!--aqui encerra index.html e inicia-se style.css-->

    @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        background-color: black;
        color: white;
        font-family: "Source Code Pro", monospace;
        margin: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
    }

    header {
        padding: 15px;
        text-align: center;
        width: 100%;
    }

    .apresentacao {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        padding: 20px;
        gap: 60px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .apresentacao__conteudo {
        max-width: 500px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 20px;
        overflow-y: auto;
        padding-right: 10px;
    }

    .apresentacao__conteudo__titulo {
        font-size: 28px;
        font-family: "Source Code Pro", monospace;
    }

    .apresentacao__conteudo__titulo__destaque {
        color: #8e5260;
        font-weight: bold;
        border: 1px solid #8e5260;
        padding: 1px;
    }

    .apresentacao__conteudo__texto {
        font-size: 18px;
        font-family: "Montserrat", sans-serif;
        font-weight: 300;
    }

    .apresentacao__conteudo__texto__destaque {
        color:#8e5260;
        font-weight: bold;
    }

    .apresentacao__imagem {
        border-radius: 90px;
        width: 300px;
        max-width: 100%;
        height: auto;
        margin: 20px 0;
    }

    .apresentacao__links {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-top: 20px;
        width: 100%;
        gap: 20px;
    }

    .apresentacao__links__subtitulo {
        font-family: "Source Code Pro", monospace;
        font-size: 24px;
        font-weight: 600;
        text-align: center;
    }

    .apresentacao__links__container{
        display: flex;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
    }

    .apresentacao__links__link {
        /* background-color: #4b162b; gostei dessa cor */
        background-color: #1b0810;
        border: 2px inset #da759c;
        width: 200px;
        text-align: center;
        border-radius: 50px;
        font-size: 15px;
        padding: 12px 0;
        text-decoration: none;
        color: #da759c;
        font-family: "Montserrat", sans-serif;
        font-weight: 600;
    }

    footer {
        padding: 15px;
        text-align: center;
        width: 100%;
        margin-top: auto;
    }

Eu tive uma dúvida aqui, eu tinha posicionado os conteúdos da página de uma forma diferente (tudo na vertical, centralizado e um embaixo do outro - eu tinha gostado muito assim) e acabei mudando para um layout parecido com o da aula, enfim, a minha dúvida é que: esse antigo posicionamento fez a página ficar muito grande e teve uma rolagem do mouse, isso tava me incomodando muito, pra arrumar isso eu adicionei as tags de overflow: hidden; overflow-y: auto; padding-right: 10px; flex-wrap: wrap; é realmente necessário todas essas tags ou uma já é o suficiente? Tecnicamente, eu tirei a barra de rolagem, mas coloquei um espaço para caso a barra seja necessária, então a rolagem eu não consegui tirar de fato?

1 resposta
solução!

Olá, Anna, como vai?

Cada propriedade serve para um objetivo diferente:

  • overflow: hidden; oculta qualquer conteúdo que ultrapasse os limites do elemento, ou seja, nada aparece fora da caixa e também não aparece a barra de rolagem.
  • overflow-y: auto; mostra uma barra de rolagem vertical apenas se o conteúdo do elemento ultrapassar o tamanho da caixa na direção vertical.
  • padding-right: 10px; adiciona um espaçamento interno à direita do elemento.
  • flex-wrap: wrap; faz com que os itens dentro de um container flex (display: flex) possam ir para a linha de baixo caso não caibam em uma única linha.

Se o seu objetivo é evitar uma rolagem desnecessária e controlar melhor a exibição dos elementos, normalmente você só precisa definir o overflow-y: auto no elemento que quer que a rolagem aconteça, junto com uma altura máxima (max-height) ou altura fixa (height).

Espero ter ajudado.

Siga firme nos seus estudos e conte com o fórum sempre que precisar.

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado