Skip to content

Commit e43f054

Browse files
OMGhixD-OGOMGhixD-OG
committed
404 page reworked, simplistic for the win.
1 parent b54cf2d commit e43f054

File tree

3 files changed

+61
-178
lines changed

3 files changed

+61
-178
lines changed

‎error/css/main.css

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
*{
2+
text-decoration:none;
3+
color:#9e9e9e !important;
4+
-webkit-transition: all .9s cubic-bezier(.23,1,.32,1) 0s;
5+
transition: all .9s cubic-bezier(.23,1,.32,1) 0s;
6+
}
7+
8+
*:hover {
9+
text-decoration:none;
10+
color:#ffc10a !important;
11+
-webkit-transition: all .9s cubic-bezier(.23,1,.32,1) 0s;
12+
transition: all .9s cubic-bezier(.23,1,.32,1) 0s;
13+
}
14+
15+
html {
16+
height: 100%;
17+
}
18+
19+
body{
20+
font-family: 'Lato', sans-serif;
21+
background-color: #1e1e1e;
22+
color: #ffa800 !important;
23+
margin: 0;
24+
}
25+
26+
#main{
27+
display: table;
28+
width: 100%;
29+
height: 100vh;
30+
text-align: center;
31+
}
32+
33+
.fof{
34+
display: table-cell;
35+
vertical-align: middle;
36+
font-style: italic;
37+
}
38+
39+
.fof h1{
40+
font-size: 50px;
41+
display: list-item;
42+
color: #ffa800 !important;
43+
padding-right: 12px;
44+
animation: type .5s alternate infinite;
45+
}
46+
47+
.fof_sub {
48+
display: table-cell;
49+
vertical-align: middle;
50+
font-style: italic;
51+
}

‎error/favicon.png

1.28 KB
Loading

‎error/index.html

+10-178
Original file line numberDiff line numberDiff line change
@@ -1,180 +1,12 @@
1-
<style>
2-
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');
3-
@import url('https://fonts.googleapis.com/css?family=Catamaran:400,800');
4-
.error-container {
5-
text-align: center;
6-
font-size: 180px;
7-
font-family: 'Catamaran', sans-serif;
8-
font-weight: 800;
9-
margin: 20px 15px;
10-
}
11-
.error-container > span {
12-
display: inline-block;
13-
line-height: 0.7;
14-
position: relative;
15-
color: #FFB485;
16-
}
17-
.error-container > span {
18-
display: inline-block;
19-
position: relative;
20-
vertical-align: middle;
21-
}
22-
.error-container > span:nth-of-type(1) {
23-
color: #D1F2A5;
24-
animation: colordancing 4s infinite;
25-
}
26-
.error-container > span:nth-of-type(3) {
27-
color: #F56991;
28-
animation: colordancing2 4s infinite;
29-
}
30-
.error-container > span:nth-of-type(2) {
31-
width: 120px;
32-
height: 120px;
33-
border-radius: 999px;
34-
}
35-
.error-container > span:nth-of-type(2):before,
36-
.error-container > span:nth-of-type(2):after {
37-
border-radius: 0%;
38-
content:"";
39-
position: absolute;
40-
top: 0; left: 0;
41-
width: inherit; height: inherit;
42-
border-radius: 999px;
43-
box-shadow: inset 30px 0 0 rgba(209, 242, 165, 0.4),
44-
inset 0 30px 0 rgba(239, 250, 180, 0.4),
45-
inset -30px 0 0 rgba(255, 196, 140, 0.4),
46-
inset 0 -30px 0 rgba(245, 105, 145, 0.4);
47-
animation: shadowsdancing 4s infinite;
48-
}
49-
.error-container > span:nth-of-type(2):before {
50-
-webkit-transform: rotate(45deg);
51-
-moz-transform: rotate(45deg);
52-
transform: rotate(45deg);
53-
}
1+
<head>
2+
<link rel="stylesheet" type="text/css" href="css/main.css">
3+
<link rel="shortcut icon" href="favicon.png" />
4+
</head>
545

55-
.screen-reader-text {
56-
position: absolute;
57-
top: -9999em;
58-
left: -9999em;
59-
}
60-
@keyframes shadowsdancing {
61-
0% {
62-
box-shadow: inset 30px 0 0 rgba(209, 242, 165, 0.4),
63-
inset 0 30px 0 rgba(239, 250, 180, 0.4),
64-
inset -30px 0 0 rgba(255, 196, 140, 0.4),
65-
inset 0 -30px 0 rgba(245, 105, 145, 0.4);
66-
}
67-
25% {
68-
box-shadow: inset 30px 0 0 rgba(245, 105, 145, 0.4),
69-
inset 0 30px 0 rgba(209, 242, 165, 0.4),
70-
inset -30px 0 0 rgba(239, 250, 180, 0.4),
71-
inset 0 -30px 0 rgba(255, 196, 140, 0.4);
72-
}
73-
50% {
74-
box-shadow: inset 30px 0 0 rgba(255, 196, 140, 0.4),
75-
inset 0 30px 0 rgba(245, 105, 145, 0.4),
76-
inset -30px 0 0 rgba(209, 242, 165, 0.4),
77-
inset 0 -30px 0 rgba(239, 250, 180, 0.4);
78-
}
79-
75% {
80-
box-shadow: inset 30px 0 0 rgba(239, 250, 180, 0.4),
81-
inset 0 30px 0 rgba(255, 196, 140, 0.4),
82-
inset -30px 0 0 rgba(245, 105, 145, 0.4),
83-
inset 0 -30px 0 rgba(209, 242, 165, 0.4);
84-
}
85-
100% {
86-
box-shadow: inset 30px 0 0 rgba(209, 242, 165, 0.4),
87-
inset 0 30px 0 rgba(239, 250, 180, 0.4),
88-
inset -30px 0 0 rgba(255, 196, 140, 0.4),
89-
inset 0 -30px 0 rgba(245, 105, 145, 0.4);
90-
}
91-
}
92-
@keyframes colordancing {
93-
0% {
94-
color: #fff;
95-
}
96-
25% {
97-
color: #dc8044;
98-
}
99-
50% {
100-
color: #FFC48C;
101-
}
102-
75% {
103-
color: #EFFAB4;
104-
}
105-
100% {
106-
color: #fff;
107-
}
108-
}
109-
@keyframes colordancing2 {
110-
0% {
111-
color: #FFC48C;
112-
}
113-
25% {
114-
color: #EFFAB4;
115-
}
116-
50% {
117-
color: #fff;
118-
}
119-
75% {
120-
color: #dc8044;
121-
}
122-
100% {
123-
color: #FFC48C;
124-
}
125-
}
126-
127-
/* demo stuff */
128-
* {
129-
-webkit-box-sizing: border-box;
130-
-moz-box-sizing: border-box;
131-
box-sizing: border-box;
132-
}
133-
body {
134-
background-color: #1e1e1e;
135-
margin-bottom: 50px;
136-
}
137-
html, button, input, select, textarea {
138-
font-family: 'Montserrat', Helvetica, sans-serif;
139-
color: #dc8044;
140-
}
141-
h1 {
142-
text-align: center;
143-
margin: 30px 15px;
144-
}
145-
.zoom-area {
146-
max-width: 490px;
147-
margin: 30px auto 30px;
148-
font-size: 19px;
149-
text-align: center;
150-
}
151-
.link-container {
152-
text-align: center;
153-
}
154-
a.more-link {
155-
text-transform: uppercase;
156-
font-size: 13px;
157-
background-color: #dc8044;
158-
padding: 10px 15px;
159-
border-radius: 0;
160-
color: #3d3d3d;
161-
display: inline-block;
162-
margin-right: 5px;
163-
margin-bottom: 5px;
164-
line-height: 1.5;
165-
text-decoration: none;
166-
margin-top: 50px;
167-
letter-spacing: 1px;
168-
}
169-
170-
</style>
171-
<h1>404 Error</h1>
172-
<p class="zoom-area"><b>Whoops!</b> It broke... </p>
173-
<section class="error-container">
174-
<span>4</span>
175-
<span><span class="screen-reader-text">0</span></span>
176-
<span>4</span>
177-
</section>
178-
<div class="link-container">
179-
<a target="_blank" href="../index.php" class="more-link">Lets go back!</a>
6+
<div id="main">
7+
<div class="fof">
8+
<h1>Grats. You broke it.</h1>
9+
<div style="color:#fff;">This page doesn't exist or some other horrible error has occured.</div>
10+
<a href="../">Click here to return.</a>
11+
</div>
18012
</div>

0 commit comments

Comments
 (0)