Skip to content

Commit 4a428e8

Browse files
ormaksormaks
committed
Add NotFound page
1 parent 8b2df81 commit 4a428e8

File tree

11 files changed

+329
-24
lines changed

11 files changed

+329
-24
lines changed

‎my-app/server.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ app.use(express.static(__dirname + '/static'));
99

1010
// handle every other route with index.html, which will contain
1111
// a script tag to your application's JavaScript file(s).
12-
app.get('*', function (req, res){
13-
res.sendFile(path.join(__dirname, prefix + '/static/index.html'), function(err) {
12+
app.get('*', (req, res) => {
13+
res.sendFile(path.join(__dirname, prefix + '/static/index.html')/*, function(err) {
1414
if (err) {
1515
res.status(500).send(err)
1616
}
17-
})
17+
}*/)
1818
});
1919
//response.sendFile(path.resolve(__dirname, prefix + '/static', 'index.html'))
2020
app.listen(port);

‎my-app/src/css/home.scss‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
$mainColor: #08fdd8;
2+
13
/* ||| MAIN DIV |||*/
24
.home_content {
35
height: 100%;
@@ -29,13 +31,13 @@
2931
}
3032

3133
.contact_btn {
32-
color: #08fdd8;
34+
color: $mainColor;
3335
font-size: 13px;
3436
letter-spacing: 3px;
3537
font-family: "Open Sans", sans-serif;
3638
text-decoration: none;
3739
padding: 8px 12px;
38-
border: 1px solid #08fdd8;
40+
border: 1px solid $mainColor;
3941
margin-top: 25px;
4042
float: left;
4143
border-radius: 3px;
@@ -44,7 +46,7 @@
4446
z-index: 2;
4547

4648
&:hover {
47-
background: #08fdd8;
49+
background: $mainColor;
4850
color: #252627;
4951
}
5052
}
@@ -74,7 +76,7 @@
7476
font-size: 250px;
7577
&.path {
7678
fill: #222324;
77-
stroke: #08fdd8;
79+
stroke: $mainColor;
7880
}
7981
}
8082
}
@@ -111,7 +113,7 @@
111113

112114
@keyframes dash {
113115
0% {
114-
stroke-dashoffset: 1200;
116+
stroke-dashoffset: 1200px;
115117
fill-opacity: 0;
116118
}
117119
80% {
@@ -125,7 +127,7 @@
125127

126128
@-moz-keyframes dash {
127129
0% {
128-
stroke-dashoffset: 1200;
130+
stroke-dashoffset: 1200px;
129131
fill-opacity: 0
130132
}
131133
80% {
@@ -139,7 +141,7 @@
139141

140142
@-webkit-keyframes dash {
141143
0% {
142-
stroke-dashoffset: 1200;
144+
stroke-dashoffset: 1200px;
143145
fill-opacity: 0
144146
}
145147
80% {
@@ -324,15 +326,16 @@
324326
opacity: 0.02;
325327
position: initial;
326328
}
327-
svg.logo ,
329+
svg.logo,
328330
svg.logo_mirror {
329331
display: none;
330332
}
331333
}
332334
}
333335
}
334336

335-
@media only screen and (min-width: 481px/*768px*/) and (max-width: 1024px) {
337+
@media only screen and (min-width: 481px /*768px*/
338+
) and (max-width: 1024px) {
336339
.home_content {
337340
width: 100%;
338341
height: 100vh;

‎my-app/src/css/notFound.scss‎

Lines changed: 246 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,246 @@
1+
$mainColor: #08fdd8;
2+
$backColor: #252627;
3+
4+
/* ||| MAIN DIV |||*/
5+
.not_found_content {
6+
height: 100%;
7+
width: calc(100% - 55px);
8+
margin-left: 55px;
9+
10+
.not_found_main {
11+
height: 100%;
12+
min-height: 566px;
13+
display: flex;
14+
position: absolute;
15+
flex-direction: column;
16+
justify-content: center;
17+
align-items: center;
18+
width: calc(100% - 55px);
19+
z-index: 1;
20+
> a {
21+
width: 95vh;
22+
height: auto;
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
26+
color: $mainColor;
27+
text-decoration: none;
28+
29+
svg {
30+
position: relative;
31+
width: 100%;
32+
height: auto;
33+
34+
circle {
35+
transition: all 0.5s;
36+
transform-origin: 50% 50%;
37+
38+
&.circle1 {
39+
fill: $backColor;
40+
}
41+
42+
&.circle1_border {
43+
fill: #284641;
44+
}
45+
46+
&.circle2 {
47+
fill: $backColor;
48+
}
49+
50+
&.circle2_border {
51+
fill: #284641;
52+
}
53+
54+
&:hover.circle1 {
55+
fill: #284641;
56+
}
57+
}
58+
}
59+
60+
.error_text {
61+
width: 35%;
62+
height: auto;
63+
position: absolute;
64+
display: flex;
65+
justify-content: center;
66+
align-items: center;
67+
flex-direction: column;
68+
69+
.error_number {
70+
font-family: monospace, sans-serif;
71+
font-size: 180px;
72+
width: 100%;
73+
display: flex;
74+
justify-content: center;
75+
align-items: center;
76+
flex-direction: column;
77+
line-height: 60px;
78+
animation: noise 2s linear infinite;
79+
overflow: initial;
80+
81+
&:after {
82+
content: '404';
83+
font-family: monospace, sans-serif;
84+
font-size: 120px;
85+
text-align: right;
86+
width: 75%;
87+
opacity: 0;
88+
color: blue;
89+
position: absolute;
90+
animation: noise-1 .2s linear infinite;
91+
margin-left: -60px;
92+
}
93+
94+
&:before {
95+
content: "404";
96+
font-family: monospace, sans-serif;
97+
font-size: 130px;
98+
font-style: italic;
99+
text-align: right;
100+
width: 75%;
101+
height: 60px;
102+
line-height: 60px;
103+
position: absolute;
104+
opacity: 0;
105+
-webkit-animation: noise-2 .2s linear infinite;
106+
animation: noise-2 .2s linear infinite;
107+
color: red;
108+
margin-left: -50px;
109+
}
110+
}
111+
.info {
112+
text-align: center;
113+
font-family: monospace, sans-serif;
114+
font-size: 40px;
115+
width: 100%;
116+
margin-top: 50px;
117+
animation: noise-3 1s linear infinite;
118+
}
119+
.info_click {
120+
width: 100%;
121+
text-align: center;
122+
font-family: monospace, sans-serif;
123+
font-size: 18px;
124+
position: absolute;
125+
bottom: -90px;
126+
}
127+
128+
@keyframes noise {
129+
0%, 3%, 5%, 42%, 44%, 100% {
130+
opacity: 1;
131+
transform: scaleY(1);
132+
}
133+
4.3% {
134+
opacity: 1;
135+
transform: scaleY(1.7);
136+
}
137+
43% {
138+
opacity: 1;
139+
transform: scaleX(1.5);
140+
}
141+
}
142+
143+
@keyframes noise-1 {
144+
0%, 20%, 40%, 60%, 70%, 90% {
145+
opacity: 0;
146+
}
147+
10% {
148+
opacity: .1;
149+
}
150+
50% {
151+
opacity: .5;
152+
left: -6px;
153+
}
154+
80% {
155+
opacity: .3;
156+
}
157+
100% {
158+
opacity: .4;
159+
left: 2px;
160+
}
161+
}
162+
163+
@keyframes noise-2 {
164+
0%, 20%, 40%, 60%, 70%, 90% {
165+
opacity: 0;
166+
}
167+
10% {
168+
opacity: .1;
169+
}
170+
50% {
171+
opacity: .5;
172+
left: 6px;
173+
}
174+
80% {
175+
opacity: .3;
176+
}
177+
100% {
178+
opacity: .4;
179+
left: -2px;
180+
}
181+
}
182+
183+
@keyframes noise-3 {
184+
0%, 3%, 5%, 42%, 44%, 100% {
185+
opacity: 1;
186+
transform: scaleY(1);
187+
}
188+
4.3% {
189+
opacity: 1;
190+
transform: scaleY(4);
191+
}
192+
43% {
193+
opacity: 1;
194+
transform: scaleX(5) rotate(60deg);
195+
}
196+
}
197+
}
198+
}
199+
}
200+
}
201+
202+
@media only screen and (min-width: 320px) and (max-width: 480px) {
203+
.not_found_content {
204+
width: 100%;
205+
margin: 0;
206+
207+
.left_side {
208+
height: auto;
209+
top: 75px;
210+
min-height: 370px;
211+
212+
.not_found_main {
213+
margin-left: 13%;
214+
215+
.h2_greating {
216+
margin: 0;
217+
}
218+
219+
.contact_btn {
220+
font-size: 10px;
221+
padding: 7px 10px;
222+
}
223+
}
224+
}
225+
}
226+
}
227+
228+
@media only screen and (min-width: 481px /*768px*/
229+
) and (max-width: 1024px) {
230+
.not_found_content {
231+
width: 100%;
232+
height: 100vh;
233+
min-height: 768px;
234+
margin: 0;
235+
position: relative;
236+
.left_side {
237+
height: auto;
238+
top: 70px;
239+
min-height: 480px;
240+
241+
.not_found_main {
242+
margin-left: 9%;
243+
}
244+
}
245+
}
246+
}

‎my-app/src/css/preloader.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@
4545
width: 100%;
4646
height: 100%;
4747
background-color: #08fdd8;
48-
-webkit-animation: foldthecube 2.3s infinite linear both;
49-
animation: foldthecube 2.3s infinite linear both;
48+
-webkit-animation: foldthecube 1.8s infinite linear both;
49+
animation: foldthecube 1.8s infinite linear both;
5050
-webkit-transform-origin: 100% 100%;
5151
-ms-transform-origin: 100% 100%;
5252
transform-origin: 100% 100%;
@@ -168,7 +168,7 @@
168168
}
169169

170170
.fill-1 {
171-
animation: fill-1 1.8s linear;
171+
animation: fill-1 1.3s linear;
172172
animation-fill-mode: forwards;
173173
width: 0;
174174
}

0 commit comments

Comments
 (0)