Exercício um) Ajustando a altura da tela com CSS
Conteúdo CSS:
body {
height: 100vh;
background-color: #000000;
color: #f6f6f6;
}
Exercício dois) Controlando o tamanho de elementos com Box Sizing
Conteúdo CSS:
body {
box-sizing: border-box;
}
Exercício três) Criando um layout sem scroll
Conteúdo CSS:
body {
display: flex;
align-items: center;
}
Exercício quatro) Flexbox: alinhando textos e imagens
Conteúdo HTML:
<main class="apresentacao">
<h1>Eleve seu negócio digital a outro nível <strong class="titulo-destaque"> um Front-end de qualidade!</strong></h1>
<p>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>
<span> <a href="https://instagram.com/rafaballerini">Instagram</a> </span>
<span> <a href="https://github.com/guilhermeonrails">Github</a> </span>
<img src="Imagem.png" alt = "Foto da Joana Santos programando">
</main>
Conteúdo CSS:
.apresentacao {
display: flex;
justify-content: space-between;
}
Exercício cinco) Flexbox: Centralização vertical
Conteúdo CSS:
.apresentacao {
display: flex;
align-items: center;
height: 300px;
}
Exercício seis) responsividade e alinhamento
Conteúdo CSS:
.apresentacao {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}