diff options
Diffstat (limited to '404.html')
-rw-r--r-- | 404.html | 143 |
1 files changed, 1 insertions, 142 deletions
@@ -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> |