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

Resolução - "04 Faça como eu fiz - estilizando o footer"

A minha resolução ficou diferente do gabarito, mas o resultado ficou parecido com o Figma

Imagem do projeto:

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

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'?

1 resposta
solução!

Olá, Victor, meu xará rs! Tudo bem?

Sua resolução ficou excelente

É muito comum o código não ficar idêntico ao gabarito e isso não é um problema. Na programação, existem várias formas de chegar ao mesmo resultado. O mais importante é que a semântica do HTML está correta, com o uso adequado de <footer>, <ul> e <li>, além de o visual estar fiel ao Figma.

A sua dúvida sobre alinhamento é ótima e faz toda a diferença para evoluir no CSS.

O text-align é uma propriedade mais tradicional, usada para alinhar textos e elementos inline dentro de um bloco. Ela atua no fluxo normal do documento, fora do contexto de Flexbox ou Grid. Por isso, quando usamos text-align: center, estamos centralizando o conteúdo textual dentro do elemento.

Já o justify-content entra em cena quando o elemento pai está com display: flex. Ele controla como os itens são distribuídos ao longo do eixo principal, que normalmente é horizontal. É ele quem define se os elementos ficam agrupados no centro, espalhados, com espaço entre eles ou ao redor.

O align-items, também do Flexbox, atua no eixo transversal, geralmente o vertical. Ele define como os itens se comportam em relação à altura do container, evitando que fiquem presos ao topo ou à base, por exemplo, quando usamos align-items: center.

Em resumo:

Para consolidar bem esses conceitos de eixos e alinhamentos, recomendo a leitura deste artigo da Alura, que funciona como um verdadeiro guia de bolso sobre Flexbox:

Para saber mais:

Sugestão de conteúdo:

Continue praticando. Seu código está limpo, organizado e mostra que você está entendendo bem os fundamentos.

Bons estudos!

Sucesso

Imagem da comunidade