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

[Projeto] Minha solução

A forma com que eu fiz o footer:

        <footer class="container__footer">
            <img src="imagem/Logo.png" alt="alura+" class="container__img">
            <ul class="container__lista">
                <li class="separador">
                <a href="#"  class="container__links">Idioma</a>
                <a href="#"  class="container__links">Dispositivos Compatíveis</a>
                <a href="#"  class="container__links">Contrato de assinatura</a>
                <a href="#"  class="container__links">Política de privacidade</a>
                <a href="#"  class="container__links">Proteção de dados no Brasil</a>
                <a href="#"  class="container__links">Anuncios personalizados</a>
                <a href="#"  class="container__links">Ajuda</a>
                </li>

                <li>
                    <p>® 2021 Alura, Alura+ e Alura Língua. Todos os direitos reservados. Serviço de assinatura paga. Conteúdo sujeito a disponibilidade.</p>
                </li>

                <li>
                    <p class="paragrafo">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>

                 </ul>
        </footer>

NO CSS:

.container__footer {
    text-align: center;
    margin: 10em 0 1em 0;
}

.container__img {
    text-align: center;
    margin-bottom: 2em;
}


.container__lista {
    text-align: center;
    display: grid;
    grid-template-rows: repeat(3, auto);
    gap: 2em;
    color: var(--cinza-secundario);
    font-size: 14px;
    font-family: var(--fonte-principal);
    padding: 1em;
    list-style: none;
}


.separador{
   display: flex;
   gap: 20px;
   text-align: center;
   justify-content: center;
   color: var(--branco-principal);
   font-size: 16px;
   font-family: var(--fonte-principal);
}

.container__links {
    color: var(--branco-principal);
}

.paragrafo {
    padding: 1em;
}

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

1 resposta
solução!

Olá, Gustavo, como vai?

Parabéns por ter concluído o desafio e por ter compartilhado com a gente aqui no fórum. Um ponto que pode ser ajustado é o uso do <li> para envolver todos os links juntos, enquanto o ideal seria cada link estar em seu próprio <li>. Isso ajuda na semântica e acessibilidade do HTML, pois a lista fica com cada item devidamente representado. No CSS, a combinação de grid e flex está funcional, mas se você preferir simplificar, pode aplicar flex diretamente na lista para os links, desde que cada link esteja em um <li>.

O HTML ficaria assim:

<ul class="container__lista">
  <li><a href="#" class="container__links">Idioma</a></li>
  <li><a href="#" class="container__links">Dispositivos Compatíveis</a></li>
  <!-- e assim por diante para cada link -->
</ul>

E no CSS poderia fazer assim:

.container__lista {
    display: flex;
    justify-content: center;
    /* Outros estilos*/
}

Outro detalhe é que o <p> com a classe paragrafo ficou sem a tag de fechamento aparentemente.

Obrigado por compartilhar seu código aqui, continue praticando e dividindo suas soluções no fórum. Estamos à disposição para ajudar sempre que precisar.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!