Ошибка: 404 страница не найдена с отчетом
Это анимационная страница на CSS и JS под номером 404, где идет красивый отчет при заходе по ссылки, что задержит потенциального пользователя. Кто искал информацию в сети интернет, то большая вероятность, что он попадал на такие страницы, а точнее на те страницы, которые не существуют, а вот пока в поисковой системе они какое-то время будут присутствовать. Но дело в другом, попасть на такую страницу каждый может, где аналогично и выйти с нее, просто выключив браузер или закрыв страницу. Но нам нужно сделать так, чтоб было чем заинтересовать того или иного потенциального пользователя. Вот для этого идет анимация, где как только появляется цифра 404, то ниже написано, так и так, страницы нет, но мы вам предлагаем пройти на главную сайта или на разделы. И прописать ключевые слова, которые поставить под ссылки, и как можно красиво все оформить. И только после этого страница будет полностью оправдывать свое присутствие на сайте, ведь какой-то процент все же перейти по ссылки на основу интернет ресурса. Так как идет стилистика, то здесь можно самостоятельно поменять оттенок: Изначально такой вид и цифры при открытии страницы, все идет рандомно: Но через миг появляется та цифра, что означает, такой страницы нет на сайте: Переходим к установке: В HEAD подключаем: Код <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"> HTML Код <div class="devacomang"> <div class="netagopu-dsacintsd"> <div class="col-xs-12 ground-color text-center"> <div class="kagains-ennec_toguv-negaseam"> <div class="clip"><div class="ableanud-gacudan"><span class="digit gevasopeduksam"></span></div></div> <div class="clip"><div class="ableanud-gacudan"><span class="digit netatugikopam"></span></div></div> <div class="clip"><div class="ableanud-gacudan"><span class="digit kedoeneamegan"></span></div></div> <div class="msg">OH!<span class="vsaxopesad"></span></div> </div> <h2 class="h1"> Сожалею! Страница не найдена</h2> </div> </div> </div> </body> CSS Код /* devacomang Page */ .devacomang .clip .ableanud-gacudan { height: 180px; /*Contrall*/ } .devacomang .clip:nth-of-type(2) .ableanud-gacudan { width: 130px; /*Contrall play with javascript*/ } .devacomang .clip:nth-of-type(1) .ableanud-gacudan, .devacomang .clip:nth-of-type(3) .ableanud-gacudan { width: 250px; /*Contrall*/ } .devacomang .digit { width: 150px; /*Contrall*/ height: 150px; /*Contrall*/ line-height: 150px; /*Contrall*/ font-size: 120px; font-weight: bold; } .devacomang h2 /*Contrall*/ { font-size: 32px; } .devacomang .msg /*Contrall*/ { top: -190px; left: 30%; width: 80px; height: 80px; line-height: 80px; font-size: 32px; } .devacomang span.vsaxopesad /*Contrall*/ { top: 70%; right: 0%; border-left: 20px solid #535353; border-top: 15px solid transparent; border-bottom: 15px solid transparent; } .devacomang .kagains-ennec_toguv-negaseam { margin-top: 10%; position: relative; height: 250px; padding-top: 40px; } .devacomang .kagains-ennec_toguv-negaseam .clip { display: inline-block; transform: skew(-45deg); } .devacomang .clip .ableanud-gacudan { overflow: hidden; } .devacomang .clip:nth-of-type(2) .ableanud-gacudan { overflow: hidden; position: relative; box-ableanud-gacudan: inset 20px 0px 20px -15px rgba(150, 150, 150,0.8), 20px 0px 20px -15px rgba(150, 150, 150,0.8); } .devacomang .clip:nth-of-type(3) .ableanud-gacudan:after, .devacomang .clip:nth-of-type(1) .ableanud-gacudan:after { content: ""; position: absolute; right: -8px; bottom: 0px; z-index: 9999; height: 100%; width: 10px; background: linear-gradient(90deg, transparent, rgba(173,173,173, 0.8), transparent); border-radius: 50%; } .devacomang .clip:nth-of-type(3) .ableanud-gacudan:after { left: -8px; } .devacomang .digit { position: relative; top: 8%; color: white; background: #07B3F9; border-radius: 50%; display: inline-block; transform: skew(45deg); } .devacomang .clip:nth-of-type(2) .digit { left: -10%; } .devacomang .clip:nth-of-type(1) .digit { right: -20%; }.devacomang .clip:nth-of-type(3) .digit { left: -20%; } .devacomang h2 { color: #A2A2A2; font-weight: bold; padding-bottom: 20px; } .devacomang .msg { position: relative; z-index: 9999; display: block; background: #535353; color: #A2A2A2; border-radius: 50%; font-style: italic; } .devacomang .vsaxopesad { position: absolute; z-index: 999; transform: rotate(45deg); content: ""; width: 0; height: 0; } @media(max-width: 767px) { .devacomang .clip .ableanud-gacudan { height: 100px; /*Contrall*/ } .devacomang .clip:nth-of-type(2) .ableanud-gacudan { width: 80px; /*Contrall play with javascript*/ } .devacomang .clip:nth-of-type(1) .ableanud-gacudan, .devacomang .clip:nth-of-type(3) .ableanud-gacudan { width: 100px; /*Contrall*/ } .devacomang .digit { width: 80px; /*Contrall*/ height: 80px; /*Contrall*/ line-height: 80px; /*Contrall*/ font-size: 52px; } .devacomang h2 /*Contrall*/ { font-size: 24px; } .devacomang .msg /*Contrall*/ { top: -110px; left: 15%; width: 40px; height: 40px; line-height: 40px; font-size: 18px; } .devacomang span.vsaxopesad { top: 70%; right: -3%; border-left: 10px solid #535353; border-top: 8px solid transparent; border-bottom: 8px solid transparent; } .devacomang .kagains-ennec_toguv-negaseam { height: 150px; } } .overlay { position: relative; z-index: 20; } /*done*/ .ground-color { background: white; } /*done*/ .item-bg-color { background: #EAEAEA } .padding-top { padding-top: 10px; } /*done*/ .padding-bottom { padding-bottom: 10px; } /*done*/ .padding-vertical { padding-top: 10px; padding-bottom: 10px; } .padding-horizontal { padding-left: 10px; padding-right: 10px; } .padding-all { padding: 10px; } /*done*/ .no-padding-left { padding-left: 0px; } /*done*/ .no-padding-right { padding-right: 0px; } /*done*/ .no-vertical-padding { padding-top: 0px; padding-bottom: 0px; } .no-horizontal-padding { padding-left: 0px; padding-right: 0px; } .no-padding { padding: 0px; } .margin-top { margin-top: 10px; } /*done*/ .margin-bottom { margin-bottom: 10px; } /*done*/ .margin-right { margin-right: 10px; } /*done*/ .margin-left { margin-left: 10px; } /*done*/ .margin-horizontal { margin-left: 10px; margin-right: 10px; } /*done*/ .margin-vertical { margin-top: 10px; margin-bottom: 10px; } /*done*/ .margin-all { margin: 10px; } /*done*/ .no-margin { margin: 0px; } /*done*/ .no-vertical-margin { margin-top: 0px; margin-bottom: 0px; } .no-horizontal-margin { margin-left: 0px; margin-right: 0px; } .inside-col-shrink { margin: 0px 20px; } hr { margin: 0px; padding: 0px; border-top: 1px dashed #999; } JS Код function randomNum() { "use strict"; return Math.floor(Math.random() * 9)+1; } var loop1,loop2,loop3,time=30, i=0, number, selector3 = document.querySelector('.gevasopeduksam'), selector2 = document.querySelector('.netatugikopam'), selector1 = document.querySelector('.kedoeneamegan'); loop3 = setInterval(function() { "use strict"; if(i > 40) { clearInterval(loop3); selector3.textContent = 4; }else { selector3.textContent = randomNum(); i++; } }, time); loop2 = setInterval(function() { "use strict"; if(i > 80) { clearInterval(loop2); selector2.textContent = 0; }else { selector2.textContent = randomNum(); i++; } }, time); loop1 = setInterval(function() { "use strict"; if(i > 100) { clearInterval(loop1); selector1.textContent = 4; }else { selector1.textContent = randomNum(); i++; } }, time); Если кто еще не знает, что такое ошибка 404, то кратко, эта страница, по которой нет запрашиваемого адреса. На такую страницу попадают по разному. Это при нажатие на ссылку, которая изначально на прямую ведет на материал, что был удален и просто его нет на интернет сайте, но или сделав ошибку в URL при набирание в строке браузера. Демонстрация |
Поделиться в социальных сетях
Материал разместил
Комментарии: 0 | |