How To Create Custom 404 Page Using HTML & CSS

How To Create Custom 404 Page Using HTML & CSS

A custom 404 error page is a webpage that is displayed to a user when they try to access a webpage that does not exist on a website. This page is often used to provide helpful information to the user, such as alternative links to popular pages on the website or a search bar to help them find what they are looking for.

To create a custom 404 error page using HTML & CSS, you will need to have basic knowledge of both languages. First, you will need to create a new HTML file and structure it using the necessary tags, such as the <html>, <head>, and <body> tags. Within the <head> tag, you can add a <title> tag to specify the title of the page, as well as <meta> tags to provide a description and keywords for search engine optimization (SEO).

Next, you can use the <body> tag to add content to the page. This can include text, images, and other elements such as buttons or links. You can use CSS to style the page, including the layout, colors, and fonts. It is important to make the custom 404 error page user-friendly and easy to navigate.

This can help improve the user experience and keep visitors on your website. You may want to include a search bar or links to popular pages on your website to help users find what they are looking for.

Video Tutorial of How To Create Custom 404 Page Using HTML & CSS

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 paste the given codes in your HTML record. Keep in mind, you’ve to make a document with .html extension.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
* {
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;
}
* { 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; }
* {
    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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
RewriteEngine On
RewriteCond %{REQUEST_FILENAME}% !-f
RewriteCond %{REQUEST_FILENAME}% !-d
ErrorDocument 404 /stech04/404.html
RewriteEngine On RewriteCond %{REQUEST_FILENAME}% !-f RewriteCond %{REQUEST_FILENAME}% !-d ErrorDocument 404 /stech04/404.html
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.

Download Now
Please Wait...
Direct Link Click Here
Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *