1
resposta

[Projeto] Alinhamento de conteudo

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Eu estou fazendo com uma imagem que do whatsapp para uma pessoa mas a imagem continua colada no topo

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/HTML CSS Position Flexbox/2 - Posicionando Elementos/style.css">
    <title>Portifolio</title>
</head>
<body>
    <header></header>
    <main class="apresentacao">
        <section>
            <h1>Eleve seu negócio digital a outro nível <strong class="titulo-destaque">com o mercado financeiro de qualidade!</strong></h1>
            <p>Olá! Sou Taina Pena, Jovem Palestrante, Mentora, Analista de RH Formando em Gestão de Recursos Humanos . <br>Fotógrafa e Empreendedora. Administração e Comunicação Empresarial.</p>
            <a href="https://www.instagram.com/taina_penaa/" target="_blank">Instagram</a>
            <a href="https://www.linkedin.com/in/tainapena/" target="_blank">Linkedin</a>
        </section>
        <img src="/HTML CSS Position Flexbox/2 - Posicionando Elementos/perfil.jpg" alt="Foto da Taina Pena uniformizada Albert Einstein">
    </main>
    <footer></footer>
    
</body>
</html>

style.css




body {
    height: 100vh;
    box-sizing: border-box;
    background-color: #000000;
    color: #f6f6f6;
}

.titulo-destaque {
    color: #22d4fd;
}

.apresentacao {
    margin: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
1 resposta

Olá, Danilo. Tudo bem?

A imagem parece ser bem maior do que a usada no layout do curso, tente redimensionar a imagem para fique mais proximo da usada em aula. Você pode usar o seletor .apresentacao img para selecionar a imagem, o estilo pode ser assim:

.apresentacao img{
      height: 500px; /* Ajuste conforme o necessário */
}

Isso vai diminuir o tamanho da imagem e deixar o layout mais próximo do apresentado no curso.

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