Develop a custom 404 error page with animations to makeit more engaging.

Hey, I am Ajink, and today in this blog, we’re going to develop a custom 404 error page with engaging animations using HTML, CSS, and JavaScript. A custom 404 page not only informs users that they’ve reached a non-existent page but also provides a visually appealing and engaging experience.

HTML Code: create index.html

<!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 Not Found</title>
</head>
<body>
  <div class="error-container">
    <div class="error-content">
      <div class="error-message">
        <h1>404</h1>
        <p>Oops! Page not found.</p>
      </div>
      <div class="animated-bg"></div>
    </div>
  </div>
  <script defer src="script.js"></script>
</body>
</html>

HTML Code Explanation:

  • We have a basic HTML structure with a container and content div containing an error message and an animated background.

CSS Code:

body {
  margin: 0;
  font-family: 'Arial', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #3498db;
  overflow: hidden;
}

.error-container {
  text-align: center;
}

.error-content {
  position: relative;
}

.error-message {
  color: #fff;
  z-index: 2;
}

.error-message h1 {
  font-size: 8em;
  margin: 0;
}

.error-message p {
  font-size: 1.5em;
  margin: 10px 0 30px;
}

.animated-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: slide 3s linear infinite;
}

@keyframes slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

CSS Code Explanation:

  • The CSS provides styling for the custom 404 error page, including colors, fonts, and animations.
  • The .animated-bg class creates a sliding animation to give a dynamic effect.

Conclusion:

In this blog, we successfully developed a custom 404 error page with engaging animations using HTML, CSS, and JavaScript. A well-designed error page can turn a negative experience into a positive one. Don’t forget to subscribe to my YouTube channel at youtube.com/@ajink21 for more exciting tutorials.

Thanks for reading, and if you have any doubts, feel free to comment!

Related Articles

Responses

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