1
resposta

produtos

alguém pode me ajudar a fazer com que os produtos fiquem passando parecido com isso exemplo: https://www.zattini.com.br/ não achou descer mais e vai aparecer os produtos

html dos produtos

            <main>
                <ul class="produtos" style="width: 1309.121px;">
                    <li class="tamamho">
                        <img src="roupa01.jpeg" width="220" height="310">
                        <p class="produto_nome_roupa">Roupa 1</p>
                        <p class="produto-preço">R$ 50,00</p>
                        <p class="produto-frete">Frete Grátis</p>    
                    </li> 
                    <li class="tamamho">
                        <img src="roupa02.jpeg" width="220" height="310">
                        <p class="produto_nome_roupa"> Roupa 2 </p> 
                        <p class="produto-preço">R$ 40,00</p>    
                        <p class="produto-frete">Frete Grátis</p>
                    </li>
                    <li class="tamamho">
                        <img src="roupa03.jpeg" width="220" height="310">
                        <p class="produto_nome_roupa">Roupa 3</p> 
                        <p class="produto-preço">R$ 60,00</p>    
                        <p class="produto-frete">Frete Grátis</p>
                    </li>
                    <li class="tamamho">
                        <img src="roupa04.jpeg" width="220" height="310">
                        <p class="produto_nome_roupa">Roupa 4</p> 
                        <p class="produto-preço">R$ 30,00</p>    
                        <p class="produto-frete">Frete Grátis</p>
                    </li>
                    <li class="tamamho">
                        <img src="roupa05.jpeg" width="220" height="310">
                        <p class="produto_nome_roupa">Roupa 5</p> 
                        <p class="produto-preço">R$ 80,00</p>    
                        <p class="produto-frete">Frete Grátis</p>
                    </li>
                </ul>
            </main>

css dos produtos

.title {
    font-size: 45px;
    text-align: center;
    margin-top: 90px;
    font-weight: bold;
}

.tamanho {
    left: 50em;
}

.produtos {
    width: 1010px;
    margin: 0 auto 0 50px;
}

.produtos  li{
    display: inline-block;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 20px 100px;
    height: 4rem;
    width: 17em;
}

.produtos li:hover .produto_nome_roupa {
    font-size: 40px;
    width: 118px;
}

.produtos .produto_nome_roupa {
    font-size: 30px;
    font-weight: bold;
}

.produto_nome_roupa {
    width: 118px;
}

.produto-preço {
    font-size: 22px;
    font-weight: bold;
    margin-top: 10px;
    width: 89px;
}

.produto-frete {
    font-size: 18px;
    color: #4b8b3b;
    width: 98px;
}
1 resposta

Fala ai Pedro, tudo bem? Dá uma olhada nesse link: https://tableless.com.br/criando-slideshow-zero-com-javascript-puro-2/

Eles explicam como criar um componente de Slider (Carousel)

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software