-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path404.html
220 lines (204 loc) · 12 KB
/
404.html
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!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</title>
<meta name="description" content="The page you are looking for does not exist.">
<meta name="author" content="Viggo">
<!-- Favicon and Apple Touch Icons -->
<link rel="icon" href="/assets/favicon/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" sizes="57x57" href="/assets/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/assets/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/assets/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/assets/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/assets/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/assets/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/assets/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/assets/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/assets/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/assets/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ZK9BFXYCQQ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-ZK9BFXYCQQ');
</script>
<script type="text/javascript">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "n7osbgo4cg");
</script>
<!-- Open Graph meta tags for social media sharing -->
<meta property="og:title" content="404 - Page Not Found">
<meta property="og:description" content="The page you are looking for does not exist.">
<meta property="og:image" content="https://www.metatagchecker.com/assets/og-image.png">
<meta property="og:url" content="https://www.metatagchecker.com/404.html">
<meta property="og:type" content="website">
<!-- Twitter Card meta tags for social media sharing -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="404 - Page Not Found">
<meta name="twitter:description" content="The page you are looking for does not exist.">
<meta name="twitter:image" content="https://www.metatagchecker.com/assets/og-image.png">
<meta name="twitter:site" content="@your_twitter_handle">
<!-- Preconnect to required origins for performance improvement -->
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Preload essential CSS files -->
<link rel="preload" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" as="style">
<link rel="preload" href="styles.css" as="style">
<!-- CSS files -->
<link href="styles.css" rel="stylesheet">
</head>
<body class="bg-white flex flex-col min-h-screen">
<header class="bg-white">
<nav class="mx-auto flex max-w-7xl items-center justify-between gap-x-6 p-6 lg:px-8" aria-label="Global">
<div class="flex lg:flex-1 items-center">
<a href="/" class="flex items-center -m-1.5 p-1.5">
<span class="sr-only">Meta Tag Checker</span>
<img class="h-12 w-auto" src="/assets/logo.svg" alt="logo">
<h1 class="pl-2 text-md sm:text-2xl font-extrabold tracking-tight text-slate-900">Meta Tag Checker</h1>
</a>
</div>
<div class="hidden lg:flex lg:gap-x-12">
<a href="/" class="text-sm font-semibold leading-6 text-gray-900">Home</a>
<a href="/seo-guide" class="text-sm font-semibold leading-6 text-gray-900">SEO Guide</a>
<a href="/faq" class="text-sm font-semibold leading-6 text-gray-900">FAQ</a>
<a href="/about" class="text-sm font-semibold leading-6 text-gray-900">About</a>
</div>
<div class="flex flex-1 items-center justify-end gap-x-6">
<div class="flex gap-x-6">
<a class="group" aria-label="Viggo on X" href="https://x.com/decohack" target="_blank"><svg
class="h-6 w-6 fill-slate-500 group-hover:fill-slate-700" aria-hidden="true" viewBox="0 0 24 24">
<path
d="M13.3174 10.7749L19.1457 4H17.7646L12.7039 9.88256L8.66193 4H4L10.1122 12.8955L4 20H5.38119L10.7254 13.7878L14.994 20H19.656L13.3171 10.7749H13.3174ZM11.4257 12.9738L10.8064 12.0881L5.87886 5.03974H8.00029L11.9769 10.728L12.5962 11.6137L17.7652 19.0075H15.6438L11.4257 12.9742V12.9738Z">
</path>
</svg>
</a>
</div>
</div>
<div class="flex lg:hidden">
<button id="mobile-menu-button" type="button"
class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700">
<span class="sr-only">Open main menu</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
</nav>
<!-- Mobile menu, show/hide based on menu open state. -->
<div id="mobile-menu" class="hidden lg:hidden" role="dialog" aria-modal="true">
<div class="fixed inset-0 z-10"></div>
<div
class="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
<div class="flex items-center justify-between">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Meta Tag Checker</span>
<img class="h-8 w-auto" src="/assets/logo.svg" alt="logo">
</a>
<button id="close-menu-button" type="button" class="-m-2.5 rounded-md p-2.5 text-gray-700">
<span class="sr-only">Close menu</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="mt-6 flow-root">
<div class="-my-6 divide-y divide-gray-500/10">
<div class="space-y-2 py-6">
<a href="/"
class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Home</a>
<a href="/seo-guide"
class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">SEO Guide</a>
<a href="/faq"
class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">FAQ</a>
<a href="/about"
class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">About</a>
</div>
<div class="py-6">
<div class="flex gap-x-6"><a class="group" aria-label="Viggo on X" href="https://x.com/decohack" target="_blank"><svg
class="h-6 w-6 fill-slate-500 group-hover:fill-slate-700" aria-hidden="true" viewBox="0 0 24 24">
<path
d="M13.3174 10.7749L19.1457 4H17.7646L12.7039 9.88256L8.66193 4H4L10.1122 12.8955L4 20H5.38119L10.7254 13.7878L14.994 20H19.656L13.3171 10.7749H13.3174ZM11.4257 12.9738L10.8064 12.0881L5.87886 5.03974H8.00029L11.9769 10.728L12.5962 11.6137L17.7652 19.0075H15.6438L11.4257 12.9742V12.9738Z">
</path>
</svg></a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- 404 Content -->
<main class="flex-grow flex flex-col justify-center items-center">
<div class="text-center">
<h1 class="text-5xl font-bold tracking-tight text-slate-900 sm:text-7xl">404</h1>
<p class="mt-6 text-lg leading-8 text-gray-600">Sorry, the page you are looking for does not exist.</p>
<p class="pt-10 text-base font-semibold leading-7 text-gray-900">👇 Go back to our homepage</p>
<div class="relative mx-auto mt-10 flex justify-center">
<a href="/" class="rounded-md bg-blue-600 px-6 py-4 text-md font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Back to Home</a>
</div>
</div>
</main>
<!-- footer -->
<footer class="bg-slate-50">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="py-8">
<nav class="text-sm" aria-label="quick links">
<div class="-my-1 flex justify-center gap-x-6">
<a class="inline-block rounded-lg px-2 py-1 text-sm text-slate-700 hover:bg-slate-100 hover:text-slate-900"
href="/">Home</a>
<a class="inline-block rounded-lg px-2 py-1 text-sm text-slate-700 hover:bg-slate-100 hover:text-slate-900"
href="/seo-guide">SEO Guide</a>
<a class="inline-block rounded-lg px-2 py-1 text-sm text-slate-700 hover:bg-slate-100 hover:text-slate-900"
href="/faq">FAQ</a>
<a class="inline-block rounded-lg px-2 py-1 text-sm text-slate-700 hover:bg-slate-100 hover:text-slate-900"
href="/about">About</a>
</div>
</nav>
</div>
<div class="flex flex-col items-center border-t border-slate-400/10 py-10 sm:flex-row-reverse sm:justify-between">
<div class="flex gap-x-6">
<a class="group" aria-label="Viggo on X" href="https://x.com/decohack" target="_blank">
<svg
class="h-6 w-6 fill-slate-500 group-hover:fill-slate-700" aria-hidden="true" viewBox="0 0 24 24">
<path
d="M13.3174 10.7749L19.1457 4H17.7646L12.7039 9.88256L8.66193 4H4L10.1122 12.8955L4 20H5.38119L10.7254 13.7878L14.994 20H19.656L13.3171 10.7749H13.3174ZM11.4257 12.9738L10.8064 12.0881L5.87886 5.03974H8.00029L11.9769 10.728L12.5962 11.6137L17.7652 19.0075H15.6438L11.4257 12.9742V12.9738Z">
</path>
</svg>
</a>
</div>
<p class="mt-6 text-sm text-slate-500 sm:mt-0">Copyright © <span id="current-year"></span> Viggo. All rights reserved.</p>
</div>
</div>
</footer>
<script src="scripts.js"></script>
<script>
document.getElementById('mobile-menu-button').addEventListener('click', function () {
document.getElementById('mobile-menu').classList.toggle('hidden');
});
document.getElementById('close-menu-button').addEventListener('click', function () {
document.getElementById('mobile-menu').classList.add('hidden');
});
</script>
<script>
document.getElementById("current-year").textContent = new Date().getFullYear();
</script>
</body>
</html>