jprdonnelly/free404
1
0
Fork 0
mirror of synced 2025-12-19 17:36:58 -05:00
Code Issues Projects Releases Wiki Activity

First pages commit

Browse Source
This commit is contained in:
mhill426
2015-02-16 19:33:39 -08:00
commit 4f6889acf1
15 changed files with 651 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
ah_nuts/404.html Normal file
View File

@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html>
<head>
<title>The page you were looking for doesn't exist (404)</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body {
background-color: #fff;
color: #2E2F30;
font-family: sans-serif;
margin: 0;
}
footer {
position: absolute;
bottom: 1%;
width: 100%;
text-align: center;
font-size: .6em;
color: #393939
}
a {
color: #393939;
}
a:hover {
color: #393939;
}
.dialog {
float:right;
text-align: left;
width: 45%;
margin: 5% auto 0;
}
h1 {
font-size: 5em;
color: #393939;
line-height: 1.5em;
}
p {
font-size: 1.4em;
color: #393939;
padding-right: 5%;
}
.image {
float: left;
width:50%;
margin: 15% 0 0 5%;
}
@media only screen and (max-width: 767px) {
.image {
width: 90%;
margin: 5% 0 0 5%;
}
.dialog {
float:none;
text-align: center;
width: 90%;
}
}
</style>
</head>
<body>
<!-- This file lives in public/404.html -->
<div>
<div class="dialog">
<h1>Ah, nuts!</h1>
<p>we were unable to find the page you were looking for, but we'll get cracking on the problem.</p>
</div>
<img src="pistachios.jpg" class="image">
</div>
</body>
<footer><a href="http://www.free404.com" target="_blank">free404.com</a></footer>
</html>

BIN
ah_nuts/pistachios.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

84
construction/404.html Normal file
View File

@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html>
<head>
<title>The page you were looking for doesn't exist (404)</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body {
height: 100%;
width: 100%;
background: #fefefe url(construction.png)center bottom fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #2E2F30;
font-family: sans-serif;
margin: 0;
}
footer {
position: absolute;
bottom: 1%;
width: 100%;
text-align: center;
font-size: .6em;
color: #fff
}
a {
color: #fff;
}
a:hover {
color: #393939;
}
.dialog {
float:left;
text-align: left;
width: 50%;
margin: 2% auto 0;
padding-left: 10%;
}
h1 {
font-size: 3.5em;
color: #393939;
line-height: 1em;
}
h2 {
font-size: 2em;
color: #393939;
line-height: .5em;
}
p {
font-size: 1.4em;
color: #393939;
}
@media only screen and (max-width: 767px) {
.dialog {
float:none;
text-align: center;
width: 90%;
}
}
</style>
</head>
<body>
<!-- This file lives in public/404.html -->
<div>
<div class="dialog">
<h1>Oops!</h1>
<p>We were unable to find the page you were looking for, but working hard to resolve this issue.</p>
</div>
</div>
</body>
<footer><a href="http://www.free404.com" target="_blank">free404.com</a></footer>
</html>

BIN
construction/construction.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

75
fog/404.html Normal file
View File

@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html>
<head>
<title>The page you were looking for doesn't exist (404)</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> <style>
body {
height: 100%;
width: 100%;
background: #fefefe url(Golden_Gate.png)center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #2E2F30;
font-family: "Montserrat", sans-serif;
margin: 0;
}
footer {
position: absolute;
bottom: 1%;
width: 100%;
text-align: center;
font-size: .6em;
color: #fff
}
a {
color: #fff;
}
a:hover {
color: #d35400;
}
.dialog {
float:none;
text-align: center;
width: 75%;
margin: 40% auto 0;
}
h1 {
font-size: 3.5em;
color: #fff;
line-height: 1em;
}
p {
font-size: 1.4em;
color: #fff;
}
@media only screen and (max-width: 767px) {
.dialog {
width: 90%;
margin: 60% auto 0;
}
}
</style>
</head>
<body>
<!-- This file lives in public/404.html -->
<div>
<div class="dialog">
<h1>We got lost in the fog</h1>
<p>We were unable to find the page you were looking for.</p>
</div>
</div>
</body>
<footer><a href="http://www.free404.com" target="_blank">free404.com</a></footer>
</html>

BIN
fog/Golden_Gate.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

81
groceries/404.html Normal file
View File

@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html>
<head>
<title>The page you were looking for doesn't exist (404)</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body {
background-color: #fff;
color: #2E2F30;
font-family: sans-serif;
margin: 0;
}
footer {
position: absolute;
bottom: 1%;
width: 100%;
text-align: center;
font-size: .6em;
color: #393939
}
a {
color: #393939;
}
a:hover {
color: #393939;
}
.dialog {
float:right;
text-align: left;
width: 45%;
margin: 5% auto 0;
}
h1 {
font-size: 5em;
color: #393939;
line-height: 1.5em;
}
p {
font-size: 1.4em;
color: #393939;
padding-right: 5%;
}
.image {
float: left;
width:50%;
margin: 5% 0 0 5%;
}
@media only screen and (max-width: 767px) {
.image {
width: 90%;
margin: 5% 0 0 5%;
}
.dialog {
float:none;
text-align: center;
width: 90%;
}
}
</style>
</head>
<body>
<!-- This file lives in public/404.html -->
<div>
<div class="dialog">
<h1>Whoops!</h1>
<p>Clumsy us, we were unable to find the page you were looking for</p>
</div>
<img src="groceries.png" class="image">
</div>
</body>
<footer><a href="http://www.free404.com" target="_blank">free404.com</a></footer>
</html>

BIN
groceries/groceries.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

83
index.html Normal file
View File

@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html>
<head>
<title>Free 404</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body {
color: #2E2F30;
font-family: sans-serif;
margin: 0;
}
footer {
position: absolute;
bottom: 1%;
width: 100%;
text-align: center;
font-size: .6em;
color: #393939
}
a {
color: #393939;
}
a:hover {
color: #d35400;
}
.demo {
color: #3498db;
padding: 10px 10px;
}
.demo:hover {
color: #2980b9;
padding: 10px 10px;
}
.dialog {
float:none;
text-align: center;
width: 75%;
margin: 5% auto 0;
}
h1 {
font-size: 3.5em;
color: #393939;
line-height: 1em;
}
p {
font-size: 1.4em;
color: #393939;
}
@media only screen and (max-width: 767px) {
.dialog {
width: 90%;
}
}
</style>
</head>
<body>
<!-- This file lives in public/404.html -->
<div>
<div class="dialog">
<h1>Free 404</h1>
<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 every find themselves lost or burdened by an error.</p>
<a class="demo" href="ah_nuts/404.html">Ah Nuts!</a>
<a class="demo" href="spilled_milk/404.html">Spilled Milk</a>
<a class="demo" href="lights_off/404.html">In the dark</a>
<a class="demo" href="construction/404.html">Construction</a>
<a class="demo" href="groceries/404.html">Groceries</a>
<a class="demo" href="wander/404.html">Wander</a>
<a class="demo" href="fog/404.html">Fog</a>
</div>
</div>
</body>
<footer>Originated by <a href="http://www.matthewdhill.com" target="_blank">Matthew D. Hill</a></footer>
</html>

81
lights_off/404.html Normal file
View File

@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html>
<head>
<title>The page you were looking for doesn't exist (404)</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body {
background-color: #26292E;
color: #2E2F30;
font-family: sans-serif;
margin: 0;
}
footer {
position: absolute;
bottom: 1%;
width: 100%;
text-align: center;
font-size: .6em;
color: #fff
}
a {
color: #fff;
}
a:hover {
color: #e74c3c;
}
.dialog {
float:right;
text-align: left;
width: 60%;
margin: 5% auto 0;
}
h1 {
font-size: 4em;
color: #fff;
line-height: 1em;
}
p {
font-size: 1.4em;
color: #fff;
padding-right: 5%;
}
.image {
position: absolute;
float: left;
top: 0;
width:60%;
}
@media only screen and (max-width: 767px) {
.image {
width: 100%;
top: -50px;
}
.dialog {
float:none;
text-align: center;
width: 90%;
margin-top: 70%
}
}
</style>
</head>
<body>
<!-- This file lives in public/404.html -->
<img src="light-bulb.png" class="image">
<div>
<div class="dialog">
<h1>Hey, who turned off the lights?</h1>
<p>We were unable to find the page you were looking for.</p>
</div>
</div>
</body>
<footer><a href="http://www.free404.com" target="_blank">free404.com</a></footer>
</html>

BIN
lights_off/light-bulb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

82
spilled_milk/404.html Normal file
View File

@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html>
<head>
<title>The page you were looking for doesn't exist (404)</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body {
background-color: #3498db;
color: #2E2F30;
font-family: sans-serif;
margin: 0;
}
footer {
position: absolute;
bottom: 1%;
width: 100%;
text-align: center;
font-size: .6em;
color: #fff
}
a {
color: #fff;
}
a:hover {
color: #393939;
}
.dialog {
float:right;
text-align: left;
width: 50%;
margin: 5% auto 0;
}
h1 {
font-size: 5em;
color: #fff;
line-height: 1em;
}
p {
font-size: 1.4em;
color: #fff;
padding-right: 5%;
}
.image {
position: absolute;
float: left;
width:70%;
margin: 12% 0 0 5%;
}
@media only screen and (max-width: 767px) {
.image {
width: 90%;
margin: 5% 0 0 5%;
}
.dialog {
float:none;
text-align: center;
width: 90%;
}
}
</style>
</head>
<body>
<!-- This file lives in public/404.html -->
<div>
<div class="dialog">
<h1>Oops.</h1>
<p>we were unable to find the page you were looking for.</p>
</div>
<img src="spilled-milk.png" class="image">
</div>
</body>
<footer><a href="http://www.free404.com" target="_blank">free404.com</a></footer>
</html>

BIN
spilled_milk/spilled-milk.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

84
wander/404.html Normal file
View File

@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html>
<head>
<title>The page you were looking for doesn't exist (404)</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
<style>
body {
height: 100%;
width: 100%;
background: #fefefe url(wander.jpeg)center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #2E2F30;
font-family: "Amatic SC", sans-serif;
margin: 0;
}
footer {
position: absolute;
bottom: 1%;
width: 100%;
font-family: sans-serif;
text-align: center;
font-size: .6em;
color: #fff
}
a {
color: #fff;
}
a:hover {
color: #27ae60;
}
.dialog {
float:none;
text-align: center;
width: 75%;
margin: 5% auto 0;
}
h1 {
font-size: 4em;
color: #fff;
line-height: 1em;
}
h2 {
font-size: 2.8em;
color: #fff;
line-height: .5em;
}
p {
font-size: 2em;
color: #fff;
padding-right: 5%;
}
@media only screen and (max-width: 767px) {
.dialog {
width: 90%;
}
}
</style>
</head>
<body>
<!-- This file lives in public/404.html -->
<div>
<div class="dialog">
<h1>Not all those who wander are lost.</h1>
<h2>Error: 404</h2>
<p>looks like we lost our way and were unable to find the page you were looking for.</p>
</div>
</div>
</body>
<footer><a href="http://www.free404.com" target="_blank">free404.com</a> photo credit: <a href="http://www.deathtothestockphoto.com" target="_blank">Death to Stock</a></footer>
</html>

BIN
wander/wander.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 537 KiB