Olá pessoal! Tudo bem? Fiz a estilização do footer conforme o desafio que foi passado. Acredito que eu tenha seguido uma linha bem similar a resolução proposta pela instrutora Mônica.
Vou disponibilizar o meu código abaixo pra que vocês possam ver a forma que fiz:
HTML
<footer class="rodape">
<img class="rodape__logo" src="./assets/Logo.png" alt="Logo da Alura+">
<ul class="rodape__lista">
<li class="lista__link">
<a class="lista__texto" href="#">Idioma</a>
</li>
<li class="lista__link">
<a class="lista__texto" href="#">Dispositivos compatíveis</a>
</li>
<li class="lista__link">
<a class="lista__texto" href="#">Contrato de assinatura</a>
</li>
<li class="lista__link">
<a class="lista__texto" href="#">Política de privacidade</a>
</li>
<li class="lista__link">
<a class="lista__texto" href="#">Proteção de dados no Brasil</a>
</li>
<li class="lista__link">
<a class="lista__texto" href="#">Anúncios personalizados</a>
</li>
<li class="lista__link">
<a class="lista__texto" 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">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: 5em 3em;
}
.rodape__logo {
width: 5%;
}
.rodape__lista {
display: flex;
justify-content: center;
margin: 2em 0;
gap: 1rem;
}
.lista__link {
list-style-type: none;
}
.lista__texto {
font-size: 1rem;
color: var(--primary-color);
}
.rodape__texto {
font-size: 0.8rem;
color: var(--secondary-color);
margin: 2em 0;
}
A minha única dúvida foi no quesito da estilização do logo. No começo, quando eu estava testando e buscando formas de estilizar seguindo o Figma, o meu logo ficou todo esticado e desproporcional, então criei uma classe para ele e fixei o tamanho dele em 5%. O problema resolveu. Mas depois de ter estilizado tudo, se eu comento a linha da classe que criei pra ele, o mesmo permanece com um tamanho padrão normal. Ou seja, o que eu fiz, pode atrapalhar eventualmente? Ou é uma forma de garantir que ele permaneça em um tamanho aceitável?
Valeu pessoal!