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 >
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 : 100 vh;
} .error-container { text-align : center ;
background-color : #fff ;
padding : 20px ;
border-radius: 5px ;
box-shadow: 0 2px 4px rgba( 0 , 0 , 0 , 0.1 );
} h 1 {
font-size : 5 rem;
color : #ff5733 ;
} p { font-size : 1.5 rem;
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.3 s ease;
} a:hover { background-color : #e6482e ;
} |
Output: