Entrar Ainda não tem acesso?
1
resposta

Duvida

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox, no capítulo Estilos de texto e fontes e atividade Alinhando o conteúdo

por Lucas Teixeira Sampaio
| 18.2k xp | 19 posts

Oi gente, então, eu estava fazendo o codigo, estava indo tudo bem, mas cheguei em uma parte que não sei oque eu faço, não está indo igual no video, e eu acho que fiz tudo. Vou compartilhar o codigo aqui

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portifolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>
    <main class="classe-main">
        <h1>
     <section>
        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 <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://instagram.com/rafaballerini">Instagram</a>
             <a href="https://github.com/guilhermeonrails">GitHub</a>
            </section>
    <img src="Imagem.png" alt="Joana Santos programando">
    </main>
    <footer></footer>
</body>

body {
    background-color: black;
    color: white;
    margin: 0;
    padding: 0;
}
h1 {
    font-size: 25px;
}



.titulo-destaque {
    color: aqua;
}

strong {
    color: aqua;
}

.classe-main {
    display: flex;
    justify-content: center;
    align-items: center;
}

E no chrome está assim: (https://cdn1.gnarususercontent.com.br/1/4703938/ea7762ea-7c1b-44c4-b8d1-04d021284ad9.png)

1 resposta
por Renan Lima
| 3653.4k xp | 7699 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Lucas.

Tudo bem?

Tem um erro na estrutura, você abriu o título <h1> antes da <section> e fechou ele dentro da <section>, porém ele tem que estar com a tag de abertura e fechamento dentro da <section>, repara no seu código o texto "Eleve seu negócio digital a outro nível..." está solto, porque falta a tag <h1> no início da linha dele. Essa <section> corrigido fica:

<section>
        <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 <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://instagram.com/rafaballerini">Instagram</a>
             <a href="https://github.com/guilhermeonrails">GitHub</a>
</section>

Agora para corrigir os espaçamentos, faltou você adicionar o reset das margens e paddings, basta adicionar esse código no início do seu arquivo CSS, para zerar as margens e paddings que vem por padrão:

*{
    margin: 0;
    padding: 0;
}

E você pode adicionar a margin de 10% na main igual na aula, no caso na sua classe .classe-main, a classe inteira vai ficar assim:

.classe-main {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10%;
}

Veja o resultado:

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

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