You are currently viewing Create 404 Error Page Animated Using HTML & CSS

Create 404 Error Page Animated Using HTML & CSS

Create 404 Error Page Animated Using HTML & CSS

Hello programmers Using HTML and CSS, we’ll build a 404 page in this blog. This project is intended for total beginners. Using HTML and CSS, we will design our 404 page using basic HTML ideas, graphics, and a little style using CSS. We will create our own 404 page.

 

The HTTP 404, 404 Not Found, or 404 Page Not Found error message is a Hypertext Transfer Protocol (HTTP) standard response code in computer network communications to signal that the browser was able to interface with a particular server but the server could not locate what was requested. When a user requests a page or URL that doesn’t exist on a specific website, an error message appears.

404 Page Using HTML and CSS
404 Page Using HTML and CSS

 

In this tutorial, we’ll build a blank homepage first, style it with CSS, .Next, we’ll add the heading to our webpage using a few fundamental HTML tags. Additionally, we’ll give our website a Home button.This is beginner project and this will help you in learning what different pages are required in a website. In this tutorial we will be discussing all the concepts step by step.

I hope you must have got an idea about the project.

So,  Let’s start our 404 page  Project By Adding The Source Codes. For That, First, We Are Using The Html Code.

Step1: HTML code

HTML is used to design the website’s layout. So, first, we create the layout, then we style it, and finally, we add features to the button (on clicking the button menu opens ). This programme was made (Custom 404 Error Page Design).

You must first generate two files, one in HTML and one in CSS. Simply insert the following codes into your file after producing these files.

<!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>404 Page Not Found</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <main class="bl_page404">
        <h1>Error 404. The page does not exist</h1>
        <p>Sorry! The page you are looking for can not be found. Perhaps the page you requested was moved or deleted. It
            is also possible that you made a small typo when entering the address. Go to the main page.
        </p>
        <div class="bl_page404__wrapper">
            <img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/cloud_warmcasino.png?raw=true"
                alt="cloud_warmcasino.png">
            <div class="bl_page404__el1"></div>
            <div class="bl_page404__el2"></div>
            <div class="bl_page404__el3"></div>
            <a class="bl_page404__link" href="/">go home</a>
        </div>
    </main>
</body>

</html>

Create an HTML file first with the name index.html, and then put the provided codes into it. Ensure that the file is saved with the.html extension.

Inside the Head section of HTML Code we will be adding a link for our CSS to link with our webpage structure.

Ecommerce Website Using Html Css And Javascript Source Code

We will now build a major div with the class “bl page404” inside the body; this will serve as the main container for our website. Now, we’ll add a heading to our 404 page using the H1 tag, and we’ll give it a quick introduction using the <p> tag.

Using the anchor tag, we will now add a link to our home page and construct another div that will include an image for our 404 webpage.

We have added the basic structure of our OTP input field . Let’s take look at our output.

Output:

404 Page Using HTML and CSS
404 Page Using HTML Code Preview

Step2: Adding the CSS Code.

Cascading Style Sheets (CSS) is a markup language for describing the presentation of a document written in HTML or XML. CSS, like HTML and JavaScript, is a key component of the World Wide Web.

Now we will look at our CSS code.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Outfit", sans-serif;
  background-image: url("	https://images3.alphacoders.com/109/1091500.jpg");
  background-size: cover;
  background-position: top center;
}
.app-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3),
    rgba(0, 0, 0, 0.6)
  );
}
header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 15px 15px;
}
header input {
  width: 100%;
  max-width: 280px;
  padding: 10px 15px;
  border: none;
  outline: none;
  background-color: rgba(18, 18, 18, 0.4);
  border-radius: 16px;
  border-bottom: 3px solid #df8e00;

  font-size: 20px;
  font-weight: 300;
  transition: 0.2s ease-out;
  color: #eeeeee;
}
header input:focus {
  background-color: rgba(18, 18, 18, 0.8);
}
body {
  width: 100%;
  margin: 0;
  height: 100%;
  background-color: #1d3041;
  font-family: "Open Sans - Semibold", sans-serif;
  color: #fff;
}
h1 {
  text-align: center;
  margin-top: 1%;
  margin-bottom: 25px;
  font-size: 30px;
  font-weight: 400;
  text-transform: uppercase;
}
p {
  display: block;
  margin: 25px auto;
  max-width: 776px;
  text-align: center;
  color: #bcecf2;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.bl_page404__wrapper {
  position: relative;
  width: 100%;
  margin: 10px auto 10px;
  max-width: 440px;
  min-height: 410px;
}
.bl_page404__img {
  width: 100%;
}
.bl_page404__link {
  display: block;
  margin: 0 auto;
  width: 260px;
  height: 64px;
  box-shadow: 0 5px 0 #9c1007, inset 0 0 18px rgba(253, 60, 0, 0.75);
  background-color: #f95801;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 64px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 30px;
  text-align: center;
}
.bl_page404__link:hover,
.bl_page404__link:focus {
  background-color: #ff7400;
}
.bl_page404__el1 {
  position: absolute;
  top: 108px;
  left: 102px;
  opacity: 1;
  animation: el1Move 800ms linear infinite;
  width: 84px;
  height: 106px;
  background: url("https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-1.png?raw=true")
    50% 50% no-repeat;
  z-index: 2;
}
.bl_page404__el2 {
  position: absolute;
  top: 92px;
  left: 136px;
  opacity: 1;
  animation: el2Move 800ms linear infinite;
  width: 184px;
  height: 106px;
  background: url("https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-2.png?raw=true")
    50% 50% no-repeat;
  z-index: 2;
}
.bl_page404__el3 {
  position: absolute;
  top: 108px;
  left: 180px;
  opacity: 1;
  animation: el3Move 800ms linear infinite;
  width: 284px;
  height: 106px;
  background: url("https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-3.png?raw=true")
    50% 50% no-repeat;
  z-index: 2;
}
@keyframes el1Move {
  0% {
    top: 108px;
    left: 102px;
    opacity: 1;
  }
  100% {
    top: -10px;
    left: 22px;
    opacity: 0;
  }
}
@keyframes el2Move {
  0% {
    top: 92px;
    left: 136px;
    opacity: 1;
  }
  100% {
    top: -10px;
    left: 108px;
    opacity: 0;
  }
}
@keyframes el3Move {
  0% {
    top: 108px;
    left: 180px;
    opacity: 1;
  }
  100% {
    top: 28px;
    left: 276px;
    opacity: 0;
  }
}

After we’ve added the CSS code, we’ll go over it step by step. To save time, you can simply copy this code and paste it into your IDE. Let us now examine our code step by step.

Multiple Choice Quiz using HTML, CSS & JavaScript

Step1:We will give our webpage’s body some style. The background colour is set to “dark-blue,” and the height and width are also set to “100%.” Open-sans is selected as the font family, while white is selected as the font colour.

body {
  width: 100%;
  margin: 0;
  height: 100%;
  background-color: #1d3041;
  font-family: "Open Sans - Semibold", sans-serif;
  color: #fff;
}

Step2: We will now style the webpage’s heading using the h1 tag. We add text-align as “centre” and top-margin of “1%” and bottom-margin of 25px using the text-align property. Our heading’s font size is set to “30 px,” and by utilising the transform property, we will change the text’s case to uppercase.

We will specify the display for our paragraph tag to “block” using the paragraph tag. The margin is set to 25px for the top and bottom and to auto for the left and right. The font family is set to “open-sans,” the font colour is set to “sky blue colour,” and the font size is set to 16 pixels.

h1 {
  text-align: center;
  margin-top: 1%;
  margin-bottom: 25px;
  font-size: 30px;
  font-weight: 400;
  text-transform: uppercase;
}
p {
  display: block;
  margin: 25px auto;
  max-width: 776px;
  text-align: center;
  color: #bcecf2;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
404 Page Using HTML and CSS
404 Page Using HTML and CSS

 

Step3: Now we will be styling our wrapper container . We will set its position as relative and the width is set to the “100%”  . We also added maximum width and minimum height to our div container.

Now inside the container we will style the image the width of the image is set to the 100%.

.bl_page404__wrapper {
  position: relative;
  width: 100%;
  margin: 10px auto 10px;
  max-width: 440px;
  min-height: 410px;
}
.bl_page404__img {
  width: 100%;
}

Step4: The homepage button will get some style. The dimensions are “260px” for width and “64px” for height. In addition, we gave our button a box-shadow and the colour “red” for the background. A text-align attribute is also added.

Now that we have established a div tag inside of our wrapper, we will set its position to absolute, set its animation to infinite, and add a backdrop picture.

To add motion to our all div tag, we will now use the keyframe attribute.

bl_page404__link {
  display: block;
  margin: 0 auto;
  width: 260px;
  height: 64px;
  box-shadow: 0 5px 0 #9c1007, inset 0 0 18px rgba(253, 60, 0, 0.75);
  background-color: #f95801;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 64px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 30px;
  text-align: center;
}
.bl_page404__link:hover,
.bl_page404__link:focus {
  background-color: #ff7400;
}
.bl_page404__el1 {
  position: absolute;
  top: 108px;
  left: 102px;
  opacity: 1;
  animation: el1Move 800ms linear infinite;
  width: 84px;
  height: 106px;
  background: url("https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-1.png?raw=true")
    50% 50% no-repeat;
  z-index: 2;
}
.bl_page404__el2 {
  position: absolute;
  top: 92px;
  left: 136px;
  opacity: 1;
  animation: el2Move 800ms linear infinite;
  width: 184px;
  height: 106px;
  background: url("https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-2.png?raw=true")
    50% 50% no-repeat;
  z-index: 2;
}
.bl_page404__el3 {
  position: absolute;
  top: 108px;
  left: 180px;
  opacity: 1;
  animation: el3Move 800ms linear infinite;
  width: 284px;
  height: 106px;
  background: url("https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-3.png?raw=true")
    50% 50% no-repeat;
  z-index: 2;
}
@keyframes el1Move {
  0% {
    top: 108px;
    left: 102px;
    opacity: 1;
  }
  100% {
    top: -10px;
    left: 22px;
    opacity: 0;
  }
}
@keyframes el2Move {
  0% {
    top: 92px;
    left: 136px;
    opacity: 1;
  }
  100% {
    top: -10px;
    left: 108px;
    opacity: 0;
  }
}
@keyframes el3Move {
  0% {
    top: 108px;
    left: 180px;
    opacity: 1;
  }
  100% {
    top: 28px;
    left: 276px;
    opacity: 0;
  }
}
404 Page Using HTML and CSS
404 Page Using HTML and CSS

 

The project is now finished, we have completed flip card design using HTML & CSS. Now look at the live preview.

Output:

Live Preview Of Project 404 Error Page Animated Using HTML & CSS


you can use this project directly by copying into your  IDE. WE hope you understood the project , If you any doubt feel free to comment!!

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By : @arun
Code by : @Andry Zirka

Leave a Reply