Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

185 lines (166 sloc) 4.491 kB
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>404 - File not found</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
html, body { width: 100%; height: 100%; margin: 0px; text-align: center; -webkit-user-select: none; }
html { background: #333; color: #fff; }
@-webkit-keyframes rocket {
from {
-webkit-transform: rotate(30deg);
height: 265px;
width: 268px;
left: 10%;
top: 0px;
margin-top: -265px;
}
to {
margin-top: -148px;
}
}
@-webkit-keyframes text {
from {
top: 50%;
opacity: 0;
}
50% {
opacity: 1;
}
to {
top: 90%;
opacity: 0;
}
}
#nebula, #nebulabg {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
top: 0;
left: 0;
}
.js.canvas #nebulabg {
display: none;
}
.js.cssanimations #rocket {
display: none;
}
.js.cssanimations .audio-ready #rocket,
.js.cssanimations .audio-timeout #rocket {
display: block;
-webkit-animation: rocket 2s 1 ease-out;
}
#rocket {
position: absolute;
height:295px;
width:298px;
background-image: url('http://nodester.com/images/rocket-down.png');
background-size: cover;
top: 40%;
margin-left: -149px;
margin-top: -148px;
left: 50%;
}
#rocket img {
display: none;
}
#audio {
display: none;
}
h1, .js.cssanimations p.description span {
font-family:sans-serif;
font-size:38px;
font-weight:bold;
padding:0 0 5px;
margin:0;
text-align: center;
top: 70%;
position: absolute;
text-shadow: 0 0 3px #000;
}
.js.cssanimations p.description {
display: block;
height: 0;
margin: 0;
padding: 0;
}
.js.cssanimations .audio-ready p.description span,
.js.cssanimations .audio-timeout p.description span {
-webkit-animation: text 5s infinite ease-in;
}
.js.cssanimations p.description span {
position: absolute;
opacity: 0;
display: block;
width: 100%;
}
.js.cssanimations p.description span:nth-child(2) {
-webkit-animation-delay: 1s;
}
.js.cssanimations p.description span:nth-child(3) {
-webkit-animation-delay: 2s;
}
.js.cssanimations h1 {
top: 40%;
margin-left: 128px;
margin-top: 132px;
left: 50%;
opacity: 0;
-webkit-transform: scale(0.5);
-webkit-transition: opacity 200ms, -webkit-transform 200ms linear;
-webkit-transition-delay: 1.8s;
}
.js.cssanimations .audio-ready h1, .js.cssanimations .audio-timeout h1 {
opacity: 1;
-webkit-transform: rotate(-20deg);
}
</style>
<script src="modernizr.js"></script>
<script>
Modernizr.load({
test: Modernizr.canvas,
yep: 'nebula.js'
});
Modernizr.load({
test: Modernizr.postmessage,
yep: 'http://www.youtube.com/player_api'
});
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("rocket").title = "Click to Mute";
document.getElementById("rocket").addEventListener("click", function() {
document.body.removeChild(document.getElementById("audio"));
});
});
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('audio', {
videoId: '75V4ClJZME4',
events: {
'onReady': function(e) {
e.target.playVideo();
},
'onStateChange': function(e) {
if (e.data == YT.PlayerState.PLAYING) {
document.body.className += " audio-ready";
}
},
}
});
}
setTimeout(function() {
document.body.className += " audio-timeout";
}, 2000);
</script>
</head>
<body>
<div id="audio">
</div>
<img src="http://nodester.com/images/nebula.jpg" id="nebulabg" />
<div id="rocket"><img src="http://nodester.com/images/rocket-down.png" alt="Nodester" /></div>
<h1>404</h1>
<p class="description"><span>File</span> <span>Not</span> <span>Found</span></p>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.