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

Привлекательная страница 404 для сайта

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

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

Затратив немного времени на оптимизацию текста на 404 страницах и создание фирменного дизайна, можно реально снизить показатель отказов и повысить конверсию. Что нужно изначально знать, где также учитывать при создание сайта и последующей оптимизаций сайта.

Так выглядит на мобильных устройствах:

Страница не найдена в адаптивной верстке для сайта

Установка:

HTML

Код

<div class="adaptivn_shablon">
  <div class="vidzheta_stranitsa">
  <div class="stranitsa_kesocate">
  <div class="stranitsa_kesocate-left">
  <h1><a href="http://zornet.ru">ZorNet.Ru</a></h1>
  </div>
  <div class="stranitsa_kesocate-right">
  <ul>
  <li><a href="index.html" class="active">Главная</a></li>
  <li><a href="#">Скачать</a></li><li><a href="#">Файлы</a></li>
  <li><a href="#">Контакты</a></li>
  </ul>
  </div>
  <div class="clear"></div>
  </div>
  <div class="sakunedas-errortext">
  <img src="http://zornet.ru/Images/izobrazheniye/saderumib.png" alt="">
  <h2>Сожалею! Не удалось найти страницу, которую вы искали</h2>
  <p class="pedkulasned">Вас обманули, нажав на ссылку, которую невозможно найти. Пожалуйста, проверьте URL или перейдите на главную страницу и посмотрите, сможете ли вы найти то, что ищете.</p>
  <div class="povosu-poisk">
  <form action="#" method="post">
  <input type="text" name="Search" placeholder="Enter your search term..." id="search" required="">
  <input type="submit" value="Поиск">
  </form>
  </div>
  </div>
  </div>
  </div>
  <div class="kudesam leduga">
  <p>© 2017 Моя страница ошибок. Все права защищены <a href="http://zornet.ru/" target="_blank">ZorNet.Ru</a></p>
  </div>

CSS

Код

body {
  font-family: 'Open Sans', sans-serif;
  background: url(http://zornet.ru/Images/izobrazheniye/30258027.jpg)no-repeat center 0px;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  background-size:cover;
  background-attachment: fixed;
}

.vidzheta_stranitsa {
  width: 65%;
  margin:0 auto;
}

.stranitsa_kesocate {
  padding-top: 3em;
}
.stranitsa_kesocate-left {
  float: left;
}
.stranitsa_kesocate-right {
  float: right;
  margin-top: 1em;
}
.stranitsa_kesocate-left h1 {
  font-size: 3em;
  font-weight: 100;
  line-height: .9em;
}
.stranitsa_kesocate-left h1 a {
  color: #ece7e7;
  text-decoration: none;
  text-shadow: 0 1px 0 #211f1f;
}
.stranitsa_kesocate-right ul li {
  display: inline-block;
  margin:0 1.2em;
}
.stranitsa_kesocate-right ul li a {
  color: #dedcdc;
  font-size: 1em;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -o-transition: 0.5s all;
  -ms-transition: 0.5s all;
  transition: 0.5s all;
  text-decoration: none;
  text-shadow: 0 1px 0 #101010;
}
.stranitsa_kesocate-right ul li a:hover{
  color:#4CAF50;
}

.sakunedas-errortext{
  padding-top: 7em;
  text-align: center;
}
h2 {
  font-size: 1.2em;
  color: #f9f6f6;
  font-weight: 900;
  line-height: 1.8em;
}
p.pedkulasned {
  font-size: 0.9em;
  color: #f9f6f6;
  line-height: 1.8em;
  font-weight: 400;
  width: 65%;
  margin: 1.5em auto;
}
.povosu-poisk input[type="text"] {
  width: 50%;
  padding: .8em;
  font-size: 1em;
  color: #f9f6f6;
  outline: none;
  border: 1px solid #4CAF50;
  background: none;
  -webkit-appearance: none;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  transition: 0.5s all;
}
.povosu-poisk input[type="submit"] {
  outline: none;
  box-shadow: none;
  background: #4CAF50;
  border: 1px solid #4CAF50;
  padding: .8em 2em;
  color: #f9f6f6;
  cursor: pointer;
  font-size: 1em;
  margin-left: 0.5em;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  transition: 0.5s all;
}
.povosu-poisk input[type="submit"]:hover {
  color: #4caf50;
  background: transparent;
}
::-webkit-input-placeholder {
  color:#f9f6f6 !important;
}
:-moz-placeholder {
  color:#f9f6f6 !important;
}
::-moz-placeholder {
  color:#f9f6f6 !important;
}
:-ms-input-placeholder {
  color:#f9f6f6 !important;
}

.kudesam {
  margin:8.5em 0 2em;
  text-align: center;
}
.kudesam p {
  font-size: 1em;
  color: #f9f6f6;
  line-height:1.8em;
}
.kudesam p a{
  color: #f9f6f6;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -o-transition: 0.5s all;
  -ms-transition: 0.5s all;
  transition: 0.5s all;
}
.kudesam p a:hover{
  color: #4CAF50;
}

@media(max-width:1366px){
p.pedkulasned {
  width: 75%;
}
}
@media(max-width:1080px){
.vidzheta_stranitsa {
  width: 75%;
}
.stranitsa_kesocate-left h1 {
  font-size: 2.8em;
}
}
@media(max-width:991px){
p.pedkulasned {
  width: 85%;
}
}
@media(max-width:900px){
.vidzheta_stranitsa {
  width: 85%;
}
.stranitsa_kesocate-left h1 {
  font-size: 2.5em;
  letter-spacing: -2px;
}
.stranitsa_kesocate-right {
  margin-top: 0.5em;
}
.stranitsa_kesocate {
  padding-top: 2em;
}
.sakunedas-errortext {
  padding-top: 8em;
  text-align: center;
}
.stranitsa_kesocate-right ul li {
  margin: 0 1em;
}
p.pedkulasned {
  width: 95%;
}
}
@media(max-width:667px){
.stranitsa_kesocate-left h1 {
  font-size: 2.3em;
}
.stranitsa_kesocate-right ul li {
  margin: 0 0.5em;
}
h2 {
  font-size: 1em;
}
p.pedkulasned {
  width: 100%;
  font-size: 0.85em;
  line-height: 2em;
}
.kudesam {
  margin: 7em 0 1em;
}
}
@media(max-width:480px){
.stranitsa_kesocate-left,.stranitsa_kesocate-right{
  float: none;
  text-align: center;
}
.stranitsa_kesocate-right {
  margin-top: 1.5em;
}
.stranitsa_kesocate-right ul li a {
  font-size: 0.9em;
}
.stranitsa_kesocate-right ul li {
  margin: 0 1em;
}
.sakunedas-errortext img {
  width: 52%;
}
h2 {
  font-size: 0.9em;
}
.povosu-poisk input[type="text"],.povosu-poisk input[type="submit"]{
  font-size: 0.9em;
}
.kudesam p {
  font-size: 0.9em;
  padding: 0 1em;
}
.kudesam {
  margin: 6em 0 1em;
}
.sakunedas-errortext {
  padding-top: 6em;
}
.kudesam {
  margin: 5em 0 1em;
}
}
@media(max-width:384px){
.sakunedas-errortext {
  padding-top: 5em;
}
.povosu-poisk input[type="text"] {
  width: 85%;
}
.povosu-poisk input[type="submit"] {
  margin: 1em 0 0 0;
  padding: .7em 2em;
}
.stranitsa_kesocate {
  padding-top: 1em;
}
p.pedkulasned {
  font-size: 0.8em;
}
.vidzheta_stranitsa {
  width: 87%;
}
.stranitsa_kesocate-left h1 {
  font-size: 2em;
}
.kudesam {
  margin: 4em 0 1em;
}
}
@media(max-width:320px){
.stranitsa_kesocate-left h1 {
  font-size: 1.8em;
  letter-spacing: 0px;
}
.stranitsa_kesocate-right ul li a {
  font-size: 0.85em;
}
.stranitsa_kesocate-right ul li {
  margin: 0 0.6em;
}
h2 {
  font-size: 0.85em;
}
p.pedkulasned {
  margin: 0.8em auto;
}
.sakunedas-errortext {
  padding-top: 2em;
}
.stranitsa_kesocate-right {
  margin-top: 1em;
}
.povosu-poisk input[type="submit"] {
  padding: .6em 2em;
}
.kudesam {
  margin: 2em 0 1em;
}
.kudesam p {
  font-size: 0.8em;
}
}

Код

addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }

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

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

Демонстрация

18 Апреля 2020 Загрузок: 2 Просмотров: 773 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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