A minha resolução ficou diferente do gabarito, mas o resultado ficou parecido com o Figma
Imagem do projeto:
HTML:
<footer class = "rodape">
<img src = "Imagens/Logo.png" alt = "Logo do Alura+" class = "rodape__logo">
<ul class = "rodape__lista">
<li class = "lista__links">
<a href = "#" class = "link-rodape"> Idioma </a>
</li>
<li class = "lista__links">
<a href = "#" class = "link-rodape"> Dispositivos compatíveis </a>
</li>
<li class = "lista__links">
<a href = "#" class = "link-rodape"> Contrato de assinatura </a>
</li>
<li class = "lista__links">
<a href = "#" class = "link-rodape"> Política de privacidade </a>
</li>
<li class = "lista__links">
<a href = "#" class = "link-rodape"> Proteção de dados no Brasil </a>
</li>
<li class = "lista__links">
<a href = "#" class = "link-rodape"> Anúncios personalizados </a>
</li>
<li class = "lista__links">
<a href = "#" class = "link-rodape"> 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>
CSS:
.rodape {
text-align: center;
margin: 7em 0;
}
.rodape__logo {
margin: 1.5em;
}
.rodape__lista {
display: flex;
justify-content: center;
list-style-type: none;
margin: 1em;
}
.link-rodape {
margin: 1em;
font-size: 16px;
color: var(--title-color);
text-decoration: none;
}
.rodape__texto {
margin-bottom: 2em;
font-size: 14px;
color: var(--subtitle-color);
}
Dúvida: qual é a diferença entre 'justify-content', 'text-align' e 'align-itens'?
