How to Create HTML 404 Template

by
How to Create an HTML 404 Template

If you want to create a 404 page on your website and find HTML code for it, then I will help you. As a developer, I created an HTML code for a 404 template that meets your needs.

In this post, I will teach you step-by-step how to create an HTML 404 template. This code is copyright-free You can use it without any issues.

The design of this page is simple and user-engaging, and it also has a button titled “Back to Home” that redirects to the main page of the website when clicked.

Even if you’re a complete beginner, you’ll be able to follow this tutorial and create a professional-looking 404 page quickly and easily. So what are you waiting for? Let’s get started!

Also Read:

Html 404 Template

Preview

Demo

Author

Zobayearul Islam

Edit On

Github

Language

HTML & CSS

Responsive

Yes

Step-by-Step Guidance to Create a 404 Page

A custom 404 page is a great way to improve the user experience of your website. It provides users with a friendly and informative message when they land on a page that doesn’t exist. It also helps to keep users on your website, rather than sending them to a generic error page.

To create a custom 404 page, you will need to create an HTML file and add some CSS. If you’re not familiar with coding, don’t worry. I will explain everything you need to know in this tutorial.

Step 1: Create an HTML File

To create an HTML file, open a new text editor and type the following code:

The HTML document begins with the standard DOCTYPE declaration and html element with lang attribute set to English. Inside the head tag, character encoding, viewport settings, a link to the external stylesheet, and the page title are defined.

The body of the document contains a div with the class page-wrapper, which serves as the container for all page elements. Inside this wrapper, there are three main layers:

  1. circles-layer: Contains animated circles that create a dynamic background.
  2. numbers-layer: Features animated numbers that will pop in and out, creating a playful effect.
  3. oops-message: Displays a message indicating that the website is coming soon and a ‘back to home‘ button.

The circles layer contains four divs, each with a different class: circle, -white, -red, and -with-shadow. The circle class defines the basic properties of the circles, such as their size, border, and position. The -white, -red, and -with-shadow classes define the colors and shadows of the circles.

The numbers layer contains ten divs, each with a different class: number, -with-shadow, and -with-shadow-404. The number class defines the basic properties of the numbers, such as their size, font, and position. The -with-shadow and -with-shadow-404 classes define the shadows of the numbers and the specific shadow for the “404” numbers.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>404 page design by zobayerul</title>
</head>

<body>
    <div class="page-wrapper">
        <div class="circles-layer">
            <div class="circle -white"></div>
            <div class="circle -red"></div>
            <div class="circle -white"></div>
            <div class="circle -red"></div>
        </div>
        <div class="numbers-layer">
            <div class="number">4</div>
            <div class="number">4</div>
            <div class="number">4</div>
            <div class="number">4</div>
            <div class="number">4</div>
            <div class="number">4</div>
            <div class="number">4</div>
            <div class="number">4</div>
            <div class="number -with-shadow">0</div>
            <div class="number -with-shadow">0</div>
            <div class="number -with-shadow">0</div>
            <div class="number -with-shadow">0</div>
        </div>
        <div class="oops-message">
            <div class="test">Website Coming Soon</div>
            <a class="button" href="example.com/home">Back to Home</a>
        </div>
    </div>

</body>

</html>
HTML

Step 2: Create a CSS File

The .page-wrapper is our canvas, where the animation takes place. It’s centered on the page and given a shadow for a touch of depth.

The .circles-layer contains our pulsating circles. Each circle is animated to scale up and remain in place, creating a continuous heartbeat effect. The use of CSS custom properties for colors makes it easy to maintain and update the design.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --white:    #FFFFFF;
    --red:      #FF3F3F;
    --dark-red: #AA2727;
    
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: calc( 14px + (25 - 14) * ((100vw - 400px) / ( 1200 - 400)));
}

body {
    background: var(--red);
}

.page-wrapper {
    position: relative;
    height: 90vh;
    width: 90vw;
    margin: 5vh 0 0 5vw;
    overflow: hidden;
    background: var(--red);
    box-shadow: 0 2rem 3rem var(--dark-red);
}

@-webkit-keyframes circle-animation {
    0%   { -webkit-transform: translateX(-50%) translateY(-50%) scale(0); transform: translateX(-50%) translateY(-50%) scale(0); }
    10%  { -webkit-transform: translateX(-50%) translateY(-50%) scale(1); transform: translateX(-50%) translateY(-50%) scale(1); }
    100% { -webkit-transform: translateX(-50%) translateY(-50%) scale(1); transform: translateX(-50%) translateY(-50%) scale(1); }
}

@keyframes circle-animation {
    0%   { -webkit-transform: translateX(-50%) translateY(-50%) scale(0); transform: translateX(-50%) translateY(-50%) scale(0); }
    10%  { -webkit-transform: translateX(-50%) translateY(-50%) scale(1); transform: translateX(-50%) translateY(-50%) scale(1); }
    100% { -webkit-transform: translateX(-50%) translateY(-50%) scale(1); transform: translateX(-50%) translateY(-50%) scale(1); }
}

.circles-layer {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.circles-layer > .circle {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 300vw;
        width: 300vw;
        -webkit-transform: translateX(-50%) translateY(-50%);
                transform: translateX(-50%) translateY(-50%);
        border-radius: 50%;
        -webkit-animation: circle-animation 10s linear infinite;
                animation: circle-animation 10s linear infinite;
        will-change: transform;
    }

.circles-layer > .circle.-white {
            border: 30vw solid var(--white);
        }

.circles-layer > .circle.-red {
            border: 25vw solid var(--dark-red);
        }

.circles-layer > .circle:nth-of-type(2) {
            -webkit-animation-delay: 100ms;
                    animation-delay: 100ms;
        }

.circles-layer > .circle:nth-of-type(3) {
            -webkit-animation-delay: 150ms;
                    animation-delay: 150ms;
        }

.circles-layer > .circle:nth-of-type(4) {
            -webkit-animation-delay: 200ms;
                    animation-delay: 200ms;
        }
CSS

The .numbers-layer is where the 404 message comes to life. Each number is individually animated to scale in and out, giving the impression of a random sequence of numbers popping up before revealing the ‘404’ message.

The .oops-message section is straightforward and clear. It’s placed at the bottom of the page, ensuring it doesn’t compete with the animated elements for attention but is still clearly visible for the user to read.

Finally, the .button provides a clear message to go back to the home page.

@-webkit-keyframes number-animation {
    0%   { -webkit-transform: scale(0); transform: scale(0);   opacity: 0; }
    30%  { -webkit-transform: scale(0); transform: scale(0);   opacity: 0; }
    32%  { -webkit-transform: scale(.95); transform: scale(.95); opacity: 1; }
    35%  { -webkit-transform: scale(1); transform: scale(1);   opacity: 1; }
    37%  { -webkit-transform: scale(1); transform: scale(1);   opacity: 1; }
    40%  { -webkit-transform: scale(0); transform: scale(0);   opacity: 0; }
    50%  { -webkit-transform: scale(0); transform: scale(0);   opacity: 0; }
    52%  { -webkit-transform: scale(.45); transform: scale(.45); opacity: 1; }
    55%  { -webkit-transform: scale(.5); transform: scale(.5);  opacity: 1; }
    57%  { -webkit-transform: scale(.5); transform: scale(.5);  opacity: 1; }
    60%  { -webkit-transform: scale(0); transform: scale(0);   opacity: 0; }
    70%  { -webkit-transform: scale(0); transform: scale(0);   opacity: 0; }
    72%  { -webkit-transform: scale(.75); transform: scale(.75); opacity: 1; }
    75%  { -webkit-transform: scale(.8); transform: scale(.8);  opacity: 1; }
    77%  { -webkit-transform: scale(.8); transform: scale(.8);  opacity: 1; } 
    80%  { -webkit-transform: scale(0); transform: scale(0);   opacity: 0; }
    100% { -webkit-transform: scale(0); transform: scale(0);   opacity: 0; }
}

@keyframes number-animation {
    0%   { -webkit-transform: scale(0); transform: scale(0);   opacity: 0; }
    30%  { -webkit-transform: scale(0); transform: scale(0);   opacity: 0; }
    32%  { -webkit-transform: scale(.95); transform: scale(.95); opacity: 1; }
    35%  { -webkit-transform: scale(1); transform: scale(1);   opacity: 1; }
    37%  { -webkit-transform: scale(1); transform: scale(1);   opacity: 1; }
    40%  { -webkit-transform: scale(0); transform: scale(0);   opacity: 0; }
    50%  { -webkit-transform: scale(0); transform: scale(0);   opacity: 0; }
    52%  { -webkit-transform: scale(.45); transform: scale(.45); opacity: 1; }
    55%  { -webkit-transform: scale(.5); transform: scale(.5);  opacity: 1; }
    57%  { -webkit-transform: scale(.5); transform: scale(.5);  opacity: 1; }
    60%  { -webkit-transform: scale(0); transform: scale(0);   opacity: 0; }
    70%  { -webkit-transform: scale(0); transform: scale(0);   opacity: 0; }
    72%  { -webkit-transform: scale(.75); transform: scale(.75); opacity: 1; }
    75%  { -webkit-transform: scale(.8); transform: scale(.8);  opacity: 1; }
    77%  { -webkit-transform: scale(.8); transform: scale(.8);  opacity: 1; } 
    80%  { -webkit-transform: scale(0); transform: scale(0);   opacity: 0; }
    100% { -webkit-transform: scale(0); transform: scale(0);   opacity: 0; }
}

.numbers-layer {
    position: absolute;
    top: -1rem;
    left: -1rem;
    height: 100%;
    width: 100%;
}

.numbers-layer > .number {
        position: absolute;
        font-size: 10rem;
        color: var(--white);
        -webkit-transform: scale(0);
                transform: scale(0);
        opacity: 0;
        font-weight: 200;
        -webkit-animation: number-animation 10s linear infinite;
                animation: number-animation 10s linear infinite;
        will-change: transform, opacity;
    }

.numbers-layer > .number.-with-shadow {
            text-shadow: 1rem 1rem var(--dark-red);
        }

.numbers-layer > .number:nth-of-type(1)  { top: 5%;  left: 5%;  -webkit-animation-delay:  0;  animation-delay:  0;    }

.numbers-layer > .number:nth-of-type(2)  { top: 15%; left: 55%; -webkit-animation-delay: 40ms; animation-delay: 40ms; 
        font-size: 15rem; }

.numbers-layer > .number:nth-of-type(3)  { top: 25%; left: 15%; -webkit-animation-delay: 80ms; animation-delay: 80ms; }

.numbers-layer > .number:nth-of-type(4)  { top: 75%; left: 20%; -webkit-animation-delay: 120ms; animation-delay: 120ms; }

.numbers-layer > .number:nth-of-type(5)  { top: 25%; left: 75%; -webkit-animation-delay: 160ms; animation-delay: 160ms; 
        font-size: 6rem; }

.numbers-layer > .number:nth-of-type(6)  { top: 65%; left: 45%; -webkit-animation-delay: 200ms; animation-delay: 200ms; }

.numbers-layer > .number:nth-of-type(7)  { top: 45%; left: 85%; -webkit-animation-delay: 240ms; animation-delay: 240ms; }

.numbers-layer > .number:nth-of-type(8)  { top: 10%; left: 85%; -webkit-animation-delay: 280ms; animation-delay: 280ms; }

.numbers-layer > .number:nth-of-type(9)  { top: 40%; left: 35%; -webkit-animation-delay: 320ms; animation-delay: 320ms; 
        font-size: 15rem; }

.numbers-layer > .number:nth-of-type(10) { top: 70%; left: 65%; -webkit-animation-delay: 360ms; animation-delay: 360ms; }

.numbers-layer > .number:nth-of-type(11) { top: 10%; left: 30%; -webkit-animation-delay: 400ms; animation-delay: 400ms; 
        font-size: 6rem; }

.numbers-layer > .number:nth-of-type(12) { top: 45%; left: 10%; -webkit-animation-delay: 440ms; animation-delay: 440ms; }

.oops-message {
    position: absolute;
    width: 20rem;
    left: 50%;
    bottom: 2rem;
    margin-left: -10rem;
    font-weight: 400;
    text-align: center;
    color: var(--white);
}

.oops-message > .button {
        display: inline-block;
        margin-top: .5rem;
        background: var(--white);
        color: var(--red);
        padding: 0 2rem;
        line-height: 2rem;
        text-decoration: none;
        border-radius: 1rem;
        -webkit-transition: all 120ms ease-in;
        transition: all 120ms ease-in;
    }

.oops-message > .button:hover,
        .oops-message > .button:focus {
            background: var(--dark-red);
            color: var(--white);
        }
CSS

Leave a Comment