4
respostas

Imagem das Planta não aparece

A imagem da planta não aparece, já tentei por outras imagens e não vai, já tentei usar o "object-fit: scale-down" não adiantou.

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeCSS .produto{ margin-bottom: 1rem;

padding-top: 2rem;
padding-bottom: 2rem;
padding-left: 50%;

position: relative;
overflow: hidden;
background-color: var(--branco);
box-shadow: 10px 10px 30px var(--preto-sombra);

box-sizing: border-box;
min-height:12.5rem;

} .produto__imagem{ position: absolute; top:50%; left: -8rem;

transform:translateY(50%);

z-index: 1;

width: 18.75rem;

} .produto__conteudo{ position: relative; z-index: 2; }

.produto__titulo{ margin-top: 0; margin-bottom: .5rem; }

.produto__preco{ margin-bottom: 1.5rem; } .produto__comprar{ color: var(--amarelo); display: flex; align-items: center; } .produto__comprar--icone{ display: inline-block; width:.75rem; height: .75rem;

background-image: url(../../img/icones/seta.svg);

}

HTML

<link rel="stylesheet" href="assets/css/reset.css">
<link href="https://fonts.googleapis.com/css2?family=Elsie+Swash+Caps:wght@900&family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/componentes/base.css">
<link rel="stylesheet" href="assets/css/componentes/input.css">
<link rel="stylesheet" href="assets/css/componentes/botoes.css">
<link rel="stylesheet" href="assets/css/componentes/cartao.css">
<link rel="stylesheet" href="assets/css/componentes/item.css">
<link rel="stylesheet" href="assets/css/componentes/produtos.css">

<title>Home | Casa Verde</title>
    <article class="cartao">
        <h2 class="titulo alinhamento--meio">Como conseguir
            <span class="titulo--destaque">Minha Planta</span>
        </h2>

        <ul class="lista__item">
            <li class="item">
                <span class="item__icone item__icone--cursor"></span>
                <p>Escolha suas plantas</p>
            </li>
            <li class="item">
                <span class="item__icone item__icone--carrinho"></span>
                <p>Faça seu pedido</p>
            </li>
            <li class="item">
                <span class="item__icone item__icone--caminhao"></span>
                <p>Aguarde na sua casa</p>
            </li>
        </ul>

    </article>

    <article class="produto">
        <img src="assets/img/icones/carrinho.svg" alt="Foto do produto" class="produto__imagem">
        <div class="produto__conteudo">
            <h3 class="produto__titulo titulo--destaque">Ajuda Reptans</h3>
            <p class="produto__preco">R$ 20,00</p>
            <a href="#" class="produto__comprar">Comprar<span class="produto__icone"></span></a>
        </div>
    </article>


</main>
4 respostas

Oi, tudo bem? Tenta colocar:

background: url(../../img/icones/seta.svg);

sem o image.

mas a que não aparece é a imagem da planta, da seta apareceu, mas com tamanho cortado, mas o das plantas não aparece. Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Boa tarde.

Seu Código

 <article class="produto">
        <img src="assets/img/icones/carrinho.svg" alt="Foto do produto" class="produto__imagem">
        <div class="produto__conteudo">
            <h3 class="produto__titulo titulo--destaque">Ajuda Reptans</h3>
            <p class="produto__preco">R$ 20,00</p>
            <a href="#" class="produto__comprar">Comprar<span class="produto__icone"></span></a>
        </div>
    </article>

Meu Código

<article class="produto">
            <img src="assets/img/produto-01.png" alt="Foto do produto" class="produto__imagem">
            <div class="produto__conteudo">
                <h3 class="produto__titulo titulo--destaque">Ajuga reptans</h3>
                <p class="produto__preco">R$ 20,00</p>
                <a href="#" class="produto__comprar">Comprar<span class="produto__comprar--icone"></span></a>
            </div>
        </article>

Altere seu img dentro do produto para:

 <img src="assets/img/produto-01.png" alt="Foto do produto" class="produto__imagem">

Veja se deu certo.

Se não me engano aqui vc tem que por -50%

transform:translateY(50%); /*  AQUI COLOCA -50%*/

z-index: 1;

width: 18.75rem;