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

Desafio Footer Concluído !

Eu fiz a estrutura do parágrafo um pouco diferente, pois no Figma a "margin" do paragrafo é menor do que a "ul".

<footer class="rodape">
        <img src="assets/Logo.png" alt="Logo da Alura Plus" class="rodape__logo">
        <ul class="rodape__lista">
            <li class="rodape__lista__opcoes"><a href="#" class="rodape__lista__link">Idioma</a></li>
            <li class="rodape__lista__opcoes"><a href="#" class="rodape__lista__link">Dispositivos compatíveis</a></li>
            <li class="rodape__lista__opcoes"><a href="#" class="rodape__lista__link">Contrato de Assinatura</a></li>
            <li class="rodape__lista__opcoes"><a href="#" class="rodape__lista__link">Politica de privacidade</a></li>
            <li class="rodape__lista__opcoes"><a href="#" class="rodape__lista__link">Proteção de dados no Brasil</a></li>
            <li class="rodape__lista__opcoes"><a href="#" class="rodape__lista__link">Anuncios personalizados</a></li>
            <li class="rodape__lista__opcoes"><a href="#" class="rodape__lista__link">Ajuda</a></li>
        </ul>
        <section class="rodape__direitos">
            <p class="rodape__direitos__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__direitos__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>
        </section>    
    </footer>

CSS:

.rodape {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5em;
    text-align: center;
    margin: 0 9.9em 0 9.9em;
}

.rodape__logo {
    width: 6.4em;
    text-align: center;
}

.rodape__lista {
    display: flex;
    align-items: center;
    list-style-type: none;
    justify-content: space-between;
    gap: 1em;
}

.rodape__lista__link {
    color: var(--branco-principal);
    text-decoration: none;
    font-weight: 400;
    font-size: 1em;
}

.rodape__direitos {
    display: flex;
    flex-direction: column;
    margin: 0 7.7em 5em 7.7em;
    gap: 1em;
}

.rodape__direitos__texto {
    color: var(--cinza-secundario);
    font-size: 0.9em;
    font-weight: 400;
}
2 respostas
solução!

Olá Gabriel!

Que alegria ver seu projeto ficando cada vez mais completo e sendo compartilhado aqui! Parabéns pelo esforço e dedicação, é muito gratificante ver o progresso dos estudantes.

Continue praticando e explorando cada vez mais!

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Valeu, Victor !

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software