404 Error Page Html Codepen

MUAZHAN

5 min read

·

Jun 28, 2024

27

Share

404 Error Page with HTML and CSS: A Simple Guide

A 404 error page, also known as a "Not Found" page, is a crucial part of any website. It's displayed when a user tries to access a page that doesn't exist. Instead of just showing a generic error message, you can create a custom 404 page that's both informative and engaging.

Here's a simple guide to creating a basic 404 error page using HTML and CSS, which you can easily customize and improve upon.

1. HTML Structure

The HTML code for a basic 404 page is straightforward:

    
    
    
    


    

        
Oops! Page Not Found
        
The page you are looking for does not exist.
        Go Back Home
    

In this code:

• We have a basic HTML structure with a title, a div with the class "container" to hold the content, an h1 for the main error message, a p tag for a descriptive message, and a button to return to the homepage.

2. CSS Styling

Next, let's add some style to the page using CSS:

body {
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
}

.container {
    text-align: center;
    padding: 30px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h1 {
    font-size: 3em;
    color: #333;
    margin-bottom: 20px;
}

p {
    font-size: 1.2em;
    color: #666;
}

.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #0056b3;
}

This CSS code:

• Sets the basic body style, including font, alignment, background color, and minimum height.
• Styles the container with padding, background color, rounded corners, and a subtle box shadow.
• Styles the h1 with a larger font size and dark color.
• Styles the p tag with a larger font size and a lighter color.
• Styles the button with padding, background color, rounded corners, and a hover effect.

3. CodePen Integration

Now that you have the HTML and CSS code, you can easily create and test the 404 page on CodePen.

1. Create a New Pen: Go to and click "Create New Pen."
2. Add HTML and CSS: Paste the code into the HTML and CSS sections of CodePen.
3. Preview and Test: Click the "Run" button to see the live preview of your 404 page.

Conclusion

This is a simple example of a 404 error page using HTML and CSS. You can easily customize this code by adding more content, images, and styles to make your error page more engaging and informative. Remember to keep it user-friendly, helpful, and visually appealing.