Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Revisando e Praticando Footer

Elaborei a estrutura do Footer da seguinte maneira:

<footer class="rodape">
        <img src="img/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="#">Dispositivos Compatíveis</a> 
            </li>
            <li class="lista__link">
                <a href="#">Contrato de Assinatura</a> 
            </li>
            <li class="lista__link">
                <a href="#">Política de Privacidade</a> 
            </li>
            <li class="lista__link">
                <a href="#">Proteção de Dados no Brasil</a> 
            </li>
            <li class="lista__link">
                <a href="#">Anúncios 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 texto__final">
            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>
</body>
</html>

CSS

.dispositivos__lista {
    margin: 5em 0;
}

.lista__link {
    display: inline-block;  
    margin: 0 16px 0 0;  
}

.rodape {
    text-align: center;
}

.rodape a {
    color: var(--branco-principal);
    text-decoration: none;
}

.rodape a:hover {
    text-decoration: underline;
}

.rodape__logo {
    margin-top: 5em;
}

.rodape__lista {
    margin: 3em 0 2em 0;
    font-size: 16px;
}

.rodape__texto {
    margin: 0 0 3em 0;
    font-size: 14px;
    color: var(--cinza-secundario);
}

.texto__final {
    margin-bottom: 2em;
}

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

2 respostas

Oi Rosilene, tudo bem?

Parabéns por completar mais uma parte do projeto! Ficou muito bom :D.

Muito obrigada por compartilhar com a gente o seu código.

Um abraço e bons estudos.

solução!

Obrigada,querida! Abraços!