1
resposta

Desafio: Segunda linha do Rodapé.

Estrutura Rodapé.

<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">
        <a href="#">
            <img src="./assets/icons/whatsapp.svg" alt="Whatsapp">
        </a>
    </li>
    <li class="rodape__coluna_list-item-redes-sociais">
        <a href="#">
            <img src="./assets/icons/instagram.svg" alt="Instagram">
        </a>
    </li>
    <li class="rodape__coluna_list-item-redes-sociais">
        <a href="#">
            <img src="./assets/icons/tiktok.svg" alt="Tiktok">
        </a>
    </li>
</ul>
1 resposta

Oi, Estanislau! Como vai?

Obrigada por compartilhar seu código com a comunidade Alura.

Seu rodapé está bem estruturado, e gostei do cuidado com as listas de cartões e redes sociais. A hierarquia com <h5> também ajuda na acessibilidade da página. Está no caminho certo para montar um layout responsivo e bem organizado.

Ícone de sugestão

Para saber mais:

A título de curiosidade, ao trabalhar com grids no CSS, você pode facilmente definir a estrutura do rodapé, dividindo-o em diferentes áreas com o uso de grid-template-areas e grid-column para controlar o layout. Além disso, aprender a usar unidades de medida como fr para distribuição de espaço e a propriedade auto pode te ajudar a criar layouts mais responsivos. Confira os links abaixo para aprender mais sobre grids em CSS:

Alura

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