1. Espaçamento e Margens com Flexbox Para ajustar o espaçamento entre a seção de texto e a imagem, usamos justify-content: space-between junto com margens. Isso garante que os elementos sejam distribuidos uniformemente.

css Copiar .apresentacao { display: flex; /* Ativa o Flexbox / align-items: center; / Centraliza verticalmente / justify-content: space-between; / Espaçamento uniforme entre elementos / margin: 10%; / Adiciona espaço ao redor do contêiner */ } 2) Definindo o Tamanho da Seção de Texto Adicione uma classe apresentacao__conteudo para definir a largura específica da seção de texto de acordo com o design no Figma.

HTML: html Copiar

HTML: html Copiar

Título

Texto aqui...

.apresentacao__conteudo__texto { font-size: 1rem; /* Ajuste segundo o Figma */ } 4) Importando e Aplicando Fontes do Google Fonts Para importar as fontes "Krona One" e "Montserrat", siga estas etapas:

@import no CSS: css Copiar @import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap'); Aplicando Fontes: css Copiar body { font-family: 'Montserrat', sans-serif; /* Fonte padrão para textos */ }

h1, h2, h3 { /* Ou qualquer elemento de título desejado / font-family: 'Krona One', sans-serif; / Fonte para títulos */ } 5) Personalizando Fontes de Títulos e Textos Depois de importar as fontes, aplique-as aos elementos de título e texto para alinhar o estilo visual conforme o design.

CSS: css Copiar .apresentacao__conteudo__titulo { font-family: 'Krona One', sans-serif; /* Fonte Krona One para títulos */ }

.apresentacao__conteudo__texto { font-family: 'Montserrat', sans-serif; /* Fonte Montserrat para textos */ }