Skip to content
This repository was archived by the owner on Apr 21, 2026. It is now read-only.

Commit 443c8e1

Browse files
author
dpatanin
committed
style 404 page
1 parent 06016e9 commit 443c8e1

3 files changed

Lines changed: 261 additions & 3 deletions

File tree

‎src/pages/404.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,19 @@ import Layout from '../components/Layout';
33

44
class NotFoundPage extends React.Component {
55
render() {
6+
67
return (
7-
<Layout>
8-
<h1>Not Found</h1>
9-
<p>You just hit a page that doesn&#39;t exist...</p>
8+
<Layout bodyClass="page-404">
9+
<div className="circles">
10+
<p>
11+
404
12+
<br />
13+
<small>PAGE NOT FOUND</small>
14+
</p>
15+
<span className="circle big" />
16+
<span className="circle med" />
17+
<span className="circle small" />
18+
</div>
1019
</Layout>
1120
);
1221
}

‎src/scss/pages/_404.scss‎

Lines changed: 248 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,248 @@
1+
.page-404 {
2+
display: flex;
3+
background: #fafafa;
4+
align-content: center;
5+
6+
#title {
7+
text-align: center;
8+
font-size: 40px;
9+
margin-top: 40px;
10+
margin-bottom: -40px;
11+
position: relative;
12+
color: #fff;
13+
}
14+
15+
.circles {
16+
text-align: center;
17+
margin-top: 120px;
18+
}
19+
20+
.circles p {
21+
font-size: 240px;
22+
color: #fff;
23+
padding-top: 60px;
24+
position: relative;
25+
z-index: 9;
26+
line-height: 100%;
27+
}
28+
29+
.circles p small {
30+
font-size: 40px;
31+
line-height: 100%;
32+
vertical-align: top;
33+
}
34+
35+
.circles .circle.small {
36+
width: 140px;
37+
height: 140px;
38+
border-radius: 50%;
39+
background: #48a9e6;
40+
position: absolute;
41+
z-index: 1;
42+
margin-top: 120px;
43+
top: 80px;
44+
left: 50%;
45+
animation: 7s smallmove infinite cubic-bezier(1, 0.22, 0.71, 0.98);
46+
-webkit-animation: 7s smallmove infinite cubic-bezier(1, 0.22, 0.71, 0.98);
47+
animation-delay: 1.2s;
48+
-webkit-animation-delay: 1.2s;
49+
}
50+
51+
.circles .circle.med {
52+
width: 200px;
53+
height: 200px;
54+
border-radius: 50%;
55+
background: #48a9e6;
56+
position: absolute;
57+
z-index: 1;
58+
margin-top: 120px;
59+
top: 0;
60+
left: 10%;
61+
animation: 7s medmove infinite cubic-bezier(0.32, 0.04, 0.15, 0.75);
62+
-webkit-animation: 7s medmove infinite cubic-bezier(0.32, 0.04, 0.15, 0.75);
63+
animation-delay: 0.4s;
64+
-webkit-animation-delay: 0.4s;
65+
}
66+
67+
.circles .circle.big {
68+
width: 400px;
69+
height: 400px;
70+
border-radius: 50%;
71+
background: #48a9e6;
72+
position: absolute;
73+
z-index: 1;
74+
margin-top: 120px;
75+
top: 200px;
76+
right: 0;
77+
animation: 8s bigmove infinite;
78+
-webkit-animation: 8s bigmove infinite;
79+
animation-delay: 3s;
80+
-webkit-animation-delay: 1s;
81+
}
82+
83+
@-webkit-keyframes smallmove {
84+
0% {
85+
top: 10px;
86+
left: 45%;
87+
opacity: 1;
88+
}
89+
25% {
90+
top: 300px;
91+
left: 40%;
92+
opacity: 0.7;
93+
}
94+
50% {
95+
top: 240px;
96+
left: 55%;
97+
opacity: 0.4;
98+
}
99+
75% {
100+
top: 100px;
101+
left: 40%;
102+
opacity: 0.6;
103+
}
104+
100% {
105+
top: 10px;
106+
left: 45%;
107+
opacity: 1;
108+
}
109+
}
110+
@keyframes smallmove {
111+
0% {
112+
top: 10px;
113+
left: 45%;
114+
opacity: 1;
115+
}
116+
25% {
117+
top: 300px;
118+
left: 40%;
119+
opacity: 0.7;
120+
}
121+
50% {
122+
top: 240px;
123+
left: 55%;
124+
opacity: 0.4;
125+
}
126+
75% {
127+
top: 100px;
128+
left: 40%;
129+
opacity: 0.6;
130+
}
131+
100% {
132+
top: 10px;
133+
left: 45%;
134+
opacity: 1;
135+
}
136+
}
137+
138+
@-webkit-keyframes medmove {
139+
0% {
140+
top: 0px;
141+
left: 20%;
142+
opacity: 1;
143+
}
144+
25% {
145+
top: 300px;
146+
left: 80%;
147+
opacity: 0.7;
148+
}
149+
50% {
150+
top: 240px;
151+
left: 55%;
152+
opacity: 0.4;
153+
}
154+
75% {
155+
top: 100px;
156+
left: 40%;
157+
opacity: 0.6;
158+
}
159+
100% {
160+
top: 0px;
161+
left: 20%;
162+
opacity: 1;
163+
}
164+
}
165+
166+
@keyframes medmove {
167+
0% {
168+
top: 0px;
169+
left: 20%;
170+
opacity: 1;
171+
}
172+
25% {
173+
top: 300px;
174+
left: 80%;
175+
opacity: 0.7;
176+
}
177+
50% {
178+
top: 240px;
179+
left: 55%;
180+
opacity: 0.4;
181+
}
182+
75% {
183+
top: 100px;
184+
left: 40%;
185+
opacity: 0.6;
186+
}
187+
100% {
188+
top: 0px;
189+
left: 20%;
190+
opacity: 1;
191+
}
192+
}
193+
194+
@-webkit-keyframes bigmove {
195+
0% {
196+
top: 0px;
197+
right: 4%;
198+
opacity: 0.5;
199+
}
200+
25% {
201+
top: 100px;
202+
right: 40%;
203+
opacity: 0.4;
204+
}
205+
50% {
206+
top: 240px;
207+
right: 45%;
208+
opacity: 0.8;
209+
}
210+
75% {
211+
top: 100px;
212+
right: 35%;
213+
opacity: 0.6;
214+
}
215+
100% {
216+
top: 0px;
217+
right: 4%;
218+
opacity: 0.5;
219+
}
220+
}
221+
@keyframes bigmove {
222+
0% {
223+
top: 0px;
224+
right: 4%;
225+
opacity: 0.5;
226+
}
227+
25% {
228+
top: 100px;
229+
right: 40%;
230+
opacity: 0.4;
231+
}
232+
50% {
233+
top: 240px;
234+
right: 45%;
235+
opacity: 0.8;
236+
}
237+
75% {
238+
top: 100px;
239+
right: 35%;
240+
opacity: 0.6;
241+
}
242+
100% {
243+
top: 0px;
244+
right: 4%;
245+
opacity: 0.5;
246+
}
247+
}
248+
}

‎src/scss/style.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565

6666
// Pages
6767
@import 'pages/home';
68+
@import 'pages/404';
6869
@import 'pages/contact/page-contact';
6970
@import 'pages/team/page-teams';
7071
@import 'pages/integrations/page-integrations';

0 commit comments

Comments
 (0)