ZorNet.Ru — сайт для вебмастера » HTML и CSS » Страница 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);
}

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

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

20 Ноября 2018 Просмотров: 975 Комментариев: (0)

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

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

Kosten

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