albarka.github.io/404.html at main · MORAWA-dev/albarka.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 name="viewport" content="width=device-width, initial-scale=1.0">
  <title>404 - Page Not Found | Agentic Brahim</title>
  <meta name="description" content="Oops! The page you're looking for doesn't exist.">
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/components.css">
  <link rel="icon" href="assets/icons/favicon.svg" type="image/svg+xml">

  <!-- Umami Analytics -->
  <script defer src="https://cloud.umami.is/script.js" data-website-id="75d57cfb-178c-4222-bdfe-05bec144c185"></script>
</head>
<body>
  <button id="theme-toggle" aria-label="Toggle theme">🌙</button>

  <div class="container" style="text-align: center; padding-top: 4rem;">
    <!-- 404 Hero -->
    <div class="hero-banner" style="height: 200px; margin-bottom: 80px; display: flex; align-items: center; justify-content: center;">
      <h1 style="font-size: 5rem; font-weight: 700; color: var(--text-dark);">404</h1>
    </div>

    <!-- Message -->
    <div class="hero-content">
      <h2 class="hero-name" style="font-size: 1.8rem;">
        Oops! <span class="name-highlight">Page Not Found</span>
      </h2>
      <p class="tagline" style="margin-top: 1rem;">
        The page you're looking for doesn't exist or has been moved.
      </p>
    </div>

    <!-- Actions -->
    <div style="margin-top: 2.5rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
      <a href="index.html" class="action-btn btn-blue" style="flex-direction: row; padding: 1rem 1.5rem;">
        <span class="icon">🏠</span>
        Go Home
      </a>
      <a href="pages/projects.html" class="action-btn btn-purple" style="flex-direction: row; padding: 1rem 1.5rem;">
        <span class="icon">🤖</span>
        View Projects
      </a>
    </div>

    <!-- Fun Message -->
    <blockquote class="quote-card card-yellow" style="margin-top: 3rem; max-width: 400px; margin-left: auto; margin-right: auto;">
      <p style="font-size: 1.1rem;">"Not all those who wander are lost... but this page definitely is."</p>
      <cite>— A wise developer</cite>
    </blockquote>

    <!-- Navigation -->
    <nav style="margin-top: 2rem;">
      <a href="index.html">Home</a>
      <a href="pages/about.html">About</a>
      <a href="pages/projects.html">Projects</a>
      <a href="pages/resources.html">Resources</a>
      <a href="pages/blog.html">Blog</a>
    </nav>

    <!-- Footer -->
    <footer>
      <p>© 2026 Agentic Brahim · Built with ❤️</p>
    </footer>
  </div>

  <script src="js/main.js"></script>
</body>
</html>