Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Projeto] Desafio da estilização do footer

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!

1 resposta
solução!

Oi, Gabriel, tudo bem?

O seu projeto ficou ótimo. Parabéns pelo resultado!

Muito obrigado por compartilhar o seu código com a comunidade do fórum, tenho certeza que vai ser uma inspiração para os demais estudantes.

Com relação a sua pergunta, as personalizações que você fez no rodapé não interferem no código que será criado nas próximas aulas, o que foi feito no footer só cabe ao footer então fique tranquilo, além de que você encontrou uma ótima solução, boa!

Continue mergulhando em seus estudos para desenvolver novas habilidades e conhecimentos e caso tenha dúvidas, não hesite em postar no fórum.

Espero ter ajudado e 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!