ZorNet.Ru — сайт для вебмастера » HTML и CSS » Страница Error 404 Not Found для сайта

Страница Error 404 Not Found для сайта

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

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

Как пример открытой страницы:

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

Установка:

HTML

Код

<html>
  <head>
  <meta charset ="utf-8">
  <meta name ="viewport" content="width=device-width, intial-scale=1">
  <title>Пользовательское кодирование</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
</head>
  <body>
  <header>
  <h2 href="#"> ZORNET.RU</h2>
  <nav>
  <li><a href="#">Главная</a> </li>
  <li><a href="#">Форум</a> </li>
  <li><a href="#">Контакты</a> </li>

  </nav>
  </header>

  <section class="hero">
  <div class="background-image" style="background-image: url(http://zornet.ru/Images/izobrazheniye/dasukin/rocket.gif)"></div>
  <div class="hero-content-area">
  <h1>К сожалению! ошибка</h1>
  <h3>страница была удалена или перемещена.</h3>
  </div>

  </section>
  </body>
</html>

CSS

Код

nav{
  list-style: none;
}
a{
  text-decoration: none;
  opacity: 0.75;
  margin: 0 15px;
  color: white;
  cursor: pointer;
}
a:hover{
  opacity: 1;
}
a.btn{
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  background-color: #3f51b5;
  opacity: 1;
  margin-top: 10px;
  color: white
}

section{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px;
}

header{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items:center;
  padding: 35px 100px 0;
  animation: 1s fadein 0.5s forwards;
  opacity: 0;
  color: white;
}
@keyframes fadein{
  100%{
  opacity: 1;
  }
}

header h2{
  font-family: "Quicksand, sans-serif";
  color: white;
}

header nav{
  display: flex;
  margin-right: -15px;
}
header nav li{
  margin: 0 15px;
  color: white;
}
@media (max-width: 1000px){
  header{
  padding: 20px 50px;
  }
}

@media (max-width: 700px){
  header{
  flex-direction: column;
  }

  header h2{
  margin-bottom: 15px;
  }
}

.hero{
  position: relative;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
  color: white;
}
.hero .background-image{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  z-index: -1;
  background-color: #80a3db;
  animation: 15s change 1s forwards;
  animation-iteration-count:infinite;
}
.hero h1{
  font: bold 60px "Open Sans", sans-serif;
  margin-bottom: 40px;
  color: white;
}
.hero h3{
  font: normal 28px "Open Sans", sans-serif;
  margin-bottom: 40px;
  color: white;
}
.hero a.btn{
  padding: 20px 46px;
}
.hero-content-area{
  opacity: 0;
  margin-top: 100px;
  animation: 1s slidefade 1s forwards;
}
@keyframes slidefade{
  100%{
  opacity: 1;
  margin: 0;
  }
}

.grid{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

hr{
  width: 100%;
  height: 2px;
  background-color: #3f51b5;
  border: 0;
  margin-bottom: 50px;
}

@media (max-width: 800px){

  .hero{
  min-height: 600px;
  }
  .hero h1{
  font-size: 48px;
  }

  .hero h3{
  font-size: 24px;
  }

  .hero a.btn{
  padding: 15px 40px;
  }

}

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

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

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

13 Мая 2020 Загрузок: 4 Просмотров: 881 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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