» »

Страница 404 с выводом кода страницы HTML

Страница 404 с выводом кода страницы HTML

Такая страница подойдет под тематику веб мастера или программиста, так как она выводит некий код, который красиво вписывается в стилистику. Сама стилистика идет в темном стили, в самом верху будет написано HTTP: 404 в стили вмятых знаков. Что всегда оригинально смотрится на темном фоне, так как сами знаки идут в аналогичной палитре, только уже проработанные в CSS.

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

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

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

HTML

Код
<p>HTTP: <span>404</span></p>
<code><span>this_page</span>.<em>not_found()</em> = true;</code>
<code><span>if </span> (<b>you_spelt_it_wrong</b>) {<span>try_again()</span>;}</code>
<code><span>else if (<b>we_screwed_up</b>)</span> {<em>alert</em>(<i>"We're really sorry about that."</i>); <span>window</span>.<em>location</em> = home;}</code>
<center><a>HOME</a></center>

CSS

Код
body {
  background: rgb(40,40,40);
  overflow: hidden;
}

p {
  font-family: "Bevan", cursive;
  font-size: 130px;
  margin: 10vh 0 0;
  text-align: center;
  letter-spacing: 5px;
  background-color: black;
  color: transparent;
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}
   
span {
  font-size: 1.2em;
  }

code {
  color: #bdbdbd;
  text-align: center;
  display: block;
  font-size: 16px;
  margin: 0 30px 25px;
}
   
.span {
  color: #f0c674;
  }

  i {
  color: #b5bd68;
  }

  em {
  color: #b294bb;
  font-style: unset;
  }

  b {
  color: #81a2be;
  font-weight: 500;
  }

a {
  color: #8abeb7;
  font-family: monospace;
  font-size: 20px;
  text-decoration: underline;
  margin-top:10px;
  display:inline-block
}

@media screen and (max-width: 880px) {
  p {
  font-size: 14vw;
  }
}

JS

Код
function type(n, t) {
  var str = document.getElementsByTagName("code")[n].innerHTML.toString();
  var i = 0;
  document.getElementsByTagName("code")[n].innerHTML = "";

  setTimeout(function() {
  var se = setInterval(function() {
  i++;
  document.getElementsByTagName("code")[n].innerHTML =
  str.slice(0, i) + "|";
  if (i == str.length) {
  clearInterval(se);
  document.getElementsByTagName("code")[n].innerHTML = str;
  }
  }, 10);
  }, t);
}

type(0, 0);
type(1, 600);
type(2, 1300);

У вас будет возможность отредактировать этот код в соответствии с нашим дизайном, так как HTML и CSS является как элемент дизайна, так и безусловно идет под эффекты, что можно посмотреть на Demo, что представлено в материале.

Демонстрация
2018-09-20 Просмотров: 237 Комментарий: (1)

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

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

Комментарий: 1
Kosten
Kosten 2018-09-20 00:271
0
Здесь тема такая, так как страница изначальна шла на SCSS, то пришлось выставлять на CSS, и вероятно неправильно, если кто разбирается, то плиз посмотрите. Так как на сайт закинул, потому что все функций работают, это анимация на знаки, которые будут появятся.
avatar