В этой сегодняшней статье мы научимся создавать простую страницу ошибки 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, он прост и удобен в использовании.

Является ли этот проект адаптивным или нет?

Да! это адаптивный проект

Используете ли вы какие-либо внешние ссылки для создания этого проекта?

Да!