nashrfoundation.github.io/404.html at main · nashrfoundation/nashrfoundation.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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Not Found - Nashr Foundation</title>
    <meta name="description" content="The page you're looking for doesn't exist. Nashr Foundation provides education, food, clean water, and basic necessities to vulnerable communities across Pakistan.">

    <!-- Preconnect to external domains for faster resource loading -->
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <!-- Inlined Critical CSS for instant rendering -->
    <style>
        :root {
            --bg-dark: #1a1a1a;
            --bg-medium: #2c2c2c;
            --text-primary: #f0f0f0;
            --text-secondary: #b0b0b0;
            --primary: #2A8D9C;
            --primary-light: #3AA7B8;
            --accent: #FFB52E;
            --white: #FFFFFF;
            --heading-font: 'Merriweather', serif;
            --body-font: 'Lora', serif;
            --spacing-sm: 1rem;
            --spacing-md: 2rem;
            --border-radius-md: 8px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            font-size: 16.5px;
        }

        body {
            font-family: var(--body-font);
            line-height: 1.9;
            color: var(--text-primary);
            background-color: var(--bg-dark);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: var(--spacing-md);
        }

        h1, h2 {
            font-family: var(--heading-font);
            font-weight: 700;
            line-height: 1.3;
            color: var(--primary-light);
        }

        h1 {
            font-size: 4rem;
            margin-bottom: var(--spacing-sm);
        }

        h2 {
            font-size: 2rem;
            margin-bottom: var(--spacing-md);
        }

        p {
            margin-bottom: var(--spacing-sm);
            color: var(--text-secondary);
            max-width: 600px;
        }

        .btn {
            display: inline-block;
            padding: 0.75rem 1.5rem;
            background-color: var(--accent);
            color: var(--bg-dark);
            border: 2px solid var(--accent);
            border-radius: var(--border-radius-md);
            font-weight: 600;
            text-align: center;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: var(--spacing-md);
        }

        .btn:hover {
            background-color: transparent;
            color: var(--accent);
        }

        .error-code {
            font-size: 8rem;
            font-weight: 700;
            color: var(--primary);
            opacity: 0.2;
            margin-bottom: calc(-2 * var(--spacing-md));
        }

        @media (max-width: 768px) {
            h1 {
                font-size: 3rem;
            }

            h2 {
                font-size: 1.5rem;
            }

            .error-code {
                font-size: 6rem;
            }
        }
    </style>

    <!-- Asynchronously load the full stylesheet -->
    <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">
    <noscript><link rel="stylesheet" href="styles.css"></noscript>

    <!-- Favicon -->
    <link rel="icon" href="/logo.webp" sizes="any" type="image/webp">
    <link rel="apple-touch-icon" href="/logo.webp">
</head>
<body>
    <div class="error-code">404</div>
    <h1>Page Not Found</h1>
    <h2>Oops! The page you're looking for doesn't exist.</h2>
    <p>The page you're trying to reach may have been moved, deleted, or never existed. Don't worry, you can return to our homepage and continue supporting our mission.</p>
    <a href="/" class="btn">Return to Homepage</a>

    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K5F6S4VV"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
</body>
</html>