<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Blog Slider</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f2f5;
margin: 0;
padding: 20px;
}
/* Slider Wrapper */
.blog-container {
display: flex;
gap: 15px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 20px;
scrollbar-width: none; /* Firefox ke liye */
}
.blog-container::-webkit-scrollbar {
display: none; /* Chrome/Safari ke liye scrollbar hide */
}
/* Link Wrapper (Poora box clickable banane ke liye) */
.blog-link {
text-decoration: none;
color: inherit;
display: block;
/* Desktop default: 4 posts (100% / 4 - gap) */
flex: 0 0 calc(25% - 12px);
scroll-snap-align: start;
}
/* Blog Card Design */
.blog-card {
background: white;
border-radius: 10px;
overflow: hidden;
height: 100%;
transition: transform 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.blog-card:hover {
transform: translateY(-5px);
}
/* Image Set-up */
.blog-image {
width: 100%;
height: 160px;
object-fit: cover; /* Image ko auto-fit karega */
display: block;
}
.blog-content {
padding: 12px;
}
.blog-title {
font-size: 1rem;
margin: 0 0 8px 0;
font-weight: bold;
color: #222;
}
.blog-desc {
font-size: 0.85rem;
color: #555;
display: -webkit-box;
-webkit-line-clamp: 2; /* Sirf 2 line description dikhegi */
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Responsive Settings */
/* Tablet: 3 Posts */
@media (max-width: 1024px) {
.blog-link {
flex: 0 0 calc(33.33% - 10px);
}
}
/* Mobile: 2 Posts (Aapki khas demand) */
@media (max-width: 600px) {
.blog-link {
flex: 0 0 calc(50% - 10px);
}
.blog-image {
height: 120px; /* Mobile par image thodi choti */
}
.blog-title {
font-size: 0.9rem;
}
}
</style>
</head>
<body>
<div class="blog-container">
<!-- Post 1 -->
<a href="https://yourlink.com/post1" class="blog-link">
<div class="blog-card">
<img src="https://picsum.photos/400/300?random=1" alt="Blog 1" class="blog-image">
<div class="blog-content">
<h3 class="blog-title">Pehla Blog Post</h3>
<p class="blog-desc">Isme aapka short description aayega jo do line tak dikhega...</p>
</div>
</div>
</a>
<!-- Post 2 -->
<a href="https://yourlink.com/post2" class="blog-link">
<div class="blog-card">
<img src="https://picsum.photos/400/300?random=2" alt="Blog 2" class="blog-image">
<div class="blog-content">
<h3 class="blog-title">Doosra Blog Post</h3>
<p class="blog-desc">Mobile par screen par ab do post ek sath dikhenge aur swipe honge.</p>
</div>
</div>
</a>
<!-- Post 3 -->
<a href="https://yourlink.com/post3" class="blog-link">
<div class="blog-card">
<img src="https://picsum.photos/400/300?random=3" alt="Blog 3" class="blog-image">
<div class="blog-content">
<h3 class="blog-title">Teesra Blog Post</h3>
<p class="blog-desc">PC par aapko ek line mein 4 posts nazar aayenge.</p>
</div>
</div>
</a>
<!-- Post 4 -->
<a href="https://yourlink.com/post4" class="blog-link">
<div class="blog-card">
<img src="https://picsum.photos/400/300?random=4" alt="Blog 4" class="blog-image">
<div class="blog-content">
<h3 class="blog-title">Chautha Blog Post</h3>
<p class="blog-desc">Sabhi posts clickable hain, aap kisi par bhi click kar sakte hain.</p>
</div>
</div>
</a>
<!-- Post 5 (Swipe Check karne ke liye) -->
<a href="https://yourlink.com/post5" class="blog-link">
<div class="blog-card">
<img src="https://picsum.photos/400/300?random=5" alt="Blog 5" class="blog-image">
<div class="blog-content">
<h3 class="blog-title">Paanchva Blog Post</h3>
<p class="blog-desc">Extra post taaki aap swipe feature test kar sakein.</p>
</div>
</div>
</a>
</div>
</body>
</html>