1
resposta

Desafio footer

Como eu fiz

<footer class="rodape">
        <img src="assets/Logo.png" alt="Alura+" class="rodape-logo">
        <ul class="rodape-lista">
            <li class="lista-link">
                <a href="#">Idioma</a>
            </li>
            <li class="lista-link">
                <a href="#">Dipositivos compatíveis</a>
            </li>
            <li class="lista-link">
                <a href="#">Contrato de assinatura</a>
            </li>
            <li class="lista-link">
                <a href="#">Politica de privacidade</a>
            </li>
            <li class="lista-link">
                <a href="#">Proteção de dados no Brasil</a>
            </li>
            <li class="lista-link">
                <a href="#">Anuncios personalizados</a>
            </li>
            <li class="lista-link">
                <a href="#">Ajuda</a>
            </li>
        </ul>
        <p class="rodape-texto">® 2021 Alura, Alura+ e Alura Língua. Todos os direitos reservados. Serviço de assinatura paga. Conteúdo sujeito a disponibilidade.</p>
        <p class="rodape-texto">Alura+ é um serviço pago, baseado em assinatura e sujeito a termos e condições. 
            O serviço Alura+ é comercializado por Aovs Sistemas de Informática S.A., Rua Vergueiro, 3185 - Liberdade, São Paulo - SP, 04101-300, Brasil e CNPJ 05.555.382/0001-33</p>
    </footer>

No css

.rodape {
    text-align: center;
    margin: 2rem 0;
}

.rodape-lista {
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin: 1.5rem  0;
}

.lista-link a {
    color: var(--branco-principal);
    text-decoration: none;
    padding: 0 0.75rem;
}

.rodape-texto {
    color: var(--cinza-secundaria);
    font-size: 14px;
    margin: 1rem 5rem;
}

.rodape-logo {
   margin-bottom: 0.60rem;

}

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

1 resposta

Oi, Juan, tudo bem com você?

Meus parabéns por compartilhar a sua resolução da atividade do footer! É muito bom ver você praticando e mostrando seu progresso.

Seu código está excelente, tanto a estrutura do HTML quanto a estilização no CSS. Você usou muito bem o text-align no rodapé e o display: flex com justify-content: center para organizar a lista de links.

Continue assim! Seu empenho é fundamental para o seu desenvolvimento.

Qualquer dúvida, estou à disposição.

Bons estudos!

Sucesso

Imagem da comunidade