404.ejs 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <%- include('common-meta') %>
  5. <style>
  6. body {
  7. color: white;
  8. background-color: #fff3f3;
  9. display: flex;
  10. justify-content: center;
  11. flex-direction: column;
  12. align-items: center;
  13. width: 100vw;
  14. height: 100vh;
  15. margin: 0;
  16. }
  17. img {
  18. width: 60%;
  19. height: auto;
  20. }
  21. .container {
  22. position: relative;
  23. display: flex;
  24. flex-direction: column;
  25. justify-content: center;
  26. align-items: center;
  27. }
  28. .text-container {
  29. position: absolute;
  30. display: flex;
  31. flex-direction: column;
  32. justify-content: center;
  33. align-items: center;
  34. padding-top: 260px;
  35. }
  36. .not-found-text {
  37. color: #F94936;
  38. font-size: 52px;
  39. font-weight: 600;
  40. padding: 20px;
  41. }
  42. .back-home-text {
  43. color: #F94936;
  44. font-size: 20px;
  45. }
  46. /* for mobile */
  47. @media (max-width: 768px) {
  48. img {
  49. width: 90%;
  50. height: auto;
  51. }
  52. .not-found-text {
  53. font-size: 36px;
  54. padding: 10px;
  55. }
  56. .back-home-text {
  57. font-size: 18px;
  58. }
  59. .text-container {
  60. padding-top: 180px;
  61. }
  62. }
  63. </style>
  64. </head>
  65. <body>
  66. <div class="container">
  67. <img src="/assets/icon/404.png" alt="404 Not Found">
  68. <div class="text-container">
  69. <div class="not-found-text">Page Not Found</div>
  70. <a href="/" class="back-home-text">BACK TO HOME PAGE</a>
  71. </div>
  72. </div>
  73. </body>
  74. </html>