Animated 404 Error Page HTML CSS

Animated 404 Error Page HTML CSS

Table of Contents

Introduction of 404 Error Page HTML CSS

Here today we are presenting you our latest new project with amazing Animated 404 Error Page HTML CSS. In this project, there will be an animation on the right side of the page. Some text will be written on the left side, which will indicate that there is an error on the website. There will be two buttons, one to go back and another to go home. The animation will be continuously animated until the user is active on the website.

Now let’s start making this project by using the simple and easy code of HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheet). The code will not be very complicated; we have used here the basic concept of the code so everyone can understand it, whether they are a fresher or an experienced guy. You just need to follow us step by step. If you have any problems, you can contact us through the contact details given in the footer of the page.

HTML (Hyper Text Markup Language)

First, we will make the structure of this Animated 404 Error Page HTML CSS with the help of HTML (the Hyper markup language used to make the structure of any web page on a website). In this, we will give the title of the project in the title tag (which is used to give the title). Then we will move toward the main content of the code. In this, we will use the concept of SVG (standard vector graphics used to define vector-based graphics in web development).

In this, we will use their concept, which also includes the path and g tag. Now we will use normal HTML, in which we will make a parent div. In this parent div, we will give the heading in the h1 tag (which is used to give the heading). the paragraph in the p tag (which is used to write some paragraph about any heading). There will also be two buttons, one for going back and another for going home.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>404 error page html</title>
</head>
<body>

    <svg width="380px" height="500px" viewBox="0 0 837 1045" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
            <path d="M353,9 L626.664028,170 L626.664028,487 L353,642 L79.3359724,487 L79.3359724,170 L353,9 Z" id="Polygon-1" stroke="#007FB2" stroke-width="6" sketch:type="MSShapeGroup"></path>
            <path d="M78.5,529 L147,569.186414 L147,648.311216 L78.5,687 L10,648.311216 L10,569.186414 L78.5,529 Z" id="Polygon-2" stroke="#EF4A5B" stroke-width="6" sketch:type="MSShapeGroup"></path>
            <path d="M773,186 L827,217.538705 L827,279.636651 L773,310 L719,279.636651 L719,217.538705 L773,186 Z" id="Polygon-3" stroke="#795D9C" stroke-width="6" sketch:type="MSShapeGroup"></path>
            <path d="M639,529 L773,607.846761 L773,763.091627 L639,839 L505,763.091627 L505,607.846761 L639,529 Z" id="Polygon-4" stroke="#F2773F" stroke-width="6" sketch:type="MSShapeGroup"></path>
            <path d="M281,801 L383,861.025276 L383,979.21169 L281,1037 L179,979.21169 L179,861.025276 L281,801 Z" id="Polygon-5" stroke="#36B455" stroke-width="6" sketch:type="MSShapeGroup"></path>
        </g>
    </svg>
    <div class="message-box">
      <h1>404</h1>
      <p>Page not found</p>
      <div class="buttons-con">
        <div class="action-link-wrap">
          <a onclick="history.back(-1)" class="link-button link-back-button">Go Back</a>
          <a href="" class="link-button">Go to Home Page</a>
        </div>
      </div>
    </div>
</body>
</html>

CSS (Cascading Style Sheet)

After making the structure of this Animated 404 Error Page HTML CSS. We will now give it styling with the help of CSS (Cascading Style Sheet is used to give the design to the HTML web page and to make the website responsive). In this, we will first make the background colorful. Then we will move toward the main content of the page. Where we will give styling to the svg tag for animation, including the g and path tags. Now we will adjust the size and position of the parent div below the svg tag. Then we will design the inner elements of the div. In this, we will give color, size, and position to the heading, paragraph. Also to both buttons, and we will also give the hovering effect to the buttons. When hovered, the color will change.

body {
    background-color: #2F3242;
  }
  svg {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -250px;
    margin-left: -400px;
  }
  .message-box {
    height: 200px;
    width: 380px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: 50px;
    color: #FFF;
    font-family: Roboto;
    font-weight: 300;
  }
  .message-box h1 {
    font-size: 60px;
    line-height: 46px;
    margin-bottom: 40px;
  }
  .buttons-con .action-link-wrap {
    margin-top: 40px;
  }
  .buttons-con .action-link-wrap a {
    background: #68c950;
    padding: 8px 25px;
    border-radius: 4px;
    color: #FFF;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s linear;
    cursor: pointer;
    text-decoration: none;
    margin-right: 10px
  }
  .buttons-con .action-link-wrap a:hover {
    background: #5A5C6C;
    color: #fff;
  }
  
  #Polygon-1 , #Polygon-2 , #Polygon-3 , #Polygon-4 , #Polygon-4, #Polygon-5 {
    animation: float 1s infinite ease-in-out alternate;
  }
  #Polygon-2 {
    animation-delay: .2s; 
  }
  #Polygon-3 {
    animation-delay: .4s; 
  }
  #Polygon-4 {
    animation-delay: .6s; 
  }
  #Polygon-5 {
    animation-delay: .8s; 
  }
  
  @keyframes float {
      100% {
      transform: translateY(20px);
    }
  }
  @media (max-width: 450px) {
    svg {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -250px;
      margin-left: -190px;
    }
    .message-box {
      top: 50%;
      left: 50%;
      margin-top: -100px;
      margin-left: -190px;
      text-align: center;
    }
  }

Output of 404 Error Page CSS

Finally, we have made the fully Animated 404 Error Page HTML CSS with the help of following the code for HTML and CSS step by step. I hope you have understood the code completely. We can use it on your website to show errors when there are technical issues. You can make such a project by taking ideas from here that will enhance your knowledge. You can change the style of our page according to your preferences. If you want the source code of 404 Error Page HTML CSS, then click on the button given below to download the code.

Animated 404 Error Page HTML CSS

For more explanation, click on the link given below to watch the video.

You can also check:

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow Us

Latest Posts

Quick Links