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

Ошибка: 404 страница не найдена с отчетом

Ошибка: 404 страница не найдена с отчетом
Это анимационная страница на CSS и JS под номером 404, где идет красивый отчет при заходе по ссылки, что задержит потенциального пользователя. Кто искал информацию в сети интернет, то большая вероятность, что он попадал на такие страницы, а точнее на те страницы, которые не существуют, а вот пока в поисковой системе они какое-то время будут присутствовать.

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

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

И только после этого страница будет полностью оправдывать свое присутствие на сайте, ведь какой-то процент все же перейти по ссылки на основу интернет ресурса.

Так как идет стилистика, то здесь можно самостоятельно поменять оттенок:

Темная страница не найдено

Изначально такой вид и цифры при открытии страницы, все идет рандомно:

Страница 404 Error

Но через миг появляется та цифра, что означает, такой страницы нет на сайте:

Анимационная страница 404 для сайта

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

В HEAD подключаем:

Код
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">

HTML

Код
<div class="devacomang">
  <div class="netagopu-dsacintsd">
  <div class="col-xs-12 ground-color text-center">
  <div class="kagains-ennec_toguv-negaseam">
  <div class="clip"><div class="ableanud-gacudan"><span class="digit gevasopeduksam"></span></div></div>
  <div class="clip"><div class="ableanud-gacudan"><span class="digit netatugikopam"></span></div></div>
  <div class="clip"><div class="ableanud-gacudan"><span class="digit kedoeneamegan"></span></div></div>
  <div class="msg">OH!<span class="vsaxopesad"></span></div>
  </div>
  <h2 class="h1">
Сожалею! Страница не найдена</h2>
  </div>
  </div>
  </div>
</body>

CSS

Код
/* devacomang Page */
  .devacomang .clip .ableanud-gacudan
  {
  height: 180px; /*Contrall*/
  }
  .devacomang .clip:nth-of-type(2) .ableanud-gacudan
  {
  width: 130px; /*Contrall play with javascript*/  
  }
  .devacomang .clip:nth-of-type(1) .ableanud-gacudan, .devacomang .clip:nth-of-type(3) .ableanud-gacudan
  {
  width: 250px; /*Contrall*/
  }
  .devacomang .digit
  {
  width: 150px; /*Contrall*/
  height: 150px; /*Contrall*/
  line-height: 150px; /*Contrall*/
  font-size: 120px;
  font-weight: bold;
  }
  .devacomang h2 /*Contrall*/
  {
  font-size: 32px;
  }
  .devacomang .msg /*Contrall*/
  {
  top: -190px;
  left: 30%;
  width: 80px;
  height: 80px;
  line-height: 80px;
  font-size: 32px;
  }
  .devacomang span.vsaxopesad /*Contrall*/
  {
  top: 70%;
  right: 0%;
  border-left: 20px solid #535353;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  }

  .devacomang .kagains-ennec_toguv-negaseam
  {
  margin-top: 10%;
  position: relative;
  height: 250px;
  padding-top: 40px;
  }
  .devacomang .kagains-ennec_toguv-negaseam .clip
  {
  display: inline-block;
  transform: skew(-45deg);
  }
  .devacomang .clip .ableanud-gacudan
  {
   
  overflow: hidden;
  }
  .devacomang .clip:nth-of-type(2) .ableanud-gacudan
  {
  overflow: hidden;
  position: relative;
  box-ableanud-gacudan: inset 20px 0px 20px -15px rgba(150, 150, 150,0.8), 20px 0px 20px -15px rgba(150, 150, 150,0.8);
  }
   
  .devacomang .clip:nth-of-type(3) .ableanud-gacudan:after, .devacomang .clip:nth-of-type(1) .ableanud-gacudan:after
  {
  content: "";
  position: absolute;
  right: -8px;
  bottom: 0px;
  z-index: 9999;
  height: 100%;
  width: 10px;
  background: linear-gradient(90deg, transparent, rgba(173,173,173, 0.8), transparent);
  border-radius: 50%;
  }
  .devacomang .clip:nth-of-type(3) .ableanud-gacudan:after
  {
  left: -8px;
  }
  .devacomang .digit
  {
  position: relative;
  top: 8%;
  color: white;
  background: #07B3F9;
  border-radius: 50%;
  display: inline-block;
  transform: skew(45deg);
  }
  .devacomang .clip:nth-of-type(2) .digit
  {
  left: -10%;
  }
  .devacomang .clip:nth-of-type(1) .digit
  {
  right: -20%;
  }.devacomang .clip:nth-of-type(3) .digit
  {
  left: -20%;
  }  
  .devacomang h2
  {
  color: #A2A2A2;
  font-weight: bold;
  padding-bottom: 20px;
  }
  .devacomang .msg
  {
  position: relative;
  z-index: 9999;
  display: block;
  background: #535353;
  color: #A2A2A2;
  border-radius: 50%;
  font-style: italic;
  }
  .devacomang .vsaxopesad
  {
  position: absolute;
  z-index: 999;
  transform: rotate(45deg);
  content: "";
  width: 0;  
  height: 0;  
  }

@media(max-width: 767px)
{
  .devacomang .clip .ableanud-gacudan
  {
  height: 100px; /*Contrall*/
  }
  .devacomang .clip:nth-of-type(2) .ableanud-gacudan
  {
  width: 80px; /*Contrall play with javascript*/  
  }
  .devacomang .clip:nth-of-type(1) .ableanud-gacudan, .devacomang .clip:nth-of-type(3) .ableanud-gacudan
  {
  width: 100px; /*Contrall*/
  }
  .devacomang .digit
  {
  width: 80px; /*Contrall*/
  height: 80px; /*Contrall*/
  line-height: 80px; /*Contrall*/
  font-size: 52px;
  }
  .devacomang h2 /*Contrall*/
  {
  font-size: 24px;
  }
  .devacomang .msg /*Contrall*/
  {
  top: -110px;
  left: 15%;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  }
  .devacomang span.vsaxopesad  
  {
  top: 70%;
  right: -3%;
  border-left: 10px solid #535353;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  }
.devacomang .kagains-ennec_toguv-negaseam
  {
  height: 150px;
  }
}

.overlay { position: relative; z-index: 20; } /*done*/
  .ground-color { background: white; } /*done*/
  .item-bg-color { background: #EAEAEA }  
  .padding-top { padding-top: 10px; } /*done*/
  .padding-bottom { padding-bottom: 10px; } /*done*/
  .padding-vertical { padding-top: 10px; padding-bottom: 10px; }
  .padding-horizontal { padding-left: 10px; padding-right: 10px; }
  .padding-all { padding: 10px; } /*done*/

  .no-padding-left { padding-left: 0px; } /*done*/
  .no-padding-right { padding-right: 0px; } /*done*/
  .no-vertical-padding { padding-top: 0px; padding-bottom: 0px; }
  .no-horizontal-padding { padding-left: 0px; padding-right: 0px; }
  .no-padding { padding: 0px; }  
  .margin-top { margin-top: 10px; } /*done*/
  .margin-bottom { margin-bottom: 10px; } /*done*/
  .margin-right { margin-right: 10px; } /*done*/
  .margin-left { margin-left: 10px; } /*done*/
  .margin-horizontal { margin-left: 10px; margin-right: 10px; } /*done*/
  .margin-vertical { margin-top: 10px; margin-bottom: 10px; } /*done*/
  .margin-all { margin: 10px; } /*done*/
  .no-margin { margin: 0px; } /*done*/

  .no-vertical-margin { margin-top: 0px; margin-bottom: 0px; }
  .no-horizontal-margin { margin-left: 0px; margin-right: 0px; }

  .inside-col-shrink { margin: 0px 20px; }  

  hr
  { margin: 0px; padding: 0px; border-top: 1px dashed #999; }

JS

Код
function randomNum()
  {
  "use strict";
  return Math.floor(Math.random() * 9)+1;
  }
  var loop1,loop2,loop3,time=30, i=0, number, selector3 = document.querySelector('.gevasopeduksam'), selector2 = document.querySelector('.netatugikopam'),
  selector1 = document.querySelector('.kedoeneamegan');
  loop3 = setInterval(function()
  {
  "use strict";
  if(i > 40)
  {
  clearInterval(loop3);
  selector3.textContent = 4;
  }else
  {
  selector3.textContent = randomNum();
  i++;
  }
  }, time);
  loop2 = setInterval(function()
  {
  "use strict";
  if(i > 80)
  {
  clearInterval(loop2);
  selector2.textContent = 0;
  }else
  {
  selector2.textContent = randomNum();
  i++;
  }
  }, time);
  loop1 = setInterval(function()
  {
  "use strict";
  if(i > 100)
  {
  clearInterval(loop1);
  selector1.textContent = 4;
  }else
  {
  selector1.textContent = randomNum();
  i++;
  }
  }, time);

Если кто еще не знает, что такое ошибка 404, то кратко, эта страница, по которой нет запрашиваемого адреса. На такую страницу попадают по разному.

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

Демонстрация
10 Апреля 2019 Загрузок: 3 Просмотров: 1337 Комментариев: (0)

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

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

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

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