making your own 404 error page will add to your website more credibility and will make it more professional.
in this article, I will give you 3 professional 404 error pages that you can easily implement in your web site.
Video tutorial :
HTML PART
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style/main.css">
</head>
<body>
<div class="filter">
</div>
<div class="error">
<h1>404</h1>
<p>Sorry, your page went for a long trip and we don’t know when she will come.</p>
<a href="#"><div class="btn">return home</div></a>
</div>
</body>
</html>
CSS PART :
*{
margin: 0;
padding: 0;
outline: 0;
}
body{
width: 100vw;
height: 100vh;
background-image: url(https://images.unsplash.com/photo-1421338443270-0dde2463976a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1682&q=80);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.filter{
position: absolute;
z-index: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
opacity: .7;
}
.error{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
text-align: center;
color: #fff;
font-family: sans-serif;
}
h1{
font-size: 105pt;
margin: 0;
}
p{
text-align: left;
width:425px;
font-size: 14pt;
margin-bottom: 15px;
}
a{
text-decoration: none;
}
.btn{
padding: 10px 0;
width: 425px;
color: #fff;
font-size: 18pt;
border: 2px solid white;
border-radius: 10px;
transition: .4s;
}
.btn:hover{
background-color: #fff;
color: #000;
}
HTML part :
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style/main2.css">
</head>
<body>
<div class="filter">
</div>
<div class="error">
<h1>404</h1>
<p>sorry we can’t find the page that you’re looking for :(</p>
<a href="#"><div class="btn">return home</div></a>
</div>
</body>
</html>
CSS PART :
*{
margin: 0;
padding: 0;
outline: 0;
}
body{
width: 100vw;
height: 100vh;
background-image: url(https://images.unsplash.com/photo-1548313098-005775a175c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.filter{
position: absolute;
z-index: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
opacity: .7;
}
.error{
position: absolute;
top: 50%;
right: 20%;
color: white;
transform: translateY(-50%);
text-align: center;
font-family: 'Arial',sans-serif;
}
h1{
font-size: 105pt;
margin: 0;
}
p{
text-align: left;
width:425px;
font-size: 16pt;
margin-bottom: 15px;
}
a{
text-decoration: none;
}
.btn{
padding: 10px 0;
width: 425px;
color: #fff;
font-size: 18pt;
border: 2px solid white;
border-radius: 10px;
transition: .4s;
}
.btn:hover{
background-color: #fff;
color: #000;
}
for the error sign, you can download this picture :
 |
| error sign |
HTML PART :
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style/main3.css">
</head>
<body>
<h1>404 ERROR</h1>
<div class="error">
<img src="error.png">
<h1>Oops !</h1>
<p>we are enable to find your page</p>
<a href="#"><div class="btn">Go home</div></a>
</div>
</body>
</html>
CSS PART :
*{
margin: 0;
padding: 0;
outline: 0;
font-family: 'Arial',sans-serif;
}
body{
width: 100vw;
height: 100vh;
background-color: #212121;
}
h1{
text-align: center;
color: white;
font-size: 63pt;
}
.error{
background-color: #f15f5f;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
text-align: center;
padding: 20px;
width: 50%;
}
.error p{
color: white;
margin: 5px 0;
font-size: 16pt;
}
a{
text-decoration: none;
text-align: center;
}
.btn{
position: relative;
padding: 10px 0;
width: 425px;
color: #fff;
left: 50%;
transform: translateX(-50%);
font-size: 18pt;
border: 2px solid white;
border-radius: 10px;
transition: .4s;
}
.btn:hover{
background-color: #fff;
color: #f15f5f;
}
Thank you for reading, if you liked these templates and you want more please tell us in the comment section.
free 3 professional 404 error pages for your website
Reviewed by Medics
on
March 19, 2019
Rating:
Reviewed by Medics
on
March 19, 2019
Rating:
No comments: