Back to Video Cards
Video Cards

Tutorial Video List

#video

Live preview

Source code

html
<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>

More designs in this section