Skip to content

Commit facba8e

Browse files
TheV360TheV360
committed
Neat 404 page
1 parent fb586e7 commit facba8e

File tree

4 files changed

+164
-4
lines changed

4 files changed

+164
-4
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
amigaCursor.png
22
old/*
33
test.html
4+
__internalStuff

‎404.html

+9-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
---
2-
layout: default
2+
layout: 404
33

4-
title: 404
4+
title: 404 Error
55

66
permalink: /404.html
77
---
88
<div class="container">
9-
<h2>404</h2>
10-
<p>Yikes. If this is an important permalink or something, archive.org may have it. You can also open an issue on <a href="https://github.com/TheV360/thev360.github.io/">my GitHub page.</a></p>
9+
<div id="bwbox">
10+
<h1>404</h1>
11+
<h2>Error!</h2>
12+
<h3>Error!</h3>
13+
<p>oh no, that is horrible</p>
14+
</div>
15+
<p>Yikes. If this is an important permalink or something, archive.org may have it. You can also open an issue on <a href="https://github.com/TheV360/thev360.github.io/">my GitHub page,</a> or just <p><a href="/">Click here</a> to return to the homepage.</p></p>
1116
</div>

‎_layouts/404.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
{% include headTags.html %}
5+
<title>V360 &ndash; {{ page.title }}</title>
6+
<link rel="stylesheet" href="/css/404.css" />
7+
</head>
8+
<body>
9+
{% include header.html %}
10+
<section>
11+
{{ content }}
12+
</section>
13+
{% include footer.html %}
14+
</body>
15+
</html>

‎css/404.css

+139
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
* {
2+
margin: 0;
3+
border: 0;
4+
padding: 0;
5+
6+
box-sizing: border-box;
7+
8+
font-family: sans-serif;
9+
}
10+
11+
div#bwbox {
12+
position: relative;
13+
14+
margin: 0 auto;
15+
margin-bottom: 1rem;
16+
padding-top: 6.5rem;
17+
18+
width: 13rem;
19+
height: 8rem;
20+
}
21+
22+
div#bwbox::after {
23+
content: "";
24+
25+
display: block;
26+
position: absolute;
27+
28+
top: -5%;
29+
left: -12.5%;
30+
31+
width: 125%;
32+
height: 110%;
33+
34+
background-color: black;
35+
36+
filter: blur(4px);
37+
38+
z-index: -2;
39+
}
40+
41+
div#bwbox h1, div#bwbox h2, div#bwbox h3 {
42+
display: block;
43+
position: absolute;
44+
}
45+
46+
div#bwbox h1 {
47+
top: 1.7rem;
48+
left: 2rem;
49+
50+
float:left;
51+
52+
color: lime;
53+
54+
mix-blend-mode: difference;
55+
56+
transform-origin: center;
57+
transform: rotate(-12.5deg);
58+
59+
font-size: 4rem;
60+
}
61+
62+
div#bwbox h1::after {
63+
content: "";
64+
65+
display: block;
66+
position: absolute;
67+
68+
top: -5%; left: -5%;
69+
70+
width: 110%; height: 110%;
71+
72+
background-color: #1f3f7f;
73+
74+
transform-origin: center;
75+
transform: rotate(-12.5deg);
76+
filter: blur(4px);
77+
78+
z-index: -1;
79+
80+
animation: sine-horiz 2s ease-in-out infinite alternate, rotate 4s ease-in-out infinite alternate;
81+
}
82+
83+
div#bwbox h2 {
84+
top: 3.9rem;
85+
left: 6.6rem;
86+
87+
color: white;
88+
89+
mix-blend-mode: difference;
90+
91+
font-size: 2.5rem;
92+
93+
animation: sine-horiz 2s ease-in-out infinite alternate, sine-vert 1.9s ease-in-out infinite alternate;
94+
}
95+
96+
div#bwbox h3 {
97+
top: 3.85rem;
98+
left: 6.6rem;
99+
100+
transform-origin: center;
101+
transform: rotate(-1deg);
102+
103+
color: #3532ff;
104+
105+
mix-blend-mode: difference;
106+
107+
font-size: 2.5rem;
108+
109+
user-select: none;
110+
-moz-user-select: none;
111+
-webkit-user-select: none;
112+
113+
animation: sine-horiz 1.8s ease-in-out infinite alternate, sine-vert 1.7s ease-in-out infinite alternate;
114+
}
115+
116+
@keyframes sine-horiz {
117+
from { margin-left: -.25rem; }
118+
to { margin-left: .25rem; }
119+
}
120+
121+
@keyframes sine-vert {
122+
from { margin-top: -.25rem; }
123+
to { margin-top: .25rem; }
124+
}
125+
126+
@keyframes rotate {
127+
from { transform: rotate(-15deg); }
128+
to { transform: rotate(15deg); }
129+
}
130+
131+
div#bwbox p {
132+
margin-left: 3rem;
133+
134+
color: white;
135+
136+
mix-blend-mode: screen;
137+
138+
font-family: serif;
139+
}

0 commit comments

Comments
 (0)