farhan-25.github.io/blog.html at main · Farhan-25/farhan-25.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portfolio - Blog</title>
  <link rel="shortcut icon" href="https://via.placeholder.com/32x32/333333/ffffff?text=F" type="image/x-icon">
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>

<body>
  <main>
    <div id="sidebar-container"></div>
    <div class="main-content">
      <div id="navbar-container"></div>
      <article class="blog active" data-page="blog">

        <header>
          <h2 class="h2 article-title">Blog</h2>
        </header>

        <section class="blog-posts">

          <ul class="blog-posts-list">

            <li class="blog-post-item">
              <a href="#">

                <figure class="blog-banner-box">
                  <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=800&h=450" alt="Sample Blog Post" loading="lazy">
                </figure>

                <div class="blog-content">

                  <div class="blog-meta">
                    <p class="blog-category">Sample Category</p>
                    <span class="dot"></span>
                    <time datetime="2026-03-13">March 13, 2026</time>
                  </div>

                  <h3 class="h3 blog-item-title">Sample Blog Title</h3>

                  <p class="blog-text">
                    This is a sample blog post description. You can replace this content with your actual blog articles later.
                  </p>

                </div>

              </a>
            </li>

          </ul>

        </section>

      </article>
    </div>
  </main>
  <script src="script.js"></script>
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>

</html>