Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

imagem abaixo do texto

Boa noite, estou com um erro no meu "Sobre Mim", porque minha imagem esta em baixo do texto. https://drive.google.com/drive/folders/1r49YMw_ktelRH_TwjQHRBAVl0-RWqB5H?usp=drive_link Este é o link para a imagem do erro. https://drive.google.com/drive/folders/1bMMGabInLEQGiMNJif6WYYwxUiuYb53Y?usp=drive_link Este é o link do meu código.

3 respostas
solução!

Oi Davi!

Lembra de mim? Eu estava lhe ajudando neste outro tópico. Que pena que surgiu esse erro, mas vou tentar lhe ajudar!

Para reparar esse erro basta mover a sua imagem da <section> para fora dela lá no seu arquivo about.html, pois assim a imagem vai para ao lado do texto e paragrafo, assim como no home, código about.html fica assim:

 <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Sobre mim</h1>
            <p class="apresentacao__conteudo__paragrafo">texto
            </p>
            <p class="apresentacao__conteudo__paragrafo">texto
            </p>
            <!-- Tirar a tag dessa linha -->
        </section>
        <!-- E colocar fora da section -->
        <img src="./assets/Imagem.png" alt="Foto de Joana Santos Programando">
    </main>

Observe meus comentários no código e observe minha alteração, seu código about.html fica assim:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sobre mim</title>
    <link rel="stylesheet" href="./styles/style.css">
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="index.html">Home</a>
            <a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
            <a class="cabecalho__menu__link" href="curriculo.html">Curriculo</a>
        </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Sobre mim</h1>
            <p class="apresentacao__conteudo__paragrafo">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
            </p>
            <p class="apresentacao__conteudo__paragrafo">Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae
            </p>
        </section>
        <img src="./assets/Imagem.png" alt="Foto de Joana Santos Programando">
    </main>
    <footer class="rodape">
        <p> Desenvolvido por Alura. </p>
     </footer>
</body>

</html>

Depois dessas alterações seu projeto ficou assim:

Foto do projeto do Davi com o erro reparado

Davi se tudo deu certo acredito que vc pode seguir com os cursos normalmente, é sempre um prazer lhe ajudar se precisar estamos ai!

Espero ter lhe 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!

Olá, Davi!

Sua imagem está embaixo do texto porque você colocou a linha de código da imagem dentro da seção "apresentacao__conteudo", referente ao texto da sua página, quando na realidade deveria estar dentro do container "main".

Segue abaixo seu container main com o erro corrigido:

    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Sobre mim</h1>
            <p class="apresentacao__conteudo__paragrafo">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
            </p>
            <p class="apresentacao__conteudo__paragrafo">Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores ipsum delis forum birol parela maxime infena. Excepteur sint occaecat cupidatat non.
            </p>
        </section>
        <img src="./assets/Imagem.png" alt="Foto de Joana Santos Programando">
    </main>

Obrigado João Vitor e Victor por terem me ajudado.