1 | <!DOCTYPE html>
|
2 |
|
3 | <head>
|
4 | <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
5 |
|
6 | <style>
|
7 | body {
|
8 | margin: 0;
|
9 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
10 | cursor: default;
|
11 | -webkit-user-select: none;
|
12 | -moz-user-select: none;
|
13 | -ms-user-select: none;
|
14 | user-select: none;
|
15 | -webkit-font-smoothing: antialiased;
|
16 | text-rendering: optimizeLegibility;
|
17 | position: absolute;
|
18 | top: 0;
|
19 | left: 0;
|
20 | right: 0;
|
21 | bottom: 0;
|
22 | display: flex;
|
23 | flex-direction: column;
|
24 | }
|
25 |
|
26 | main,
|
27 | aside,
|
28 | section {
|
29 | display: flex;
|
30 | justify-content: center;
|
31 | align-items: center;
|
32 | flex-direction: column;
|
33 | }
|
34 |
|
35 | main {
|
36 | height: 100%;
|
37 | }
|
38 |
|
39 | aside {
|
40 | background: #000;
|
41 | flex-shrink: 1;
|
42 | padding: 30px 20px;
|
43 | }
|
44 |
|
45 | aside:blank {
|
46 | display: none;
|
47 | }
|
48 |
|
49 | aside p {
|
50 | margin: 0;
|
51 | color: #999999;
|
52 | font-size: 14px;
|
53 | line-height: 24px;
|
54 | }
|
55 |
|
56 | aside a {
|
57 | color: #fff;
|
58 | text-decoration: none;
|
59 | }
|
60 |
|
61 | section span {
|
62 | font-size: 24px;
|
63 | font-weight: 500;
|
64 | display: block;
|
65 | border-bottom: 1px solid #EAEAEA;
|
66 | text-align: center;
|
67 | padding-bottom: 20px;
|
68 | width: 100px;
|
69 | }
|
70 |
|
71 | p {
|
72 | font-size: 14px;
|
73 | font-weight: 400;
|
74 | }
|
75 |
|
76 | section p {
|
77 | margin: 0 0 0 20px;
|
78 | }
|
79 |
|
80 | section span+p {
|
81 | margin: 20px 0 0 0;
|
82 | }
|
83 |
|
84 | .highlight {
|
85 | color: #7878ea;
|
86 | }
|
87 |
|
88 | ul {
|
89 | list-style: none;
|
90 | }
|
91 |
|
92 | ul li {
|
93 | font-style: italic;
|
94 | }
|
95 |
|
96 | @media (min-width: 768px) {
|
97 | section {
|
98 | height: 40px;
|
99 | flex-direction: row;
|
100 | }
|
101 | section span,
|
102 | section p {
|
103 | height: 100%;
|
104 | }
|
105 | section span {
|
106 | line-height: 40px;
|
107 | border-bottom: 0;
|
108 | border-right: 1px solid #EAEAEA;
|
109 | padding: 0 20px 0 0;
|
110 | width: auto;
|
111 | }
|
112 | section span+p {
|
113 | margin: 0;
|
114 | padding-left: 20px;
|
115 | }
|
116 | aside {
|
117 | padding: 50px 0;
|
118 | }
|
119 | aside p {
|
120 | max-width: 520px;
|
121 | text-align: center;
|
122 | }
|
123 | }
|
124 | </style>
|
125 | </head>
|
126 |
|
127 | <body>
|
128 | <main>
|
129 | <section>
|
130 | <span>404</span>
|
131 | <div>
|
132 | <p>This page could not be found</p>
|
133 | <p>Use <a class="highlight">'npm run build'</a> to create your build directory</p>
|
134 | </div>
|
135 | </section>
|
136 | </main>
|
137 | </body> |
\ | No newline at end of file |