Custom 404 Page: Page Not Found
If you've ever encountered a "404 - Page Not Found" error, you might have seen a boring and generic error page. However, it doesn't have to be that way! In this article, we'll show you how to create a custom and visually appealing 404 error page using HTML and CSS. Let's get started!
HTML Markup: First, let's set up the HTML structure for our custom 404 error page.
<!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="styles.css">
<title>404 Page Not Found</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">
<!-- SVG paths go here -->
</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 Styles:
Next, let's apply the CSS styles to create the visual effects and layout for our error page.
body {
background-color: #2F3242;
}
svg {
/* SVG position styles go here */
}
.message-box {
/* Message box styles go here */
}
.message-box h1 {
/* Heading styles go here */
}
.buttons-con .action-link-wrap a {
/* Button styles go here */
}
/* SVG animation styles */
#Polygon-1 , #Polygon-2 , #Polygon-3 , #Polygon-4 , #Polygon-4, #Polygon-5 {
/* Animation styles go here */
}
@keyframes float {
/* Float animation styles go here */
}
/* Responsive styles for smaller screens */
@media (max-width: 450px) {
svg {
/* Responsive SVG position styles go here */
}
.message-box {
/* Responsive message box styles go here */
}
}
Conclusion:In this article, we've shown you how to create a custom and visually appealing 404 error page using HTML and CSS. The error page features an animated SVG and a friendly message, along with two buttons to guide users back to safety - either to the previous page or to the homepage.
Customizing your 404 page not only provides a better user experience but also adds a touch of uniqueness to your website. Feel free to experiment with different colors, animations, and messages to match your website's theme and branding.
Now you have a stylish and engaging 404 error page that will keep your users entertained even when they end up on a dead-end. Happy coding!