Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
245 lines (217 sloc) 6.4 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Typeplate 404 Error » Page Not Found :(</title>
<meta name="robots" content="nofollow">
<script>
(function() {var config = {kitId: 'wxt4lbk',scriptTimeout: 3000};
var h=document.getElementsByTagName("html")[0];h.className+=" wf-loading";var t=setTimeout(function(){h.className=h.className.replace(/(\s|^)wf-loading(\s|$)/g," ");h.className+=" wf-inactive"},config.scriptTimeout);var tk=document.createElement("script"),d=false;tk.src='//use.typekit.net/'+config.kitId+'.js';tk.type="text/javascript";tk.async="true";tk.onload=tk.onreadystatechange=function(){var a=this.readyState;if(d||a&&a!="complete"&&a!="loaded")return;d=true;clearTimeout(t);try{Typekit.load(config)}catch(b){}};var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(tk,s)
})();
</script>
<style>
@import url("http://fonts.googleapis.com/css?family=Herr+Von+Muellerhoff");
body {
background: url(/img/subtle_grunge.png) top left repeat;
}
.join {
font-weight: 400;
}
.logo {
font-weight: 700;
}
.wf-loading body {
font-family: serif;
visibility: hidden;
}
.wf-active body {
font-family: "ff-meta-serif-web-pro",serif;
visibility: visible;
}
/* variables */
/* fonts
----------------------*/
/* grid
----------------------*/
.grid {
margin: 0 auto;
width: 80%;
}
[class*=grid-] {
display: inline-block;
position: relative;
/* get rid of inline block whitespace bug: www.lifeathighroad.com/web-development/css-web-development/inline-block-whitespace-workaround */
margin-left: -4px;
}
.grid-one-third {
width: 33.33%;
}
.grid-two-thirds {
width: 66.66%;
}
.grid-one-fourth {
width: 25%;
}
.grid-two-fourths {
width: 50%;
}
.grid-three-fourths {
width: 75%;
}
.grid-one-fifth {
width: 20%;
}
.grid-two-fifths {
width: 40%;
}
.grid-three-fifths {
width: 60%;
}
.grid-four-fifths {
width: 80%;
}
.grid-full {
width: 100%;
}
/* core styles
-------------------------- */
* {
box-sizing: border-box;
}
/* style components
-------------------------- */
.topSeparator {
border: 5px solid transparent;
border-top-color: rgba(36, 27, 20, 0.65);
}
.centerText {
text-align: center;
}
.padding {
padding: 2em 2em 1.75em;
}
/* blocks
-------------------------- */
.logo {
font-size: 5.25em;
line-height: 1;
margin-bottom: 1.1em;
color: rgba(36, 27, 20, 0.86);
}
.attributionBlock {
line-height: 0.4;
font-family: monospace;
}
.attributionBlock [itemprop=name] {
color: rgba(36, 27, 20, 0.76);
text-transform: uppercase;
font-size: .875em;
}
.attributionBlock [itemprop=name]:before {
content: attr(data-signature);
display: block;
height: 15px;
position: relative;
top: -0.75em;
color: #8189a2;
font-family: 'Herr Von Muellerhoff';
font-weight: normal;
text-transform: none;
font-size: 3em;
letter-spacing: -2px;
}
.attributionBlock [itemprop=jobTitle] {
color: rgba(36, 27, 20, 0.7);
font-size: 0.9em;
}
.join {
-webkit-transition: .3s all ease-in-out;
-moz-transition: .3s all ease-in-out;
-o-transition: .3s all ease-in-out;
transition: .3s all ease-in-out;
padding: 1.5em;
position: relative;
top: -1.5em;
text-transform: uppercase;
text-decoration: none;
font-weight: 700;
letter-spacing: 3px;
font-size: 1.05em;
color: #EFEFEF;
background: #000000;
}
.join:hover {
background: #df4f23;
}
.btn {
font:inherit;
cursor:pointer;
border:none;
display:inline-block;
vertical-align: middle;
margin: 0;
line-height:1;
letter-spacing: normal;
}
.btn-box {
margin-top: 0;
margin-bottom: $line-height * 1rem;
border-radius: 0.25em;
margin-right: 1rem;
}
.lede {
text-transform: uppercase;
padding-top: 1em;
font-weight: 700;
font-size: 0.75em;
}
.giga {
color: #fff8f0;
text-shadow: -2px -2px 0 rgba(36, 27, 20, 0.65), -2px 2px 0 rgba(36, 27, 20, 0.65), 2px -2px 0 rgba(36, 27, 20, 0.65), 2px 2px 0 rgba(36, 27, 20, 0.65), rgba(36, 27, 20, 0.65) 1px 1px, rgba(36, 27, 20, 0.65) 2px 2px, rgba(36, 27, 20, 0.65) 3px 3px, rgba(36, 27, 20, 0.65) 4px 4px, rgba(36, 27, 20, 0.65) 5px 5px, rgba(36, 27, 20, 0.65) 6px 6px, rgba(36, 27, 20, 0.65) 7px 7px, rgba(36, 27, 20, 0.65) 8px 8px, rgba(36, 27, 20, 0.65) 9px 9px, rgba(36, 27, 20, 0.65) 10px 10px, rgba(36, 27, 20, 0.65) 11px 11px, rgba(36, 27, 20, 0.65) 12px 12px, rgba(36, 27, 20, 0.65) 13px 13px, rgba(36, 27, 20, 0.65) 14px 14px, rgba(36, 27, 20, 0.65) 15px 15px;
font-size: 14em;
letter-spacing: 0.135em;
line-height: 0;
text-transform: uppercase;
margin: 0.675em 0;
}
.giga .char1, .giga .char13 {
font-size: 1.25em;
position: relative;
top: 0.15em;
}
.subtitle {
text-transform: uppercase;
font-size: 3em;
font-size: 400;
margin-top: -.6875em;
color: #e45b49;
}
.subtitle [class*=char] {
letter-spacing: 1.5em;
padding-left: 0.75em;
}
</style>
</head>
<body>
<header class="grid padding centerText">
<h1 class="grid-full logo">Typeplate Error</h1>
<div itemscope itemtype="http://schema.org/Person" class="grid-one-fourth attributionBlock">
<p itemprop="name" data-signature="Dennis Gaebel">Dennis Gaebel <a href="https://twitter.com/gryghostvisuals">@gryghostvisuals</a></p>
<p itemprop="jobTitle">Typeplate Co&ndash;Founder</p>
</div>
<div class="grid-two-fourths">
<a href="/" class="join btn epsilon btn-box">Return Home</a>
</div>
<div itemscope itemtype="http://schema.org/Person" class="grid-one-fourth attributionBlock">
<p itemprop="name" data-signature="Zachary Kain">Zachary Kain <a href="https://twitter.com/zakkain">@zakkain</a></p>
<p itemprop="jobTitle">Typeplate Co&ndash;Founder</p>
</div>
</header>
<section class="topSeparator grid centerText">
<p class="lede">Ladies and gentlemen, type nerds of all legal ages, step right up and behold the miracle that is the</p>
<h1 class="giga">404</h1>
<p class="subtitle">Error</p>
</section>
</body>
</html>