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

Страница 404 ошибки в космическом стиле

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

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

Если кратко, то ошибка под номером 404 - это стандартный код сообщения об ошибке HTTP, где означает, что интернет сайт, на который вы пытались зайти или просто обратиться не найден на сервере.

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

Здесь рассмотрим расположение на монитора и экрана:

Это уже идет вид с мобильного гаджет:

Красивая страницу на сайт под номером 404

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

HTML

Код

<div class="dekipds-megulad"></div>
<img src="http://zornet.ru/ABVUN/Aba/404.png" class="demukipom-ladevug" />
<img src="http://zornet.ru/ABVUN/Aba/meteor.png" class="kasetvem-kezasopng" />
<p class="laseoug-nedavun">О нет!!</p>
<p class="sublaseoug-nedavun">
  Вы либо неправильно написали URL
или запросить страницу, которой здесь больше нет.
</p>
<div align="center">
  <a class="kopsaoug-madebalocas" href="http://zornet.ru">Вернуться на предыдущую страницу</a>
</div>
<img src="http://zornet.ru/ABVUN/Aba/astronaut.png" class="dsavuresa" />
<img src="http://zornet.ru/ABVUN/Aba/spaceship.png" class="mipogedsav" />

CSS

Код

@keyframes floating {
  from { transform: translateY(0px); }
  65% { transform: translateY(15px); }
  to { transform: translateY(-0px); }
}

html {
  height: 100%;
}

body{
  background-image: url('http://zornet.ru/ABVUN/Aba/star.png'),linear-gradient(to bottom, #05007A, #4D007D);
  height: 100%;
  margin: 0;
  background-attachment: fixed;
  overflow: hidden;
}

.dekipds-megulad{
  left:0;
  right:0;
  bottom:0;
  position:absolute;
  height: 27vmin;
  background: url('http://zornet.ru/ABVUN/Aba/mars.png') no-repeat bottom center;
  background-size: cover;
}

.demukipom-ladevug{
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: 16vmin;
  width: 30vmin;
}
  @include breakpoint(mobile){
  top: 45vmin;
  }

.kasetvem-kezasopng{
  position: absolute;
  right: 2vmin;
  top: 16vmin;
}

.laseoug-nedavun{
  color: white;
  font-family: $nunito-font;
  font-weight: 600;
  text-align: center;
  font-size: 5vmin;
  margin-top: 31vmin;
}
  @include breakpoint(mobile){
  margin-top: 65vmin;
  }

.sublaseoug-nedavun{
  color: white;
  font-family: $nunito-font;
  font-weight: 400;
  text-align: center;
  font-size: 3.5vmin;
  margin-top: -1vmin;
  margin-bottom: 9vmin;
}

.kopsaoug-madebalocas{
  border: 1px solid white;
  color: white;
  height: 5vmin;
  padding: 12px;
  font-family: $nunito-font;
  text-decoration: none;
  border-radius: 5px;
}
  .kopsaoug-madebalocas:hover{
  background: white;
  color: #4D007D;
  }

  @include breakpoint(mobile){
  font-size: 3.5vmin;

}

.dsavuresa{
  position: absolute;
  top: 18vmin;
  left: 10vmin;
  height: 30vmin;
  animation: floating 3s infinite ease-in-out;
}
  @include breakpoint(mobile){
  top: 2vmin;
  }

.mipogedsav{
  position: absolute;
  bottom: 15vmin;
  right: 24vmin;
}
  @include breakpoint(mobile){
  width: 45vmin;
  bottom: 18vmin;
  }

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

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

16 Апреля 2019 Загрузок: 1 Просмотров: 1200 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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