Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Lista de exercícios-2

Referente ao curso HTML e CSS: trabalhando com responsividade e publicação de projetos, no capítulo Adaptando elementos e atividade Lista de exercícios

por Paulo Henrique Rosa
| 50.7k xp | 71 posts
  • Adaptando imagens para diferentes tamanhos de tela
.apresentacao__imagem{
    width: 50%;
}
  • Ajustando o layout para diferentes dispositivos
  • &
  • Responsividade do conteúdo de texto
.apresentacao__conteudo{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
  • Melhorando a responsividade dos links de navegação
.apresentacao__links__navegacao{
    /* background-color: #22D4FD; */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    border: 2PX solid var(--cor-primaria);
    width: 50%;
    text-align: center;
    border-radius: 200px;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: var(--cor-terciaria);
    font-family: var(--fonte-secundaria);
    transition: transform 0.3s ease-in-out;
}
2 respostas
solução!
por Rafaela Petelin Silvério
| 946.2k xp | 2102 posts
Alura Scuba Team

Oi, Paulo! Como vai?

Você estruturou bem os estilos para melhorar a responsividade, parabéns! A escolha do flexbox e do gap entre os elementos ajuda bastante na organização e distribuição do conteúdo.

Uma dica interessante é utilizar max-width: 100% na imagem para garantir que ela não ultrapasse o tamanho do contêiner pai em telas menores. Veja este exemplo: 


.apresentacao__imagem {
    max-width: 100%;
    height: auto;
}

Isso evita que as imagens fiquem desproporcionais em dispositivos menores.

Obrigada por compartilhar seu código com a comunidade Alura!

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
por Paulo Henrique Rosa
| 50.7k xp | 71 posts

ok rafaela vou testar essas mudanças no projeto muito obrigado.