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

Minha formatação esta diferente a dos professores.

meu html

Eleve seu negócio digital a outro nívelcom 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?

        <div class="apresentacao__links">
        <a href="https://instagram.com/
        rafaballerini">Instagram</a>
        <a href="https://github.com/
        guilhermeonrails">GitHub</a>
        </div>
    </section>
    <img src="imagem.png" alt="Foto da Joana Santos programando">
</main>
<footer></footer>

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

https://github.com/alura-cursos/Portifolio-HTML-e-CSS-Curso2/tree/aula_3

no css as chaves aparecem em vermelho no FINAL.

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

  • { margin: 0; pedding: 0; }

body{ height: 100vh; box-sizing: border-box; background-color: #000000; color: #F6F6F6; } .titulo-destaque{ color: #22D4FD; }

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

.apresentacao__conteudo{ font-size: 24px

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

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

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

3 respostas
solução!

Olá, Thiago.

Tudo bem?

Tem alguns detalhes que você precisa ajustar no seu arquivo CSS. Ali nos códigos globais que é onde tem o asterisco, você escreveu padding com a letra (e) pedding, o correto é padding: 0;, outra coisa, você precisa fechar as chaves da classe .apresentacao__conteudo__titulo que só tem a chave de abertura. e por último, na classe .apresentacao__conteudo precisa informar a largura com o width que no caso é width: 615px;, verifica também se os estilos estão certinhos com o ponto e vírgula no final.

Aqui está o seu código já corrigido, mas recomendo você comparar com o seu e ir ajustando:

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

* {  
    margin: 0;
    padding: 0;
}

body{
    height: 100vh;
    box-sizing: border-box;
    background-color: #000000;
    color: #F6F6F6;
}
.titulo-destaque{
    color: #22D4FD;
}

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

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

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

Espero ter ajudado. Qualquer dúvida manda aqui. Valeu.

Muito obrigado Renan, eu foquei no conteúdo do HTML e me esqueci de olhar o CSS. Erro de principiante rsrs.

Normal! Isso acontece mesmo. As vezes esquecemos de uma vírgula e só vamos descobrir no outro dia :D Valeu Thiago.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software