1
resposta

[Dúvida] Estou usando o mesmo código da aula e meu site não reposiciona imagem e textos

Ola, tudo bem? Gostaria de ajuda pois estou utlilizando o mesmo codigo da aula mas meu link continua com as imagens e frases no mesmo local, vou colocar os codigos html e css aqui e se alguém puder me ajudar a ver onde estou errando ficarei muito contente! Obrigado a todos

<!DOCTYPE html>
<html lang="pt-br">
    <head>
       <meta charset="UTF-8">
       <meta http="X-UA-compatible" content="ie=edge">
       <meta name="viewport" content="width=device-width-initial-scale=1.0">
       <link rel="stylesheet" href="style.css">
       <title>Portfolio</title>
    </head>
    <body>
        <main class="apresentacao">
            <section>
        <h1>Eleve seu negócio digital a outro nível <strong class="titulo-destaque">com um Front-end de qualidade!</strong></h1>
        <h2> Olá! Eu sou Rafael Brauer, estudante dsesenvolvedor de: <strong>HTML e CSS.</strong> Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</h2>
       <a href="https://www.instagram.com/raziiel__/">instagram</a>
        <a href="https://www.github.com/rafaelbrauer14">Github</a>
        <a href="www.linkedin.com/in/rafaelbrauer">Linkedin</a>
        </section>
        <img src="imagemprogramando.png" alt="imagemprogramando">
        </main>
       </body>
</html>

* {margin: 0;
padding: 0;}


body {
background-color: black;
height: 100vh;
box-sizing: border-box;
color: white;
} 
 .titulo-destaque {color: #00FF00};
.apresentacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
1 resposta

Olá, Rafael! Tudo bem?

Analisando o seu código, dois pontos estão impedindo o layout de ficar igual ao da aula: um erro de sintaxe no CSS e a falta da margem na seção.

No seu arquivo CSS, existe um ponto e vírgula (;) sobrando logo após o fechamento da classe .titulo-destaque:

.titulo-destaque {color: #00FF00}; /* esse ; não deve existir */

Esse detalhe pode fazer o navegador parar de interpretar o CSS, impedindo que o display: flex da classe .apresentacao funcione corretamente.

Além disso, na aula é adicionada uma margem para evitar que o conteúdo fique colado nas bordas da tela. Essa linha ainda não aparece no seu código.

Ajustando o style.css, ele pode ficar assim:

.titulo-destaque {
    color: #00FF00;
}

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

Com essas duas correções, o Flexbox passa a funcionar como esperado e o layout fica alinhado conforme o apresentado na aula.
Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Bons estudos!

Sucesso

Imagem da comunidade