Дизайнеры часто задаются вопросом, как красиво украсить страницу 404, чтобы не потерять пользователя, ведь все пути очень тяжело отследить и такая страница просто обязана быть на вашем сайте. Зачастую разработчики ее игнорируют никак не придав ей стилизации, но попадая на такую страницу посетитель просто закрывает вкладку, и соответственно вы теряете посетителя или потенциального клиента. Сегодня большая шумиха на счет разрабатываемой игры Cyberpunk 2077 и мы хотим показать сделанную страницу 404 в таком стиле.

 

Если вы хотите использовать готовый шаблон, с поддержкой русского языка, адаптивностью и регулярными обновлениями, тогда обратите внимание на предложение от наших партнеров, там есть много чего интересного:

Шаг 1. HTML

Для начала создаем разметку, у нас будет один общий класс, в котором мы устанавливаем фоновое видео с эффектом глитча, а также добавляем текст, который будет отображаться на странице:

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

Шаг 2. CSS

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

Затем стилизируем текст и его положение на странице, также устанавливаем классы для кнопки и ее анимации при наведении курсора мыши:

В результате у нас получилась такая замечательная страница 404 для сайта в стиле Cyberpunk 2077, надеемся она станет вам полезной.

Вот и все. Готово!