Entrar Ainda não tem acesso?
2
respostas

[Dúvida] Não alterou depois de aplicar o flexbox

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox, no capítulo Posicionando mais elementos e atividade Flexbox

por Eduardo Barros da Paixão
| 5.7k xp | 13 posts

Segui as orientações do Gui e da Rafa, porém não houve a menor das alterações sequer, nem mesmo a centralização (align-items). O que ainda não estou enxergando pra resolver isso...? Grato!

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio_1</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>
    <main class="apresentacao">
        <h1>Eleve seu negócio digital a outro nível <strong class="titulo-destaque">com um Front-end de qualidade!</strong></h1>
        <p>Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
        <a href="https://instagram.com/eduardo.barros.5458">Instagram</a>
        <a href="https://www.facebook.com/eduardo.barros.5458/">Facebook</a>
        <img src="Imagemjoana.svg" alt="Fot da Joana Santos Programando">
    </main>
    <footer></footer>
</body>
</html>

* {
    margin:  0;
    padding:  0;

}

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

.titulo-destaque {

    color:#22D4FD;
}

.apresentacao {
    display: flex;
    align-items: center;

}
2 respostas
por Nícolas Felipe Ferreira Souza
| 2598.9k xp | 8231 posts
Instrutor Monitor de Fórum

Olá, Eduardo! Como vai?

Testando o seu código, notei que o resultado obtido é o mesmo da aula. Eu obtive o seguinte resultado com o seu código:

Imagem da tela resultado do código do aluno

Veja agora o resultado da aula:

Imagem da tela resultado do código dos instrutores

A pequena diferença de estilo deles é somente por conta do tamanho da tela, mas em relação ao flexbox, parece ocorrer tudo certo. Além disso, você pode conferir aqui que o seu código está correto.

Caso ainda esteja com o problema que disse, poderia me explicar melhor, por gentileza?

Fico à disposição.

Bons estudos!

por Eduardo Barros da Paixão
| 5.7k xp | 13 posts

Bom, tentarei me explicar...

Pra começar, entendo que, o resultado do exercício deve ser o mesmo da aula. Vejo e revejo espaços e pontuações afim de sair o mais correto possível. Agora me encontro muito "perdido" pois não consigo identificar a falha que não permite "espelhar" o resultado da aula. As explicações são claras, porém, não consegui o resultado que gostaria. Fui obrigado a ficar mais de 10 dias sem acessar e sei que isso dificulta meu entendimento, mas ao retormar, ainda assim, continuo "empacado". Vou te reenviar o código atualizado pra ver se estou deixando algo passar. Desde já muito obrigado.

HTML:

Eleve seu negócio digital a outro nível com um Front-end de qualidade!

Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?

Instagram Facebook Fot da Joana Santos Programando

CSS:

*{ margin: 0; padding: 0; } body { height: 100vh; box-sizing: border-box; background-color: #000000; color: #F6F6F6; }

.titulo-destaque { color: #22D4FD; } .apresentacao { margin: 15%; display: flex; align-items: center; justify-content: space-between; }

.apresentacao__conteudo { width: 615px; }

.apresentacao__conteudo__titulo { font-size: 36px; }

.apresentacao__conteudo__texto { font-size: 24px;

}