This Simple 404 Error Page HTML Code provides a clean layout for displaying error messages. It helps guide users when a requested page isn’t found. The main functionality centers around displaying a friendly error message with a link back to the homepage, enhancing user navigation and experience.
How to Create a Simple 404 Error Page Using HTML and CSS
1. First, let’s create the HTML structure for our error page. Open your text editor and create a new HTML file named 404.html. Copy and paste the following code into your file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 Error - Page Not Found</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="main">
<div class="fzf">
<h1>Oops. 404 Error!</h1>
<p>The page you are looking for does not exist</p>
<a href="#" class="btn" data-wipe="Take Me Home">Take Me Home</a>
</div>
</div>
</body>
</html>
2. Next, let’s add some styles to make our error page look neat and presentable. Create a new file named styles.css in the same directory as your HTML file, and paste the following CSS code:
*{
transition: all 0.6s;
}
html {
height: 100%;
}
p{
margin-bottom: 20px;
}
body{
font-family: 'Lato', sans-serif;
color: #888;
margin: 0;
background: #f9f9f9 !important;
line-height: 2;
}
#main{
display: table;
width: 100%;
height: 100vh;
text-align: center;
}
.fzf{
display: table-cell;
vertical-align: middle;
}
.fzf h1{
font-size: 50px;
display: inline-block;
padding-right: 12px;
animation: type .5s alternate infinite;
}
/*
button {
border: 4px solid #888;
border-radius: 5px;
background: transparent;
color: #888;
padding: 10px;
font-size: 1em;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
button:hover {
border-radius: 10px;
background: #fff;
cursor: pointer;
}*/
[data-wipe] {
display: inline-block;
padding: 12px 18px;
text-decoration: none;
position: relative;
border: 2px solid #888;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.1em;
text-align: left;
color: #888;
overflow: hidden;
}
[data-wipe]:before, [data-wipe]:after {
content: attr(data-wipe);
padding-top: inherit;
padding-bottom: inherit;
white-space: nowrap;
position: absolute;
top: 0;
overflow: hidden;
color: #FFF;
background: #888;
}
[data-wipe]:before {
left: 0;
text-indent: 18px;
width: 0;
}
[data-wipe]:after {
padding-left: inherit;
padding-right: inherit;
left: 100%;
text-indent: calc(-100% - 36px);
transition: 0.2s ease-in-out;
}
[data-wipe]:hover:before {
width: 100%;
transition: width 0.2s ease-in-out;
}
[data-wipe]:hover:after {
left: 0;
text-indent: 0;
transition: 0s 0.2s ease-in-out;
}
@keyframes type{
from{box-shadow: inset -3px 0px 0px #888;}
to{box-shadow: inset -3px 0px 0px transparent;}
}
- HTML Structure: We use a
<div id="main">to center the content vertically and horizontally with CSS. - CSS Styling: Styles are applied to create a clean layout (
#main,.fzf), animate text (@keyframes type), and style the “Take Me Home” button ([data-wipe]).
Save both files (404.html and styles.css) in the same directory. You can now open 404.html in a web browser to see your custom 404 error page in action!
This tutorial has shown you how to quickly create and style a simple yet effective 404 error page using basic HTML and CSS code. Customizing further to match your website’s design is as simple as modifying the HTML and CSS styles to suit your needs.
