<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Scrolling Boxes with Pictures</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.container {
width: 90%;
margin: auto;
overflow-x: scroll;
white-space: nowrap;
padding: 20px 0;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border-radius: 10px;
}
.box {
display: inline-block;
width: 250px;
margin-right: 15px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
overflow: hidden;
vertical-align: top;
}
.box img {
width: 100%;
height: 160px;
object-fit: cover;
}
.box-content {
padding: 15px;
}
.box-content h3 {
font-size: 18px;
margin: 0 0 10px;
}
.box-content p {
font-size: 14px;
color: #555;
}
</style>
</head>
<body>
<div class=”container”>
<div class=”box”>
<img src=”https://picsum.photos/250/160?random=1″ alt=”Random Image 1″>
<div class=”box-content”>
<h3>Adventure Awaits</h3>
<p>Discover hidden gems around the world with our exclusive travel packages.</p>
</div>
</div>
<div class=”box”>
<img src=”https://picsum.photos/250/160?random=2″ alt=”Random Image 2″>
<div class=”box-content”>
<h3>City Lights</h3>
<p>Experience the magic of city nightlife like never before.</p>
</div>
</div>
<div class=”box”>
<img src=”https://picsum.photos/250/160?random=3″ alt=”Random Image 3″>
<div class=”box-content”>
<h3>Mountain Retreat</h3>
<p>Unplug and recharge in a cozy mountain cabin surrounded by nature.</p>
</div>
</div>
<div class=”box”>
<img src=”https://picsum.photos/250/160?random=4″ alt=”Random Image 4″>
<div class=”box-content”>
<h3>Ocean Breeze</h3>
<p>Feel the salty air and relax on serene, untouched beaches.</p>
</div>
</div>
<div class=”box”>
<img src=”https://picsum.photos/250/160?random=5″ alt=”Random Image 5″>
<div class=”box-content”>
<h3>Forest Trails</h3>
<p>Take a journey through lush forests and discover wildlife like never before.</p>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Long Scrolling Boxes with Pictures</title>
<style>
body {
font-family: ‘Segoe UI’, sans-serif;
background-color: #f0f0f0;
padding: 40px;
margin: 0;
}
h1 {
text-align: center;
margin-bottom: 40px;
}
.container {
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
gap: 20px;
padding: 20px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}
.box {
flex: 0 0 auto;
width: 250px;
scroll-snap-align: start;
background-color: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.box img {
width: 100%;
height: 160px;
object-fit: cover;
}
.box-content {
padding: 15px;
}
.box-content h3 {
margin: 0 0 10px;
font-size: 18px;
color: #333;
}
.box-content p {
margin: 0;
font-size: 14px;
color: #666;
}
/* Optional scrollbar styling */
.container::-webkit-scrollbar {
height: 10px;
}
.container::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>Discover Our Collection</h1>
<div class=”container”>
<!– Repeat this block with different content/images –>
<!– Image source generates random images from picsum.photos –>
<!– You can replace with your own image URLs –>
<!– Generate 20 boxes –>
<!– You can copy-paste more if needed –>
<!– Box template –>
<!– Use random numbers for image variations –>
<!– Random headings and text below –>
<div class=”box”>
<img src=”https://picsum.photos/250/160?random=101″ alt=”Random Image”>
<div class=”box-content”>
<h3>Hidden Cove</h3>
<p>A peaceful escape where time slows down and the sea sings softly.</p>
</div>
</div>
<div class=”box”>
<img src=”https://picsum.photos/250/160?random=102″ alt=”Random Image”>
<div class=”box-content”>
<h3>Vintage Drive</h3>
<p>Ride through memory lanes with timeless classics and retro vibes.</p>
</div>
</div>
<div class=”box”>
<img src=”https://picsum.photos/250/160?random=103″ alt=”Random Image”>
<div class=”box-content”>
<h3>Stargazer’s Point</h3>
<p>Watch the universe unfold on a clear night above the mountains.</p>
</div>
</div>
<div class=”box”>
<img src=”https://picsum.photos/250/160?random=104″ alt=”Random Image”>
<div class=”box-content”>
<h3>Urban Jungle</h3>
<p>Concrete meets green in the ultimate blend of nature and modern life.</p>
</div>
</div>
<div class=”box”>
<img src=”https://picsum.photos/250/160?random=105″ alt=”Random Image”>
<div class=”box-content”>
<h3>Golden Hour</h3>
<p>The perfect light to capture everything in a soft, glowing beauty.</p>
</div>
</div>
<div class=”box”>
<img src=”https://picsum.photos/250/160?random=106″ alt=”Random Image”>
<div class=”box-content”>
<h3>Wildflower Trail</h3>
<p>A colorful journey through hills blooming with untamed petals.</p>
</div>
</div>
<div class=”box”>
<img src=”https://picsum.photos/250/160?random=107″ alt=”Random Image”>
<div class=”box-content”>
<h3>Echo Lake</h3>
<p>Where your voice returns and your mind finds stillness.</p>
</div>
</div>
<div class=”box”>
<img src=”https://picsum.photos/250/160?random=108″ alt=”Random Image”>
<div class=”box-content”>
<h3>Neon Nights</h3>
<p>Bright lights, big dreams, and late-night city adventures.</p>
</div>
</div>
<div class=”box”>
<img src=”https://picsum.photos/250/160?random=109″ alt=”Random Image”>
<div class=”box-content”>
<h3>Snowy Peak</h3>
<p>Climb higher into crisp air and snow-dusted serenity.</p>
</div>
</div>
<div class=”box”>
<img src=”https://picsum.photos/250/160?random=110″ alt=”Random Image”>
<div class=”box-content”>
<h3>Sunset Road</h3>
<p>Drive westward into a horizon painted in fire and calm.</p>
</div>
</div>
<!– Ten more –>
<div class=”box”>
<img src=”https://picsum.photos/250/160?random=111″ alt=”Random Image”>
<div class=”box-content”>
<h3>Harvest Fields</h3>
<p>Golden rows of grain wave in rhythm with the breeze.</p>
</div>
</div>
<div class=”box”>
<img src=”https://picsum.photos/250/160?random=112″ alt=”Random Image”>
<div class=”box-content”>
<h3>Foggy Forest</h3>
<p>Mystery cloaked in mist, where every turn tells a tale.</p>
</div>
</div>
<div class=”box”>
<img src=”https://picsum.photos/250/160?random=113″ alt=”Random Image”>
<div class=”box-content”>
<h3>Crystal Coast</h3>
<p>Waves crash on sparkling shores in an endless rhythm of beauty.</p>
</div>
</div>
<div class=”box”>
<img src=”https://picsum.photos/250/160?random=114″ alt=”Random Image”>
<div class=”box-content”>
<h3>Desert Mirage</h3>
<p>A heatwave illusion in a landscape sculpted by sun and time.</p>
</div>
</div>
<div class=”box”>
<img src=”https://picsum.photos/250/160?random=115″ alt=”Random Image”>
<div class=”box-content”>
<h3>Lighthouse Watch</h3>
<p>Standing tall against the storm, a beacon of hope and light.</p>
</div>
</div>
<div class=”box”>
<img src=”https://picsum.photos/250/160?random=116″ alt=”Random Image”>
<div class=”box-content”>
<h3>Cherry Blossom Lane</h3>
<p>Soft petals dance through the breeze in a fleeting spring moment.</p>
</div>
</div>
<div class=”box”>
<img src=”https://picsum.photos/250/160?random=117″ alt=”Random Image”>
<div class=”box-content”>
<h3>Glacier Path</h3>
<p>Walk the edge of ancient ice and feel the pull of time.</p>
</div>
</div>
<div class=”box”>
<img src=”https://picsum.photos/250/160?random=118″ alt=”Random Image”>
<div class=”box-content”>
<h3>Jungle Rhythm</h3>
<p>The heartbeat of earth, pulsing through green and wild sounds.</p>
</div>
</div>
<div class=”box”>
<img src=”https://picsum.photos/250/160?random=119″ alt=”Random Image”>
<div class=”box-content”>
<h3>Firefly Valley</h3>
<p>Tiny lights dance through dusk in magical motion.</p>
</div>
</div>
<div class=”box”>
<img src=”https://picsum.photos/250/160?random=120″ alt=”Random Image”>
<div class=”box-content”>
<h3>Rainy Window</h3>
<p>Melancholy and music mingle behind glass drops and gray skies.</p>
</div>
</div>
</div>
</body>
</html>
Related Competitions
