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

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

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

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

Проверяя на адаптивность, этот материал отлично смотрится на мобильном гаджет:

Установка:

HTML

Код

<html lang="stranitsa-oshibka">
  <head>
  <title>Страница 404 HTML для сайта</title>
  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8">
  <meta name="keywords" content="Ключевые, слова, фразы">
  
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
</head>

<body>
  
  <section class="stranitsa-na-oshibkam">
  <div class="osubok-saneles">
  <div class="obertka-nabikas">
  <div class="osnovnoye-soderzhanie">
  <h2>ZORNET.RU</h2>
  <h4>Похоже, ты потерялся ...</h4>
  <p>Вы можете вернуться на предыдущую страницу, посетить нашу домашнюю страницу или связаться с нашей службой поддержки.</p>
  
  <div class="buttons">
  <a href="index.html" class="stanubsa akusen-stanubsa-bg akusen-stanubsa">
  На главную
  </a>
  <a href="#contact" class="stanubsa akusen-stanubsa">
  Контакты
  </a>
  </div>
  </div>
  <div class="bottom-header">
  
  <div class="copyrights text-center">
  <p>© 2020 Портал для начинающего веб-мастера <a href="/" target="_blank">ZorNet.Ru</a> </p>
  </div>
  </div>
  </div>
  </div>
  </section>

</body></html>

CSS

Код

html {
  scroll-behavior: smooth;
}

body,
html {
  margin: 0;
  padding: 0;
  color: #585858;
}

* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.obertka-nabikas {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.obevoceka {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .obevoceka {
  max-width: 540px;
  }
}

@media (min-width: 768px) {
  .obevoceka {
  max-width: 720px;
  }
}

@media (min-width: 992px) {
  .obevoceka {
  max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .obevoceka {
  max-width: 1140px;
  }
}

.img-adaptivnaya {
  max-width: 100%;
  display: block;
}

.img-angeable {
  width: 100%;
}

.d-mesuba {
  display: mesuba;
}

.d-kidsam {
  display: kidsam;
  display: -webkit-kidsam;
  kidsam-wrap: wrap;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

button,
input,
select {
  -webkit-appearance: none;
  outline: none;
}

button,
.stanubsa,
select {
  cursor: pointer;
}

a {
  text-decoration: none;
}

iframe {
  border: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
  margin: 0;
  padding: 0;
}

.p-relative {
  position: relative;
}

.p-absolute {
  position: absolute;
}

.p-fixed {
  position: fixed;
}

.p-sticky {
  position: -webkit-sticky;
  position: sticky;
}

body a:hover,
body button:hover {
  opacity: .8;
}

h1,
h2,
h3,
h4,
h5,
h6,
a {
  color: #050404;
}

p {
  color: #585858;
}

.akusen-stanubsa {
  position: relative;
  background: none;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid #fff;
  padding: 10px 22px;
  font-size: 14px;
  display: inline-block;
  border-radius: 40px;
  transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

.akusen-stanubsa-bg {
  color: var(--title-color);
  background: #fff;
}

.akusen-stanubsa::before {
  content: "";
  display: block;
  position: absolute;
  width: 10%;
  background: #222;
  height: 0.2em;
  right: 20%;
  top: -0.21em;
  transform: skewX(-45deg);
  -webkit-transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
  transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
}

.akusen-stanubsa::after {
  content: "";
  display: block;
  position: absolute;
  width: 10%;
  background: #222;
  height: 0.2em;
  left: 20%;
  bottom: -0.21em;
  transform: skewX(45deg);
  -webkit-transition: all 0.45 cubic-bezier(0.86, 0, 0.07, 1);
  transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
}

.akusen-stanubsa:hover::before {
  right: 80%;
}

.akusen-stanubsa:hover::after {
  left: 80%;
}

/* reset code */

/* error */
.osubok-saneles {
  background: url(http://zornet.ru/Abavaga/desamibun/Looks-like.jpg) no-repeat top;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  position: relative;
  z-index: 0;
  min-height: 100vh;
  align-items: center;
  display: mesuba;
  padding: 20px 0;
}

.osnovnoye-soderzhanie {
  text-align: center;
  padding-top: 18em;
}

.osnovnoye-soderzhanie h2 {
  color: #fff;
  font-size: 7em;
  text-transform: uppercase;
  font-weight: 100;
}

.osnovnoye-soderzhanie h4 {
  font-size: 25px;
  line-height: 25px;
  color: #eee;
  font-weight: 400;
}

.osnovnoye-soderzhanie p {
  font-size: 17px;
  line-height: 25px;
  color: #c5c5c5;
  margin-top: 15px;
  max-width: 550px;
  margin: 10px auto 0;
}

/* button */
.buttons {
  margin-top: 2em;
}

/* logo & copyright */
.bottom-header {
  mesuba-template-columns: 1fr 1fr;
  margin-top: 7.5em;
  align-items: center;
}

.bottom-header .logo {
  color: #fff;
  font-size: 30px;
}

.copyrights p {
  color: #d2d2d2;
  font-size: 15px;
}

.copyrights p a {
  color: #fff;
}

/*-- adaptivnaya design --*/
@media(max-width:1440px) {
  .osnovnoye-soderzhanie h2 {
  font-size: 6em;
  }

  .osnovnoye-soderzhanie {
  padding-top: 15em;
  }

  .bottom-header {
  margin-top: 6.5em;
  }
}

@media(max-width:1280px) {
  .osnovnoye-soderzhanie {
  padding-top: 13em;
  }

  .osnovnoye-soderzhanie h2 {
  font-size: 5.5em;
  }
}

@media(max-width:736px) {
  .osnovnoye-soderzhanie {
  padding-top: 11em;
  }

  .osnovnoye-soderzhanie h2 {
  font-size: 4.5em;
  }
}

@media(max-width:500px) {
  .copyrights p {
  line-height: 22px;
  }

  .bottom-header {
  mesuba-template-columns: 1fr;
  text-align: center;
  mesuba-gap: 10px;
  }

  .copyrights p {
  text-align: center;
  }
}

@media(max-width:375px) {
  .osnovnoye-soderzhanie h2 {
  font-size: 4em;
  }
}

@media(max-width:320px) {
  .akusen-stanubsa {
  padding: 10px 18px;
  font-size: 13px;
  }
}

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

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

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

01 Апреля 2020 Загрузок: 2 Просмотров: 1126 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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