<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Responsive Blog Card</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
<section class="cards-wrapper">
  <div class="card-grid-space">
    <div class="num">01</div>
    <a class="card" href="https://www.myritebook.com/css/squid-game-css-loaders-using-pure-html-css/" style="--bg-img: url(https://www.myritebook.com/wp-content/uploads/2025/11/Squid-Game-CSS-Loaders-Using-Pure-HTML-CSS.png)">
      <div>
        <h1>Squid Game Loaders</h1>
        <p>Loaders are one of the classic components used to create an attractive website…</p>
        <div class="date">21 November 2025</div>
        <div class="tags">
          <div class="tag">CSS</div>
        </div>
      </div>
    </a>
  </div>
  <div class="card-grid-space">
    <div class="num">02</div>
    <a class="card" href="https://www.myritebook.com/css/create-glowing-pulse-search-bar-using-html-and-pure-css/" style="--bg-img: url('https://www.myritebook.com/wp-content/uploads/2024/06/Create-Glowing-Pulse-Search-Bar-Using-HTML-and-Pure-CSS1.png')">
      <div>
        <h1>Glowing Pulse Search Bar</h1>
        <p>When it comes to website elements that are beautiful and must-haves…</p>
        <div class="date">24 April 2024</div>
        <div class="tags">
          <div class="tag">CSS</div>
        </div>
      </div>
    </a>
  </div>
  <div class="card-grid-space">
    <div class="num">03</div>
    <a class="card" href="https://www.myritebook.com/css/build-a-digital-clock-using-html-css-and-javascript/" style="--bg-img: url('https://www.myritebook.com/wp-content/uploads/2024/06/Create-Glowing-Pulse-Search-Bar-Using-HTML-and-Pure-CSS1.png')">
      <div>
        <h1>Digital Clock</h1>
        <p>A digital clock means it shows time in number format…</p>
        <div class="date">12 July 2022</div>
        <div class="tags">
          <div class="tag">CSS</div>
        </div>
      </div>
    </a>
  </div>
</section>
  </body>
</html>
