Olá, gostaria de compartilhar a solução em que cheguei para a implementação do footer da Alura+
HTML
<footer class="rodape">
<img src="/img/Logo.png" alt="Alura+" class="rodape__logo" />
<ul class="rodape__lista">
<li><a href="#" class="rodape__link">Idioma</a></li>
<li><a href="#" class="rodape__link">Dispositivos compatíveis</a></li>
<li><a href="#" class="rodape__link">Contrato de assinatura</a></li>
<li><a href="#" class="rodape__link">Politica de privacidade</a></li>
<li>
<a href="#" class="rodape__link">Proteção de dados no Brasil</a>
</li>
<li><a href="#" class="rodape__link">Anuncios personalizados</a></li>
<li><a href="#" class="rodape__link">Ajuda</a></li>
</ul>
<p class="rodape__texto">
© 2023 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>
CSS
.rodape {
max-width: 1200px;
margin-inline: auto;
padding-block: 50px;
text-align: center;
}
.rodape__logo {
margin-bottom: 41px;
}
.rodape__lista {
color: var(--branco-principal);
display: flex;
justify-content: center;
list-style: none;
margin-bottom: 24px;
}
.rodape__lista li:not(:last-child) {
margin-right: 16px;
}
.rodape__link {
color: inherit;
text-decoration: none;
letter-spacing: 0.5px;
}
.rodape__link:hover {
color: var(--botao-azul);
}
.rodape__texto {
font-size: 14px;
color: var(--cinza-secundario);
margin-bottom: 21px;
line-height: 21px;
letter-spacing: 0.4px;
}
Visualização da implementação:
Implementação
Plugin do Perfect Pixel - Overlay do Layout na implementação: