Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

HTML e CSS: Atividade 3 (estilização com CSS)

Referente ao curso HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags, no capítulo Estilizando o projeto com CSS e atividade Lista de exercícios

por Anna Luiza Matkow de Macedo
| 23.1k xp | 29 posts
<!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="eu desenho.jpeg" type="image/jpeg">

            </head>

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

                <main>
                    <div class="texto-principal">
                        <h1>Quem sou... <strong>Anna?</strong></h1>

                        <hr>

                        <p>Eu sou a Anna, por enquanto, apenas uma estudante, mas quero me tornar uma desenvolvedora <strong>Fullstack</strong>. <br><br> Me acompanhe enquanto me aprimoro.</p>

                        <a href="https://github.com/annamatkow"
                        target="_blank"
                        >Github</a>
                    </div>

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

                <footer>eu sou o rodapé</footer>
            </body>
    </html>

        <!--aqui encerra index.html e inicia-se style.css-->

body {
    background-color: black;
    color: white;
    font-family: 'Times New Roman', Times, serif;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: row-reverse;
    position: relative;
}

strong {
color: #8e5260;
}

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

main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    margin: 60px 0;
}

.eu-desenho {
    border-radius: 50px;
    width: 300px;
    margin-left: auto;
}

.texto-principal {
    max-width: 50%;
    padding-right: 30px;
}

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

Eu tive uma dúvida nessa atividade: meu cabeçalho e meu rodapé acabaram ficando descentralizados, o cabeçalho ficou no canto direito superior, enquanto o rodapé ficou no canto inferior esquerdo; não sei como arrumar isso, o texto e a imagem ficaram exatamente onde eu queria.

1 resposta
solução!
por Lorena Garcia
| 10559.4k xp | 15690 posts
Alura Scuba Team

Oii, Anna.

Parabéns por praticar. Vamos dar uma olhada no seu projeto:

Principais ajustes para funcionar bem:

  • body com flex-direction: column: organiza header, main e footer em coluna.
  • main agora usa flex-wrap: wrap + gap: faz o conteúdo se comportar bem em telas pequenas.
  • max-width no .texto-principal e max-width: 100% na imagem: garante que tudo redimensiona direitinho.

CSS (style.css) — versão final, 100% funcional

/* Configuração do layout principal */
body {
    background-color: black;
    color: white;
    font-family: 'Times New Roman', Times, serif;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column; /* coluna: header → main → footer */
}

/* Cor especial do <strong> */
strong {
    color: #8e5260;
}

/* Cabeçalho */
header {
    padding: 15px;
    text-align: center;
    width: 100%;
}

/* Conteúdo principal */
main {
    flex: 1; /* ocupa o espaço restante */
    display: flex;
    flex-wrap: wrap; /* para não estourar em telas pequenas */
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 40px; /* espaço entre texto e imagem */
    box-sizing: border-box;
}

/* Texto principal */
.texto-principal {
    max-width: 500px;
}

/* Imagem */
.eu-desenho {
    border-radius: 50px;
    width: 300px;
    max-width: 100%;
    height: auto;
}

/* Rodapé */
footer {
    padding: 15px;
    text-align: center;
    width: 100%;
    margin-top: auto; /* cola no final da página */
}

O resultado que temos é:

  • Header centralizado no topo.
  • Main centralizado, com texto e imagem lado a lado (ou empilhados em telas pequenas).
  • Footer colado no fim da página.

Espero ter ajudado.

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