<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Not Found :(</title>
</head>
<body>
<div class="container">
<div id="header">
<h1>404 ERROR</h1>
<h2>File Not Found</h2>
<h3 class="quote">"The way to love anything is to realize that it may be lost."</h3>
<p class="author"><em>- Gilbert K. Chesterton</em></p>
</div>
<div class="warning">
<p class="sign alert">Alert!</p>
<p>The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.</p>
</div>
<h4><i class="sign tip">Tip: </i><strong>Please try the following:</strong></h4>
<ul>
<li>Check your spelling</li>
<li>Go to the main site and search again</li>
<li><a href="javascript:history.back()">Go back to the previous page</a></li>
</ul>
<div id="footer">
<div class="contact"><i class="sign call">Tip: </i><p class="marquee">If you think this is a server error, please contact the system administrator.</p></div>
<p class="copyright">© 2013 Redfrost.com</p>
</div>
</div>
</body>
</html>
/* Custom 404 */
/* Tested in Safari 6+, Chrome 26+, Firefox 23+, IE10, Opera 12+ */
/* This page was created to demonstrate CSS3 features - thus it may not validate CSS specs */
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,600,700,200);
/* SELECTED TEXT */
::selection { background: #ff5e99; color: #FFFFFF; text-shadow: 0; }
::selection { background: #ff5e99; color: #FFFFFF; }
html {
margin-top: 80px;
padding: 30px 10px;
font-size: 20px;
line-height: 1;
text-size-adjust: 100%;
text-size-adjust: 100%;
/* BG pattern */
background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
}
html, input { font-family: "Titillium Web", "Helvetica Neue", Helvetica, Arial, sans-serif; }
p { margin: 16px 0; }
body {
background: none repeat scroll 0 0 #982E33;
border-radius: 14px 14px 14px 14px;
border-top: 2px solid #B65156;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
margin: 0 auto;
width: 500px;
_width: 500px;
padding: 30px 10px 10px;
}
body, a, a:visited, a:active {
color: #f1f1f1;
text-decoration: none;
}
ul {
font-size: 16px;
line-height: 1.4;
list-style: square outside none;
margin: 16px 24px 40px;
padding: 0 0 0 40px;
}
h1 {
margin:;
font-size: 76px;
text-align: center;
margin: 0 0 0px 0;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}
h2 {
font-size: 50px;
text-align: center;
margin: 12px 0 0 0;
text-transform: uppercase;
line-height: 40px;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}
h3 {
margin: 40px 0 8px;
text-align: center;
font-size: 30px;
font-weight: 500;
line-height: 1.4;
}
h4 {
margin: 24px 0 8px 18px;
text-transform: uppercase;
}
.author {
font-size: 14px;
padding: 0 10px 0 0;
text-align: center;
}
.container {
max-width: 468px;
_width: 468px;
margin: 0 auto;
}
.warning {
margin: 40px 0 40px 0;
padding: 10px 20px 16px;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}
.warning .sign.alert {
background-image: url("http://simonalex.com/demo/404/redbox/404_icon_white.png");
background-repeat: no-repeat;
background-size: 90px auto;
height: 64px;
margin-right: 20px;
float:left;
text-indent: -9999px;
width: 69px;
}
.warning p {
font-size: 16px;
line-height: 20px;
}
.sign.tip {
background-image: url("http://simonalex.com/demo/404/redbox/404_icon_white.png");
background-position: -70px -45px;
background-repeat: no-repeat;
background-size: 90px auto;
float: left;
height: 20px;
margin-right: 6px;
text-indent: -9999px;
width: 20px;
}
.sign.call {
background-image: url("http://simonalex.com/demo/404/redbox/404_icon_white.png");
background-position: -70px -22px;
background-repeat: no-repeat;
background-size: 90px auto;
float: left;
height: 20px;
margin: 15px 8px 0 0;
text-indent: -9999px;
width: 20px;
}
.contact {
padding: 4px 20px;
background: #490a0e;
border-radius: 6px;
font-size: 12px;
}
.copyright {
font-size: 12px;
text-align: center;
}
/* Glass cover */
body:before {
background: linear-gradient(-40deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.1) 40%, rgba(10,14,10,0.09) 40%, rgba(255,255,255,0.2) 90%); /* FF3.6+ */
background: linear-gradient(-40deg, rgba(255,255,255,0.09) 0%,rgba(255,255,255,0.1) 40%,rgba(10,14,10,0.09) 40%,rgba(255,255,255,0.2) 90%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(-40deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.1) 40%, rgba(10,14,10,0.09) 40%, rgba(255,255,255,0.2) 90%); /* Opera 11.10+ */
background: linear-gradient(-40deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.1) 40%, rgba(10,14,10,0.09) 40%, rgba(255,255,255,0.2) 90%); /* IE10+ */
background: linear-gradient(-220deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.1) 40%, rgba(10,14,10,0.09) 40%, rgba(255,255,255,0.2) 90%); /* W3C */
border-radius: 6px 6px 6px 6px;
border-top: 3px solid rgba(255, 255, 255, 0.2);
border-left: 1px solid rgba(255, 255, 255, 0.3);
border-right: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
content: " ";
height: 836px;
margin: -70px 0 0 -40px;
position: absolute;
width: 580px;
}
/* Cover holder */
#header:before, #header:after, .copyright:before, .copyright:after {
background: linear-gradient(-40deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.6) 50%, #0A0E0A 50%, #FFFFFF 100%); /* FF3.6+ */
background: linear-gradient(-40deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.6) 50%, #0A0E0A 50%, #FFFFFF 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(-40deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.6) 50%, #0A0E0A 50%, #FFFFFF 100%); /* Opera 11.10+ */
background: linear-gradient(-40deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.6) 50%, #0A0E0A 50%, #FFFFFF 100%); /* IE10+ */
background: linear-gradient(-220deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.6) 50%, #0A0E0A 50%, #FFFFFF 100%);
border: 0px solid #999999;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5) inset, 0 0 3px #000000;
content: " ";
display: block;
height: 18px;
position: absolute;
width: 18px;
}
#header:before {
margin: -50px 0 0 -36px;
}
#header:after {
margin: -348px 0 0 485px;
}
.copyright:before {
margin: 40px 0 0 -36px;
}
.copyright:after {
margin: 28px 0 0 485px;
}
/* Animation */
.sign.alert {
animation: blink 1s infinite;
animation: blink 1s infinite;
animation: blink 1s infinite;
animation: blink 1s infinite;
}
@-webkit-keyframes blink {
0% { opacity: 0.1; }
50% { opacity: 1; }
100% { opacity: 0.1; }
}
@-moz-keyframes blink {
0% { opacity: 0.1; }
50% { opacity: 1; }
100% { opacity: 0.1; }
}
@-ms-keyframes blink {
0% { opacity: 0.1; }
50% { opacity: 1; }
100% { opacity: 0.1; }
}
@keyframes blink {
0% { opacity: 0.1; }
50% { opacity: 1; }
100% { opacity: 0.1; }
}
/* Marquee Animation */
#footer, .marquee { overflow: hidden; }
.marquee {
animation: scroll 10s ease infinite;
animation: scroll 10s ease infinite;
animation: scroll 10s ease infinite;
animation: scroll 10s ease infinite;
}
@-webkit-keyframes scroll {
0% { transform:translateX(100%);opacity:0; }
10% { transform:translateX(0);opacity:1; }
40% { transform:translateX(0%); }
50% { transform:translateX(0%); }
90% { opacity:1;}
100% { opacity:0;}
}
@-moz-keyframes scroll {
0% { transform:translateX(100%);opacity:0; }
10% { transform:translateX(0);opacity:1; }
40% { transform:translateX(0%); }
50% { transform:translateX(0%); }
90% { opacity:1;}
100% { opacity:0;}
}
@keyframes scroll {
0% { transform:translateX(100%);opacity:0; }
10% { transform:translateX(0);opacity:1; }
40% { transform:translateX(0%); }
50% { transform:translateX(0%); }
90% { opacity:1;}
100% { opacity:0;}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.