-
Notifications
You must be signed in to change notification settings - Fork 0
/
404.html
81 lines (81 loc) · 2.02 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>404</title>
</head>
<body>
<!-- https://x.st/spinning-diagrams-with-css/ -->
<div id="cube" style="width: 7.5em; height: 15em">
<div style="transform: translate3d(0em, 0em, 3.75em)"><div>R</div></div>
<div style="transform: translate3d(7.5em, 0em, 3.75em)">
<div>N</div>
</div>
<div style="transform: translate3d(0em, 7.5em, 3.75em)">
<div>B</div>
</div>
<div style="transform: translate3d(7.5em, 7.5em, 3.75em)">
<div>G</div>
</div>
<div style="transform: translate3d(0em, 0em, -3.75em)">
<div>A</div>
</div>
<div style="transform: translate3d(7.5em, 0em, -3.75em)">
<div>I</div>
</div>
<div style="transform: translate3d(0em, 7.5em, -3.75em)">
<div>L</div>
</div>
<div style="transform: translate3d(7.5em, 7.5em, -3.75em)">
<div>O</div>
</div>
</div>
<style>
@keyframes spin {
from {
transform: rotateX(0.1turn) rotateY(-1turn);
}
to {
transform: rotateX(0.1turn) rotateY(0turn);
}
}
@keyframes un-spin {
from {
transform: rotateY(1turn);
}
to {
transform: rotateY(0turn);
}
}
#cube {
font-size: larger;
transform-style: preserve-3d;
animation: spin 5s linear infinite;
}
#cube > div {
position: absolute;
transform-style: preserve-3d;
}
#cube > div > div {
animation: un-spin 5s linear infinite;
}
@font-face {
font-family: "CM";
src: url("/assets/fonts/cmunrm.ttf");
}
body {
position: absolute;
left: 50%;
top: 60%;
margin-left: -5em;
margin-top: -10em;
}
html {
background-color: black;
color: white;
font-family: "CM", serif;
font-weight: bold;
font-size: 32px;
}
</style>
</body>
</html>