Skip to main content

404 Error Page Design | HTML, CSS And Bootstrap

by Rustcode
Page-Not-Found-Design-HTML-CSS-And-Bootstrap

404 Error Page Design | HTML, CSS And Bootstrap

A very important and useful page for every website will show when there is no page available with a link. Almost every website uses this page because it provides a good website experience to users. There are many types of 404 or page not found designs available but in this design, we going to keep it very simple and easy to design. Very small code of HTML, CSS, and bootstrap are used to develop this page interface.

This page interface is divided into two parts, one for the image and the other for the buttons and text headings. We've kept it very simple, half the screen is used for image placement and half is used for the main title controls and useful buttons. This design is responsive by default because here bootstrap gives that support, we are not using any extra css to make it responsive.

This website contains various web development content if you want to learn more about user interfacing designing articles visit the below link. Also, check out a playlist of bootstrap base web page interface designs.


01. Include Bootstrap Link

Every single website is using "Error page". We can generate this page using simple HTML and CSS but bootstrap give a little bit more fast design and animation facility. So let's design the HTML document first then we will add bootstrap and font awesome library to use icons in this page design.

<!DOCTYPE html>
<html>
  <head>
    <title>404 Error Page Design | Rustcode</title>
  </head>
  <body>
   // html code 
</body>
</html>


There are two options to add bootstrap one is online way and other is offline. Here we are using online method so that this HTML document can easily access Bootstrap classes. But if we add offline then it will give little faster and better performance instead of online link.

Bootstrap Link:
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">


Now, this document is ready to use Bootstrap classes so that it can generate a fast and responsive user interface for the website. In addition, we have added a font-awesome icon library which is already added in the html code below. 

<!DOCTYPE html>
<html>
<head>
    <title>404 Error Page Design | Rustcode</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>
</head>

<body>
  // html code
</body>
</html>


02. HTML

Our HTML code is enough to generate a user interface with the help of bootstrap and font-awesome. We are dividing this page into two parts one for image and another for content, button, and all. We have three buttons home, contact and report.

<body>
   <div class="container-fluid">
      <div class="row d-flex justify-content-center align-items-center height-vh">
         <div class="col-lg-6 col-12">
            <div class="col-md-12">
               <img src="image.png" width="100%">
            </div>
         </div>
         <div class="col-lg-6 col-12">
            <div class="col-12 d-flex flex-column justify-content-center align-items-center">
               <h1 class="main-heading">404</h1>
               <h2>we couldn't find this page.</h2>
               <div class="text-center mt-4 mb-5">
                  <button class="btn btn-success px-3 mr-2"><i class="fa fa-home"></i> Home</button>
                  <button class="btn btn-success px-3 mr-2"><i class="fa fa-phone"></i> Contact</button>
                  <button class="btn btn-success px-3 mr-2"><i class="fa fa-info"></i> Report</button>
               </div>
            </div>
         </div>
      </div>
   </div>
</body>


Output:

404-page-design-without-css

This code is not ready yet only html is done because the default design of Bootstrap is working. We will add our css in next step. You can download image from this link.


03. CSS

Now, it's time to incorporate CSS into the front-end HTML code. We have already added default classes from bootstrap but we want some changes in that default css code. So there will be a separate file for the additional CSS which is "style.css". Let us import the font family in that file, after that we will write the css code. 

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700');

Generally, there are three methods to implement CSS into HTML elements. You can learn all three methods in detail by clicking on this link.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700');

body{
  height: 100vh;
  font-family: "Poppins", sans-serif;
  background: black !important;
  color: white !important;
  font-weight: 900 !important;
}

.height-vh{
  height: 100vh;
}

.main-heading{
  font-size: 220px;
  font-weight: 700;
}

.fa{
  font-size: 20px !important;
  padding: 5px;
}

.btn{
  color: white !important;
  font-weight: 600 !important;
  border: 1px solid white !important;
  background: transparent !important;
  border-radius: 0px !important;
}

.btn:hover{
  color: black !important;
  background: #fff !important;
}


Output:

404-page-design-with-css


04. Youtube Video

We also made a youtube video for this animation if you want to watch and want to learn every step of this design.



05. Source Code

Before jumping in to download the source code. First write this code yourself and then you can cross-check it with reference code.


Comments

Post a Comment