HTML/CSS
JavaScript
Inline Scroll
The Inline Scroll is a beautifully designed horizontal scrolling section displaying a curated selection of popular collection.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plaeto Inline Scroll</title>
<style>
body{
margin:0px;
}
.scroll-container-wraqpper {
background: #dd5041;
}
.scroll-container {
position: relative;
width: 100%;
max-width: 1200px;
margin: 0px auto;
overflow: hidden;
}
.scroll-container h2 {
color: #fff;
margin: 0px;
padding-top: 20px;
font-size: 32px;
}
.scroll-wrapper {
display: flex;
gap: 20px;
padding: 20px 0;
overflow-x: auto;
scroll-behavior: smooth;
-ms-overflow-style: none;
scrollbar-width: none;
}
.scroll-wrapper::-webkit-scrollbar {
display: none;
}
.scroll-item {
flex: 0 0 300px;
height: 400px;
background: #fff;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.scroll-item:hover {
transform: translateY(-5px);
}
.scroll-item-image {
width: 100%;
height: 200px;
background-size: cover;
background-position: center;
border-radius: 10px;
margin-bottom: 15px;
}
.scroll-item-title {
font-size: 18px;
font-weight: 600;
color: #333;
margin-bottom: 10px;
}
.scroll-item-description {
font-size: 14px;
color: #666;
line-height: 1.5;
}
.scroll-item-price {
font-size: 20px;
font-weight: 700;
color: #000;
margin-top: 10px;
}
@media (max-width: 768px) {
.scroll-item {
flex: 0 0 250px;
height: 350px;
}
.scroll-button {
width: 35px;
height: 35px;
font-size: 16px;
}
}
</style>
</head>
<body>
<div class="scroll-container-wraqpper">
<div class="scroll-container">
<h2>Popular Brands You Can't Miss</h2>
<div class="scroll-wrapper">
<!-- Example items -->
<div class="scroll-item">
<div class="scroll-item-image" style="background-image: url('https://plaeto.in/cdn/shop/files/1_e2158ea9-7ee4-4f5c-82b1-f0625b0efd6f.jpg?v=1737460559&width=750')"></div>
<h3 class="scroll-item-title">Men's Classic Sneakers</h3>
<p class="scroll-item-description">Classic Sneakers for Men - Olive / Honey</p>
<div class="scroll-item-price"> ₹2,299</div>
</div>
<div class="scroll-item">
<div class="scroll-item-image" style="background-image: url('https://plaeto.in/cdn/shop/files/EZPlay_Pink.jpg?v=1716923147&width=750')"></div>
<h3 class="scroll-item-title">Women's - Slip-Ons</h3>
<p class="scroll-item-description">EZPlay Slip Ons for Women - Pink / Pink</p>
<div class="scroll-item-price">₹1,399</div>
</div>
<div class="scroll-item">
<div class="scroll-item-image" style="background-image: url('https://plaeto.in/cdn/shop/files/100006-001-01_21c16149-2de4-43a4-b212-24d245140e6c.jpg?v=1713770284&width=7500')"></div>
<h3 class="scroll-item-title">School Shoes</h3>
<p class="scroll-item-description">Nova Multiplay School Shoes (5 - 12 UK) - Black</p>
<div class="scroll-item-price">₹2,429</div>
</div>
<div class="scroll-item">
<div class="scroll-item-image" style="background-image: url('https://plaeto.in/cdn/shop/files/1_8333aa1e-9c10-44a8-82af-392b7bd72b4e.jpg?v=1735540307&width=750')"></div>
<h3 class="scroll-item-title">Special Offer</h3>
<p class="scroll-item-description">Ace Sports Shoes For Men- Navy Blue / Grey</p>
<div class="scroll-item-price">₹1,899</div>
</div>
<div class="scroll-item">
<div class="scroll-item-image" style="background-image: url('https://plaeto.in/cdn/shop/files/EZPlay_Grey.jpg?v=1716923141&width=750')"></div>
<h3 class="scroll-item-title">Special Offer</h3>
<p class="scroll-item-description">EZPlay Slip Ons for Women - Grey</p>
<div class="scroll-item-price">₹1,399</div>
</div>
</div>
</div>
</div>
</body>
</html>
Note: In the console, type 'allow pasting,' and then you can paste the code below.
Not Required