Created
September 16, 2016 16:41
-
-
Save sroy8091/364a16b5a1e3c5ea9e25638330e86ec9 to your computer and use it in GitHub Desktop.
Error Page for webpage
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <link href="https://code.jquery.com/jquery-2.2.4.min.js"/> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"/> | |
| </head> | |
| <style> | |
| @keyframes noise{ | |
| 0%{background-position:1000px;} | |
| } | |
| body, html{ | |
| overflow-x:hidden; | |
| margin:0px; | |
| background: rgb(31, 31, 31); | |
| height:100vh; | |
| box-shadow:0px 0px 122px 25px black inset; | |
| background-image:url('http://darkhorsegames.net/wp-content/uploads/2014/03/NoiseMap.gif'); | |
| background-repeat:repeat; | |
| animation:noise 20ms linear infinite; | |
| } | |
| .glitch-wrapper{ | |
| padding-top:180px; | |
| width:100vw; | |
| text-align:center; | |
| animation:glitch 2s linear infinite; | |
| margin-bottom:110px; | |
| } | |
| .glitch-text, button{ | |
| font-family: monospace; | |
| font-weight:bold; | |
| } | |
| .glitch-text::before{ | |
| content:'Something Went Wrong'; | |
| color:black; | |
| text-shadow:0px 0px 5px 10px black!IMPORTANT; | |
| -webkit-filter: blur(7px); | |
| -moz-filter: blur(7px); | |
| -o-filter: blur(7x); | |
| -ms-filter: blur(7px); | |
| filter: blur(7px); | |
| display:block; | |
| position:absolute; | |
| z-index:-1; | |
| font-size:132px; | |
| left:0px; | |
| right:0px; | |
| margin-top:-30px; | |
| opacity:.5; | |
| } | |
| .glitch-text{ | |
| position:relative; | |
| z-index:2; | |
| opacity:.9; | |
| margin:0 auto; | |
| text-shadow:0px 0px 3px white; | |
| animation:glitch 3s infinite; | |
| cursor:pointer; | |
| font-size:52px; | |
| color:white; | |
| } | |
| button{ | |
| display:block; | |
| opacity:.6; | |
| box-shadow:0px 0px 3px 6px white,0px 0px 3px white; | |
| text-shadow:0px 0px 3px black; | |
| background:white; | |
| border:0px; | |
| padding:7px; | |
| margin:0 auto; | |
| outline:none; | |
| cursor:pointer; | |
| margin-top:30px; | |
| font-size:16px; | |
| transition:200ms; | |
| } | |
| button:hover, button:focus, button:active { | |
| box-shadow:0px 0px 3px 6px black; | |
| text-shadow:0px 0px 3px white; | |
| background:black; | |
| color:white; | |
| transition:200ms; | |
| border-top-left-radius:5px; | |
| border-bottom-right-radius:5px; | |
| } | |
| .paused{ | |
| animation-play-state: paused; | |
| } | |
| /* JUST RANDOM VALUES HERE! */ | |
| @keyframes glitch{ | |
| 3%{text-shadow:7px 7px 0px red;} | |
| 6%{text-shadow:-9px 4px 0px blue;transform:translate(4px,-10px) skewX(3240deg);} | |
| 7%{text-shadow:3px -4px 0px green;} | |
| 9%{text-shadow:0px 0px 3px white;transform:translate(0px,0px) skewX(0deg);} | |
| 2% , 54%{transform:translateX(0px) skew(0deg);} | |
| 55%{transform:translate(-2px,6px) skew(-5530deg);} | |
| 56%{text-shadow:0px 0px 3px white;transform:translate(0px,0px) skew(0deg);} | |
| 57%{text-shadow:7px 7px 0px red;transform:translate(4px,-10px) skew(-70deg);} | |
| 58%{text-shadow:0px 0px 3px white;transform:translate(0px,0px) skew(0deg);} | |
| 62%{text-shadow:3px -4px 0px green;transform:translate(0px,20px) skew(0deg);} | |
| 63%{text-shadow:0px 0px 3px white;transform:translate(4px,-2px) skew(0deg);} | |
| 64%{transform:translate(1px,3px); skew(-230deg);} | |
| 65%{transform:translate(-7px,2px); skew(120deg);} | |
| 66%{transform:translate(0px,0px) skew(0deg);} | |
| } | |
| </style> | |
| <script> | |
| $('button').hover(function(){ | |
| $('.glitch-wrapper').toggleClass('paused'); | |
| $('body').toggleClass('paused'); | |
| }); | |
| </script> | |
| <body> | |
| <div class="glitch-wrapper"> | |
| <div class="glitch-text"> | |
| Something Went Wrong | |
| </div> | |
| </div> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment