ZorNet.Ru — сайт для вебмастера » HTML и CSS » Ошибка 404: Страница перемещена или удалена

Ошибка 404: Страница перемещена или удалена

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

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

Вот список возможных причин ошибки 404:

1. Опечатка URL;
2. Ошибка копирования и вставки;
3. Неработающей ссылке;
4. Усеченная ссылка;
5. Перемещенный контент;
6. Удаленный контент;

Некоторые вещи, которые нужно включить в дизайн 404 страницы:

2.1. Навигация по меню;
2.2. Ссылка на домашнюю страницу;
2.3. Ссылка на вашу карту сайта;
2.4. Панель поиска;
2.5. Ссылки на популярные посты;
2.6. Ссылки на популярные продукты;

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

404 страница в адаптивном дизайн

Как пример, можно разное направление постановить, здесь все больше уже от самого веб разработчика зависит, ведь нужна только картинка, а все описание прописаны в основе кода.

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 добавляет интерактивный элемент, который будет держать посетителей увлеченными и вовлеченными в процесс на некоторое время. Есть много уникальных решений, где применяется анимация, а где просто устанавливается красивое изображение.

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

Демонстрация
17 Марта 2020 Загрузок: 3 Просмотров: 1522 Комментариев: (0)

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

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

Оставь свой отзыв

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