Skip to content

Instantly share code, notes, and snippets.

@alexbaldwin

alexbaldwin/404

Created November 12, 2011 03:01
Show Gist options
  • Save alexbaldwin/1359967 to your computer and use it in GitHub Desktop.
Save alexbaldwin/1359967 to your computer and use it in GitHub Desktop.
Download ZIP
Hungry error pages. Featuring full-screen background, Futura from Typekit, and Google's site search.
Raw
404
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8"/>
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Alex Baldwin - Amber Alert Error</title>
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Less Framework 4
http://lessframework.com
by Joni Korpi
License: http://creativecommons.org/licenses/MIT/ */
/* Resets
------ */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em,
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup,
menu, footer, header, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
}
article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
display: block;
}
a img {border: 0;}
html {overflow-y: scroll;}
/* Typography presets
------------------ */
.gigantic {
font-size: 110px;
line-height: 120px;
letter-spacing: -2px;
}
.huge, h1 {
font-size: 68px;
line-height: 72px;
letter-spacing: -3px;
font-weight:bold;
}
.large, h2 {
color: rgba(255,255,255,.8);
font-size: 42px;
line-height: 48px;
font-weight:normal;
}
.bigger, h3 {
font-size: 26px;
line-height: 36px;
font-weight:normal;
}
/* Selection colours (easy to forget) */
::selection {background: rgb(0,255,0);}
::-moz-selection {background: rgb(0,255,0);}
img::selection {background: transparent;}
img::-moz-selection {background: transparent;}
body {-webkit-tap-highlight-color: rgb(0,255,0);}
/* Default Layout: 992px.
Gutters: 24px.
Outer margins: 48px.
Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols 1 2 3 4 5 6 7 8 9 10
px 68 160 252 344 436 528 620 712 804 896 */
body {
color: #fff;
font-family: futura-pt, "Helvetica Nueue", helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
padding: 72px 48px 84px;
background: #333;
background: url("http://s3.amazonaws.com/kiwigrove/404.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
article {
margin:0 auto;
padding: 72px 48px 84px;
visibility: hidden;
text-shadow:1px 1px 8px #000000;
text-align:center;
}
.no-rgba article{
background: #333;
}
.wf-active article {
visibility: visible;
}
a {
font-weight:bold;
text-decoration:none;
color:#fff;
border-bottom:2px solid rgba(255,255,255,.3);
-webkit-transition: all .33s ease;
-moz-transition: all .33s ease;
-o-transition: all .33s ease;
transition: all .33s ease;
}
a:hover {
border-bottom:2px solid rgba(255,255,255,.6);
}
section ul {
list-style-type:none;
}
section ul li {
float:left;
}
section ul li img {
opacity:.6;
margin:12px 12px 0 0;
-webkit-transition: all .33s ease;
-moz-transition: all .33s ease;
-o-transition: all .33s ease;
transition: all .33s ease;
}
section ul li img:hover {
opacity:.9;
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
}
hr {
clear:both;
}
/* Tablet Layout: 768px.
Gutters: 24px.
Outer margins: 28px.
Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols 1 2 3 4 5 6 7 8
px 68 160 252 344 436 528 620 712 */
@media only screen and (min-width: 768px) and (max-width: 991px) {
body {
padding: 48px 28px 60px;
}
article {
padding: 48px 28px 60px;
}
}
/* Mobile Layout: 320px.
Gutters: 24px.
Outer margins: 34px.
Inherits styles from: Default Layout.
---------------------------------------------
cols 1 2 3
px 68 160 252 */
@media only screen and (max-width: 767px) {
body {
padding: 0;
}
article {
width: 252px;
padding: 48px 34px 60px;
}
#hellobar-wrapper {
visibility: hidden;
}
}
</style>
<!-- Futura provided by Typekit -->
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
typekit: {
id: 'xxxxxxx'
}
});
</script>
</head>
<body>
<article>
<h1>The cake is a lie.</h1>
<h2>This page has gone missing.</h2>
<br>
<h3>Sorry about that, go back <a href="http://alexbaldw.in" title="Alex Baldwin">home</a> or <a href="mailto:hello@alexbaldw.in" title="Contact Alex Baldwin">contact us</a> about what's broken.</h3>
<br>
<script>
var GOOG_FIXURL_LANG = (navigator.language || '').slice(0,2),
GOOG_FIXURL_SITE = location.host;
</script>
<script src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>
</article>
<script>
var _gaq=[['_setAccount","UA-XXXXXXXX-XX'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
Raw
500
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8"/>
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Alex Baldwin - Spontaneous Combustion Error</title>
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Less Framework 4
http://lessframework.com
by Joni Korpi
License: http://creativecommons.org/licenses/MIT/ */
/* Resets
------ */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em,
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup,
menu, footer, header, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
}
article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
display: block;
}
a img {border: 0;}
html {overflow-y: scroll;}
/* Typography presets
------------------ */
.gigantic {
font-size: 110px;
line-height: 120px;
letter-spacing: -2px;
}
.huge, h1 {
font-size: 68px;
line-height: 72px;
letter-spacing: -3px;
font-weight:bold;
}
.large, h2 {
color: rgba(255,255,255,.8);
font-size: 42px;
line-height: 48px;
font-weight:normal;
}
.bigger, h3 {
font-size: 26px;
line-height: 36px;
font-weight:normal;
}
/* Selection colours (easy to forget) */
::selection {background: rgb(0,255,0);}
::-moz-selection {background: rgb(0,255,0);}
img::selection {background: transparent;}
img::-moz-selection {background: transparent;}
body {-webkit-tap-highlight-color: rgb(0,255,0);}
/* Default Layout: 992px.
Gutters: 24px.
Outer margins: 48px.
Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols 1 2 3 4 5 6 7 8 9 10
px 68 160 252 344 436 528 620 712 804 896 */
body {
color: #fff;
font-family: futura-pt, "Helvetica Nueue", helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
padding: 72px 48px 84px;
background: #333;
background: url("http://s3.amazonaws.com/kiwigrove/500.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
article {
margin:0 auto;
padding: 72px 48px 84px;
visibility: hidden;
text-shadow:1px 1px 8px #000000;
text-align:center;
}
.no-rgba article{
background: #333;
}
.wf-active article {
visibility: visible;
}
a {
font-weight:bold;
text-decoration:none;
color:#fff;
border-bottom:2px solid rgba(255,255,255,.3);
-webkit-transition: all .33s ease;
-moz-transition: all .33s ease;
-o-transition: all .33s ease;
transition: all .33s ease;
}
a:hover {
border-bottom:2px solid rgba(255,255,255,.6);
}
section ul {
list-style-type:none;
}
section ul li {
float:left;
}
section ul li img {
opacity:.6;
margin:12px 12px 0 0;
-webkit-transition: all .33s ease;
-moz-transition: all .33s ease;
-o-transition: all .33s ease;
transition: all .33s ease;
}
section ul li img:hover {
opacity:.9;
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
}
hr {
clear:both;
}
/* Tablet Layout: 768px.
Gutters: 24px.
Outer margins: 28px.
Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols 1 2 3 4 5 6 7 8
px 68 160 252 344 436 528 620 712 */
@media only screen and (min-width: 768px) and (max-width: 991px) {
body {
padding: 48px 28px 60px;
}
article {
padding: 48px 28px 60px;
}
}
/* Mobile Layout: 320px.
Gutters: 24px.
Outer margins: 34px.
Inherits styles from: Default Layout.
---------------------------------------------
cols 1 2 3
px 68 160 252 */
@media only screen and (max-width: 767px) {
body {
padding: 0;
}
article {
width: 252px;
padding: 48px 34px 60px;
}
#hellobar-wrapper {
visibility: hidden;
}
}
</style>
<!-- Futura provided by Typekit -->
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
typekit: {
id: 'xxxxxxx'
}
});
</script>
</head>
<body>
<article>
<h1>Mmm... bacon.</h1>
<h2>Our server couldn't handle your awesomeness.</h2>
<br>
<h3>Sorry about that, go back <a href="http://alexbaldw.in" title="Alex Baldwin">home</a> or <a href="mailto:hello@alexbaldw.in" title="Contact Alex Baldwin">contact us</a> about what's broken.</h3>
</article>
<script>
var _gaq=[['_setAccount","UA-XXXXXXXX-XX'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment