Responsive 404 Stranger Things: Custom Error Page using HTML, SCSS, and JS
Introduction:
In this tutorial, we'll create a responsive 404 error page inspired by the TV show "Stranger Things." We'll use HTML, SCSS, and JavaScript to build an interactive and visually appealing error page that engages users and guides them back to safety (your homepage). Let's get started!
HTML Markup: First, let's set up the HTML structure for our custom 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 Stranger Things</title>
</head>
<body>
<main>
<!-- SVG animation goes here -->
</main>
<div class="content">
<h1>Upside Down!</h1>
<p>Sorry, the page you are looking for doesn't exist.</p>
<a href="/" class="go-home-btn">Go Home</a>
</div>
<script src="script.js"></script>
</body>
</html>
SCSS Styles:
Next, let's apply the SCSS styles to create the visual effects and responsive design for our error page.
/* Reset and base styles go here */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #222;
color: #fff;
}
main {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.content {
text-align: center;
z-index: 1;
position: relative;
}
h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
.go-home-btn {
display: inline-block;
background-color: #E50914;
color: #fff;
padding: 1rem 2rem;
border-radius: 5px;
text-decoration: none;
transition: background-color 0.2s ease-in-out;
}
.go-home-btn:hover {
background-color: #A5050D;
}
JavaScript:
Finally, let's use JavaScript to add interactivity to our error page. We'll navigate users back to the homepage when they click the "Go Home" button.
document.querySelector('.go-home-btn').addEventListener('click', function() {
window.location.href = '/';
});
Conclusion:In this tutorial, we created a responsive 404 error page inspired by "Stranger Things" using HTML, SCSS, and JavaScript. The error page features an engaging SVG animation and a custom message, guiding users back to the homepage with a "Go Home" button. With the responsive design, the error page will adapt to different screen sizes and devices, providing a consistent and user-friendly experience.
Feel free to customize the content, styles, and SVG animation to match your website's theme and branding. You can also add more interactive elements and animations to make the error page even more captivating. Remember to handle the actual 404 errors on your server-side to redirect users to this custom error page when necessary.
Now you have a cool and functional custom 404 error page that will delight your users even when they encounter a dead-end! Happy coding!