Create a 404 page using HTML and CSS

Last Updated : 21 Nov, 2023

In this article, we will see how to create a 404 page using HTML and CSS. A user when trying to access a URL that doesn’t exist or has been moved. Instead of presenting a generic error message a custom 404 page can enhance the user experience and even add a touch of creativity to your website.

Approach

Create a basic HTML structure with a standard tag <div> for container,<h1> for heading,<p> for paragraph.
Now add a button with a link attached to him with the help of an anchor tag.
Apply CSS properties for designing purposes such as transitions, background color, and text decorations.
At last, provide users with a friendly and informative error message to guide them back to the website’s main content. For example, “Oops! The page you’re looking for isn’t here.”

Example: Below is the basic implementation of a 404 page using HTML and CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title> 
        404 Page Not Found 
    </title> 
    <link rel="stylesheet" 
          href="style.css"> 
</head> 
  
<body> 
    <div class="error-container"> 
        <h1> 404 </h1> 
        <p> 
            Oops! The page you're 
            looking for is not here. 
        </p> 
        <a href="https://www.geeksforgeeks.org/"> 
            Go Back to Home 
        </a> 
    </div> 
</body> 
  
</html>

CSS

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
  
body { 
    font-family: Arial, sans-serif; 
    background-color: #D3D3D3; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
} 
  
.error-container { 
    text-align: center; 
    background-color: #fff; 
    padding: 20px; 
    border-radius: 5px; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
} 
  
h1 { 
    font-size: 5rem; 
    color: #ff5733; 
} 
  
p { 
    font-size: 1.5rem; 
    color: #333; 
    margin-bottom: 20px; 
} 
  
a { 
    text-decoration: none; 
    background-color: #ff5733; 
    color: #fff; 
    padding: 10px 20px; 
    border-radius: 3px; 
    font-weight: bold; 
    transition: background-color 0.3s ease; 
} 
  
a:hover { 
    background-color: #e6482e; 
}