ZorNet.Ru — сайт для вебмастера » HTML и CSS » Шаблон страницы ошибок 404 для сайта

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

Шаблон страницы ошибок 404 для сайта
Достаточно информированная страница 404 Error, что идет в темном формате, где присутствуют все необходимые функции для выхода на главную сайта. Также в ней присутствует модальное окно, что оставил его, так как функционально оно предназначена для социальных закладок. Но по сути там можно разместить еще более подробную информацию с выводом, как вы здесь оказались.

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

Но это не все, нам еще нужно, чтоб как больше потенциальных пользователей попали на сайт, и здесь подключен второй элемент кнопки. Когда вы переносите материал, то запросы остаются на его по старой ссылке, что с поисковых систем переходят какое-то время. И для того, чтоб вы не потеряли потенциального пользователя, то здесь была создана такая необычная страница, где даже поисковые системы ее учитывают.

Подключаем шрифт

Код
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

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

HTML

Код
<section class="stranitsu-portala-sayta">
  <div class="shablon-na-susaged">
  <div class="subscribe sinamilopan">
  <div class="stranitsy-oshibok text-center">
  <div class="syushchuyu-stranitsu">
  Oops!
  </div>
  <h6>Похоже вы ошиблись, здесь материал был удален!</h6>
  <h2>404
  <p class="page-portal-site">Страница не найдена</p>
  </h2>
  <a class="acynab-amazing acyeaso-nabagas btn" href="#p1">
  Подписывайся</a>
  <a class="kalovunaya-stranitsa btn" href="index.html">
  Вернуться домой</a>
  </div>
  <!-- copyright -->
  <div class="copy-right text-center">
  <p>© 2020 Отслеживание ошибок. Все права защищены | <a href="/" target="_blank">ZORNET.RU</a></p>
  </div>
  </div>
  </div>

  <div id="p1" class="gannousu-posedlnced">
  <div class="gannounced">
  <div class="main vunedasg kalovun text-center">
  <h3>Подписаться на рассылку</h3>
  <div class="ubscribing">
  <form action="#" method="post" class="advertisin">
  <input type="email" placeholder="Enter your Email.." name="Subscribe" required="">
  <button class="btn1">
  <i class="fa fa-paper-plane" aria-hidden="true"></i>
  </button>
  </form>
  </div>
  <div class="info">
  <h5>ZORNET.RU</h5>
  </div>
  <div class="ancedun-doubteda">
  <a class="facebook" href="#">
  <i class="fa fa-facebook" aria-hidden="true"></i>
  </a>
  <a class="twitter" href="#">
  <i class="fa fa-twitter" aria-hidden="true"></i>
  </a>
  <a class="google" href="#">
  <i class="fa fa-google-plus" aria-hidden="true"></i>
  </a>
  </div>
  </div>
  <a class="close" href="#portfolio">×</a>
  </div>
  </div>
  </section>

CSS

Код
:root {
  --theme-color: #14c1a7;
  --title-color: #072a54;
  --text-color: #272727;
  }

  html {
  scroll-behavior: smooth;
  }

  body,
  html {
  margin: 0;
  padding: 0;
  color: #585858;
  background: url(Ссылка на изображение для фона страницы) no-repeat center;
  }

  * {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  }

  .sinamilopan {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  }

  @media (min-width: 576px) {
  .sinamilopan {
  max-width: 540px;
  }
  }

  @media (min-width: 768px) {
  .sinamilopan {
  max-width: 720px;
  }
  }

  @media (min-width: 992px) {
  .sinamilopan {
  max-width: 960px;
  }
  }

  @media (min-width: 1200px) {
  .sinamilopan {
  max-width: 1140px;
  }
  }

  .panclaiming {
  display: grid;
  }

  .advertisin {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  }

  .text-center {
  text-align: center;
  }

  .text-left {
  text-align: left;
  }

  .text-right {
  text-align: right;
  }

  button,
  input,
  select {
  -webkit-appearance: none;
  outline: none;
  }

  button,
  .btn,
  select {
  cursor: pointer;
  }

  a {
  text-decoration: none;
  }

  h1 {

  font-size: 50px;
  text-align: center;
  color: #fff;
  margin-top: 30px;
  }

  /*-- main --*/
  .canudockas.form {
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 2rem 0;
  position: relative;
  z-index: 0;
  }

  .canudockas.form:before {
  content: "";
  background: rgba(0, 0, 0, 0.72);
  position: absolute;
  top: 0;
  min-height: 100%;
  left: 0;
  right: 0;
  z-index: -1;
  }

  .stranitsy-oshibok h2 {
  text-align: center;
  font-size: 140px;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  margin: 16px 0 31px;
  position: relative;
  }

  p.page-portal-site {
  color: #fff;
  width: 100%;
  margin: 0 auto;
  font-size: 28px;
  text-align: center;
  opacity: 0.4;
  z-index: 0;
  }

  .subscribe h6 {
  font-size: 18px;
  color: #fff;
  margin-top: 30px;
  font-weight: normal;
  }

  .syushchuyu-stranitsu {
  color: #ffffff;
  font-size: 70px;
  font-style: italic;
  font-weight: bold;
  opacity: 0.6;
  text-align: center;
  }

  a.acynab-amazing.acyeaso-nabagas {
  color: #fff;
  background: transparent;
  min-width: 130px;
  cursor: pointer;
  line-height: 30px;
  text-decoration: none;
  -webkit-appearance: none;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  text-align: center;
  padding: 8px 15px;
  border-radius: 4px;
  transition: 0.3s ease;
  border: 1px solid var(--theme-color);
  margin-right: 15px;
  }

  a.acynab-amazing.acyeaso-nabagas:hover {
  background: var(--theme-color);
  color: #fff;
  }

.kalovunaya-stranitsa {
  min-width: 130px;
  cursor: pointer;
  text-decoration: none;
  -webkit-appearance: none;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  text-align: center;
  color: #f5f2f2;
  background: #0e6353;
  padding: 14px 18px;
  border-radius: 4px;
  transition: 0.3s ease;
  border: 2px solid #779c87;
}

  .kalovunaya-stranitsa:hover {
  background: var(--theme-color);
  color: #fff;
  }

  ::-webkit-input-placeholder {
  color: #999 !important;
  }

  :-moz-placeholder {
  color: #999 !important;
  }

  ::-moz-placeholder {
  color: #999 !important;
  }

  :-ms-input-placeholder {
  color: #999 !important;
  }

  .gannousu-posedlnced {
  position: fixed;
  top: 0px;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 0ms;
  visibility: hidden;
  opacity: 0;
  z-index: 99;
  overflow-y: scroll;
  max-height: 100vh;
  height: 100vh;
  }

  .gannousu-posedlnced::-webkit-scrollbar {
  width: 4px;
  }

  .gannousu-posedlnced::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #ffffff;
  border-radius: 5px;
  }

  .gannousu-posedlnced::-webkit-scrollbar-thumb {
  background: rgba(82, 82, 82, 0.4);
  }

  .gannousu-posedlnced:target {
  visibility: visible;
  opacity: 1;
  }

  .gannounced {
  background: #fff;
  border-radius: 3px;
  max-width: 550px;
  position: relative;
  margin: 8rem auto 0;
  padding: 2rem 1rem 1.5rem;
  }

  .gannounced h4 {
  font-size: 25px;
  line-height: 32px;
  color: #051B35;
  margin-bottom: 15px;
  }

  .gannounced p {
  font-style: normal;
  font-weight: normal;
  font-size: 17px;
  line-height: 25px;
  color: #34334e;
  margin-bottom: 25px;
  }

  .gannounced .close {
  position: absolute;
  top: 5px;
  right: 15px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #000;
  opacity: 0.6;
  }

  .gannounced .close:hover {
  opacity: 1;
  }

  .info {
  margin-bottom: 40px;
  }

  .main.vunedasg h3 {
  color: #000;
  font-size: 30px;
  }

  .ancedun-doubteda a {
  color: #fff;
  border-radius: 4px;
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  text-decoration: none;
  position: relative;
  display: inline-block;
  margin: 0 .5em;
  -o-transition: all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
  -webkit-font-smoothing: antialiased;
  }

  .ancedun-doubteda a.facebook {
  background: #3b5998;
  }

  .ancedun-doubteda a.google {
  background: #dc4e41;
  }

  .ancedun-doubteda a.twitter {
  background: #55acee;
  }

  .ancedun-doubteda a:hover {
  background: #000;
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -o-transition: 0.5s all;
  -ms-transition: 0.5s all;
  }

  .ubscribing {
  text-align: center;
  margin: 3em 0 2.5em;
  }

  .ubscribing form {
  justify-content: center;
  }

  .ubscribing input[type="email"] {
  display: inline-block;
  background: #FFFFFF;
  border: solid 1px #b5b5b5;
  outline: none;
  padding: 1em;
  font-size: 15px;
  color: #999999;
  border-right: none;
  }

  .ubscribing button {
  color: #ffffff;
  font-size: 15px;
  padding: 1em;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  background: var(--theme-color);
  border: none;
  transition: 0.3s ease-in;
  -webkit-transition: 0.3s ease-in;
  -moz-transition: 0.3s ease-in;
  -o-transition: 0.3s ease-in;
  -ms-transition: 0.3s ease-in;
  }

  .copy-right {
  margin-top: 65px;
  }

  .copy-right p {
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  }

  .copy-right p a {
  color: #fff;
  font-size: 16px;
  text-decoration: underline;
  }

  .copy-right p a:hover {
  text-decoration: none;
  }

  @media(max-width: 1440px) {
  h1 {
  margin-top: 20px;
  }
  }

  @media(max-width: 900px) {
  h1 {
  margin-top: 16px;
  font-size: 46px;
  }

  .stranitsy-oshibok h2 {
  font-size: 130px;
  }

  a.acynab-amazing.acyeaso-nabagas {
  padding: 11px 30px;
  font-size: 14px;
  }
  }

  @media(max-width: 768px) {

  h1 {
  margin-top: 40px;
  }
  }

  @media(max-width: 767px) {
  h1 {
  margin-top: 16px;
  }

  }

  @media(max-width: 667px) {

  h1 {
  margin-top: 10px;
  font-size: 42px;
  }
  }

  @media(max-width: 568px) {

  h1 {
  font-size: 37px;
  }
  }

  @media(max-width: 480px) {

  .stranitsy-oshibok h2 {
  font-size: 110px;
  }

  a.acynab-amazing.acyeaso-nabagas {
  padding: 10px 26px;
  font-size: 13px;
  }

  }

  @media(max-width: 440px) {

  h1 {
  font-size: 33px;
  }

  .stranitsy-oshibok h2 {
  margin: 5px 0 18px;
  }
  }

  @media(max-width: 320px) {
  h1 {
  font-size: 27px;
  }

  .stranitsy-oshibok h2 {
  font-size: 90px;
  }

  a.acynab-amazing.acyeaso-nabagas {
  padding: 9px 19px;
  font-size: 12px;
  }

  .stranitsy-oshibok h2 {
  margin: 0px 0 6px;
  }
  }

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

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

Демонстрация
2020-05-31 Загрузок: 2 Просмотров: 289 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 0
avatar