Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Lista de exercícios

  1. Ajustando o layout para telas menores Utilize a propriedade gap na classe .apresentacao para criar espaçamento entre a imagem e o texto, garantindo um layout mais organizado em telas menores. .apresentacao { display: flex; gap: 20px; /* Ajuste o valor conforme necessário */ }

  2. Implementando media queries para mudança de layout Implemente uma media query que reposicione a imagem acima do texto em telas menores que 1023px, mudando a direção dos elementos para uma coluna. @media (max-width: 1023px) { .apresentacao { display: flex; flex-direction: column; } }

  3. Refinando o layout responsivo Use a propriedade flex-direction: column-reverse na media query para inverter a ordem dos elementos na classe .apresentacao em telas menores que 1200px. @media (max-width: 1200px) { .apresentacao { flex-direction: column-reverse; } }

  4. Ajustando o cabeçalho para telas menores Altere o padding da classe .cabecalho para centralizar o cabeçalho e melhorar o espaçamento em telas menores. .cabecalho { padding: 10px 20px; /* Ajuste os valores conforme necessário */ text-align: center; }

  5. Centralizando itens do menu em telas menores Verifique se display: flex está aplicado e use justify-content: center na classe .cabecalho__menu para centralizar os itens do menu. .cabecalho__menu { display: flex; justify-content: center; }

  6. Refinando o design responsivo do cabeçalho Ajuste o padding e as propriedades do flexbox para alinhar visualmente o cabeçalho com o design do Figma em telas menores. .cabecalho { padding: 15px; /* Ajuste conforme necessário */ }

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

Teste e ajuste os valores para garantir que o cabeçalho fique conforme o design esperado.

1 resposta
solução!

Olá, Camila, como vai?

Muito bem explicado! Você mostrou um ótimo entendimento sobre media queries para garantir a boa responsividade do layout. Continue compartilhando seu progresso no fórum, isso ajuda a criar um ambiente de aprendizado colaborativo.

É ótimo ver seu desenvolvimento!

Siga firme nos estudos e conte com o fórum sempre que precisar.

Abraços :)