» »

Страница ошибки 404 под неоновый стиль CSS

Страница ошибки 404 под неоновый стиль CSS

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

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

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

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

Ошибки страниц 404 для сайта

Приступаем к установке:

HTML

Код
<div class="dukonegosaton">
  <div class="kensuringsakin">
  <div class="tumplem-entation" id="title">4<span id="fade">0</span>4</div>
  <div class="tumplem-entation">страница не найдена<br>
  <span class="mospe-ropateus" id="trav">Enter</span>
  <span class="satuteu-sreparatin">Show</span></div>
  </div>
</div>
  <a href="/" target="_blank" class="saepesam">На главную</a>

CSS

Код
.dukonegosaton {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.kensuringsakin {
  -ms-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
body {
  margin: 70px;
  background: #313131;
  font-family: 'Nixie One', Helvetica, Arial, sans-serif;
  font-size: 50px;
}
#title {
  font-size: 110px;
}
#trav {
  -webkit-animation: blink 0.01s infinite alternate;
  -moz-animation: blink 0.01s infinite alternate;
  -o-animation: blink 0.01s infinite alternate;
  animation: blink 0.01s infinite alternate;
}
#fade {
  opacity: 0.8;
  color: #ebffff;
  text-shadow: 2px 2px 1px rgba(0,0,0,0.3), 0 0px 15px #fff, 0 0 10px #38eeff, 0 0 50px #38eeff;
  -webkit-animation: fade 3s infinite alternate;
  -moz-animation: fade 3s infinite alternate;
  -o-animation: fade 3s infinite alternate;
  animation: fade 3s infinite alternate;
}
.tumplem-entation {
  margin: 0 auto;
  text-align: center;
  color: #e7f5f5;
  text-shadow: 2px 2px 1px rgba(21, 20, 20, 0.59), 0 0px 15px #f3eeee, 0 0 10px #36a4e8, 0 0 50px #2690dc;
}
.mospe-ropateus {
  font-family: 'League Script', Helvetica, Arial, sans-serif;
  font-size: 50px;
  margin: 0 auto;
  text-align: center;
  color: #a9c7ec;
  text-shadow: 2px 2px 1px rgba(27, 25, 25, 0.8), 0 0 20px #c4d9f3, 0 0 10px #b8d9f1, 0 0 50px #acd4f1;
}
.satuteu-sreparatin {
  font-family: 'League Script', Helvetica, Arial, sans-serif;
  font-size: 50px;
  margin: 0 auto;
  text-align: center;
  color: #c4c4f1;
  text-shadow: 2px 2px 1px rgba(21, 19, 19, 0.59), 0 0 20px #f325bd, 0 0 10px #f128c2, 0 0 50px #f527b5;
}
@-moz-keyframes blink {
  70% {
  opacity: 0.7;
  }
}
@-webkit-keyframes blink {
  45% {
  opacity: 0.5;
  }
}
@-o-keyframes blink {
  70% {
  opacity: 0.7;
  }
}
@keyframes blink {
  70% {
  opacity: 0.7;
  }
}
@-moz-keyframes fade {
  40% {
  opacity: 0.8;
  }
  42% {
  opacity: 0.1;
  }
  43% {
  opacity: 0.8;
  }
  45% {
  opacity: 0.1;
  }
  46% {
  opacity: 0.8;
  }
}
@-webkit-keyframes fade {
  40% {
  opacity: 0.8;
  }
  42% {
  opacity: 0.1;
  }
  43% {
  opacity: 0.8;
  }
  45% {
  opacity: 0.1;
  }
  46% {
  opacity: 0.8;
  }
}
@-o-keyframes fade {
  40% {
  opacity: 0.8;
  }
  42% {
  opacity: 0.1;
  }
  43% {
  opacity: 0.8;
  }
  45% {
  opacity: 0.1;
  }
  46% {
  opacity: 0.8;
  }
}
@keyframes fade {
  40% {
  opacity: 0.8;
  }
  42% {
  opacity: 0.1;
  }
  43% {
  opacity: 0.8;
  }
  45% {
  opacity: 0.1;
  }
  46% {
  opacity: 0.8;
  }
}
.saepesam {
  text-decoration: none;
  position: absolute;
  left: 50%;
  width: 800px;
  margin-left: -400px;
  cursor: pointer;
  font-family: 'League Script', Helvetica, Arial, sans-serif;
  font-size: 19px;
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  border: none;
  color: rgba(245, 240, 240, 0.96);
  text-decoration: normal;
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  white-space: pre;
  text-shadow: 0 0 10px rgba(245, 243, 243, 0.95), 0 0 20px rgba(243, 241, 241, 0.98), 0 0 30px rgb(249, 245, 245), 0 0 40px #10e839, 0 0 70px #28f111, 0 0 80px #1cf123, 0 0 100px #4ff144;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}
.saepesam:hover {
  text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #00ffff , 0 0 70px #00ffff , 0 0 80px #00ffff , 0 0 100px #00ffff ;
}

Так, что веб разработчика, эта пользовательская страница 404 для своего сайта очень важный элемент.

Демонстрация
2018-10-22 Просмотров: 190 Комментарий: (1)

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

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

Комментарий: 1
Kosten
Kosten 2018-10-22 17:581
0
Поисковые системы сканируют ваш сайт, следуя ссылкам на все страницы на вашем сайте. Если поисковая система индексирует ваш сайт и попадает на страницу 404 без ссылок, она не сможет продолжить.

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

Пользовательская страница 404 гарантирует, что этого не произойдет, предоставив ссылки на все соответствующие части вашего сайта? чтобы поисковые системы имели доступ к вашему полному сайту.
avatar