1
resposta

Estilização Rodape

Para o rodapé eu usei display grid. No html não adicionei, removi ou alterei nenhuma classe, então está conforme fizemos no curso, apenas mudei o CSS:

@media screen and (min-width: 1024px){
   
    .rodape{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .rodape__titulo{
        font-size: 24px;
    }

    .lista-rodape__titulo{
        font-size: 14px;
        color: var(--cinza-claro);
    }
    
    .lista-rodape{
        display: block;
        border-left: 1px solid var(--cinza-claro);
        padding-left: 1.5em;
    }

    .lista-rodape__item{
        display: flex;
        align-items: center;
        margin: 1em 0;
    }

    .lista-rodape__link{
        text-decoration: none;
        color: var(--cinza);
        margin-left: 0.6em;
    }
}

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

1 resposta

Olá, Valéria, tudo bem?

Ficou excelente a sua implementação!

O uso do display: grid com grid-template-columns: repeat(4, 1fr) foi uma ótima escolha para distribuir as colunas do rodapé de forma igualitária na versão desktop. Além disso, a adição da borda esquerda (border-left) e do espaçamento (padding-left) criou uma separação visual muito elegante entre as seções, mantendo o design limpo e organizado.

Essa abordagem mostra que você dominou bem o conceito de Media Queries para adaptar o layout em telas maiores.

Continue praticando e explorando as possibilidades do CSS Grid!

Bons estudos!

Sucesso

Imagem da comunidade