- Mario
- No Signal
-
-
Save Lowess/9d19df5f1bb2d570a0f4fc1de641b10c to your computer and use it in GitHub Desktop.
404 Static Pages
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
# Fun 404 Web Pages | |
* Mario | |
* No Signal |
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
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>404 Game Over</title> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> | |
<style> | |
@import url("https://fonts.googleapis.com/css?family=Press+Start+2P"); | |
@-webkit-keyframes blinker { | |
75% { | |
opacity: 0; | |
} | |
} | |
@keyframes blinker { | |
75% { | |
opacity: 0; | |
} | |
} | |
@-webkit-keyframes walk-left-loop { | |
0% { | |
background-position: 0; | |
} | |
100% { | |
background-position: -64px; | |
} | |
} | |
@keyframes walk-left-loop { | |
0% { | |
background-position: 0; | |
} | |
100% { | |
background-position: -64px; | |
} | |
} | |
@-webkit-keyframes walk-right-loop { | |
0% { | |
background-position: -128px; | |
} | |
100% { | |
background-position: -192px; | |
} | |
} | |
@keyframes walk-right-loop { | |
0% { | |
background-position: -128px; | |
} | |
100% { | |
background-position: -192px; | |
} | |
} | |
@-webkit-keyframes search { | |
0% { | |
background-position: -64px; | |
} | |
100% { | |
background-position: -128px; | |
} | |
} | |
@keyframes search { | |
0% { | |
background-position: -64px; | |
} | |
100% { | |
background-position: -128px; | |
} | |
} | |
@-webkit-keyframes walk-left { | |
0% { | |
left: 85%; | |
} | |
100% { | |
left: 15%; | |
} | |
} | |
@keyframes walk-left { | |
0% { | |
left: 85%; | |
} | |
100% { | |
left: 15%; | |
} | |
} | |
@-webkit-keyframes walk-right { | |
0% { | |
left: 15%; | |
} | |
100% { | |
left: 85%; | |
} | |
} | |
@keyframes walk-right { | |
0% { | |
left: 15%; | |
} | |
100% { | |
left: 85%; | |
} | |
} | |
.walk-left { | |
-webkit-animation: walk-left-loop 0.2s steps(2) infinite, walk-left 1s linear; | |
animation: walk-left-loop 0.2s steps(2) infinite, walk-left 1s linear; | |
} | |
.walk-right { | |
-webkit-animation: walk-right-loop 0.2s steps(2) infinite, walk-right 1s linear; | |
animation: walk-right-loop 0.2s steps(2) infinite, walk-right 1s linear; | |
} | |
.idle { | |
-webkit-animation: none; | |
animation: none; | |
background-position: -192px; | |
} | |
.search-left { | |
-webkit-animation: search 2s steps(2) infinite; | |
animation: search 2s steps(2) infinite; | |
left: 15% !important; | |
} | |
.search-right { | |
-webkit-animation: search 2s steps(2) infinite; | |
animation: search 2s steps(2) infinite; | |
left: 85% !important; | |
} | |
body { | |
font-family: "Press Start 2P", sans-serif; | |
text-rendering: optimizeSpeed; | |
color: #fff; | |
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjQ3OThENjIxNjM0NTExRTlBRDcxODhCMzQyM0FCN0EwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjQ3OThENjIyNjM0NTExRTlBRDcxODhCMzQyM0FCN0EwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDc5OEQ2MUY2MzQ1MTFFOUFENzE4OEIzNDIzQUI3QTAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NDc5OEQ2MjA2MzQ1MTFFOUFENzE4OEIzNDIzQUI3QTAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4nvDvOAAAABlBMVEXcuUXCjk1OwG03AAAARUlEQVR42mJgJAAYSFDAAATUUoCskH4KUJ1HuQJkMWIVYA1kihWQHpvUVwAJemIVYEssA6sAa3QTUIAtmihRQOfYBAgwAFtpA5VFMQvIAAAAAElFTkSuQmCC"); | |
} | |
.skybox { | |
position: relative; | |
width: 100%; | |
height: 70vh; | |
background-color: #63B4F5; | |
} | |
.skybox .txt { | |
position: absolute; | |
width: 90%; | |
text-align: center; | |
left: 50%; | |
top: 50%; | |
transform: translate(-50%, -50%); | |
text-transform: uppercase; | |
font-size: 1.4em; | |
line-height: 1.1em; | |
} | |
.skybox .txt span { | |
display: block; | |
margin-top: 1vh; | |
-webkit-animation: blinker 2s steps(1) infinite; | |
animation: blinker 2s steps(1) infinite; | |
font-size: 0.5em; | |
line-height: 1.2em; | |
} | |
.skybox #player { | |
position: absolute; | |
width: 32px; | |
height: 48px; | |
left: 50%; | |
bottom: 32px; | |
-webkit-animation-fill-mode: forwards; | |
animation-fill-mode: forwards; | |
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAwCAYAAAD+f6R/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgwNTk2MTRCNjM0NTExRTlBMEY2QkI4RDA0MzNGN0M3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgwNTk2MTRDNjM0NTExRTlBMEY2QkI4RDA0MzNGN0M3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODA1OTYxNDk2MzQ1MTFFOUEwRjZCQjhEMDQzM0Y3QzciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODA1OTYxNEE2MzQ1MTFFOUEwRjZCQjhEMDQzM0Y3QzciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4GPpTbAAAHmUlEQVR42uxd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"); | |
} | |
.skybox .ground { | |
position: absolute; | |
left: 0; | |
bottom: 0; | |
width: 100%; | |
height: 32px; | |
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJFRkNENjRENjM0NTExRTk5RDQwQUQ5N0EyM0RBM0JDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJFRkNENjRFNjM0NTExRTk5RDQwQUQ5N0EyM0RBM0JDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkVGQ0Q2NEI2MzQ1MTFFOTlENDBBRDk3QTIzREEzQkMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkVGQ0Q2NEM2MzQ1MTFFOTlENDBBRDk3QTIzREEzQkMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7Mv2hcAAAAElBMVEXcuUUAbT1tXRIAwgAAAADCjk0qQzGwAAAAYklEQVR42szRUQrAIAwD0LZr73/lbVZw8cMUHGP5asNDUMVJhIKD5AugioW2jJkDdyzycsn6OxBghoW1JLunCsBiDgcRzzV6xlYB6+wAuVIHufwJwFwE8+G74K2/KIJTgAEALaUOscCas1sAAAAASUVORK5CYII="); | |
} | |
</style> | |
<script> | |
window.console = window.console || function (t) { }; | |
</script> | |
<script> | |
if (document.location.search.match(/type=embed/gi)) { | |
window.parent.postMessage("resize", "*"); | |
} | |
</script> | |
</head> | |
<body translate="no"> | |
<div id="skybox" class="skybox" style="height: 320px;"> | |
<div class="txt">Game over | |
<br><span>404 FILE NOT FOUND</span> | |
</div> | |
<div id="player" class="search-left"></div> | |
<div class="ground"></div> | |
</div> | |
<script id="rendered-js"> | |
var player = document.getElementById('player'); | |
// adjust skybox height to multiple of 32 | |
document.addEventListener("DOMContentLoaded", function () { | |
var h = document.getElementById('skybox').offsetHeight; | |
var s_h = Math.round(h / 32) * 32; | |
document.getElementById('skybox').style.height = `${s_h}px`; | |
}); | |
function walkLeft() { | |
player.className = "walk-left"; | |
setTimeout(searchLeft, 1000); | |
} | |
function searchLeft() { | |
player.className = "search-left"; | |
setTimeout(walkRight, 3000); | |
} | |
function walkRight() { | |
player.className = "walk-right"; | |
setTimeout(searchRight, 1000); | |
} | |
function searchRight() { | |
player.className = "search-right"; | |
setTimeout(walkLeft, 3000); | |
} | |
walkLeft(); | |
</script> | |
</body> | |
</html> |
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
<!-- Custom 404 Page --> | |
<html> | |
<head> | |
<style> | |
* { | |
margin: 0; | |
padding: 0; | |
} | |
html { | |
height: 100%; | |
overflow: hidden; | |
} | |
canvas { | |
z-index: 1; | |
position: absolute; | |
left: 0; | |
top: 0; | |
width: 100%; | |
height: 100%; | |
} | |
.caps { | |
z-index: 2; | |
position: absolute; | |
left: 0; | |
top: 0; | |
width: 100%; | |
height: 100%; | |
opacity: 0; | |
animation: as 8s linear infinite; | |
} | |
.caps img { | |
display: block; | |
width: 100%; | |
height: 100%; | |
} | |
@keyframes as { | |
0% { | |
opacity: 0; | |
} | |
10% { | |
opacity: .3; | |
} | |
20% { | |
opacity: .1; | |
} | |
30% { | |
opacity: .5; | |
} | |
40% { | |
opacity: 0; | |
} | |
50% { | |
opacity: .8; | |
} | |
55% { | |
opacity: 0; | |
} | |
55% { | |
opacity: 0; | |
} | |
} | |
.frame { | |
z-index: 3; | |
position: absolute; | |
left: 0; | |
top: 0; | |
width: 100%; | |
height: 100%; | |
background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); | |
/* FF3.6+ */ | |
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(19%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.9))); | |
/* Chrome,Safari4+ */ | |
background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); | |
/* Chrome10+,Safari5.1+ */ | |
background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); | |
/* Opera 12+ */ | |
background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); | |
/* IE10+ */ | |
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); | |
/* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#e6000000', GradientType=1); | |
/* IE6-9 fallback on horizontal gradient */ | |
} | |
.frame div { | |
position: absolute; | |
left: 0; | |
top: -20%; | |
width: 100%; | |
height: 20%; | |
background-color: rgba(0, 0, 0, .12); | |
box-shadow: 0 0 10px rgba(0, 0, 0, .3); | |
animation: asd 12s linear infinite; | |
} | |
.frame div:nth-child(1) { | |
animation-delay: 0; | |
} | |
.frame div:nth-child(2) { | |
animation-delay: 4s; | |
} | |
.frame div:nth-child(3) { | |
animation-delay: 8s; | |
} | |
@keyframes asd { | |
0% { | |
top: -20%; | |
} | |
100% { | |
top: 100%; | |
} | |
} | |
h1 { | |
z-index: 3; | |
position: absolute; | |
font: bold 200px/200px Arial, sans-serif; | |
left: 50%; | |
top: 50%; | |
margin-top: -100px; | |
width: 100%; | |
margin-left: -50%; | |
height: 200px; | |
text-align: center; | |
color: transparent; | |
text-shadow: 0 0 30px rgba(0, 0, 0, .5); | |
animation: asdd 2s linear infinite; | |
} | |
@keyframes asdd { | |
0% { | |
text-shadow: 0 0 30px rgba(0, 0, 0, .5); | |
} | |
33% { | |
text-shadow: 0 0 10px rgba(0, 0, 0, .4); | |
} | |
66% { | |
text-shadow: 0 0 20px rgba(0, 0, 0, .2); | |
} | |
100% { | |
text-shadow: 0 0 40px rgba(0, 0, 0, .8); | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<h1>404</h1> | |
<div class="frame"> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
<div class="caps"><img src="http://ademilter.com/caps.png" alt=""></div> | |
<canvas id="canvas"></canvas> | |
</body> | |
<script> | |
var Application = (function () { | |
var canvas; | |
var ctx; | |
var imgData; | |
var pix; | |
var WIDTH; | |
var HEIGHT; | |
var flickerInterval; | |
var init = function () { | |
canvas = document.getElementById('canvas'); | |
ctx = canvas.getContext('2d'); | |
canvas.width = WIDTH = 700; | |
canvas.height = HEIGHT = 500; | |
ctx.fillStyle = 'white'; | |
ctx.fillRect(0, 0, WIDTH, HEIGHT); | |
ctx.fill(); | |
imgData = ctx.getImageData(0, 0, WIDTH, HEIGHT); | |
pix = imgData.data; | |
flickerInterval = setInterval(flickering, 30); | |
}; | |
var flickering = function () { | |
for (var i = 0; i < pix.length; i += 4) { | |
var color = (Math.random() * 255) + 50; | |
pix[i] = color; | |
pix[i + 1] = color; | |
pix[i + 2] = color; | |
} | |
ctx.putImageData(imgData, 0, 0); | |
}; | |
return { | |
init: init | |
}; | |
}()); | |
Application.init(); | |
</script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment