1
resposta

[Dúvida] o meu

.menu{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 33px;
}

.categorias__lista{
    display: flex;
    flex-direction:column;
    row-gap: .5rem;
}

.destaques {
    display:flex;
    align-items: center;
    column-gap: 10px;
}

.destaques__barra{
    flex-grow: 1;
}

.eventos__lista{
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.5rem;
    row-gap: 1rem;
    justify-content: center;
}

.eventos__item{
    flex-grow: 1;
    max-width: 400px;
}

.agenda__lista {
    display: flex;
    flex-wrap: wrap;
    row-gap: 1rem;
    column-gap: 1.5rem;
    justify-content: center;
}

.agenda__item {
    flex-grow: 1;
}

.rodape{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.rodape__logo{
    align-self:end;
}

@media (min-width: 720px) {
    
    .menu{
        column-gap: 75px;
    }

    .categorias__lista{
        flex-wrap: wrap;
        column-gap: 1.5rem;
        row-gap: 1rem;
    }

    .eventos__lista{
        justify-content: end;
    }

    .agenda__lista {
        justify-content: end;
    }

}

@media (min-width: 1440px) {

    .menu{
        column-gap: 105px;
        flex-wrap: nowrap;
    }

    .menu__item:nth-child(1){
        order:1;
    }

    .menu__item:nth-child(2){
        order:3;
    }

    .menu__item:nth-child(3){
        order:4;
    }

    .menu__item:nth-child(4){
        order:5;
    }

    .menu__item:nth-child(5){
        order:2;
    }
}
1 resposta

Oii Beatriz. Tudo bem?

Obrigada por compartilhar seu código.

Logo abaixo tem a opinião do instrutor com uma versão diferente de como você pode fazer, é mais uma ideia de resposta mas você sempre pode fazer do seu jeitinho.

Continue os bons estudos.

Um abraço.