Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Diferença do tópicos do figma

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Integrando o Carrossel com SwiperJS e atividade Lista de tópicos

por Diego Melo dos Santos
| 26.2k xp | 50 posts

Boa noite, o meu tópico ficou diferente ao do figma!!!

CSS

.tópicos {
    background: var(--azul-degrade);
    text-align: center;
    padding: 1em 0;
}

.tópicos__titulo {
    color: var(--branco);
    font-weight: 300;
    margin-bottom: 1em;
}

.tópicos__lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.tópico__item {
    margin: 2em 0.5em;
}

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

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

1 resposta
solução!
por Arthur Ari Lemke
| 61.4k xp | 9 posts

Oi, Seu código CSS parece estar igual ao código passado, o erro deve estar em outro lugar. Verifique se as classes de cada <a> esta devidamente atribuída e contida dentro de um <li>, enquanto todos estão dentro do elemento <ul class=tópico__lista>

Verifique se os nomes das classes selecionadas no CSS correspondem as classes declaradas no HTML A sua section do tópico deve parecer desta forma:

    <section class="tópico">
        <h2 class="tópicos__titulo">Tópico visitados recentemente</h2>
        <ul class="tópicos__lista">
            <li class="tópico__item">
                <a href="#" class="tópicos__link">Android</a>
            </li>
            <li class="tópico__item">
                <a href="#" class="tópicos__link">Marketing Digital</a>
            </li>
            <li class="tópico__item">
                <a href="#" class="tópicos__link">Agile</a>
            </li>
            <li class="tópico__item">
                <a href="#" class="tópicos__link">Startups</a>
            </li>
            <li class="tópico__item">
                <a href="#" class="tópicos__link">HTML e CSS</a>
            </li>
            <li class="tópico__item">
                <a href="#" class="tópicos__link">Python</a>
            </li>
            <li class="tópico__item">
                <a href="#" class="tópicos__link">OO</a>
            </li>
            <li class="tópico__item">
                <a href="#" class="tópicos__link">Java</a>
            </li>
        </ul>
    </section>

Espero ter ajudado, caso contrario considere mostrar seu HTML para revisarmos.