[Projeto] Desafio : Mão na massa | HTML e CSS: Classes, posicionamento e Flexbox

1. Espaçamento e margens com Flexbox CSS

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

}

2. Definindo o tamanho da seção de texto CSS

.apresentacao__conteudo{
    width: 270px;
}

3, 4 e 5. Ajustando tamanhos de títulos e textos

/*Parte HTML*/
<!DOCTYPE html>
  <html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mão na massa</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="inicio">
      <section class="apresentacao__conteudo"></section>
      <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__texto">Olá! Sou Fernando Marques, desenvolvedor Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
      <img src="https://th.bing.com/th/id/OIG4.fWFPUxnQvfa0HkciIbmJ?w=173&h=173&c=6&r=0&o=5&pid=ImgGn" alt="capa">
    </main>
</body>
</html>

/*Parte CSS */

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    background-color: #000000;
    color: #ffffffff;
}

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

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

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

}
.apresentacao__conteudo{
    width: 615px;
}


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

.apresentacao__texto{
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
}

Garanta sua matrícula hoje e ganhe + 2 meses grátis