aboutsummaryrefslogtreecommitdiff
path: root/404.html
diff options
context:
space:
mode:
Diffstat (limited to '404.html')
-rw-r--r--404.html143
1 files changed, 1 insertions, 142 deletions
diff --git a/404.html b/404.html
index 99ec4f1..97c43f5 100644
--- a/404.html
+++ b/404.html
@@ -2,149 +2,8 @@
<html>
<head>
<title>404 Not Found</title>
- <!-- https://3dtransforms.desandro.com/ -->
- <style>
- html {
- font-family:
- Helvetica Neue,
- Helvetica,
- Arial,
- sans-serif;
- background-color: #57baac;
- color: white;
- }
-
- /* ---- cube---- */
-
- .scene--cube {
- width: 300px;
- height: 300px;
- margin: 80px 0;
- perspective: 500px;
- }
-
- .scene--persp-cube {
- perspective: 400px;
- }
-
- .cube {
- width: 300px;
- height: 300px;
- position: relative;
- transform-style: preserve-3d;
- transform: translateZ(-150px);
- }
-
- .scene--hero {
- height: 300px;
- margin: 80px 0;
- perspective: 500px;
- border: none;
- }
-
- .cube--hero {
- margin: 0 auto;
- }
-
- .cube.is-spinning {
- animation: spinCube 7s infinite linear;
- }
-
- @keyframes spinCube {
- 0% {
- transform: translateZ(-150px) rotateX(0deg) rotateY(0deg);
- }
- 100% {
- transform: translateZ(-150px) rotateX(360deg) rotateY(360deg);
- }
- }
-
- .cube__face {
- position: absolute;
- width: 300px;
- height: 300px;
- border: 2px solid black;
- line-height: 300px;
- font-size: 40px;
- font-weight: bold;
- color: white;
- text-align: center;
- }
-
- .cube.is-backface-hidden .cube__face {
- backface-visibility: hidden;
- }
-
- .cube__face--front {
- background: hsla(0, 100%, 50%, 0.7);
- }
- .cube__face--right {
- background: hsla(60, 100%, 50%, 0.7);
- }
- .cube__face--back {
- background: hsla(120, 100%, 50%, 0.7);
- }
- .cube__face--left {
- background: hsla(180, 100%, 50%, 0.7);
- }
- .cube__face--top {
- background: hsla(240, 100%, 50%, 0.7);
- }
- .cube__face--bottom {
- background: hsla(300, 100%, 50%, 0.7);
- }
-
- .cube__face--front {
- transform: rotateY(0deg) translateZ(150px);
- }
- .cube__face--right {
- transform: rotateY(90deg) translateZ(150px);
- }
- .cube__face--back {
- transform: rotateY(180deg) translateZ(150px);
- }
- .cube__face--left {
- transform: rotateY(-90deg) translateZ(150px);
- }
- .cube__face--top {
- transform: rotateX(90deg) translateZ(150px);
- }
- .cube__face--bottom {
- transform: rotateX(-90deg) translateZ(150px);
- }
-
- .cube.show-front {
- transform: translateZ(-150px) rotateY(0deg);
- }
- .cube.show-right {
- transform: translateZ(-150px) rotateY(-90deg);
- }
- .cube.show-back {
- transform: translateZ(-150px) rotateY(-180deg);
- }
- .cube.show-left {
- transform: translateZ(-150px) rotateY(90deg);
- }
- .cube.show-top {
- transform: translateZ(-150px) rotateX(-90deg);
- }
- .cube.show-bottom {
- transform: translateZ(-150px) rotateX(90deg);
- }
- </style>
</head>
<body>
- <center>
- <div class="scene scene--hero">
- <div class="cube cube--hero is-spinning">
- <div class="cube__face cube__face--front">404</div>
- <div class="cube__face cube__face--right">Oops!</div>
- <div class="cube__face cube__face--back">pngu.org</div>
- <div class="cube__face cube__face--left">HTTP/1.1</div>
- <div class="cube__face cube__face--top">text/html</div>
- <div class="cube__face cube__face--bottom">Not Found</div>
- </div>
- </div>
- </center>
+ <center>404</center>
</body>
</html>