error.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>404</title>
  8. <link href="https://fonts.googleapis.com/css?family=Cabin:400,700" rel="stylesheet">
  9. <link href="https://fonts.googleapis.com/css?family=Montserrat:900" rel="stylesheet">
  10. <style>
  11. * {
  12. -webkit-box-sizing: border-box;
  13. box-sizing: border-box;
  14. }
  15. body {
  16. padding: 0;
  17. margin: 0;
  18. }
  19. #notfound {
  20. position: relative;
  21. height: 100vh;
  22. }
  23. #notfound .notfound {
  24. position: absolute;
  25. left: 50%;
  26. top: 50%;
  27. -webkit-transform: translate(-50%, -50%);
  28. -ms-transform: translate(-50%, -50%);
  29. transform: translate(-50%, -50%);
  30. }
  31. .notfound {
  32. max-width: 520px;
  33. width: 100%;
  34. line-height: 1.4;
  35. text-align: center;
  36. }
  37. .notfound .notfound-404 {
  38. position: relative;
  39. height: 240px;
  40. }
  41. .notfound .notfound-404 h1 {
  42. font-family: 'Montserrat', sans-serif;
  43. position: absolute;
  44. left: 50%;
  45. top: 50%;
  46. -webkit-transform: translate(-50%, -50%);
  47. -ms-transform: translate(-50%, -50%);
  48. transform: translate(-50%, -50%);
  49. font-size: 252px;
  50. font-weight: 900;
  51. margin: 0px;
  52. color: #262626;
  53. text-transform: uppercase;
  54. letter-spacing: -40px;
  55. margin-left: -20px;
  56. }
  57. .notfound .notfound-404 h1>span {
  58. text-shadow: -8px 0px 0px #fff;
  59. }
  60. .notfound .notfound-404 h3 {
  61. font-family: 'Cabin', sans-serif;
  62. position: relative;
  63. font-size: 16px;
  64. font-weight: 700;
  65. text-transform: uppercase;
  66. color: #262626;
  67. margin: 0px;
  68. letter-spacing: 3px;
  69. padding-left: 6px;
  70. }
  71. .notfound h2 {
  72. font-family: 'Cabin', sans-serif;
  73. font-size: 20px;
  74. font-weight: 400;
  75. text-transform: uppercase;
  76. color: #000;
  77. margin-top: 0px;
  78. margin-bottom: 25px;
  79. }
  80. @media only screen and (max-width: 767px) {
  81. .notfound .notfound-404 {
  82. height: 200px;
  83. }
  84. .notfound .notfound-404 h1 {
  85. font-size: 200px;
  86. }
  87. }
  88. @media only screen and (max-width: 480px) {
  89. .notfound .notfound-404 {
  90. height: 162px;
  91. }
  92. .notfound .notfound-404 h1 {
  93. font-size: 162px;
  94. height: 150px;
  95. line-height: 162px;
  96. }
  97. .notfound h2 {
  98. font-size: 16px;
  99. }
  100. }
  101. </style>
  102. <!--[if lt IE 9]>
  103. <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  104. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  105. <![endif]-->
  106. </head>
  107. <body>
  108. <div id="notfound">
  109. <div class="notfound">
  110. <div class="notfound-404">
  111. <h3>Oops! Page not found</h3>
  112. <h1><span>4</span><span>0</span><span>4</span></h1>
  113. </div>
  114. <h2>we are sorry, but the page you requested was not found</h2>
  115. </div>
  116. </div>
  117. </body>
  118. </html>