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

Como deixar a seção de tópicos similar ao FIgma

Boa tarde pessoal, alguém consegue me dar uma força com essa seção dos tópicos? Queria deixar como a página do Figma, mas a Monica ignorou essa parte. Tentei de algumas formas, até mesmo seguindo instruções de outros alunos, mas nenhum deu certo no meu projeto. Segue link do meu repositório no Git: https://github.com/SaulVasconcelos/AluraBooks

Figma:

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

Minha página:

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

1 resposta
solução!

Oii Saul, tudo ok?

Nesse caso é simples, uma opção bem aceita e simples é aplicar flexbox no contêiner e alinhas a <ul> de lista e o título em coluna e diminuir o limite de alcance da lista usando width.

Eu vou deixar o código aqui para ti do arquivo topicos.css com alguns comentários para ti entender o que eu fiz:

.topicos {
    background: var(--azul);
    text-align: center;
    /* Adicionei essas propriedades de flexbox para alinhar os itens filhos */
    display: flex;
    align-items: center;
    flex-direction: column;
}

.topicos__titulo {
    color: var(--branco);
    font-weight: 300;
    padding: 1em 0;
}

.topicos__lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Mudei o tamanho para as telas menores
    e coloquei o espaçamento para não ficar uma visualização feia */
    width: 80%;
    margin-bottom: 1.5rem;
} 

.topico__link {
    color: var(--branco);
    padding: 1em;
    background-color: var(--laranja);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
}

.topicos__item {
    /* Ajustei os espaçamentos */
    margin: 1.5em 0.5em;
}

/* Criei uma adaptação para telas médias */
@media screen and (min-width: 950px) {
    .topicos__lista {
        width: 55%;
    }
}

@media screen and (min-width: 1024px) {

    .topicos__titulo {
        font-size: 24px;
    }

    .topico__link {
        font-size: 22px;
        line-height: 1.5em;
    }

    .topicos__lista {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        /* Ajustei o limite para telas maiores */
        width: 50%;
    }

    .topicos__item {
        display: flex;
        flex-wrap: wrap;
        /* Ajustei o espaçamento para telas maiores */
        margin: .5rem;
    }
}

Não está perfeito, mas creio que já ajuda um pouco o seu objetivo, quaisquer dúvidas só perguntar que eu explico.

Tente brincar com os valores e testar no devtools para você ver como isso funciona, divirta-se e aprenda junto :)

Era isso. Espero ter ajudado!

Abraços e bons estudos.

Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓