MAS UM

Adaptando imagens para diferentes tamanhos de tela
HTML:

html
Copiar
Editar
<img class="apresentacao__imagem" src="caminho-da-imagem.jpg" alt="Descrição da imagem">
CSS:

css
Copiar
Editar
.apresentacao__imagem {
  width: 50%; /* Ocupa metade da largura do elemento pai */
  max-width: 100%; /* Evita que ultrapasse o pai */
  height: auto; /* Mantém proporção */
  display: block;
}
 Ajustando o layout para diferentes dispositivos
Use o inspetor do navegador (F12 → aba "Responsivo") para visualizar o site em resoluções como:

1366×768 (notebook)

720px (tablet)

375px (smartphone)

CSS:
Ajuste paddings e margens:

css
Copiar
Editar
body {
  padding: 2%;
  margin: 0;
}
Para responsividade:

css
Copiar
Editar
@media (max-width: 768px) {
  .apresentacao {
    flex-direction: column; /* Empilha os elementos */
    padding: 5%;
  }
}
 Responsividade do conteúdo de texto
CSS:

css
Copiar
Editar
.apresentacao__conteudo {
  width: 50%; /* Largura relativa */
  font-size: 1.2rem; /* Escala com base no tamanho da tela */
}
Com media queries:

css
Copiar
Editar
@media (max-width: 768px) {
  .apresentacao__conteudo {
    width: 100%; /* Ocupa 100% da tela em telas menores */
  }
}
Melhorando a responsividade dos links de navegação
CSS:

css
Copiar
Editar
.apresentacao__links__navegacao {
  width: 50%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap; /* Quebra linha se necessário */
}
Com ajuste responsivo:

css
Copiar
Editar
@media (max-width: 768px) {
  .apresentacao__links__navegacao {
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .apresentacao__links__navegacao a {
    margin: 10px 0;
  }
}