PkLavc.github.io/404.html at main · PkLavc/PkLavc.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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="PkLavc">
    <title>404 | Page Not Found | Patrick Araujo</title>
    <meta name="description" content="The page you are looking for cannot be found. Return to Patrick Araujo's portfolio to explore solutions architecture, APIs, automation, and systems integration.">
    <meta property="og:title" content="404 | Page Not Found | Patrick Araujo">
    <meta property="og:description" content="The page you are looking for cannot be found. Return to Patrick Araujo's portfolio to explore solutions architecture, APIs, automation, and systems integration.">
    <meta property="og:url" content="https://pklavc.github.io/404.html">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://pklavc.github.io/images/Lavc.png">
    <meta property="og:image:alt" content="Brand portrait of enterprise systems architect and automation expert Patrick Araujo">
    <meta property="og:site_name" content="Patrick Araujo Portfolio">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="404 | Page Not Found | Patrick Araujo">
    <meta name="twitter:description" content="The page you are looking for cannot be found. Return to Patrick Araujo's portfolio to explore solutions architecture, APIs, automation, and systems integration.">
    <meta name="twitter:image" content="https://pklavc.github.io/images/Lavc.png">
    <meta name="twitter:image:alt" content="Brand portrait of enterprise systems architect and automation expert Patrick Araujo">
    <meta name="robots" content="noindex, follow">
    <link rel="canonical" href="https://pklavc.github.io/404.html">
    <link rel="icon" type="image/png" href="images/Lavc.png">
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/404.css">
</head>
<body>
    <div id="all">
        <div id="navigation-content" role="navigation" aria-label="Primary navigation">
            <div class="logo"></div>
            <div class="navigation-links">
                <a href="index.html">HOME</a>
                <a href="about.html">ABOUT</a>
                <a href="projects.html">PROJECTS</a>
            </div>
        </div>
        <div id="navigation-bar">
            <div class="menubar">
                <span class="first-span"></span>
                <span class="second-span"></span>
                <span class="third-span"></span>
            </div>
        </div>
        <main role="main" class="error-page-main">
            <section class="error-page-card">
                <h1 class="error-page-code">404</h1>
                <h2 class="error-page-title">Page Not Found</h2>
                <p class="error-page-description">The page you are looking for may have been removed, had its name changed, or is temporarily unavailable. Return to the portfolio to explore systems architecture, API integration, and intelligent automation solutions.</p>
                <div class="error-page-actions">
                    <a href="index.html" class="error-page-link error-page-link-primary">Back to Home</a>
                    <a href="projects.html" class="error-page-link error-page-link-secondary">View Projects</a>
                </div>
                <p class="error-page-help">If you entered the URL manually, please check the spelling and try again.</p>
            </section>
        </main>
    </div>
</body>
</html>
*** Add File: d:\Projects\PkLavc.github.io\css\404.css
.error-page-main {
    min-height: calc(100vh - 110px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
}

.error-page-card {
    max-width: 780px;
    width: 100%;
    text-align: center;
    color: whitesmoke;
}

.error-page-code {
    font-size: 4rem;
    margin-bottom: 0.5rem;
    letter-spacing: -1px;
}

.error-page-title {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #c0c0c0;
    font-weight: 500;
}

.error-page-description {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.75rem;
    color: #b5b5b5;
}

.error-page-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.error-page-link {
    padding: 14px 24px;
    border-radius: 999px;
    text-decoration: none;
}

.error-page-link-primary {
    background: var(--clr-primary);
    color: #000;
    font-weight: 700;
}

.error-page-link-secondary {
    border: 1px solid var(--clr-primary);
    color: var(--clr-primary);
}

.error-page-help {
    margin-top: 2rem;
    color: #888;
}