Simple 404 Error Page Using HTML and CSS Code

In this today's article, We learn to create a simple 404 Error Page using only Html and Css Code. In the 404 Error Page, We have some animation and a link button so its redirects to the home page.

We use a Few Lines Of Css Coding in this 404-page style project. So let's start writing code and create a basic structure for our 404 page.

We write html coding first for creating structure then later styling using css.

Html Code For 404 Error Page 
<!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>

This is our all html code to create a simple 404 page using html css. We use html boilerplate then include css file (not code, just linking css file to html).

Then we use a CDN link of bootstrap because we use bootstrap to create the layout and style our code later using css also but we use bootstrap in this project. In html, we use only some text and create classes.

Another style like showing gif and page styles in css. Here you can see output using only html code with bootstrap CDN link.

CSS Code For 404 Error Page

/*======================
    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;
}

You can see we use css. But it's just 10-line code because we use bootstrap already so we don't need to style most of the elements. We just add a gif image that you can in the below output.

Then styling the home page link as a button and styling our heading tag and our simple 404 responsive page is ready for our website.

Here you can see in the output video that how awesome our simple 404 page using html css. Animation and navigate this 2 point in styling 404 Error page and we did it.

Hope you like this project, we create your own and use this project in any project as a part project like the reviews section, and a contact form. If you need any more project-related frontend. Visit our homepage and you get 100+ projects.

if you have any confusion Comment below or you can contact us by filling out our contact us form from the home section.

Code By - Naved khan

written by - Codewithrandom

Blog

Simple 404 Error Page Using HTML and CSS Code

Codewithrandom Blogs

CSS Code For 404 Error Page

Join Our Newsletter. No Spam, Only the good stuff.

Related