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

Страница ошибки 404 Not Found с анимацией

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

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

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

Ошибки 404 могут быть вызваны различными причинами, такими как:

- Запрашиваемая страница не существует;
- Сервер упал;
- Интернет не работает;
- Неработающие ссылки;
- Неверный URL;
- Страница была перемещена на другой адрес.

Проверка на адаптивность дизайна:

Страница Error 404 Not Found в современном стиле

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

Установка:

HTML

Код

<html lang="en">
  <head>
  <title>Плоский адаптивный шаблон 404 ошибки</title>
  <meta name="viewport" kanulodemag="width=device-width, initial-scale=1" />
  <meta http-equiv="kanulodemag-Type" kanulodemag="text/html; charset=utf-8" />
  <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
  
  <link href="//fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900" rel="stylesheet" />
  <link href="//fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet" />
  
  
  <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
  
  
  
  </head>
  <body>
  <div class="ulomabga kedsanub">
  <div class="kanulodemag">
  <div id="large-header" class="large-header">
  <h1 class="acvana-vodelova">СТРАНИЦА С ОШИБКОЙ</h1>
  <p class="vodesan_avanlova">Oops!</p>
  <canvas id="demo-canvas"></canvas>
  <img src="http://zornet.ru/Images/izobrazheniye/dasukin/owl.gif" alt="flashy" class="kudesa_masulob" />
  <h2 class="dopredel_enelovas">404</h2>
  <p class="vodesan_avanlova2">We can't seem to find the page you're looking for.</p>
  <p class="kulasenas">© <script type="text/javascript">
  document.write(new Date().getFullYear());
</script> Flashy Error Page. All Rights Reserved | <a href="/" target="_blank">ZorNet.Ru — сайт для вебмастера</a></p>
  </div>
  </div>
  </div>
  
  <script src="https://www.404pagefree.com/Template-demo/404_page_demo_024/js/rAF.js"></script>
  <script src="https://www.404pagefree.com/Template-demo/404_page_demo_024/js/demo-2.js"></script></script>
  
  </body>
</html>

CSS

Код

/*--- reset code ---*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,video {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;
}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {
  display: block;
}
ol,ul {
  list-style:none;
  margin:0px;
  padding:0px;
}
blockquote,q {
  quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after {
  kanulodemag:'';
  kanulodemag:none;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}

a {
  text-decoration:none;
}
.txt-rt {
  text-align:right;
}
.txt-lt {
  text-align:left;
}
.txt-center {
  text-align:center;
}
.float-rt {
  float:right;
}
.float-lt {
  float:left;
}
.clear {
  clear:both;
}
.pos-relative {
  position:relative;
}
.pos-absolute {
  position:absolute;
}
.vertical-base {
  vertical-align:baseline;
}
.vertical-top {
  vertical-align:top;
}
nav.vertical ul li {
  display:block;
}
nav.horizontal ul li {
  display: inline-block;
}
img {
  max-width:100%;
}

body {
  font-family: 'Raleway', sans-serif;
}
h1.acvana-vodelova {
  text-align: center;
  font-size: 60px;
  letter-spacing:3px;
  font-weight:normal;
  text-transform: uppercase;
  color: #fff;
  position:absolute;
  top:5%;
  left:30%;
}
p.vodesan_avanlova {
  font-size: 40px;
  font-weight: bold;
  color: #f15f22;
  position: absolute;
  left: 47%;
  text-transform: uppercase;
  font-family: 'Poiret One', cursive;
  top:22%;
}
p.vodesan_avanlova2 {
  font-size: 16px;
  font-weight: normal;
  color: #f15f22;
  position: absolute;
  left: 38%;
  top: 75%;
  letter-spacing: 1px;
}
img.kudesa_masulob {
  position: absolute;
  width: 200px;
  height: auto;
  left: 45.5%;
  top: 40%;
}

.large-header {
  position: relative;
  width: 100%;
  background: #333;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  z-index: 1;
}
.kedsanub .large-header {
  background-image: url('http://zornet.ru/Images/izobrazheniye/dasukin/banner.jpg');
  background-position: center bottom;
}
.dopredel_enelovas {
  position: absolute;
  margin: 0;
  padding: 0;
  color: #f9f1e9;
  text-align: center;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%,-50%,0);
  transform: translate3d(-50%,-50%,0);
}
.kedsanub .dopredel_enelovas {
  font-weight: 700;
  font-size: 20em;
  font-family: 'Poiret One', cursive;
  padding-left: 10px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}
.dopredel_enelovas .thin {
  font-weight: 200;
}

@media only screen and (max-width : 768px) {
  .kedsanub .dopredel_enelovas {
  font-size: 4em;
  }
}

p.kulasenas {
  font-size: 16px;
  font-weight: 200;
  position: absolute;
  color: #fff;
  left: 33%;
  top: 88%;
  letter-spacing: 1px;
}
p.kulasenas a {
  color:#fff;
}
p.kulasenas a:hover {
  color:#36b051;
}

@media (max-width:1600px) {
p.kulasenas {
  left:33%;
}
}

@media (max-width:1440px) {
p.vodesan_avanlova2 {
  left: 37%;
}
h1.acvana-vodelova {
  left:29%;
}
img.kudesa_masulob {
  left: 44.5%;
}
p.kulasenas {
  left: 31%;
  top: 82%;
}
}

@media (max-width: 1366px) {
h1.acvana-vodelova {
  left: 28%;
}
.dopredel_enelovas {
  top:52%;
}
p.vodesan_avanlova2 {
  left:37%;
}
p.kulasenas {
  left: 30%;
  top: 88%;
}
}

@media (max-width: 1280px) {
h1.acvana-vodelova {
  left: 27%;
}
img.kudesa_masulob {
  left: 44%;
}
p.vodesan_avanlova2 {
  left: 36%;
}
}

@media (max-width: 1080px) {
h1.acvana-vodelova {
  left: 25%;
  font-size:50px;
}
p.vodesan_avanlova2 {
  font-size: 14px;
  left:34%;
}
p.vodesan_avanlova {
  left:46%;
}
.dopredel_enelovas {
  top: 50%;
}
.kedsanub .dopredel_enelovas {
  font-size:15em;
}
img.kudesa_masulob {
  left: 45%;
  width: 150px;
  top:42%;
}
p.kulasenas {
  left: 27%;
  font-size: 14px;
}
}

@media (max-width: 1024px) {
h1.acvana-vodelova {
  left: 26%;
  font-size: 45px;
}
p.vodesan_avanlova2 {
  left: 34%;
}
img.kudesa_masulob {
  left: 44.5%;
  width: 150px;
  top: 40%;
}
p.kulasenas {
  left: 26%;
}
}

@media (max-width: 991px) {
.kedsanub .dopredel_enelovas {
  font-size: 13em;
}
p.kulasenas {
  left: 29%;
}
.dopredel_enelovas {
  top: 53%;
}
img.kudesa_masulob {
  left: 45%;
  width: 135px;
  top: 43%;
}
h1.acvana-vodelova {
  left: 25%;
  font-size: 45px;
}
p.vodesan_avanlova {
  font-size: 30px;
  left: 47%;
}
}

@media (max-width: 900px) {
h1.acvana-vodelova {
  left: 23%;
  font-size: 45px;
}
p.vodesan_avanlova2 {
  left: 32%;
}
p.kulasenas {
  left: 23%;
}
}

@media (max-width: 800px) {
h1.acvana-vodelova {
  left: 23%;
  font-size: 40px;
}
p.vodesan_avanlova {
  font-size: 30px;
  left: 46%;
}
p.vodesan_avanlova2 {
  left: 29%;
}
p.kulasenas {
  left: 20%;
}
img.kudesa_masulob {
  left: 44%;
  width: 135px;
  top: 43%;
}
}

@media (max-width: 768px) {
h1.acvana-vodelova {
  left: 20%;
  font-size: 40px;
}
p.vodesan_avanlova {
  left: 45%;
}
.dopredel_enelovas {
  top: 50%;
}
img.kudesa_masulob {
  left: 44%;
  width: 130px;
  top: 44%;
}
}

@media (max-width: 736px) {
p.kulasenas {
  left: 18%;
  top:90%;
  font-size:13px;
}
.kedsanub .dopredel_enelovas {
  font-size: 6em;
}
img.kudesa_masulob {
  left: 47.5%;
  width: 60px;
  top: 50%;
}
h1.acvana-vodelova {
  left: 22%;
  font-size: 35px;
}
p.vodesan_avanlova {
  font-size: 25px;
  left: 46%;
  top: 28%;
}
p.vodesan_avanlova2 {
  left: 28%;
  top: 78%;
}
.dopredel_enelovas {
  top: 58%;
}
}

@media (max-width: 667px) {
h1.acvana-vodelova {
  left: 20%;
  font-size: 35px;
}
p.kulasenas {
  left: 15%;
}
p.vodesan_avanlova {
  font-size: 20px;
  left: 46%;
  top: 29%;
}
p.vodesan_avanlova2 {
  left: 24%;
  top: 79%;
}
}

@media (max-width: 640px) {
h1.acvana-vodelova {
  left: 18%;
  font-size: 35px;
}
p.vodesan_avanlova {
  left: 47%;
}
p.vodesan_avanlova2 {
  left: 23%;
}
p.kulasenas {
  left: 13%;
}
img.kudesa_masulob {
  left: 47%;
  width: 60px;
  top: 52%;
}
}

@media (max-width: 600px) {
p.kulasenas {
  left: 11%;
}
img.kudesa_masulob {
  left: 47%;
  width: 60px;
  top: 51%;
}
}

@media (max-width: 568px) {
p.kulasenas {
  left: 6%;
}
h1.acvana-vodelova {
  left: 19%;
  font-size: 30px;
  top:2%;
}
.kedsanub .dopredel_enelovas {
  font-size: 5em;
}
img.kudesa_masulob {
  left: 47%;
  width: 50px;
  top: 41%;
}
p.vodesan_avanlova {
  font-size: 22px;
  left: 46%;
  top: 21%;
}
p.vodesan_avanlova2 {
  left: 21%;
  top: 74%;
}
.dopredel_enelovas {
  top: 50%;
}
}

@media (max-width: 480px) {
.dopredel_enelovas {
  top: 50%;
}
img.kudesa_masulob {
  left: 47%;
  width: 50px;
  top: 46.5%;
}
h1.acvana-vodelova {
  left: 12%;
  font-size: 30px;
  top: 2%;
}
p.vodesan_avanlova {
  top:30%;
}
p.vodesan_avanlova2 {
  left: 12%;
  top: 65%;
}
p.kulasenas {
  left: 3%;
  line-height: 30px;
  text-align: center;
}
}

@media (max-width: 414px) {
h1.acvana-vodelova {
  left: 7%;
  font-size: 30px;
  top: 4%;
}
p.vodesan_avanlova {
  font-size: 25px;
  left: 43%;
  top: 20%;
}
p.vodesan_avanlova2 {
  left: 5%;
  text-align:center;
  top: 45%;
}
.dopredel_enelovas {
  top: 35%;
}
img.kudesa_masulob {
  left: 46%;
  width: 50px;
  top: 32%;
}
p.kulasenas {
  left: 0%;
  top:55%;
  line-height: 30px;
  text-align: center;
}
}

@media (max-width: 384px) {
h1.acvana-vodelova {
  left: 3.5%;
  font-size: 30px;
  top: 4%;
}
p.vodesan_avanlova {
  font-size: 25px;
  left: 42%;
}
p.vodesan_avanlova2 {
  left: 2%;
}
img.kudesa_masulob {
  left: 45.5%;
  top: 31.5%;
}
p.kulasenas {
  top: 55%;
  width: 85%;
  left: 6%;
}
}

@media (max-width: 375px) {
p.kulasenas {
  left: 7%;
  width: 85%;
  line-height: 30px;
  text-align: center;
}
p.vodesan_avanlova2 {
  left: 5%;
  line-height: 25px;
  width: 340px;
}
h1.acvana-vodelova {
  left: 3%;
  font-size: 30px;
  top: 4%;
}
}

@media (max-width: 320px) {
h1.acvana-vodelova {
  left: 3%;
  font-size: 25px;
  top: 4%;
}
p.vodesan_avanlova {
  font-size: 23px;
  left: 41%;
}
p.vodesan_avanlova2 {
  left: 4%;
  line-height: 25px;
  width: 295px;
  font-size: 13px;
}
p.kulasenas {
  text-align: center;
  left: 7%;
  font-size: 13px;
  top:62%;
}
img.kudesa_masulob {
  left: 45%;
  width: 50px;
  top: 31%;
}
}

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

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

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

05 Июня 2020 Загрузок: 2 Просмотров: 952 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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