404 page

Create Simple 404 Error Page Using HTML Code

Create Simple 404 Error Page Using HTML 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.

50+ HTML, CSS & JavaScript Projects With Source Code

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

404 Error Page Using HTML and CSS Code

Code byNaved khan
Project DownloadLink Available Below
Language usedHTML and CSS
External link / DependenciesYes
ResponsiveYes
404 Error Page

 404 Error Page Html Code:-

<!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).

Ecommerce Website Using HTML, CSS, & JavaScript (Source 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

Let’s Write Css Code for styling the 404 error page.

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+ JavaScript Projects With Source Code ( Beginners to Advanced)

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.

Live Preview Of 404 Error Page Using Html Code:-

 

Final Output Of 404 Error Page Using Html and Css:-

404 Error Page
404 Error Page

Here you can see in the output video 💜 that how awesome our simple 404 page using html and 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

ADVERTISEMENT

Which code editor do you use for this 404 Error Page coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

ADVERTISEMENT

is this project responsive or not?

Yes! this is a responsive project

ADVERTISEMENT

Do you use any external links to create this project?

Yes!

ADVERTISEMENT



Tags: , , ,

Leave a Reply