Create a 404 page using HTML and CSS
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: