Страница 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, что представлено в материале. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
