Hello friends, today we will be going to create custom 404 page Using Html, CSS. I have posted many videos and articles before related to the JavaScript project, now this the something new that we are going to build.
Video Tutorial of How to create custom 404 page Using Html, CSS
As you have seen on the given video tutorial of custom 404 page Using Html, CSS,
If you are feeling bored watching the given video tutorial of custom 404 page Using Html, CSS then you can copy or download the given codes below:
custom 404 page Using Html, CSS | Free Source Code
To create this program (custom 404 page). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.
In the first place, make a HTML document with the name of index.html and glue the given codes in your HTML record. Keep in mind, you've to make a document with .html extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Not Found</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="error-page">
<div class="content">
<div class="header">
<img src="./404 Error.gif" alt="">
</div>
<h4 data-text="Opps! Page not found">Opps! Page not found</h4>
<p>Sorry, the page you are looking for does not exist. If you think something
is broken, report a problem.</p>
<div class="btns">
<a href="">Return Home</a>
<a href="">Report Problem</a>
</div>
</div>
</div>
</body>
</html>Second, make a CSS record with the name of style.css and glue the given codes in your CSS document. Keep in mind, you've to make a record with .css extension.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
background: #fff;
}
#error-page{
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#error-page .content{
max-width: 650px;
text-align: center;
}
#error-page .header img{
width: 380px;
}
#error-page h4{
position: relative;
color: #000;
font-size: 2em;
text-transform: uppercase;
margin-bottom: 20px;
}
#error-page h4::before{
position: absolute;
content: attr(data-text);
top: 0;
left: 0;
right: 0;
text-shadow: 1px 1px 2px rgba(255,255,255,0.4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#error-page p{
font-size: 1.2em;
color: #0d0d0d;
}
#error-page .btns{
margin: 25px 0px;
display: inline-flex;
}
#error-page .btns a{
display: inline-block;
text-decoration: none;
padding: 10px 25px;
border: 2px solid #69a6ce;
color: #69a6ce;
border-radius: 25px;
font-weight: 500;
margin: 0px 10px;
text-transform: uppercase;
transition: all 0.3s ease;
}
#error-page .btns a:hover{
background: #69a6ce;
color: #fff;
}Last, create a htaccess file with the name of .htaccess and paste the given codes in your htaccess file.
RewriteEngine On
RewriteCond %{REQUEST_FILENAME}% !-f
RewriteCond %{REQUEST_FILENAME}% !-d
ErrorDocument 404 /stech04/404.html
That's all, now you've successfully created a program custom 404 page Using Html, CSS. If your code doesn't work or you've faced any error/problem, please download the source code files from the given download button. It's free and a .zip file will be downloaded then you've to extract it.
Click on the following download button to download all source code files.
Make sure that you are using this code on online server or localhost server (xampp server) other wise it's not working.
Post a Comment
How can I help you