В этой сегодняшней статье мы научимся создавать простую страницу ошибки 404, используя только код Html и Css. На странице ошибки 404 у нас есть анимация и кнопка ссылки, поэтому она перенаправляет на домашнюю страницу.
Мы используем несколько строк кода Css в этом проекте на 404 страницы. Итак, давайте начнем писать код и создадим базовую структуру для нашей страницы 404.
Сначала мы пишем html-код для создания структуры, а затем стилизуем с помощью css.
HTML-код страницы с ошибкой 404
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple 404 Error Page</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <section class="page_404"> <div class="container"> <div class="row"> <div class="col-sm-12 "> <div class="col-sm-10 col-sm-offset-1 text-center"> <div class="four_zero_four_bg"> <h1 class="text-center ">404</h1> </div> <div class="contant_box_404"> <h3 class="h2"> Look like you're lost </h3> <p>the page you are looking for not avaible!</p> <a href="" class="link_404">Go to Home</a> </div> </div> </div> </div> </div> </section> </body> </html>
Это весь наш html-код для создания простой страницы 404 с использованием html css. Мы используем шаблон html, а затем подключаем файл css (не код, а просто связываем файл css с html).
Затем мы используем ссылку CDN на bootstrap, потому что мы используем bootstrap для создания макета и стилизации нашего кода позже с помощью css, но мы используем bootstrap в этом проекте. В html мы используем только текст и создаем классы.
Другой стиль, например отображение стилей gif и страниц в css. Здесь вы можете увидеть вывод, используя только html-код со ссылкой на загрузочную CDN.
Вывод HTML
Давайте напишем код CSS
Код CSS для страницы с ошибкой 404
/*====================== 404 page =======================*/ .page_404 { padding: 40px 0; background: #fff; font-family: "Arvo", serif; } .page_404 img { width: 100%; } .four_zero_four_bg { background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif); height: 400px; background-position: center; } .four_zero_four_bg h1 { font-size: 80px; } .four_zero_four_bg h3 { font-size: 80px; } .link_404 { color: #fff !important; padding: 10px 20px; background: #39ac31; margin: 20px 0; display: inline-block; } .contant_box_404 { margin-top: -50px; }
Вы можете видеть, что мы используем css. Но это всего лишь 10-строчный код, потому что мы уже используем бутстрап, поэтому нам не нужно стилизовать большинство элементов. Мы просто добавляем изображение в формате gif, которое вы можете использовать в приведенном ниже выводе.
Затем стилизуем ссылку на главную страницу как кнопку и стилизуем наш тег заголовка, и наша простая адаптивная страница 404 готова для нашего веб-сайта.
Окончательный вывод страницы ошибки 404
Здесь вы можете увидеть в выходном видео, насколько крута наша простая страница 404 с использованием html css. Анимация и навигация по этим 2 точкам в стиле Ошибка страницы 404 и мы это сделали.
Надеюсь, вам понравится этот проект, мы создадим свой собственный и используем этот проект в любом проекте как часть проекта, например раздел отзывов и контактную форму. Если вам нужен еще какой-либо интерфейс, связанный с проектом. Посетите нашу домашнюю страницу, и вы получите более 100 проектов.
если у вас есть какие-либо недоразумения, прокомментируйте ниже или вы можете связаться с нами, заполнив нашу контактную форму в домашнем разделе.
Code By — Навед хан
автор — Codewithrandom
Какой редактор кода вы используете для кодирования страницы ошибки 404?
Я лично рекомендую использовать VS Code Studio, он прост и удобен в использовании.
Является ли этот проект адаптивным или нет?
Да! это адаптивный проект
Используете ли вы какие-либо внешние ссылки для создания этого проекта?
Да!