Product Scroller | QuickCoder | The frontend studio

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Premium Product Scroller</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<section class="section">
  <div class="heading">
    <h2>Premium <span>Templates</span></h2>
    <p>High quality UI blocks for modern websites</p>
  </div>

<div class="card">
        <div class="card-img">
          <svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5">
            <rect x="3" y="4" width="18" height="14" rx="2"/>
            <path d="M3 10h18"/>
          </svg>
        </div>
        <div class="card-body">
          <h3>Landing Page UI</h3>
          <p>Clean hero, CTA & animations</p>
          <div class="price">₹999</div>
          <a class="btn">View Template</a>
        </div>
      </div>

<div class="card">
        <div class="card-img">
          <svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5">
            <path d="M3 21h18"/>
            <path d="M6 21V7l6-4 6 4v14"/>
          </svg>
        </div>
        <div class="card-body">
          <h3>Real Estate UI</h3>
          <p>Property cards & filters</p>
          <div class="price">₹1499</div>
          <a class="btn">View Template</a>
        </div>
      </div>

<div class="card">
        <div class="card-img">
          <svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5">
            <path d="M3 21h18"/>
            <path d="M6 21V7l6-4 6 4v14"/>
          </svg>
        </div>
        <div class="card-body">
          <h3>Transport UI</h3>
          <p>parmite cards & filters</p>
          <div class="price">₹1199</div>
          <a class="btn">View Template</a>
        </div>
      </div>

<div class="card">
        <div class="card-img">
          <svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5">
            <path d="M3 21h18"/>
            <path d="M6 21V7l6-4 6 4v14"/>
          </svg>
        </div>
        <div class="card-body">
          <h3>Travel UI</h3>
          <p>Tour cards & filters</p>
          <div class="price">₹1299</div>
          <a class="btn">View Template</a>
        </div>
      </div>

<div class="card">
        <div class="card-img">
          <svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5">
            <circle cx="12" cy="12" r="9"/>
            <path d="M12 7v5l3 3"/>
          </svg>
        </div>
        <div class="card-body">
          <h3>Dashboard UI</h3>
          <p>Admin panel components</p>
          <div class="price">₹1299</div>
          <a class="btn">View Template</a>
        </div>
      </div>

</div>

</div>
</section>

</body>
</html>

CSS

:root{
  --yellow:#FFC107;
  --yellow-dark:#e0a800;
  --black:#111;
  --white:#fff;
  --gray:#666;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Poppins, system-ui;
}

body{
  background:#f5f5f5;
}

/* SECTION */
.section{
  padding:80px 6%;
}

.heading{
  text-align:center;
  margin-bottom:50px;
}

.heading h2{
  font-size:38px;
  font-weight:700;
}

.heading span{
  color:var(--yellow);
}

.heading p{
  margin-top:10px;
  color:var(--gray);
}

/* SLIDER */
.slider-wrapper{
  position:relative;
}

.slider{
  display:flex;
  gap:25px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding-bottom:20px;
}

.slider::-webkit-scrollbar{
  height:6px;
}

.slider::-webkit-scrollbar-thumb{
  background:var(--yellow);
  border-radius:10px;
}

/* CARD */
.card{
  min-width:300px;
  background:#fff;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 20px 40px rgba(0,0,0,.12);
  transition:.4s;
}

.card:hover{
  transform:translateY(-12px);
}

/* IMAGE */
.card-img{
  height:220px;
  background:linear-gradient(135deg,#ffd54f,#ffb300);
  display:flex;
  align-items:center;
  justify-content:center;
}

.card-img svg{
  width:110px;
  opacity:.9;
}

/* CONTENT */
.card-body{
  padding:22px;
}

.card-body h3{
  font-size:20px;
  margin-bottom:8px;
}

.card-body p{
  font-size:14px;
  color:var(--gray);
  margin-bottom:15px;
}

.price{
  font-size:22px;
  font-weight:700;
  margin-bottom:18px;
}

/* BUTTON */
.btn{
  display:inline-block;
  padding:11px 22px;
  border-radius:30px;
  background:var(--yellow);
  color:#000;
  text-decoration:none;
  font-weight:600;
  transition:.3s;
}

.btn:hover{
  background:var(--yellow-dark);
}

/* ARROWS */
.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  background:var(--yellow);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.arrow svg{
  width:22px;
}

.arrow.left{ left:-18px; }
.arrow.right{ right:-18px; }

/* MOBILE */
@media(max-width:768px){
  .heading h2{ font-size:28px; }
  .card{ min-width:250px; }
  .arrow{ display:none; }
}

JavaScript

Product Scroller Preview

Download Options