Ошибка 404: Страница перемещена или удалена
Ошибка под номером 404, возникает только в том случаи, когда сервер веб-сайта не отвечает, а значит страница была перемещена на другой адрес или удалена. Но главным аспектом считаю, это она обязательно должна быть на любом сайте или блоге. А также, чтоб дизайн страницы был полностью адаптивный под все мобильные гаджет или на большие мониторы. В большинстве по умолчанию идет она, но всегда хочется поставить оригинальную, так, чтоб соответствовала тематики сайта. Вот эта страница просто великолепно выполнена по своему формату и стилистики, где показан водный мир. А значить ее можно смело привязать к тематике, как охота и рыбалка, но больше под рыболовство подходит. Вообще со всем, что связано в подводными действиями. Так как на ней нарисована раба с фонарем, и она также ищет выход, как и пользователь или гость. Но здесь есть подсказка, веде вернуться на главную страницу, что при клике вы вновь оказываетесь на нужном ресурсе. Вот список возможных причин ошибки 404: 1. Опечатка URL; 2. Ошибка копирования и вставки; 3. Неработающей ссылке; 4. Усеченная ссылка; 5. Перемещенный контент; 6. Удаленный контент; Некоторые вещи, которые нужно включить в дизайн 404 страницы: 2.1. Навигация по меню; 2.2. Ссылка на домашнюю страницу; 2.3. Ссылка на вашу карту сайта; 2.4. Панель поиска; 2.5. Ссылки на популярные посты; 2.6. Ссылки на популярные продукты; Так она выглядит реально, где ниже есть ссылка на demo страницу. Где уведите небольшую анимацию, которая отлично вписывается в основу дизайна, и просто украшает по своему оформлению. Как пример, можно разное направление постановить, здесь все больше уже от самого веб разработчика зависит, ведь нужна только картинка, а все описание прописаны в основе кода. HTML Код <div class="senouncemen"> <h1>404!</h1> <h2> Похоже, ты потерян! В глубине не так светло </h2> <h3> Но ты не волнуйся! Я направлю вас к месту назначения </h3> <a href="http://zornet.ru">На главную страницу</a> </div> <div class="torpedo"> <div class="schtick"></div> <div class="specialty"> <div class="head"> <div class="material"> <div class="additiona"> <div class="bloode"> <div class="fishing"></div> <div class="fishing"></div> <div class="fishing"></div> <div class="fishing"></div> </div> </div> <div class="astreng"> <div class="bloode"> <div class="fishing"></div> <div class="fishing"></div> </div> </div> </div> </div> <div class="body"> <div class="bachka"></div> <div class="rybolov"></div> </div> <div class="evdestina"></div> </div> </div> CSS Код :root { --torpedo-body: #002727; --light-opacity: 1; } @keyframes blink { 0% { --light-opacity: 0.7; } 20% { --light-opacity: 0.77; } 30% { --light-opacity: 0.85; } 40% { --light-opacity: 0.92; } 50% { --light-opacity: 1; } 80% { --light-opacity: 1; } 90% { --light-opacity: 0.85; } } body { margin: 0; background: radial-gradient(circle at 55% 40vh, rgba(255, 255, 170, var(--light-opacity)) 5px, rgba(85, 85, 153, var(--light-opacity)) 35px, rgba(85, 85, 153, var(--light-opacity)) 70px, #119 20%, #006, #001); display: flex; justify-content: space-between; background-repeat: no-repeat; height: 100vh; width: 100vw; color: lightblue; padding: calc(40vh - 20px) 8% 0 8%; box-sizing: border-box; overflow: hidden; background-repeat: no-repeat; animation: blink 2s infinite ease-in-out; } h1 { color: hotpink; font-size: 4em; font-weight: 900; font-family: cursive; font-family: 'Lobster', cursive; } a { padding: 5px 10px 5px 40px; border-radius: 50% calc(20px + 0.7em) calc(20px + 0.7em) 50%/100% calc(20px + 0.7em) calc(20px + 0.7em) 100%; font-size: 1.4em; background: transparent; color: limegreen; border: 3px solid limegreen; transition: 0.3s ease-in; white-space: nowrap; text-decoration: none; } a:hover, a:focus { color: #0ab70a; background: #e1f7e4; outline: none; border-color: rgba(0, 0, 0, 0); cursor: pointer; } @keyframes float { 20% { transform: translatey(-2px) scale(0.7); } 40% { transform: translatey(5px) scale(0.7); } 60% { transform: translatey(2px) scale(0.7); } 80% { transform: translatey(-2px) scale(0.7); } } .torpedo { display: flex; flex-direction: column; margin: 0 -1.5vw 0 0; transform: scale(0.7); transform-origin: 0 0; animation: float 4s infinite alternate ease-out; } .torpedo .specialty { width: 40vw; height: 25vw; display: flex; filter: drop-shadow(0 0 5px #33a); position: relative; top: -5vh; } .head { width: 45%; height: 100%; } .material { display: flex; flex-direction: column; width: 100%; height: 100%; position: relative; z-index: 1; } .additiona { width: 70%; height: 60%; border: 2vw solid pink; border-bottom: none; background: radial-gradient(ellipse at 100% 90%, #777474 42%, #23234e 45%, #23234e 47%, #777474 47%, #777474 58%, #23234e 60%, #23234e 62%, #777474 62%, #777474 72%, #23234e 75%, #23234e 77%, #777474 77%); border-radius: 50% 50% 0 0; margin-left: 30%; box-sizing: border-box; box-shadow: inset 0px 10px 20px 0 #111; } .additiona .bloode { width: 80%; height: 40%; margin-left: 10%; display: flex; border-radius: 50% 50% 0 0; overflow: hidden; } .additiona .fishing { height: 100%; width: 25%; background: white; border-radius: 0 0 50% 50%/0 0 100% 100%; } .additiona .fishing:nth-child(2), .additiona .fishing:nth-child(3) { transform: scaleY(0.5); transform-origin: 50% 0; } .astreng { width: 100%; height: 40%; border-top: 2vw solid pink; background: var(--torpedo-body); border-radius: 20px 0 0 100px; box-sizing: border-box; } .astreng .bloode { width: 60%; height: 70%; margin-left: 10%; display: flex; overflow: hidden; justify-content: space-between; top: -90%; left: 10%; position: relative; } .astreng .fishing { height: 100%; width: 15%; background: white; border-radius: 50% 50% 0 0/100% 100% 0 0; } .body { height: 100%; width: 50%; background: var(--torpedo-body); margin-left: -15%; border-radius: 0 50% 130px 0/0 30px 190px 0; } .evdestina { height: 40%; width: 40%; margin-top: 2%; background: var(--torpedo-body); margin-left: -25%; border-radius: 0 10vw 20vw 0; transform: skew(-20deg); } .bachka { width: 3vw; height: 3vw; border-radius: 50%; background: #ccc; position: absolute; margin: 3% 15%; border: 5px solid #558; box-sizing: border-box; box-shadow: inset -5px -5px 10px #335; } .schtick { width: 50%; height: calc(300px - 10vw); position: relative; border: 0.5vw solid transparent; box-sizing: border-box; z-index: -1; border-radius: 50%; border-top-color: #ffc; border-right-color: #ffc; } .schtick::before { display: block; position: relative; width: 20px; height: 20px; background: rgba(255, 255, 170, var(--light-opacity)); content: ""; border-radius: 50%; margin: 5%; border: 2px solid rgba(200, 220, 20, 0.2); } @media only screen and (max-width: 768px) { @keyframes float { 20% { transform: translatey(-2px); } 40% { transform: translatey(5px); } 60% { transform: translatey(2px); } 80% { transform: translatey(-2px); } } body { flex-direction: column-reverse; background: radial-gradient(circle at 30vw 110px, rgba(255, 255, 170, var(--light-opacity)) 5px, rgba(85, 85, 153, var(--light-opacity)) 35px, rgba(85, 85, 153, var(--light-opacity)) 70px, #0c0c88 20%, #080863, #020225); padding: 0 5vw 30px 23vw; } .torpedo { transform: none; margin: 0; position: relative; top: 90px; left: 2vw; } .torpedo .schtick { height: 160px; } .schtick::before { width: 10px; height: 10px; margin: 8%; } } Страница 404 добавляет интерактивный элемент, который будет держать посетителей увлеченными и вовлеченными в процесс на некоторое время. Есть много уникальных решений, где применяется анимация, а где просто устанавливается красивое изображение. Что по своей фактуре, что там изображено, и пользователю и гостям сайта понятно, что такой страницы не существует. Где вам нужно сделать обязательно хоть одну ссылку или кнопку, чтоб он далее прошел на основной сайт, а не просто закрыл. Демонстрация |
Поделиться в социальных сетях
Материал разместил
Комментарии: 0 | |