Skip to content

Commit 5766312

Browse files
hellenicdevhellenicdev
committed
UI changes
1 parent d953f29 commit 5766312

5 files changed

Lines changed: 402 additions & 195 deletions

File tree

‎404.html‎

Lines changed: 85 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,104 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<script>
5-
window.dataLayer = window.dataLayer || [];
6-
function gtag(){dataLayer.push(arguments);}
7-
gtag('js', new Date());
8-
9-
gtag('config', 'G-9FWQFZME3Z');
10-
</script>
114
<meta charset="UTF-8">
12-
<title>Page Not Found</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>404 - Page Not Found</title>
7+
8+
<!-- Google Analytics -->
9+
<script>
10+
window.dataLayer = window.dataLayer || [];
11+
function gtag(){dataLayer.push(arguments);}
12+
gtag('js', new Date());
13+
gtag('config', 'G-9FWQFZME3Z');
14+
</script>
15+
1316
<style>
17+
/* Base styles */
1418
body {
15-
font-family: Arial, sans-serif;
16-
text-align: center;
17-
padding: 50px;
19+
font-family: 'Arial', sans-serif;
1820
background: #19336e;
1921
color: white;
22+
display: flex;
23+
flex-direction: column;
24+
justify-content: center;
25+
align-items: center;
26+
height: 100vh;
27+
margin: 0;
28+
text-align: center;
29+
padding: 20px;
30+
animation: fadeIn 1s ease-out;
31+
}
32+
33+
/* ASCII art styling */
34+
pre {
35+
font-family: monospace;
36+
font-size: 1rem;
37+
color: #38bdf8;
38+
margin-bottom: 20px;
39+
}
40+
41+
/* Message styling */
42+
p {
43+
font-size: 1.2rem;
44+
margin-bottom: 30px;
45+
}
46+
47+
/* Optional quote styling */
48+
blockquote {
49+
font-style: italic;
50+
color: #a0aec0;
51+
border-left: 4px solid #38bdf8;
52+
padding-left: 15px;
53+
margin: 20px 0;
54+
font-size: 1.1rem;
2055
}
21-
a {
56+
57+
/* Button styling */
58+
.outline-button {
59+
display: inline-block;
60+
padding: 12px 24px;
61+
font-family: monospace;
62+
font-size: 16px;
2263
color: #38bdf8;
64+
border: 2px solid #38bdf8;
65+
border-radius: 6px;
2366
text-decoration: none;
24-
font-weight: bold;
67+
transition: all 0.3s ease;
68+
}
69+
70+
.outline-button:hover {
71+
background-color: #141625;
72+
color: white;
73+
transform: translateY(-2px);
74+
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
75+
}
76+
77+
/* Fade-in animation */
78+
@keyframes fadeIn {
79+
from { opacity: 0; transform: translateY(20px); }
80+
to { opacity: 1; transform: translateY(0); }
2581
}
2682
</style>
2783
</head>
84+
2885
<body>
29-
<!-- <h1>404</h1> -->
30-
<pre> <strong> _ _ ___ _ _
31-
| || | / _ \| || |
32-
| || |_| | | | || |_
33-
|__ _| | | |__ _|
34-
| | | |_| | | |
35-
|_| \___/ |_| </strong></pre>
86+
<pre><strong>
87+
_ _ ___ _ _
88+
| || | / _ \| || |
89+
| || |_| | | | || |_
90+
|__ _| | | |__ _|
91+
| | | |_| | | |
92+
|_| \___/ |_|
93+
</strong></pre>
94+
3695
<p>This page doesn’t exist. Just like my free time.</p>
37-
<!-- <blockquote>Not all those who wander are lost. <br>— J.R.R. Tolkien</blockquote>-->
38-
39-
<a href="https://hellenicdev.github.io/?utm_source=404" class="outline-button">Go back home</a>
40-
<style>
41-
blockquote {
42-
font-style: italic; /* classic quote style */
43-
color: #a0aec0; /* light grayish-blue */
44-
border-left: 4px solid #38bdf8; /* colored bar on the left */
45-
padding-left: 15px;
46-
margin: 20px 0;
47-
font-size: 1.2rem;
48-
}
49-
</style>
50-
<style>
51-
.outline-button {
52-
display: inline-block; /* Make it behave like a button */
53-
padding: 10px 20px; /* Add some space inside */
54-
font-family: monospace; /* Optional: match ASCII style */
55-
font-size: 16px;
56-
color: #38bdf8; /* Button text color */
57-
border: 2px solid #38bdf8; /* Outline color */
58-
border-radius: 6px; /* Rounded corners */
59-
text-decoration: none; /* Remove underline */
60-
transition: all 0.2s ease; /* Smooth hover effect */
61-
}
6296

63-
.outline-button:hover {
64-
background-color: #141625; /* Fill color on hover */
65-
color: white; /* Text turns white */
66-
}
67-
</style>
97+
<!-- Optional quote -->
98+
<!-- <blockquote>Not all those who wander are lost. <br>— J.R.R. Tolkien</blockquote> -->
99+
100+
<a href="https://hellenicdev.github.io/?utm_source=404" class="outline-button">
101+
Go back home
102+
</a>
68103
</body>
69104
</html>

0 commit comments

Comments
 (0)