Creating a simple 404 page using HTML and CSS is a straightforward
process. A 404 page is displayed when a user tries to access a page on
your website that doesn't exist. It's essential to create a
user-friendly and informative 404 page to help your visitors navigate
your website effectively. Here's a step-by-step tutorial on how to
create a basic 404 page:
Step 1: Set up your project
Create a new folder for your project and create two files inside it:
404.html and style.css.Step 2: Create the HTML structure (404.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 - Page Not Found</title>
</head>
<body>
<div class="container">
<h1>404</h1>
<p>Page Not Found</p>
<p>Sorry, the page you are looking for does not exist.</p>
<a href="/">Go back to the home page</a>
</div>
<div class="footer">
<p>Explore more:</p>
<div class="links">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</body>
</html>
In this HTML structure, we've included a basic heading, a message
informing the user that the page was not found, and a link back to the
home page. You can customize this content as needed.
/* Reset some default styles to ensure consistency across browsers */
body,
h1,
p,
a {
margin: 0;
padding: 0;
}
/* Set the background color and font for the entire page */
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
text-align: center;
}
/* Style the container for the 404 content */
.container {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
margin: 100px auto;
max-width: 400px;
padding: 20px;
}
/* Style the 404 heading */
h1 {
color: #e74c3c;
font-size: 100px;
}
/* Style the paragraph text */
p {
font-size: 18px;
margin: 20px 0;
}
/* Style the link to the home page */
a {
color: #3498db;
text-decoration: none;
font-weight: bold;
}
/* Style the footer */
.footer {
background-color: #2c3e50;
color: #ecf0f1;
padding: 20px 0;
}
/* Style the "Explore more" text in the footer */
.footer p {
font-size: 18px;
}
/* Style the links with images */
.links {
display: flex;
justify-content: center;
margin-top: 10px;
}
.links a {
display: block;
margin: 0 20px;
text-decoration: none;
color: #ecf0f1;
transition: color 0.3s;
}
.links a:hover {
color: #3498db;
}
In this CSS, we've styled the 404 page with a container for the content, centered it on the page, and added some basic styles for the heading, text, and link.
Step 4: Testing
Open the 404.html file in a web browser to test your 404 page. You can also link to it from your website by configuring your web server to serve the 404.html page when a 404 error occurs.
That's it! You've created a simple and visually appealing 404 page using HTML and CSS. You can further customize the design and content to match your website's branding and style.