<div class="container py-5">
<div class="d-flex justify-content-between align-items-center mb-4">
<div><span class="badge bg-danger">FLASH DEALS</span>
<h3 class="fw-bold mt-2 mb-0">Ends in 3 hours</h3>
</div><a href="#" class="text-danger fw-bold text-decoration-none">View all →</a>
</div>
<div class="row g-3">
<div class="col-6 col-md-3">
<div class="border rounded-4 p-3 h-100 position-relative"><span class="badge bg-danger position-absolute top-0 start-0 m-2">-45%</span><img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400&h=300&fit=crop" alt="Watch" class="img-fluid rounded">
<h6 class="mt-2 mb-1 fw-bold small">Classic Watch</h6><span class="text-danger fw-bold">$65</span> <s class="small text-muted">$120</s>
<div class="progress mt-2" style="height:6px">
<div class="progress-bar bg-danger" style="width:70%"></div>
</div><small class="text-muted">Sold 70/100</small>
</div>
</div>
<div class="col-6 col-md-3">
<div class="border rounded-4 p-3 h-100 position-relative"><span class="badge bg-danger position-absolute top-0 start-0 m-2">-30%</span><img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=400&h=300&fit=crop" alt="Sneakers" class="img-fluid rounded">
<h6 class="mt-2 mb-1 fw-bold small">Runner Shoes</h6><span class="text-danger fw-bold">$62</span> <s class="small text-muted">$89</s>
<div class="progress mt-2" style="height:6px">
<div class="progress-bar bg-danger" style="width:40%"></div>
</div><small class="text-muted">Sold 40/100</small>
</div>
</div>
<div class="col-6 col-md-3">
<div class="border rounded-4 p-3 h-100 position-relative"><span class="badge bg-danger position-absolute top-0 start-0 m-2">-55%</span><img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=300&fit=crop" alt="Headphones" class="img-fluid rounded">
<h6 class="mt-2 mb-1 fw-bold small">Headphones</h6><span class="text-danger fw-bold">$89</span> <s class="small text-muted">$199</s>
<div class="progress mt-2" style="height:6px">
<div class="progress-bar bg-danger" style="width:85%"></div>
</div><small class="text-muted">Sold 85/100</small>
</div>
</div>
<div class="col-6 col-md-3">
<div class="border rounded-4 p-3 h-100 position-relative"><span class="badge bg-danger position-absolute top-0 start-0 m-2">-25%</span><img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?w=400&h=300&fit=crop" alt="Smart watch" class="img-fluid rounded">
<h6 class="mt-2 mb-1 fw-bold small">Smart Watch</h6><span class="text-danger fw-bold">$186</span> <s class="small text-muted">$249</s>
<div class="progress mt-2" style="height:6px">
<div class="progress-bar bg-danger" style="width:20%"></div>
</div><small class="text-muted">Sold 20/100</small>
</div>
</div>
</div>
</div>