aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--404.html150
1 files changed, 150 insertions, 0 deletions
diff --git a/404.html b/404.html
new file mode 100644
index 0000000..99ec4f1
--- /dev/null
+++ b/404.html
@@ -0,0 +1,150 @@
+<!doctype html>
+<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>
+ </body>
+</html>