Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Não estou conseguindo colocar background

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 Ana Isabel Araújo Lima
| 75.3k xp | 9 posts

Oi! Alguém poderia dar uma olhada no meu código? Não estou conseguindo colocar um background e esse item ficou esquisito. Insira aqui a descrição dessa imagem para ajudar na acessibilidade

css

.topicos {
    background: var(--gradiente-azul);
    text-align: center;
    padding: 1em 0;
}
.topicos__titulo {
    color: var(--branco);
    font-weight: 300;
    margin-bottom: 1em;
}
.topicos__lista{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.topicos__item {
    margin: 2em 0.5em;
}
.topicos__link{
    text-decoration: none;
    color: var(--branco);
    padding:1em;
    background-color: var(--laranja);
    font-size: 14px;
    font-weight: 700;

}

index 

</section class="topicos">
    <h2 class="topicos__titulo">TÓPICOS VISITADOS RECENTEMENTE</h2>
        <ul class="topicos__lista">
            <il class="topicos__item">
                <a href="#" class="topicos__link">Android</a>
            </il>
            <il class="topicos__item">
                <a href="#" class="topicos__link">Marketing Digital</a>
            </il>
            <il class="topicos__item">
                <a href="#" class="topicos__link">Agile</a>
            </il>
            <il class="topicos__item">
                <a href="#" class="topicos__link">Startups</a>
            </il>
            <il class="topicos__item">
                <a href="#" class="topicos__link">HTML & CSS</a>
            </il>
            <il class="topicos__item">
                <a href="#" class="topicos__link">Python<a>
            </il>
            <il class="topicos__item">
                <a href="#" class="topicos__link">OO</a>
            </il>
            <il class="topicos__item">
                <a href="#" class="topicos__link">Java</a>
            </il>
        </ul>
   <section>

se precisarem de mais alguma informção eu passo

2 respostas
solução!
por SARAH CRISTINA BATISTA DOS SANTOS
| 887.8k xp | 2113 posts
Alura Scuba Team Monitor/ fórum

Olá, Ana!

No seu código HTML, você abriu uma tag section de forma incorreta com </section> em vez de <section>. Isso pode estar afetando a aplicação do estilo CSS à sua seção de tópicos.

Vamos corrigir isso. O início da sua seção de tópicos deve ser assim:

<section class="topicos">
    <h2 class="topicos__titulo">TÓPICOS VISITADOS RECENTEMENTE</h2>
    <!-- Restante do conteúdo -->

E não esqueça de fechar a tag section corretamente no final da seção, assim:

    <!-- Conteúdo da seção -->
</section>

Além disso, certifique-se de que a variável CSS --gradiente-azul está definida corretamente em seu arquivo de estilos e que ela contém o valor de um gradiente CSS válido, como por exemplo:

:root {
    --gradiente-azul: linear-gradient(to right, #1e3c72, #2a5298);
}

Após realizar essas correções, seu background deve ser aplicado corretamente à seção. Se o problema persistir, verifique se o arquivo CSS está sendo carregado corretamente na sua página HTML e se não há outros erros de sintaxe no seu código.

Espero ter ajudado!

Caso tenha dúvidas, fico à dissposição.

Abraços e bons estudos!

por Ana Isabel Araújo Lima
| 75.3k xp | 9 posts

Era isso mesmo, muito obrigada! Em relação ao ícone 00, você tem alguma ideia do que pode ser? Todos ficaram certinhos e só ele ficou estranho assim. :,)