Mao na massa | HTML e CSS: Classes, posicionamento e Flexbox

Exercicio 1-espacamento e margens com flexbox

 <main class="apresentacao">
    < Section class="apresentacao__conteudo">
     <h1 class="apresentacao__conteudo__titulo"> <!--título da página-->
    Está pensando</h1> 
    <strong class="titulodestaque">em trocar seu colchão?</strong>
   <p class="apresentacao__conteudo__paragrafo">
     <strong class="texto-destaque">Aqui na XY colchões</strong>
      temos o colchão ideal para você.E para isso eu Thiago vou lhe ajudar a escolher o seu colchão.</p>
      <a href="https://www.instagram.com/thiagomartinscarvalho"target="blank">
      <button>instagram</button>
      </a>    
     <a href="https://github.com/thiagomsc"target="blank"> <button> Guithub </button> </a>
      </section>
       <img src="Xycolchoes (1).png" alt:"logo da loja">
      </main>

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

exercício 2-definindo o tamanho da secao do texto.

<body>
   <main class="apresentacao">
    <section class="apresentacao__conteudo">
 </section>
</main>
</body>

.apresentacao_conteudo{
  width: 615px;
}

3-Ajustando tamanhos de títulos e textos.

<h1 class="apresentacao__conteudo__titulo"> <!--título da página-->
    Está pensando</h1> 
    <strong class="titulodestaque">em trocar seu colchão?</strong>
   <p class="apresentacao__conteudo__paragrafo">
     <strong class="texto-destaque">Aqui na XY colchões</strong>
      temos o colchão ideal para você.E para isso eu Thiago vou lhe ajudar a escolher o seu colchão.</p>

.apresentacao__conteudo__titulo{
  color:#F6F6F6;
  font-size:36px;
}

.apresentacao__conteudo__paragrafo{
  color:#F7F7F7;
  font-size:24px;
}

Exercicio 4:importando e palicando fontes do google fontes


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

Exercicio 5:personalizando fontes de títulos e textos

.apresentacao__conteudo__titulo{
  color:#F6F6F6;
  font-size:36px;
  font-family:"Krona One", sans-serif;
}

.apresentacao__conteudo__paragrafo{
  color:#F7F7F7;
  font-size:24px;
  font-family:"Montserrat", sans-serif;
}

Oi, Thiago! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Seu trabalho mostra atenção aos detalhes no uso do flexbox e na personalização das fontes com o Google Fonts. A organização das classes também demonstra que você está absorvendo bem os conceitos do curso.

Uma dica interessante para o futuro é usar gap no flexbox para espaçamento entre os elementos, evitando o uso excessivo de margin. Veja este exemplo:


.apresentacao {
  display: flex;
  gap: 20px;
}

Esse código define um espaçamento fixo entre os elementos filhos da div .apresentacao sem precisar adicionar margin em cada um.

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!