diff options
-rw-r--r-- | 404.html | 150 |
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> |