Flex Box Portfólio | HTML e CSS: Classes, posicionamento e Flexbox

Meu - 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" />
    <link rel="stylesheet" href="style.css" />
    <title>Portfolio</title>
  </head>
  <body>
    <header></header>
    <main class="presentation">
      <section class="presentation__content">
        <h1 class="presentation__content__title">
          Eleve seu negócio digital a outro nível
          <strong class="featured-title">com um Front-end de qualidade!</strong>
        </h1>
        <p class="presentation__content__text">
          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?
        </p>
        <div class="presentation__links">
          <a
            class="presentation__links__link"
            href="https://www.instagram.com/aluraonline/?hl=pt-br"
            >Instagram</a
          >
          <a
            class="presentation__links__link"
            href="https://github.com/alura-cursos"
            >GitHub</a
          >
        </div>
      </section>
      <img
        src="img/Imagem.png"
        alt="Imagem de uma estudante mulher com um notebook"
      />
    </main>
    <footer></footer>
  </body>
</html>

Meu - CSS


* {
    margin: 0;
    padding: 0;
}

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

.featured-title {
    color: #22D4FD;
}

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

.presentation__content {
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

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

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

.presentation__links {
    display: flex;
    justify-content: space-between;
}

.presentation__links__link {
    background-color: #22D4FD;
    width: 280px;
    text-align: center;
    border-radius: 16px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: #000000;
    font-family: 'Montserrat', sans-serif;
}