110 lines
2.8 KiB
HTML
110 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Free 404 Pages</title>
|
|
<meta name="description" content="Free creative 404 pages" />
|
|
<meta name="keywords" content="free, open-scource, 404, page, pages, creative, error, github, construction" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<link href='http://fonts.googleapis.com/css?family=Quicksand:300,400,700' rel='stylesheet' type='text/css'>
|
|
<style>
|
|
body {
|
|
color: #2E2F30;
|
|
font-family: "Quicksand", sans-serif;
|
|
margin: 0;
|
|
}
|
|
|
|
footer {
|
|
position: relative;
|
|
margin-bottom: 8px;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: .6em;
|
|
color: #393939
|
|
}
|
|
|
|
a {
|
|
color: #393939;
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
}
|
|
|
|
a:hover {
|
|
color: #27ae60;
|
|
}
|
|
|
|
.dialog {
|
|
float:none;
|
|
text-align: center;
|
|
width: 75%;
|
|
margin: 2% auto 0;
|
|
}
|
|
|
|
.thumbs {
|
|
float:none;
|
|
text-align: center;
|
|
margin: 30px auto 0;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 3.5em;
|
|
color: #393939;
|
|
line-height: 1em;
|
|
}
|
|
|
|
p {
|
|
font-size: 1.1em;
|
|
line-height: 1.2em;
|
|
color: #393939;
|
|
}
|
|
.image {
|
|
float: none;
|
|
width:40%;
|
|
margin: 0 30%;
|
|
}
|
|
.thumb {
|
|
width: 25%;
|
|
border: 1px solid #393939;
|
|
border-radius: 0px;
|
|
webkit-border-radius: 0px;
|
|
margin: 10px 10px;
|
|
}
|
|
|
|
@media only screen and (max-width: 767px) {
|
|
.dialog {
|
|
width: 90%;
|
|
}
|
|
.image {
|
|
float: none;
|
|
width:75%;
|
|
margin: 0 12.5%;
|
|
}
|
|
.thumb {
|
|
width: 40%;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- This file lives in public/404.html -->
|
|
|
|
<div>
|
|
<img src="images/header.jpg" class="image">
|
|
<div class="dialog">
|
|
<p>We have created a collection of creative yet simple 404 pages for you to use. We truely believe no detail is too small. We want our users to be pleasently surprised if they ever find themselves lost or burdened by an error.</p>
|
|
<p>View the project on <a href="https://github.com/mhill426/free404" target="_blank">GitHub</a> and download the source code</p>
|
|
</div>
|
|
<div class="thumbs">
|
|
<a class="demo" href="ah_nuts/404.html"><img src="images/ah_nuts.png" class="thumb"></a>
|
|
<a class="demo" href="spilled_milk/404.html"><img src="images/spilled_milk.png" class="thumb"></a>
|
|
<a class="demo" href="lights_off/404.html"><img src="images/lights_off.jpg" class="thumb"></a>
|
|
<a class="demo" href="construction/404.html"><img src="images/construction.png" class="thumb"></a>
|
|
<a class="demo" href="groceries/404.html"><img src="images/groceries.png" class="thumb"></a>
|
|
<a class="demo" href="wander/404.html"><img src="images/wander.png" class="thumb"></a>
|
|
<a class="demo" href="fog/404.html"><img src="images/fog.png" class="thumb"></a>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<footer>Originated by <a href="http://www.matthewdhill.com" target="_blank">Matthew D. Hill</a></footer>
|
|
</html>
|