Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

[Dúvida] O projeto retrocedeu a estilização e o arquivo .css parece em ordem. Onde errei?

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

Olá,

Ao executar a importação de fontes para estilizar o modelo do Figma, o arquivo "retrocedeu", voltando a ficar com o background e posicionamento diferente do que deveria estar. Já tinha alterado cor de fundo, posicionamento, alinhando com o flexbox até que numa atualização, simplesmente, voltou a um estágio quase "primário".

Conferi os arquivos html e css, revi as aulas, mas não encontro o erro... Por favor, preciso de ajuda pois estou atrasado no segmento nas aulas e ainda não consegui enxergar o problema, mas segue os arquivos abaixo e muito obrigado!

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 Foto da Joana Santos programando 
<footer></footer>

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

{ margin: 0; padding: 0; }

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

strong { color: #22d4fd

}

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

.apresentacao__conteudo{ width: 615px; }

.apresentacao__conteudo_titulo{ font-family: 'Krona One', sans-serif;

font-size: 36px;

}

.apresentacao__conteudo__texto{ font-family: 'Montserrat', sans-serif;

font-size: 24px;

}

4 respostas
por Lorena Garcia
| 8289.7k xp | 12130 posts
Alura Scuba Team Suporte Educacional

Oi Eduardo, tudo bem?

Você poderia mandar seu código completo aqui? Você pode usar a ferramenta de inserir bloco de código </>. Assim podemos fazer testes completos em seu código.

Caso haja alguma dúvida de como fazer, você pode assistir esse alura+ sobre como turbinar seus estudos com o fórum.

Um abraço e bons estudos.

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

Claro e agradeço a orientação! Espero que esteja certo dessa vez...

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</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>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>
        <a href="https://www.instagram.com/eduardo.barros.5458/">Instagram</a>
        <a href="https://www.facebook.com/eduardo.barros.5458">Facebook</a>
    </section>
        <img src="imagem.png" alt="Foto da Joana Santos programando"
    </main>

    <footer></footer>

</body>
</html>

CSS

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

{
    margin: 0;
    padding: 0;
}

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

strong {
    color: #22d4fd

}

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

.apresentacao__conteudo{
    width: 615px;
}

.apresentacao__conteudo_titulo{
    font-family: 'Krona One', sans-serif;

    font-size: 36px;
}

.apresentacao__conteudo__texto{
 font-family: 'Montserrat', sans-serif;
 
    font-size: 24px;
}
solução!
por Mônica Mazzochi Hillman
| 932.5k xp | 1472 posts
Instrutor Instrutora

Oi Eduardo! Tudo bem?

Analisando o código da mesma maneira que você colou aqui posso perceber que está faltando o fechamento da tag <link> no html, para fechar é necessário colocar um > ao final da linha:

<link rel="stylesheet" href="style.css">

Além disso, o @import da importação da fonte está faltando o fechamento dos parenteses, dessa maneira pode ser que o CSS esteja interpretando que todos estilos colocados façam parte do import e não dos estilos em si. Ele deve ficar dessa maneira:

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

Que tal testar esses fechamentos e ver se agora o seu projeto volta a ficar estilizado que nem antes? Fico no aguardo pra ver se funcionou!

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

Perfeito! Resolveu meu problema! Ainda estou "apurando" meus olhos para esse detalhes que ainda me fogem... Na verdade, nem sei como alterei isso... Agradeço a atenção! E vamos continuar os estudos!!!