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

[Sugestão] Implementação do Footer do site Alura+

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 Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Plugin do Perfect Pixel - Overlay do Layout na implementação: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas
solução!

Oi João, tudo bem?

Muito obrigada por compartilhar com a gente o seu resultado. Ficou muito legal :D

Parabéns por praticar, assim você consegue fixar bem o que viu nas aulas.

Espero que tenha gostado do desafio e do curso.

Continue os bons estudos.

Um abraço.

Olá Lorena, estou bem obrigado! Sim claro, gostei da experiência...