Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Atividades Aula 03

1 Ajustando o layout para telas menores

.apresentacao__conteudo{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

2 Implementando media queries para mudança de layout

@media (max-width: 1023px)

3 Refinando o layout responsivo

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

4 Ajustando o cabeçalho para telas menores

@media (max-width: 1023px){
.apresentacao{
.cabecalho{
        padding: 8%;
        }
        }

5 Centralizando itens do menu em telas menores

@media (max-width: 1023px){
.cabecalho__menu{
        justify-content: center;
    }
    }

6 Refinando o design responsivo do cabeçalho

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

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas

Olá Anderson!

Parabéns por compartilhar a resolução da sua atividade! Fico feliz em ver seu progresso e dedicação nos estudos de responsividade.w

Continue praticando e se aprofundando cada vez mais!

Espero ter ajudado! Bons estudos!

Sucesso

Imagem da comunidade
solução!

Valeu pleo feedback, Victor