Lista de exercícios | HTML e CSS: Classes, posicionamento e Flexbox

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Página Personalizada</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main class="apresentacao">
    <section class="apresentacao__conteudo">
      <h1 class="apresentacao__conteudo__titulo">Título da Página</h1>
      <p class="apresentacao__conteudo__texto">
        Este é um exemplo de texto que será estilizado com a fonte Montserrat e ajustado conforme o design do Figma.
      </p>
    </section>
    <img src="imagem.jpg" alt="Imagem ilustrativa" class="apresentacao__imagem">
  </main>
</body>
</html>

/* Importação das fontes do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');

/* Estilos gerais */
body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  background-color: #f4f4f4; /* Cor de fundo da página */
}

/* Contêiner principal */
.apresentacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10%; /* Margem para evitar que os elementos fiquem colados nas bordas */
}

/* Seção de conteúdo */
.apresentacao__conteudo {
  width: 50%; /* Largura da seção de texto (ajuste conforme o Figma) */
}

/* Estilo do título */
.apresentacao__conteudo__titulo {
  font-family: 'Krona One', sans-serif;
  font-size: 24px; /* Tamanho da fonte do título (ajuste conforme o Figma) */
  color: #333; /* Cor do título (ajuste conforme o Figma) */
  margin-bottom: 20px; /* Espaçamento abaixo do título */
}

/* Estilo do texto */
.apresentacao__conteudo__texto {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px; /* Tamanho da fonte do texto (ajuste conforme o Figma) */
  color: #666; /* Cor do texto (ajuste conforme o Figma) */
  line-height: 1.6; /* Espaçamento entre linhas */
}

/* Estilo da imagem */
.apresentacao__imagem {
  width: 40%; /* Largura da imagem (ajuste conforme o Figma) */
  border-radius: 10px; /* Borda arredondada na imagem */
}