/
index.html
109 lines (99 loc) · 2.83 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!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>