Falta pouco!

0 dias

0 horas

0 min

0 seg

Confira já seu desconto!
Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Fiz como é apresentado no curso, mas ficou diferente

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox

por Luiz Fernando Sandrini
| 29.2k xp | 4 posts

Olá. Fiz exatamente como é mostrado no curso, mas não ficou igual. O conteúdo não ficou centralizado e não tem espaçamento entre os elementos. Tem algum erro no meu código? Baixei a versão do github pra testar e comparar com o meu código. Está igual e com os mesmo problemas.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfólio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível <strong class="titulo-destaque">com um Front-end de qualidade!</strong></h1>
            <p class="apresentacao__conteudo__texto">Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em <strong>React, HTML e CSS</strong>. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
            <div class="apresentacao__links">
                <a class="apresentacao__links__link" href="https://instagram.com">Instagram</a>
                <a class="apresentacao__links__link" href="https://github.com">Github</a>
            </div>
        </section>
        <img src="Imagem.png" alt="foto da Joana Santos programando">
    </main>
    <footer></footer>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

* {
    margin: 0;
    padding: 0;
}

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

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

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

.apresentacao__conteudo {
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.apresentacao__conteudo__titulo {
    font-size: 36px;
    font-family: 'Krona One', sans-serif;
}

.apresentacao__conteudo__texto {
    font-size: 24x;
    font-family: 'Montserrat', sans-serif;
}

.apresentacao__links {
    display: flex;
    justify-content: space-between;
}

.apresentacao__links__link {
    background-color: #22D4FD;
    width: 280px;
    text-align: center;
    border-radius: 16px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: #000000;
    font-family: 'Montserrat', sans-serif;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

4 respostas
por Victor Costa Santos
| 2497.5k xp | 5079 posts
Alura Scuba Team

Olá, Luiz Fernando, tudo bem?

Parabéns pelo seu empenho em resolver o problema, inclusive comparando o seu código com o do GitHub. Essa é uma ótima atitude de um desenvolvedor!

Olhei com atenção o seu código e encontrei o detalhe que está causando a diferença no layout. É um erro de digitação bem sutil e que passa despercebido com facilidade!

No seu arquivo style.css, dentro da regra para a classe .apresentacao__conteudo__texto, o tamanho da fonte está com um erro.

Seu código:

.apresentacao__conteudo__texto {
    font-size: 24x; /* O erro está aqui */
    font-family: 'Montserrat', sans-serif;
}

Correção:
O correto é usar px (pixels) em vez de x.

.apresentacao__conteudo__texto {
    font-size: 24px; /* Corrigido para "px" */
    font-family: 'Montserrat', sans-serif;
}

Quando o navegador encontra um valor inválido como 24x, ele ignora a propriedade. Dependendo do navegador e do erro, isso pode até mesmo afetar a forma como o restante do CSS é interpretado, o que provavelmente explica por que as propriedades do Flexbox (como o gap para o espaçamento) não estavam se comportando como o esperado.

Faça essa pequena correção e seu layout deverá ficar idêntico ao da aula. Como você mencionou que o código do GitHub também apresentou o problema, é possível que este mesmo erro estivesse presente na versão que você analisou.

Continue com o ótimo trabalho e atenção aos detalhes!

Espero ter ajudado! Bons estudos!

Sucesso ✨

Imagem da comunidade
por Luiz Fernando Sandrini
| 29.2k xp | 4 posts

Tem esse erro mesmo, Victor. Mas a correção desse erro só muda o tamanho da fonte do elemento em específico. Continua sem os espaçamentos. Eu sei como resolver, colocando gap ou margin. Mas nos vídeos do curso, no fim, a página não ficava assim sem os espaçamentos. Queria ver se eu tinha feito algo de errado ou se tinha esquecido de colocar alguma coisa.

por Victor Costa Santos
| 2497.5k xp | 5079 posts
Alura Scuba Team

Entendi, Luiz!

Outro ponto que esqueci de mencionar é que, nessa altura dos cursos/aulas, usamos medidas fixas e isso faz com que o comportamento do site mude a depender da resolução do computador. Se, por exemplo, você usar uma resolução abaixo de 1920x1080, que é o caso da maiorias dos notebooks, a aparência pode ser diferente. Nesse caso, tente abaixar o zoom, coloque em 80% e veja se melhora. No próximo curso de responsividade, isso vai ser melhor aperfeiçoado, fique tranquilo.

Espero ter ajudado! Bons estudos!

Sucesso ✨

Imagem da comunidade
solução!
por Luiz Fernando Sandrini
| 29.2k xp | 4 posts

Fiz essas alterações e ficou melhor

.apresentacao {
    margin: 3% 8%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}

.apresentacao__links {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade