0
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