Ошибка 404: шаблон страницы

При обращении к сайту пользователь ожидает получить необходимую информацию быстро и без проблем.

Однако, не всегда так бывает, и на экране появляется сообщение об ошибке 404.

Что же это за ошибка и как с ней бороться?

Как правило это означает, что запрашиваемая страница на сервере не найдена.

Данный код может возникнуть по различным причинам: страница была удалена или перемещена, введена неправильная ссылка, сервер временно недоступен или возникла проблема при работе сервера.

Для того, чтобы её исправить, необходимо определить причину.

Если страница была удалена или перемещена, ее можно восстановить или перенаправить с помощью 301 редиректа.

Если пользователь ввел неправильную ссылку, следует обратить внимание на правильность написания адреса. 

Вслучае, если сервер временно недоступен, нужно просто дождаться восстановления работы.

Однако, не всегда можно предугадать возможные причины ошибки 404.

Поэтому для предотвращения ее появления рекомендуется следовать нескольким простым советам.

Прежде всего, создайте карту сайта, которая поможет пользователям быстро найти нужную информацию.

Кроме того, следует регулярно следить за ссылками на сайте и проверять их на работоспособность.

А самое главное, чтобы настроение пользователя не попало от стандартного вывода данной ошибки, предлагаю шаблон с приведением.

Шаблон страницы ошибки 404

<div id="background"></div>
<div class="top">
  <h1>404</h1>
  <h3>Страницы не существует</h3>
</div>
<div class="container">
  <div class="ghost-copy">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
  </div>
  <div class="ghost">
    <div class="face">
      <div class="eye"></div>
      <div class="eye-right"></div>
      <div class="mouth"></div>
    </div>
  </div>
  <div class="shadow"></div>
</div>
<div class="bottom">
  <p>Вау! Похоже страницу украл призрак</p>
  <form class="search">
    <input type="text" class="search-bar" placeholder="Search">
    <button type="submit" class="search-btn">
      <i class="fa fa-search"></i>

Разместите его на странице

CSS шаблона

Можно встроить в тело, а можно вывести в отдельный css файл

$white: #EDEDED;
$gray: #BFC0C0;
$dark: #585959;
$light: #D3DEEA;

@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Lato');

$big: 'Abril Fatface', serif;
$body: 'Lato', sans-serif;

body {
  background: $light;
}

.top {
  margin-top: 30px;
}

.container {
  margin: 0 auto;
  position: relative;
  width: 250px;
  height: 250px;
  margin-top: -40px;

Шаблон на codepen