Atividade 01
Adicionei um gap de 20px entre os elementos da flexbox da apresentação:
style.css
.apresentacao {
...
gap: 20px;
}
Atividade 02 - 03
Analisando o meu projeto, a tela só começou a apresentar problemas a partir de 950px, por isso utilizei esse valor como condição. Além disso, caso o reposicionamento dos elementos fosse um pouco mais complexo, eu ainda poderia usar a propriedade order nos filhos da flexbox. Assim, conseguiria organizá-los de acordo com a minha necessidade, o que poderia ser útil em sistemas mais complexos.
style.css
@media (max-width: 950px) {
.apresentacao {
flex-direction: column-reverse;
}
}
Atividade 04 - 05
Alterei o padding-left, que era definido no cabeçalho principal, e criei uma flexbox para alinhar o conteúdo do cabeçalho ao centro:
style.css
@media (max-width: 950px) {
.cabecalho {
padding-left: 0;
display: flex;
justify-content: center;
text-align: center;
}
}
Atividade 06
Finalizei ajustando as margens da flexbox do conteúdo principal para evitar um espaçamento excessivo:
style.css
@media (max-width: 950px) {
.apresentacao {
margin: 60px 10px 10px 10px;
padding: 10px;
gap: 50px;
}
.apresentacao__conteudo {
width: 100%;
}
}
