Animated 404 Page using HTML CSS

animated 404 page

A 404 error page on any website is an error page that appears when a user tries to access any particular page that doesn't exist or isn't available. The number 404 is an HTTP status code that tells a user's browser to display a page not found. Today we will design a 404 page or error page with HTML and CSS. Some elements of this page will be animated to grab users' attention. Before collecting the source code, have a look at the video tutorial below. We have many tutorials on front-end development on our YouTube channel. If you find the videos useful then you can subscribe to our channel.

Video Tutorial:

I hope you have watched the tutorial. One of the best things about web design is the ability to create a custom 404 page. It should be easy to use, visually appealing, provide helpful information, and encourage the user to continue browsing your site. If you create a custom 404 page for your website, you can provide helpful information and resources to the user, like links to the website's homepage, search function, or other relevant pages. In this way, the website visitors can continue browsing the website and find what they are looking for, instead of abandoning the site completely. A 404 page can help improve the website's search engine rankings also. It indicates to the search engines that the page is not available and prevents them from crawling it. This can help make sure that the website's search rankings are unaffected by broken links.

You May Also Like:

Animated 404 Page using HTML CSS [ Source Code ]:

In order to create this snippet, create a new HTML file and CSS file. After that, copy the code from the code box below and paste it into your files. You can paste the code from the code box below into your files. If the code isn't working, you can download it from the button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorwen.com -->
<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 Design</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">        
        <img src="1.png" alt="">
        <h1>404</h1>
        <p>Oops! Page not found</p>
        <a href="#">Go back to homepage</a>
      </div>
</body>
</html>

ADD CSS:

* {
    box-sizing: border-box;
  }

  body {
	background-color: #0a0b3b;
	color: #fff;
	font-family: sans-serif;
}

  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }  
  
  h1 {
    font-size: 6em;
    margin: 0;
    animation: pulse 2s ease-in-out infinite;
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }

  p {
    font-size: 1.5em;
    margin: 0;
    margin-top: 20px;
  }

  a {
	display: inline-block;
	padding: 10px 20px;
	background-color: #4293ef;
	color: #fff;
	text-decoration: none;
	margin-top: 20px;
	font-size: 1.2em;
	border-radius: 50px;
	animation: bounce 1s ease-in-out infinite;
}

  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-10px);
    }
    60% {
      transform: translateY(-5px);
    }
  }

  @media (max-width: 768px) {
    h1 {
      font-size: 4em;
    }
    p {
      font-size: 1em;
    }
  }

  @media (max-width: 576px) {
    h1 {
      font-size: 3em;
    }
    p {
      font-size: 0.8em;
    }
    a {
      font-size: 1em;
    }
  }

I hope the code is working for you. The source code for many web projects can be found on our Website. To get them, click the Load More button at the bottom of the page. If you like our website, please share it with your friends. Thank you for visiting our website.

DOWNLOAD CODE

Post a Comment

Please Do not Enter any spam link in the comment box