1
resposta

[Projeto] Desafio Footer

HTML footer

<footer class="rodape">
            <img src="./Assets/Logo.png" alt="Logo da Alura mais" class="rodape_logo">
            
            <div class="rodape__menu">
                <ul class="rodape__menu__lista">
                    <li class="rodape__menu__lista__item">Idioma</li>
                    <li class="rodape__menu__lista__item">Dispositivos Compatíveis</li>
                    <li class="rodape__menu__lista__item">Contrato de assinatura</li>
                    <li class="rodape__menu__lista__item">Politica de privacidade</li>
                    <li class="rodape__menu__lista__item">Proteção de dados no Brasil</li>
                    <li class="rodape__menu__lista__item">Anuncios personalizados</li>
                    <li class="rodape__menu__lista__item">Ajuda</li>
                </ul>
            </div>

            <div  class="rodape__copyright">
                <ul class="rodape_copyright__texto">
                    <li class="rodape__copyright__texto__item">
                        ® 2021 Alura, Alura+ e Alura Língua. Todos os direitos reservados. Serviço de assinatura paga. Conteúdo sujeito a disponibilidade.
                    </li>
                    <li class="rodape__copyright__texto__item">
                        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
                    </li>
                    <li class="rodape__copyright__texto__item">
                        
                    </li>
                   
                </ul>
            </div>
            

        </footer>

CSS Footer

.rodape {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin: 9em 0 5em 0;
    width: 75rem;
}

.rodape_logo {
    width: 10%;
    margin: 1em;
}

.rodape__menu {
    margin: 1.5em;
}

.rodape__menu__lista{
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style-type: none;
    width: 75rem;
}

.rodape__menu__lista__item {
    font-family: var(--fonte-principal);
    font-size: 1em;
    font-weight: 400;
}


.rodape_copyright {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    list-style-type: none;
    width: 100%;
    height: 6rem;
}

.rodape__copyright__texto__item {
    font-size: 0.875em;
    color: var(--cor-extra-cinza);
    text-align: center;
    list-style-type: none;
    margin: 1.5em;
}

RESULTADO Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta

Oi, Luiz!

Obrigada por compartilhar seu código com a comunidade Alura.

Gostei de como você estruturou o HTML e o CSS para o footer. A utilização de flexbox para alinhar os itens de forma responsiva no rodapé ficou excelente, garantindo uma boa distribuição.

Conte com o apoio do Fórum na sua jornada. Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓

bons estudos