1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6+ < meta http-equiv ="X-UA-Compatible " content ="ie=edge ">
7+ < title > Page Not Found</ title >
8+ < style type ="text/css ">
9+ body {
10+ background-color : # f5f5f5 ;
11+ margin-top : 8% ;
12+ color : # 5d5d5d ;
13+ font-family : -apple-system, BlinkMacSystemFont, "Segoe UI" , Roboto, "Helvetica Neue" , Arial, "Noto Sans" , sans-serif, "Apple Color Emoji" , "Segoe UI Emoji" , "Segoe UI Symbol" , "Noto Color Emoji" ;
14+ text-shadow : 0px 1px 1px rgba (255 , 255 , 255 , 0.75 );
15+ text-align : center !important ;
16+ }
17+
18+ h1 {
19+ font-size : 2.45em ;
20+ font-weight : 700 ;
21+ color : # 5d5d5d ;
22+ letter-spacing : -0.02em ;
23+ margin-bottom : 30px ;
24+ margin-top : 30px ;
25+ }
26+
27+ .container {
28+ width : 100% ;
29+ margin-right : auto;
30+ margin-left : auto;
31+ }
32+
33+ .animated {
34+ -webkit-animation-duration : 1s ;
35+ animation-duration : 1s ;
36+ -webkit-animation-fill-mode : both;
37+ animation-fill-mode : both;
38+ }
39+
40+ .fadeIn {
41+ -webkit-animation-name : fadeIn;
42+ animation-name : fadeIn;
43+ }
44+
45+ .info {
46+ color : # 5594cf ;
47+ fill : # 5594cf ;
48+ }
49+
50+ .error {
51+ color : # c92127 ;
52+ fill : # c92127 ;
53+ }
54+
55+ .warning {
56+ color : # ffcc33 ;
57+ fill : # ffcc33 ;
58+ }
59+
60+ .success {
61+ color : # 5aba47 ;
62+ fill : # 5aba47 ;
63+ }
64+
65+ .icon-large {
66+ height : 132px ;
67+ width : 132px ;
68+ }
69+
70+ .description-text {
71+ color : # 707070 ;
72+ letter-spacing : -0.01em ;
73+ font-size : 1.25em ;
74+ line-height : 20px ;
75+ }
76+
77+ .footer {
78+ margin-top : 40px ;
79+ font-size : 0.7em ;
80+ }
81+
82+ .delay-1s {
83+ -webkit-animation-delay : 1s ;
84+ animation-delay : 1s ;
85+ }
86+
87+ @keyframes fadeIn {
88+ from { opacity : 0 ; }
89+ to { opacity : 1 ; }
90+ }
91+
92+ </ style >
93+ </ head >
94+ < body >
95+ < div class ="container text-center ">
96+ < div class ="row ">
97+ < div class ="col ">
98+ < div class ="animated fadeIn ">
99+ < svg class ="info icon-large fa-question-circle " xmlns ="http://www.w3.org/2000/svg " viewBox ="0 0 512 512 ">
100+ < path d ="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z "> </ path >
101+ </ svg >
102+ </ div >
103+ < h1 class ="animated fadeIn "> Page Not Found</ h1 >
104+ < div class ="description-text animated fadeIn delay-1s ">
105+ < p > Oops! We couldn't find the page that you're looking for.</ p >
106+ < p > Please check the address and try again.</ p >
107+ < section class ="footer "> < strong > Error Code:</ strong > 404</ section >
108+ </ div >
109+ </ div >
110+ </ div >
111+ </ div >
112+ </ body >
113+ </ html >
0 commit comments