1
resposta

Faça como eu fiz: Linhas com conteúdos diferentes.

index.html

<div class="rodape__linha"></div>
<div class="rodape__linha">
    <div class="rodape__coluna"></div>
</div>
<div class="rodape__coluna">
    <h5 class="rodape__coluna_titulo">Formas de pagamento</h5>
</div>
<ul class="rodape__coluna_list-cartao"></ul>
<ul class="rodape__coluna_list-cartao">
    <li class="rodape__coluna_list-item-cartao">
        <img src="./assets/icons/icon-cartao-visa.svg" alt="Visa">
    </li>
    <li class="rodape__coluna_list-item-cartao">
        <img src="./assets/icons/icon-cartao-master.svg" alt="Mastercard">
    </li>
    <li class="rodape__coluna_list-item-cartao">
        <img src="./assets/icons/icon-cartao-elo.svg" alt="Elo">
    </li>
    <li class="rodape__coluna_list-item-cartao">
        <img src="./assets/icons/icon-cartao-diners.svg" alt="Diners">
    </li>
    <li class="rodape__coluna_list-item-cartao">
        <img src="./assets/icons/icon-pix.svg" alt="Pix">
    </li>
</ul>
<div class="rodape__linha">
    <div class="rodape__coluna">
    </div>
    <div class="rodape__coluna"></div>
</div>
<div class="rodape__coluna">
    <h5 class="rodape__coluna_titulo">Siga nossas redes</h5>
</div>
<ul class="rodape__coluna_list-redes-sociais"></ul>
<ul class="rodape__coluna_list-redes-sociais">
    <li class="rodape__coluna_list-item-redes-sociais">

Rodapé Css

.rodape__linha {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    margin-bottom: 32px;
}
.rodape__linha:last-child {
    border-top: 1.5px solid var(--cor-destaque-secundario);
    padding-top: 32px;
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: space-between;
}
.rodape__coluna_list-cartao {
    display: inline-grid;
    grid-template-columns: repeat(5, auto);
    gap: 16px;
    list-style-type: none;
}
.rodape__coluna_list-redes-sociais {
    display: inline-grid;
    grid-template-columns: repeat(3, auto);
    gap: 16px;
    list-style-type: none;
}
.rodape {
    padding: 60px 12.5%;
    background-color: var(--cor-texto-principal);
    margin: 0 auto;
}
.rodape__coluna_titulo {
    font-family: var(--fonte-texto);
    font-weight: 700;
    font-size: 20px;
    color: var(--cor-texto);
    line-height: 24px;
    margin-bottom: 16px;
}
.rodape__coluna_logo img {
    width: 79.61px;
    height: 48px;
}
.rodape__coluna_logo_texto {
    font-family: var(--fonte-texto);
    font-weight: 400;
    font-size: 16px;
    color: var(--cor-destaque-secundario);
    line-height: 19.2px;
}
.rodape__coluna_list {
    list-style-type: none;
    color: var(--cor-texto);
    font-family: var(--fonte-texto);
    font-size: 16px;
    line-height: 19.2px;
}
.rodape__coluna_list_item a {
    color: var(--cor-texto);
    text-decoration: none;
}
.rodape__coluna_list_item {
    margin-bottom: 8px;
}
.rodape__coluna_list_item:last-child {
    margin-bottom: 0;
}
1 resposta

Olá, Estanislau, como vai?

Seu código está bem encaminhado. Um ponto que vale observar é o uso repetido de algumas tags <ul> vazias antes da lista com conteúdo. Elas podem ser removidas para manter o código mais limpo e evitar qualquer impacto visual ou estrutural desnecessário.

Continue praticando e compartilhando seus códigos por aqui. O fórum está sempre à disposição.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!