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

404 страница с анимационным оформлением

Эта оригинальная страница 404 для сайтов, где задействовано интересное изображение в виде котенка, где все функции выполнены с помощью HTML + CSS. Будет отличным решением для тематического сайта, что связан с животными, или создан под аналогичный оттенок цвета. Так как эта страница сделано по своему дизайну на чистом CSS, то вам не будет так сложно поставить ту гамму цвета, которая идет основой на сайте. Где для выхода на главную страницу идет одна кнопка, что гость или пользователь не потеряется, а просто вернется на интернет ресурс, возможно в поднятом настроение.

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

Так она по умолчанию идет в светлом оттенке:

Установка:

Head

Код

HTML

Код

<div>
  <lottie-player src='https://assets5.lottiefiles.com/packages/lf20_3a0bpmmc.json'
  background="transparent"
  speed="1"
  style="width: 500px; height: 500px"
  autoplay
  ></lottie-player>
  <h2 class="fourofour2">Страница не найдена!</h2>
  <button type="button" class="zoom btn btn-dark">Иди домой</button>
</div>

CSS

Код

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  text-align: center;
}
div {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}
button{
  margin-top: 40px;
  text-transform: capitalize;
}

Код

gsap.from("div", { opacity: 0, duration: 3, y: -50 });
  gsap.set(".fourofour2", { scale: 1 });
  const tl = gsap.timeline({
  repeat: -1,
  delay: 3,
  defaults: {
  duration: 0.5,
  ease: "none",
  },
  });
  tl.to(".fourofour2", { scale: 1.1 });
  tl.to(".fourofour2", { scale: 1 });

Рекомендую тем, кто этот стиль дизайна заинтересовал, то что здесь в установочном процессе, то ссылку в коде лучше изначально выпрямить под свой домен.

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

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

01 Февраля 2022 Загрузок: 2 Просмотров: 806 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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