» »

Страница 404 error с анимационным фоном

Страница 404 error с анимационным фоном

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

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

Приступаем к установке:

HTML

Код
<div class="gatumus-ketudam">
  <h1>404</h1>
  <h2>Страница не найдена
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i></h2>
  <div class="dostema-ketesurca">
  <a target="_blank" href="" class="dostema-ketesurca">Главная страница</a>
</div>
</div>

CSS

Код
h1{
  font-size: 16em;
  margin: .3em .6em;
  color: rgba(255,255,255, 0.7);
  margin-bottom:-17px;
}
h2 {
  font-size: 1.8em;
  margin: .2em .5em;
  color: rgba(255, 255, 255, 0.77);
}
div.gatumus-ketudam{
  position:absolute;
  top:23%;
  margin-top:-8em;
  width:99%;
  text-align:center;
}

.dostema-ketesurca {
  text-align: center;
}
a.dostema-ketesurca {
  text-transform: uppercase;
  font-size: 15px;
  background-color: #0c3f58;
  padding: 7px 15px;
  color: #f3f5f7;
  display: inline-block;
  margin-right: 7px;
  margin-bottom: 7px;
  line-height: 2;
  text-decoration: none;
  margin-top: 47px;
  letter-spacing: 3px;
  border: 2px solid #afafaf;
  border-radius: 5px;
}

a.dostema-ketesurca:hover {
  background-color: #319e19;
  box-shadow: 0px 0px 13px 5px rgba(183, 177, 177, 0.55), 0px 7px 14px 0px rgba(150, 146, 146, 0.35);
}

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

Демонстрация
2018-11-20 Просмотров: 196 Комментарий: (0)

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

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

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