Lista de Exercício

1) Ajustando o layout para telas menores

Para garantir um espaçamento adequado entre a imagem e o texto dentro da classe .apresentacao ao reduzir o tamanho da tela, você pode utilizar a propriedade gap do CSS. Esta propriedade define o tamanho do espaço entre os elementos em layouts de flexbox, grid ou multi-coluna. citeturn0search2

.apresentacao {
  display: flex;
  gap: 20px; /* Ajuste o valor conforme necessário */
}

2) Implementando media queries para mudança de layout

Para reposicionar a imagem acima do texto em telas menores que 1023px, você pode utilizar uma media query que altera a direção do layout para uma coluna:

@media (max-width: 1023px) {
  .apresentacao {
    flex-direction: column;
  }
}

A propriedade flex-direction: column; organiza os itens flexíveis em uma coluna, empilhando-os verticalmente. citeturn0search1

3) Refinando o layout responsivo

Para inverter a ordem dos elementos dentro da classe .apresentacao quando a tela estiver abaixo de 1200px de largura, você pode utilizar a propriedade flex-direction com o valor column-reverse dentro de uma media query:

@media (max-width: 1200px) {
  .apresentacao {
    flex-direction: column-reverse;
  }
}

A propriedade flex-direction: column-reverse; inverte a ordem dos itens flexíveis na coluna, exibindo o último elemento primeiro. citeturn0search1

4) Ajustando o cabeçalho para telas menores

Para centralizar o cabeçalho e evitar que ele quebre em certos pontos em dispositivos com telas menores, você pode ajustar o padding da classe .cabecalho:

.cabecalho {
  padding: 10px 20px; /* Ajuste os valores conforme necessário */
  text-align: center;
}

5) Centralizando itens do menu em telas menores

Para centralizar os itens "Home" e "Sobre mim" dentro do cabeçalho, utilize o Flexbox na classe .cabecalho__menu. Certifique-se de que a propriedade display: flex; esteja aplicada e adicione justify-content: center; para alinhar os itens centralmente:

.cabecalho__menu {
  display: flex;
  justify-content: center;
}

A propriedade justify-content: center; alinha os itens flexíveis no centro do contêiner ao longo do eixo principal. citeturn0search9

6) Refinando o design responsivo do cabeçalho

Para garantir que o cabeçalho fique visualmente alinhado com o design do Figma em telas menores, você pode ajustar o padding e as propriedades do Flexbox conforme necessário. Teste diferentes valores de padding e ajuste a propriedade justify-content para obter o melhor resultado:

@media (max-width: 768px) {
  .cabecalho {
    padding: 15px 10px;
  }

  .cabecalho__menu {
    justify-content: space-around;
  }
}