CodewithLord

🧠 Description

This project showcases a creative 404 error page designed to look like a code editor or console output, built using HTML, CSS, and JavaScript. The page humorously displays an error message in the form of code syntax, giving it a developer-themed look — perfect for portfolios or tech-related websites. A smooth typing animation simulates the code being typed line-by-line, enhancing interactivity and engagement. The combination of monospace fonts, syntax highlighting, and animation makes it a visually appealing and modern 404 error design.

💻 HTML Code

1<!DOCTYPE html>
2<html lang="en">
3
4  <head>
5    <meta charset="UTF-8">
6    <title>Code-Theme 404 Page</title>
7    <link rel="stylesheet" href="./style.css">
8
9  </head>
10    
11  <body>
12  <p>HTTP: <span>404</span></p>
13<code><span>this_page</span>.<em>not_found</em> = true;</code>
14<code><span>if</span> (<b>you_spelt_it_wrong</b>) {<span>try_again()</span>;}</code>
15<code><span>else if (<b>we_screwed_up</b>)</span> {<em>alert</em>(<i>"We're really sorry about that."</i>); <span>window</span>.<em>location</em> = home;}</code>
16<center><a>HOME</a></center>
17    <script  src="./script.js"></script>
18
19  </body>
20  
21</html>
22

The HTML provides the base structure of the 404 error page.

The "p" tag displays the main error message: HTTP: 404.

Multiple "code" elements mimic programming code lines, such as variable declarations and conditional statements, to give a developer-console vibe.

Syntax-like elements such as "span," "em", "b", and "i "are used to represent keywords, variables, and strings — styled differently using CSS for code highlighting.

A "center HOME center" element acts as a navigation link back to the homepage.

The HTML structure is minimal and relies on CSS and JavaScript for styling and animation effects.

CSS Code

1@import url("https://fonts.googleapis.com/css?family=Bevan");
2* {
3  padding: 0;
4  margin: 0;
5  box-sizing: border-box;
6}
7
8body {
9  background: #282828;
10  overflow: hidden;
11}
12
13p {
14  font-family: "Bevan", cursive;
15  font-size: 130px;
16  margin: 10vh 0 0;
17  text-align: center;
18  letter-spacing: 5px;
19  background-color: black;
20  color: transparent;
21  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
22  -webkit-background-clip: text;
23  -moz-background-clip: text;
24  background-clip: text;
25}
26p span {
27  font-size: 1.2em;
28}
29
30code {
31  color: #bdbdbd;
32  text-align: center;
33  display: block;
34  font-size: 16px;
35  margin: 0 30px 25px;
36}
37code span {
38  color: #f0c674;
39}
40code i {
41  color: #b5bd68;
42}
43code em {
44  color: #b294bb;
45  font-style: unset;
46}
47code b {
48  color: #81a2be;
49  font-weight: 500;
50}
51
52a {
53  color: #8abeb7;
54  font-family: monospace;
55  font-size: 20px;
56  text-decoration: underline;
57  margin-top: 10px;
58  display: inline-block;
59}
60
61@media screen and (max-width: 880px) {
62  p {
63    font-size: 14vw;
64  }
65}

The CSS styles the page to resemble a dark code editor with syntax highlighting.

The body background is set to a dark gray #282828, matching the look of coding terminals.

The p tag (HTTP 404 message) uses a large bold Bevan font and a text shadow to give a glowing, embossed text effect.

The code tags display code lines in a monospaced font, with different colors for syntax elements:

span for yellow keywords

em for purple functions

i for green text

b for blue variables

The “HOME” link is styled with a light blue color and monospace font to blend with the code theme.

Responsive design ensures the text scales properly on smaller screens. Overall, the CSS turns a standard 404 message into a beautifully coded aesthetic.

Javascipt Code

1function type(n, t) {
2    var str = document.getElementsByTagName("code")[n].innerHTML.toString();
3    var i = 0;
4    document.getElementsByTagName("code")[n].innerHTML = "";
5
6    setTimeout(function() {
7        var se = setInterval(function() {
8            i++;
9            document.getElementsByTagName("code")[n].innerHTML =
10                str.slice(0, i) + "|";
11            if (i == str.length) {
12                clearInterval(se);
13                document.getElementsByTagName("code")[n].innerHTML = str;
14            }
15        }, 10);
16    }, t);
17}
18
19type(0, 0);
20type(1, 600);
21type(2, 1300);
22

The JavaScript adds the typing animation effect to the (code) elements.

The type() function takes two parameters:

n: which line of code to animate

t: the delay before animation starts

It retrieves the content of a specific (code) tag, clears it, and then uses setInterval to gradually reveal each character one by one — creating a typewriter animation.

Once typing is complete, it removes the blinking cursor (“|”) and displays the full line.

The function is called three times with different delays (0ms, 600ms, 1300ms) to make each code line appear sequentially. This creates a realistic typing effect, giving the illusion that the code is being written live on the screen.

Code-Style 404 Error Page with Typing Animation Using HTML, CSS & JavaScript

🧠 Description

💻 HTML Code

CSS Code

Javascipt Code

Love this component?