In this website, we are trying to update more 404 error page template. This is the mobile responsive error page design.
Simple 404 page template code
Features of this free 404 page template
- Simple
- Easy to use
- Less CSS included
Example code for error page html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple 404 error page</title>
<style>
body{
padding:0;
}
.error-page{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height:100vh;
font-family: monospace;
}
span{
font-size: 400px;
}
h1{
font-size: 48px;
margin:0;
}
a{
background-color: #dddddd;
padding:10px 50px;
color: #000000;
border-radius: 7px;
box-shadow: 2px 2px 10px #000000;
cursor: pointer;
text-decoration: none;
}
/* mobile responsive code */
@media only screen and (max-width: 600px) {
span{
font-size: 200px!important;
}
h1{
font-size: 42px!important;
}
.error-page p{
text-align: center;
}
}
</style>
</head>
<body>
<div class="error-page">
<span>404</span>
<h1>Page not found</h1>
<p>The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.</p>
<a href="https://owlcoders.com">Go Back</a>
</div>
</body>
</html>Hope this code helps you 🙂
for more free 404 page template, visit this link 404 page html template