Примеры страниц Ошибки 404

Сегодня хочу показать несколько примеров Страницы 404. О том, для чего данная страница нужна на блоге и как её сделать, я писала ранее. В этой статье покажу какие могут быть интересные и красивые страницы ошибки 404 и напишу их коды.

Устанавливать код будем в Настройки/Ошибки переадресации. Нажимаем - Персонализированное сообщение об ошибке 404. В открывшееся окошко вставляем код. И Сохраняем.

Взрыв

Выглядит страница так:

Код:

<main class="bl_page404">
  <h1>ОШИБКА 404. СТРАНИЦА НЕ СУЩЕСТВУЕТ</h1>
  <p>Извините! Страница, которую вы ищете, не может быть найдена. Возможно, запрошенная вами страница была перемещена или удалена. Также возможно, что вы сделали ошибку при вводе адреса. Перейдите на главную страницу.
  </p>
  <div class="bl_page404__wrapper">
    <img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/cloud_warmcasino.png?raw=true" alt="cloud_warmcasino.png">
    <div class="bl_page404__el1"></div>
    <div class="bl_page404__el2"></div>
    <div class="bl_page404__el3"></div>
    <a class="bl_page404__link" href="https://baryshnyam.blogspot.com/">Главная</a>
  </div>
</main>
 <style>
h1 {
  text-align: center;
  margin-top: 1%;
  margin-bottom: 25px;
  font-size: 30px;
  font-weight: 400;
  text-transform: uppercase;
}
p {
  display: block;
  margin: 25px auto;
  max-width: 776px;
  text-align: center;
  color: #660000;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.bl_page404__wrapper {
  position: relative;
  width: 100%;
  margin: 10px auto 10px;
  max-width: 440px;
  min-height: 410px;

}
.bl_page404__img {
  width: 100%;
}
.bl_page404__link {
  display: block;
  margin: 0 auto;
  width: 260px;
  height: 64px;
  box-shadow: 0 5px 0 #9c1007, inset 0 0 18px rgba(253, 60, 0, 0.75);
  background-color: #f95801;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 64px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 30px;
  text-align: center;
}
.bl_page404__link:hover,
.bl_page404__link:focus {
  background-color: #ff7400;
}
.bl_page404__el1 {
  position: absolute;
  top: 108px;
  left: 102px;
  opacity: 1;
  animation: el1Move 800ms linear infinite;
  width: 84px;
  height: 106px;
  background: url("https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-1.png?raw=true")
    50% 50% no-repeat;
  z-index: 2;
}
.bl_page404__el2 {
  position: absolute;
  top: 92px;
  left: 136px;
  opacity: 1;
  animation: el2Move 800ms linear infinite;
  width: 184px;
  height: 106px;
  background: url("https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-2.png?raw=true")
    50% 50% no-repeat;
  z-index: 2;
}
.bl_page404__el3 {
  position: absolute;
  top: 108px;
  left: 180px;
  opacity: 1;
  animation: el3Move 800ms linear infinite;
  width: 284px;
  height: 106px;
  background: url("https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-3.png?raw=true")
    50% 50% no-repeat;
  z-index: 2;
}
@keyframes el1Move {
  0% {
    top: 108px;
    left: 102px;
    opacity: 1;
  }
  100% {
    top: -10px;
    left: 22px;
    opacity: 0;
  }
}
@keyframes el2Move {
  0% {
    top: 92px;
    left: 136px;
    opacity: 1;
  }
  100% {
    top: -10px;
    left: 108px;
    opacity: 0;
  }
}
@keyframes el3Move {
  0% {
    top: 108px;
    left: 180px;
    opacity: 1;
  }
  100% {
    top: 28px;
    left: 276px;
    opacity: 0;
  }
}
</style>

Красным в коде выделила текст - меняете на свой.

Синим - ссылка на главную страницу сайта, или на ту, которую пожелаете установить. Так же меняете название кнопки Главная, если ссылка ведёт на другую страницу.

Так же можно менять шрифт, цвет текста, его размер.

Просмотреть в действии страницу можно в визуальном редакторе. Вставьте код и нажмите Показать результат.

Автор кода Andry Zirka.

Сервер

<section class="tv-error-404-tm" style="background-image: url(http://home.cern/sites/home.web.cern.ch/files/image/computing_page/2013/01/tier_0_servers.jpeg); background-position:top center; background-size:cover; height:800px;">
  <div class="tv-dark-background-tm"></div>
  <div class="container tv-error-content-tm">
    <div class="col-md-12">
      <h1>Страница не найдена</h1>
      <h3>Информация, которую вы ищете, не существует или изменилась.</h3>
      <div class="tv-error-links-tm">
        <a href="https://baryshnyam.blogspot.com/" class="btn">Главная</a> 
        <a  class="btn"  onclick="window.history.go(-2);">Вернуться</a>
      </div>
    </div>
  </div>
</section>
 <style>
.tv-error-404-tm {
  background-color:#000;
  max-height:100%;
  min-height:100%;
  position:relative;
  padding:50px 0;
}
.tv-dark-background-tm {
  position:absolute;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.6);
  top:0;
  left:0;
}
.tv-error-content-tm {
  position:relative;
  top:100px;
  color:#fff;
}
.tv-error-content-tm h1 {
  font-size:102px;
  text-align:center;
  font-weight:400;
}
.tv-error-content-tm h3 {
  font-size:32px;
  font-weight:300;
  text-align:center;
}
.tv-error-links-tm {
  width:100%;
  margin-top:20%;
  text-align:center;
}
.tv-error-content-tm a {
  color:#fff !important;
  padding:5px 30px;
  border:2px solid #fff;
  font-size:22px;
  margin-right:30px;
  border-radius:5px;
}
.tv-error-content-tm a:hover,.tv-error-content-tm a:active,.tv-error-content-tm a:visited,.tv-error-content-tm a:focus {
  color:#fff !important;

}
@media (max-width: 992px)  { 
    .tv-error-content-tm h1 {
      font-size:62px;
      text-align:center;
      font-weight:400;
    }
    .tv-error-content-tm h3 {
      font-size:26px;
      font-weight:300;
      text-align:center;
    }
    .tv-error-content-tm a {
      color:#fff !important;
      padding:5px 30px;
      border:2px solid #fff;
      font-size:22px;
      margin-right:30px;
      border-radius:5px;
    }
}
@media (max-width: 425px)  { 
    .tv-error-content-tm h1 {
        font-size: 49px;
        text-align: center;
        font-weight: 400;
    }
    .tv-error-content-tm h3 {
      font-size:26px;
      font-weight:300;
      text-align:center;
    }
    .tv-error-content-tm a {
        color: #fff !important;
        padding: 5px 30px;
        border: 2px solid #fff;
        font-size: 19px;
        margin-right: 10px;
        border-radius: 5px;
    }
}
@media (max-width: 375px)  { 
   .tv-error-content-tm h1 {
        font-size: 42px;
        text-align: center;
        font-weight: 400;
    }
    .tv-error-content-tm h3 {
        font-size: 22px;
        font-weight: 300;
        text-align: center;
    }
    .tv-error-content-tm a {
        color: #fff !important;
        padding: 5px 30px;
        border: 2px solid #fff;
        font-size: 18px;
        margin-right: 0;
        border-radius: 5px;
    }
}
@media (max-width: 320px)  { 
    .tv-error-content-tm h1 {
      font-size:34px;
      text-align:center;
      font-weight:400;
    }
    .tv-error-content-tm h3 {
      font-size:18px;
      font-weight:300;
      text-align:center;
    }
    .tv-error-content-tm a {
        color: #fff !important;
        padding: 5px 30px;
        border: 2px solid #fff;
        font-size: 18px;
        margin-right: 0;
        border-radius: 5px;
    }
}
</style>

Выделенное красным в коде - текст, меняем на свой.

Синим выделила ссылку на главную страницу блога, меняем на свою.

Смотрим работу кода в визуальном редакторе.

Автор кода Wolf Creativo.

Лупа

Проверяйте работу кода в визуальном редакторе.

Автор кода Maelle Gomez.