<div class="container py-5">
<h3 class="fw-bold mb-4">Latest tutorials</h3>
<div class="row g-4">
<div class="col-md-6">
<div class="d-flex gap-3 border rounded-4 p-3 h-100">
<div class="position-relative" style="min-width:180px"><img src="https://images.unsplash.com/photo-1522252234503-e356532cafd5?w=400&h=300&fit=crop" alt="Coding on laptop" class="rounded" style="width:180px;height:120px;object-fit:cover"><i class="bi bi-play-circle-fill text-white position-absolute top-50 start-50 translate-middle fs-1"></i></div>
<div><span class="badge bg-primary-subtle text-primary small">Bootstrap</span>
<h5 class="fw-bold mt-2 mb-1">Grid system in 10 minutes</h5>
<p class="small text-muted mb-1">12:34 · 45k views</p><small class="text-muted">By CodeShikhi</small>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex gap-3 border rounded-4 p-3 h-100">
<div class="position-relative" style="min-width:180px"><img src="https://images.unsplash.com/photo-1587620962725-abab7fe55159?w=400&h=300&fit=crop" alt="JavaScript code screen" class="rounded" style="width:180px;height:120px;object-fit:cover"><i class="bi bi-play-circle-fill text-white position-absolute top-50 start-50 translate-middle fs-1"></i></div>
<div><span class="badge bg-success-subtle text-success small">JavaScript</span>
<h5 class="fw-bold mt-2 mb-1">DOM manipulation basics</h5>
<p class="small text-muted mb-1">08:22 · 28k views</p><small class="text-muted">By CodeShikhi</small>
</div>
</div>
</div>
</div>
</div>
<script>
/*__yt_norm__*/
(function() {
function norm(u) {
try {
var m = String(u).match(/(?:v=|youtu\.be\/|\/embed\/|\/shorts\/|\/live\/)([\w-]{11})/);
return m ? ("https://www.youtube.com/embed/" + m[1]) : u;
} catch (e) {
return u;
}
}
document.querySelectorAll("iframe").forEach(function(f) {
var s = f.getAttribute("data-yt") || f.getAttribute("src") || "";
if (!s) return;
var n = norm(s);
if (n && n !== f.src) f.src = n;
});
})();
</script>