-
Notifications
You must be signed in to change notification settings - Fork 0
/
500.html
97 lines (91 loc) · 4.69 KB
/
500.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Error 500</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<link rel="icon" href="https://res.cloudinary.com/rdaahal/image/upload/v1617460505/noteit/icons/noteit-96x96_xvnvdt.png" type="image/png">
<style>
main{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
color: 001323;
font-family: "roboto";
}
.description__title{
font-family: "Noto Sans JP";
font-size: 4rem;
font-weight: bolder;
}
.description__body{
margin-bottom: 2rem;
}
.illustration{
width: 30rem;
margin-left: 4rem;
}
.link{
display: block;
text-decoration: none;
width: max-content;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
background-color: #0970c8;
color: #efefef;
}
</style>
</head>
<body>
<main>
<div class="description">
<h2 class="description__title">Error 500</h2>
<div class="description__body">
<p>Something went wrong in the server.</p>
<small>Don't worry. You did nothing wrong. It's us, we broke down.</small>
</div>
<a class="link" href="/">Try Again ?</a>
</div>
<svg class="illustration" viewBox="0 0 1120 699" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M293 426a213 213 0 100-426 213 213 0 000 426z" fill="#F2F2F2"/>
<path d="M86 192s15 0 20-3c5-4 24-8 25-2 1 5 23 26 6 26-18 0-41-3-46-5-4-3-5-16-5-16z" fill="#A8A8A8"/>
<path opacity=".2" d="M137 211c-18 0-41-2-45-5-4-2-5-10-6-14 0 0 1 13 5 16 5 2 28 5 46 5 5 0 6-2 6-4-1 1-2 2-6 2z" fill="#001323"/>
<path d="M199 450c103 0 187-11 187-25 0-15-84-26-187-26-104 0-187 11-187 26 0 14 83 25 187 25z" fill="#0970C8"/>
<path opacity=".1" d="M199 446c86 0 157-10 157-21 0-12-71-22-157-22-87 0-157 10-157 22 0 11 70 21 157 21z" fill="#001323"/>
<path d="M310 259s130-36 138 80-107 149-17 172" stroke="#E60000" stroke-width="2" stroke-miterlimit="10"/>
<path d="M317 159H109v242h208V159z" fill="#F2E419"/>
<path d="M338 135H88v86h250v-86zM338 237H88v86h250v-86zM338 339H88v86h250v-86z" fill="#0970C8"/>
<path opacity=".4" d="M288 150h-16v16h16v-16z" fill="#F2E419"/>
<path opacity=".8" d="M311 150h-16v16h16v-16z" fill="#F2E419"/>
<path d="M334 150h-16v16h16v-16z" fill="#F2E419"/>
<path opacity=".4" d="M288 251h-16v16h16v-16z" fill="#F2E419"/>
<path opacity=".8" d="M311 251h-16v16h16v-16z" fill="#F2E419"/>
<path d="M334 251h-16v16h16v-16z" fill="#F2E419"/>
<path opacity=".4" d="M288 352h-16v16h16v-16z" fill="#F2E419"/>
<path opacity=".8" d="M311 352h-16v16h16v-16z" fill="#F2E419"/>
<path d="M334 352h-16v16h16v-16z" fill="#F2E419"/>
<path d="M837 675c156 0 283-17 283-38 0-22-127-39-283-39-157 0-283 17-283 39 0 21 126 38 283 38z" fill="#0970C8"/>
<path d="M415 589c90 23 263-30 282-90" stroke="#E60000" stroke-width="2" stroke-miterlimit="10"/>
<path d="M779 563l-8 51s-39 20-12 21h156s25 0-14-22l-8-53-114 3z" fill="#044F8E"/>
<path opacity=".1" d="M754 634l17-11 8-50h114l8 49 18 12c5-1 10-5-18-21l-8-53-114 3-8 51s-33 17-17 20z" fill="#0970C8"/>
<path d="M1074 213H596c-9 0-18 8-18 18v321c0 10 9 18 18 18h478c10 0 18-8 18-18V231c0-10-8-18-18-18z" fill="#0970C8"/>
<path d="M1074 232H596v268h478V232z" fill="#044F8E"/>
<path d="M835 226a3 3 0 100-6 3 3 0 000 6z" fill="#F2F2F2"/>
<path d="M1092 521v31a18 18 0 01-18 18H596a18 18 0 01-18-18v-31h514z" fill="#0970C8"/>
<path d="M835 557a12 12 0 100-23 12 12 0 000 23z" fill="#F2F2F2"/>
</g>
<defs>
<clipPath id="clip0">
<path fill="#fff" d="M0 0h1120v699H0z"/>
</clipPath>
</defs>
</svg>
</main>
</body>
</html>