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

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

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

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

Все проверено по работоспособности, где реально так смотрится на мониторе:

Это уже на мобильном аппарате, где аналогично все корректно показано:

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

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

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

HTML

Код

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>404 Ошибка - страница не найдена</title>
</head>
<body>
  <div id="stranitsa_ne_naydena">
  <div class="portal_page_acompan">
  <h2>404</h2>
  <h4>Opps! Страница не найдена</h4>
  <p>Страница, которую вы искали, не существует. Возможно, вы ошиблись при вводе адреса или страница была перемещена.</p>
  <a href="#">Вернуться домой</a>
  </div>
  </div>
</body>
</html>

CSS

Код

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background: linear-gradient(45deg, #1a524f,#26523b);
  height: 100vh;
}

#stranitsa_ne_naydena {
  position: absolute;
  top: 10%;
  left: 10%;
  right: 10%;
  bottom: 10%;
  border-radius: 10px;
  height: 80%;
  display: flex;
  justify-content: center;
  background: url(http://zornet.ru/ABVUN/Aba/page404.png), #1e1f2f;
  box-shadow: 3px 11px 16px rgba(27, 24, 24, 0.5);
}

#stranitsa_ne_naydena .portal_page_acompan{
  max-width: 600px;
  text-align: center;
}

#stranitsa_ne_naydena .portal_page_acompan h2{
  font-size: 16vw;
  color: #f9fbfb;
  line-height: 1em;
  margin-top: 25px;
  text-shadow: -3px -3px 0 #1582b7,-3px -2px 0 #1582b7,-3px -1px 0 #1582b7,-3px 0px 0 #1582b7;
}

#stranitsa_ne_naydena .portal_page_acompan h4 {
  position: relative;
  font-size: 1.5em;
  margin-bottom: 20px;
  color: #e8e4e4;
  background: #148fd691;
  font-weight: 300;
  padding: 10px 20px;
  display: inline-block;
  border-radius: 3px;
  border: 2px solid #12496d;
  box-shadow: 0px 0px 8px 1px rgba(218, 215, 215, 0.31), 0px 4px 0px -15px rgba(66, 61, 61, 0);
}

Код

var container = document.getElementById('stranitsa_ne_naydena');

window.onmousemove = function(e){
  var x = -e.clientX/5, y = -e.clientY/5;

  container.style.backgroundPositionX = x + 'px';
  container.style.backgroundPositionY = y + 'px';
}

Установка на каждом ресурсе своя, и поэтому здесь мы наблюдаем полноценную страницу, которую копируем и выставляем по месту. Если у вас конструктор uCoz, то в этой статье все подробно описано, как вам правильно нужно делать по установке. Где создается текстовой файл, и в него все погружаем и размещаем файловый менеджер.

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

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

11 Февраля 2020 Загрузок: 3 Просмотров: 955 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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