1 - Espaçamento e margens com Flexbox
CSS:
.apresentacao {
margin: 10%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
Imagem:
2 - Definindo o tamanho da seção de texto
Imagem - Figma:
CSS:
.apresentacao__conteudo {
width: 615px;
}
3 - Ajustando tamanhos de títulos e textos
HTML:
<main class = "apresentacao">
<section class = "apresentacao__conteudo">
<h1 class = "apresentacao__conteudo__titulo"> Eleve seu negócio digital a outro nível <strong class = "destaque-titulo"> com um Front-end de qualidade! </strong> </h1>
<p class = "apresentacao__conteudo__paragrafo"> 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>
<a href = "https://instagram.com/rafaballerini"> Instagram </a>
<a href = "https://github.com/guilhermeonrails"> GitHub </a>
</section>
<img src = "imagem.png" alt = "Foto da Joana Santos programando">
</main>
Imagem - Figma:
CSS:
.apresentacao__conteudo__titulo {
font-size: 36px;
}
apresentacao__conteudo__paragrafo {
font-size: 24px;
}
4 - Importando e aplicando fontes do Google Fonts
Imagem - Google Fonts:
CSS:
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');
5 - Personalizando fontes de títulos e textos
CSS:
.apresentacao__conteudo__titulo {
font-size: 36px;
font-family: "Krona One", sans-serif;
}
apresentacao__conteudo__paragrafo {
font-size: 24px;
font-family: "Montserrat", sans-serif;
}
Sugestão: além desses exercícios, seria interessante ter mais alguns pedindo para usarmos outras fontes nos HTML que fizemos nos exercícios passados. Como já temos as partes do HTML feitos, só precisaria aplicar as fontes. Isso permitiria um maior uso da criatividade alinhada com o aprendizado sobre aplicação de fontes no CSS. Mas é só uma sugestão que tive agora, do jeito que está fica bom também =)