<div class="twinkling"></div>
<div class="video">
<video id="InformationVideo" class="information__video information__video--visible" preload="auto" autobuffer="" autoload="" autoplay="" loop="">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/130891/astrochimp.mp4" type="video/mp4">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/130891/astrochimp.webm" type="video/webm">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/130891/astrochimp.ogg" type="video/ogg">
</video>
</div>
<header>
<h1>404</h1>
<h3>error</h3><br>
<hr />
<p>
"Monkey...<br>
I've got some bad news pal.<br>
I think we're lost."
</p>
</header>
$main: #2D3949;
body {
background: $main;
background: $main url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/130891/stars.png) repeat top center;
}
@keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
.twinkling {
position: absolute;
height: 100%;
width: 100%;
background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/130891/twinkling.png) repeat top center;
z-index:1;
animation: move-twink-back 200s linear infinite;
}
h1 {
//color: darken($main, 40);
font-size: 72px;
font-family: 'lust-display-didone', serif;
}
h3 {
//color: darken($main, 40);
font-size: 48px;
line-height: 32px;
text-transform: uppercase;
font-weight: 300;
font-family: 'futura-pt', serif;
}
hr {
width: 100px;
margin: 0.5em auto 1em;
border: none;
height: 2px;
background: white;
}
p {
font-size: 24px;
line-height: 34px;
font-family: 'futura-pt', sans-serif;
font-style: italic;
font-weight: 300; }
.video {
position: absolute;
width: 100%;
overflow: hidden;
z-index: 2;
&:before {
content: '';
display: block;
position: absolute;
z-index: 2;
background-image: linear-gradient(
rgba(#2D3949, 0),
#2D3949
);
width: 100%; height: 75%;
top: 25%; left: 0;
}
}
video {
width: 100%;
margin-top: -15%;
opacity: 0.35;
}
header {
position: relative;
z-index: 3;
text-align: center;
color: white;
padding: 12em 0 5em;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.