ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Страница 404 на CSS анимации для сайта

Страница 404 на CSS анимации для сайта

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

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

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

Страница:

Код

<html><head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex,nofollow">
  <meta name="viewport" content="width=device-width,maximum-scale=1,user-scalable=no,minimal-ui">
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,800&subset=latin,latin-ext">
  <link rel="stylesheet" type="text/css" href="https://cdn.travel.sygic.com/travel.sygic.com_lp/css/404.css?9267bb3cab874302435dffd6b29bbb65e3da2cf8">
  <title> 404 Не Найдено
</title>

  </head>
  <body>
<div class="stars"></div>

<div class="sun-moon">
  <div class="sun"></div>
  <div class="moon"></div>
</div>

<div id="js-hills" class="background hills"></div>
<div id="js-country" class="background country"></div>
<div id="js-foreground" class="background foreground"></div>

<div class="error-content">
  Извините, эта страница не вернулась <br>
из поездки в <a href="https://go.sygic.com/travel/place?id=region:23655">Пустыня Атакама
</a>.
</div>

<a href="/" class="button-home">ZORNET.RU</a>

<div class="code">
  <span>4</span>
  <span>0</span>
  <span>4</span>
</div>
</body></html>

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

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

Страница с ошибкой под номером №404

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

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

Адаптивная страница 404 на CSS для сайта

Установка:

HTML

Код

<p>HTTP: <span>404</span></p>
<code><span>this_page</span>.<em>not_found</em> = true;</code>
<code><span>if</span> (<b>you_spelt_it_wrong</b>) {<span>try_again()</span>;}</code>
<code><span>else if (<b>we_screwed_up</b>)</span> {<em>alert</em>(<i>"We're really sorry about that."</i>); <span>window</span>.<em>location</em> = home;}</code>
<center><a>HOME</a></center>

CSS

Код

@import url("https://fonts.googleapis.com/css?family=Bevan");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background: rgb(40,40,40);
  overflow: hidden;
}

p {
  font-family: "Bevan", cursive;
  font-size: 130px;
  margin: 10vh 0 0;
  text-align: center;
  letter-spacing: 5px;
  background-color: black;
  color: transparent;
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;

  span {
  font-size: 1.2em;
  }
}

code {
  color: #bdbdbd;
  text-align: center;
  display: block;
  font-size: 16px;
  margin: 0 30px 25px;
  }
  span {
  color: #f0c674;
  }

  i {
  color: #b5bd68;
  }

  em {
  color: #b294bb;
  font-style: unset;
  }

  b {
  color: #81a2be;
  font-weight: 500;
  }

a {
  color: #8abeb7;
  font-family: monospace;
  font-size: 20px;
  text-decoration: underline;
  margin-top:10px;
  display:inline-block
}

@media screen and (max-width: 880px) {
  p {
  font-size: 14vw;
  }
}

Код

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

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

Самая простая 404 страница

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

HTML

Код

<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
<div class="numero">
404
</div>
<div class="leyenda">
Сожалею! Страница не найдена
</div>

CSS

Код

@import url('https://fonts.googleapis.com/css?family=Lemonada');
@import url('https://fonts.googleapis.com/css?family=Caveat');
body{
  background-color: #93BE4C;
  text-align: center;
}
body .fa{
  margin-top: 0.5em;
  color: #fff;
  font-size: 5em;
  text-shadow: 2px 5px #272634;
}
.numero{
  font-family: 'Lemonada', cursive;
  color: #fff;
  font-size: 10em;
  margin-top: -0.4em;
  text-shadow: 5px 5px #272634;
}
.leyenda{
  font-family: 'Caveat', cursive;
  color: #504b4b;
  font-size: 2.6em;
  margin-top: -0.9em;
}

Простая страница с сообщениями об ошибках готова и настроена для ее немедленного использования.

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

16 Декабря 2019 Загрузок: 2 Просмотров: 929 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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