Simple 404 Error Page Using Html Css Code | 404 Page Code

Simple 404 Error Page Using Html Css Code | 404 Page Code

In this today’s article, we learn to create a simple 404 error page using only html,css coding. We use less 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 than 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).

50+ Frontend Project With Code 

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 🔥.

Html Output

404 Error Page
404 Error Page

Let’s Writing Css Code 

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 👇.

100+ Front-end Projects for Web developers (Source Code)

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.

Final Output Of 404 Error Page

404 Error Page
404 Error Page

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 page and we did it.

5+ HTML CSS project With Source Code

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💝.

Quiz Project Using Javascript

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

Share on:

Leave a Comment