Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

(RESOLVIDO) Dificuldade de aplicar a imagem ao texto: Tempo, foco e especialidades.

Resolvido!!

Estou tendo dificuldade na hora de por as imagens ao lado desses elementos, já verifiquei e aparentemente não sei onde está o erro, sempre que tento a imagem não aparece.

Html Diferenciais container:

 <section class="diferenciais container">
                    <ul class="diferenciais__lista">
                        <li class="diferenciais__item diferenciais__item-tempo">
                            <h2 class="item__titulo">Tempo</h2>
                            <p class="item__texto">Tempo é importante! Trabalhamos em ritmo acelerado, atendendo rigorosamente aos prazos.</p>
                        </li>
                        <li class="diferenciais__item diferenciais__item-foco">
                            <h2 class="item__titulo">Foco</h2>
                            <p class="item__texto">Focamos no empreendimento! Oferecemos serviços de qualidade com preços acessíveis.</p>
                        </li>
                        <li class="diferenciais__item diferenciais__item-especialistas">
                            <h2 class="item__titulo">Especialistas</h2>
                            <p class="item__texto">Equipe experiente e especializada! Testamos todos os produtos antes do lançamento.</p>
                        </li>
                    </ul>
                </section>

css dos diferenciais:

    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.diferenciais__lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.diferenciais__item {
    max-width: 350px;

    box-sizing: border-box;

    padding: 2rem 0 2rem 5rem;

    background-repeat: no-repeat;
    background-position: top 1.25rem left 2.5rem;
}

.diferenciais__item-tempo {
    background-image: url(/img/icone-relogio.png);
}

.diferenciais__item-foco {
    background-image: url(/img/icone-dinheiro.png);
}

.diferenciais__item-especialistas {
    background-image: url(/img/icone-quimica.png);
}

.item__titulo {
    color: var(--cinza-escuro);
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;

    margin-bottom: 1.5rem;
}

.item__texto {
    line-height: normal;
}
4 respostas
solução!

Resolvido, tinha esquecido de usar os pontos.

Olá Tiago, tudo bem?

Já tentou colocar o caminho entre aspas?

Tente assim:

.diferenciais__item-tempo {
    background-image: url("/img/icone-relogio.png");
}

.diferenciais__item-foco {
    background-image: url("/img/icone-dinheiro.png");
}

Olá, Duande!

Tudo sim! E com você?

Na real o que aconteceu foi quase que isso, tinha esquecido de por os pontos nos caminhos, mas irei ver se desse jeito também funciona, obrigado!

Tudo certo também.

Entendi.