Resolvendo os exercícios com Flexbox e Google Fonts! Espaçamento e margens com Flexbox Para criar um espaçamento perfeito entre texto e imagem, o Flexbox é seu melhor amigo. Adicionamos justify-content: space-between; para espaçar os elementos igualmente, e margin: 10%; para garantir que eles não fiquem colados nas bordas. CSS final: css

.apresentacao { display: flex; align-items: center; justify-content: space-between; margin: 10%; /* Espaçamento em relação às bordas */ } Definindo o tamanho da seção de texto

Aqui, criamos uma nova classe apresentacao__conteudo para ajustar a largura do texto no CSS. Use a propriedade width com os valores específicos retirados do Figma. HTML:

html

Título

Texto do conteúdo...

css

.apresentacao__conteudo { width: 60%; /* Ajuste o valor conforme o Figma */ } Ajustando tamanhos de títulos e textos

Para o tamanho dos textos, criamos classes específicas para os títulos e parágrafos. Depois, usamos font-size com os valores fornecidos pelo design. HTML:

html

Título da seção

Texto do parágrafo...

css

.apresentacao__conteudo__titulo { font-size: 32px; /* Ajuste de acordo com o Figma */ }

.apresentacao__conteudo__texto { font-size: 18px; /* Ajuste de acordo com o Figma */ } Importando e aplicando fontes do Google Fonts

Para trazer as fontes Krona One e Montserrat, usamos o @import do Google Fonts. Importação no CSS:

css

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;700&display=swap'); Aplicação no CSS:

css

h1, .apresentacao__conteudo__titulo { font-family: 'Krona One', sans-serif; /* Para títulos */ }

p, .apresentacao__conteudo__texto { font-family: 'Montserrat', sans-serif; /* Para textos */ } Personalizando fontes de títulos e textos

A personalização envolve usar as fontes importadas e ajustar o estilo para combinar com o design. CSS final:

css r .apresentacao__conteudo__titulo { font-family: 'Krona One', sans-serif; /* Fonte estilosa para destaque / font-size: 32px; color: #333; / Cor do título */ }

.apresentacao__conteudo__texto { font-family: 'Montserrat', sans-serif; /* Fonte legível para parágrafos / font-size: 18px; color: #555; / Cor do texto */ }