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

Адаптивная страница 404-й ошибки с анимацией

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

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

Так будет выглядит при установочном процессе:

Забавная анимация 404 страницы в адаптивном CSS

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

Создание 404 страницы при помощи CSS3 + HTML

Ошибка 404 с красивой анимацией

HEAD

Код

HTML

Код

<section class="kiged-lokas">
  <div class="container">
  <div class="row">
  <div class="col-sm-12 ">
  <div class="col-sm-10 col-sm-offset-1 text-center">
  <div class="nesuces-asekad">
  <h1 class="text-center ">404</h1>


  </div>

  <div class="asmulopa-nukilopas">
  <h3 class="h2">
  Похоже, ты заблудился
  </h3>

  <p>страница, которую вы ищете, недоступна!</p>

  <a href="" class="lokus-noking">На главную</a>
  </div>
  </div>
  </div>
  </div>
  </div>
</section>

CSS

Код

.kiged-lokas{ padding:40px 0; background:#fff; font-family: 'Arvo', serif;
}

.kiged-lokas img{ width:100%;}

.nesuces-asekad{

  background-image: url(http://zornet.ru/ABVUN/Abaavag/Abaskun/dribbble_1.gif);
  height: 400px;
  background-position: center;
  }

  .nesuces-asekad h1{
  font-size:80px;
  }

  .nesuces-asekad h3{
  font-size:80px;
  }

  .lokus-noking{
  color: #fff!important;
  padding: 10px 20px;
  background: #39ac31;
  margin: 20px 0;
  display: inline-block;}
  .asmulopa-nukilopas{ margin-top:-50px;}

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

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

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

16 Марта 2021 Загрузок: 6 Просмотров: 1035 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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