CodewithLord

🧠 Description

This project demonstrates a stylish animated 404 error page built using Bootstrap, custom CSS, and JavaScript.

The page features a rolling number animation where random digits spin before settling into 404, combined with skewed clipping effects and shadow layers that add depth and motion. A minimal message bubble (“OH!”) enhances the visual feedback when users land on a missing page.

The layout is fully responsive and adapts seamlessly across desktop and mobile devices, making it suitable for modern websites and dashboards.

💻 HTML Code

1<!DOCTYPE html>
2<html lang="en">
3
4  <head>
5    <meta charset="UTF-8">
6    <title>Error 404 Page design BOOTSTRAP</title>
7    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
8
9  </head>
10    
11  <body>
12  <link href='https://fonts.googleapis.com/css?family=Anton|Passion+One|PT+Sans+Caption' rel='stylesheet' type='text/css'>
13<body>
14
15        <!-- Error Page -->
16            <div class="error">
17                <div class="container-floud">
18                    <div class="col-xs-12 ground-color text-center">
19                        <div class="container-error-404">
20                            <div class="clip"><div class="shadow"><span class="digit thirdDigit"></span></div></div>
21                            <div class="clip"><div class="shadow"><span class="digit secondDigit"></span></div></div>
22                            <div class="clip"><div class="shadow"><span class="digit firstDigit"></span></div></div>
23                            <div class="msg">OH!<span class="triangle"></span></div>
24                        </div>
25                        <h2 class="h1">Sorry! Page not found</h2>
26                    </div>
27                </div>
28            </div>
29        <!-- Error Page -->
30</body>
31    <script  src="./script.js"></script>
32
33  </body>
34  
35</html>
36

The HTML structure is divided into clean, logical sections:

Bootstrap grid system handles layout and alignment.

.container-error-404 holds the animated digits.

Each digit is wrapped inside .clip and .shadow containers to enable skew and shadow effects.

.digit spans are dynamically filled using JavaScript.

The .msg bubble adds a playful visual cue next to the digits.

A heading communicates the error message clearly to the user.

This separation allows CSS and JavaScript to work independently yet cohesively.

CSS Code

1*
2{
3  font-family: 'PT Sans Caption', sans-serif, 'arial', 'Times New Roman';
4}
5/* Error Page */
6    .error .clip .shadow
7    {
8        height: 180px;  /*Contrall*/
9    }
10    .error .clip:nth-of-type(2) .shadow
11    {
12        width: 130px;   /*Contrall play with javascript*/ 
13    }
14    .error .clip:nth-of-type(1) .shadow, .error .clip:nth-of-type(3) .shadow
15    {
16        width: 250px; /*Contrall*/
17    }
18    .error .digit
19    {
20        width: 150px;   /*Contrall*/
21        height: 150px;  /*Contrall*/
22        line-height: 150px; /*Contrall*/
23        font-size: 120px;
24        font-weight: bold;
25    }
26    .error h2   /*Contrall*/
27    {
28        font-size: 32px;
29    }
30    .error .msg /*Contrall*/
31    {
32        top: -190px;
33        left: 30%;
34        width: 80px;
35        height: 80px;
36        line-height: 80px;
37        font-size: 32px;
38    }
39    .error span.triangle    /*Contrall*/
40    {
41        top: 70%;
42        right: 0%;
43        border-left: 20px solid #535353;
44        border-top: 15px solid transparent;
45        border-bottom: 15px solid transparent;
46    }
47
48
49    .error .container-error-404
50    {
51      margin-top: 10%;
52        position: relative;
53        height: 250px;
54        padding-top: 40px;
55    }
56    .error .container-error-404 .clip
57    {
58        display: inline-block;
59        transform: skew(-45deg);
60    }
61    .error .clip .shadow
62    {
63        
64        overflow: hidden;
65    }
66    .error .clip:nth-of-type(2) .shadow
67    {
68        overflow: hidden;
69        position: relative;
70        box-shadow: inset 20px 0px 20px -15px rgba(150, 150, 150,0.8), 20px 0px 20px -15px rgba(150, 150, 150,0.8);
71    }
72    
73    .error .clip:nth-of-type(3) .shadow:after, .error .clip:nth-of-type(1) .shadow:after
74    {
75        content: "";
76        position: absolute;
77        right: -8px;
78        bottom: 0px;
79        z-index: 9999;
80        height: 100%;
81        width: 10px;
82        background: linear-gradient(90deg, transparent, rgba(173,173,173, 0.8), transparent);
83        border-radius: 50%;
84    }
85    .error .clip:nth-of-type(3) .shadow:after
86    {
87        left: -8px;
88    }
89    .error .digit
90    {
91        position: relative;
92        top: 8%;
93        color: white;
94        background: #07B3F9;
95        border-radius: 50%;
96        display: inline-block;
97        transform: skew(45deg);
98    }
99    .error .clip:nth-of-type(2) .digit
100    {
101        left: -10%;
102    }
103    .error .clip:nth-of-type(1) .digit
104    {
105        right: -20%;
106    }.error .clip:nth-of-type(3) .digit
107    {
108        left: -20%;
109    }    
110    .error h2
111    {
112        color: #A2A2A2;
113        font-weight: bold;
114        padding-bottom: 20px;
115    }
116    .error .msg
117    {
118        position: relative;
119        z-index: 9999;
120        display: block;
121        background: #535353;
122        color: #A2A2A2;
123        border-radius: 50%;
124        font-style: italic;
125    }
126    .error .triangle
127    {
128        position: absolute;
129        z-index: 999;
130        transform: rotate(45deg);
131        content: "";
132        width: 0; 
133        height: 0; 
134    }
135
136/* Error Page */
137@media(max-width: 767px)
138{
139    /* Error Page */
140            .error .clip .shadow
141            {
142                height: 100px;  /*Contrall*/
143            }
144            .error .clip:nth-of-type(2) .shadow
145            {
146                width: 80px;   /*Contrall play with javascript*/ 
147            }
148            .error .clip:nth-of-type(1) .shadow, .error .clip:nth-of-type(3) .shadow
149            {
150                width: 100px; /*Contrall*/
151            }
152            .error .digit
153            {
154                width: 80px;   /*Contrall*/
155                height: 80px;  /*Contrall*/
156                line-height: 80px; /*Contrall*/
157                font-size: 52px;
158            }
159            .error h2   /*Contrall*/
160            {
161                font-size: 24px;
162            }
163            .error .msg /*Contrall*/
164            {
165                top: -110px;
166                left: 15%;
167                width: 40px;
168                height: 40px;
169                line-height: 40px;
170                font-size: 18px;
171            }
172            .error span.triangle    /*Contrall*/
173            {
174                top: 70%;
175                right: -3%;
176                border-left: 10px solid #535353;
177                border-top: 8px solid transparent;
178                border-bottom: 8px solid transparent;
179            }
180.error .container-error-404
181  {
182    height: 150px;
183  }
184        /* Error Page */
185}
186
187/*--------------------------------------------Framework --------------------------------*/
188
189.overlay { position: relative; z-index: 20; } /*done*/
190    .ground-color { background: white; }  /*done*/
191    .item-bg-color { background: #EAEAEA } /*done*/
192    
193    /* Padding Section*/
194        .padding-top { padding-top: 10px; } /*done*/
195        .padding-bottom { padding-bottom: 10px; }   /*done*/
196        .padding-vertical { padding-top: 10px; padding-bottom: 10px; }
197        .padding-horizontal { padding-left: 10px; padding-right: 10px; }
198        .padding-all { padding: 10px; }   /*done*/
199
200        .no-padding-left { padding-left: 0px; }    /*done*/
201        .no-padding-right { padding-right: 0px; }   /*done*/
202        .no-vertical-padding { padding-top: 0px; padding-bottom: 0px; }
203        .no-horizontal-padding { padding-left: 0px; padding-right: 0px; }
204        .no-padding { padding: 0px; }   /*done*/
205    /* Padding Section*/
206
207    /* Margin section */
208        .margin-top { margin-top: 10px; }   /*done*/
209        .margin-bottom { margin-bottom: 10px; } /*done*/
210        .margin-right { margin-right: 10px; } /*done*/
211        .margin-left { margin-left: 10px; } /*done*/
212        .margin-horizontal { margin-left: 10px; margin-right: 10px; } /*done*/
213        .margin-vertical { margin-top: 10px; margin-bottom: 10px; } /*done*/
214        .margin-all { margin: 10px; }   /*done*/
215        .no-margin { margin: 0px; }   /*done*/
216
217        .no-vertical-margin { margin-top: 0px; margin-bottom: 0px; }
218        .no-horizontal-margin { margin-left: 0px; margin-right: 0px; }
219
220        .inside-col-shrink { margin: 0px 20px; }    /*done - For the inside sections that has also Title section*/ 
221    /* Margin section */
222
223    hr{ margin: 0px; padding: 0px; border-top: 1px dashed #999; }

This CSS file is responsible for the visual depth and illusion effects.

How it works:

Skewed Clipping Effect

.clip elements are skewed negatively.

Inner .digit elements are skewed back to appear straight.

Shadow & Depth

Inner shadows and gradients simulate depth between digits.

Circular Digits

Each number is displayed as a circular badge using border-radius: 50%.

Responsive Design

Media queries scale down digit size, message bubble, and spacing for mobile devices.

Framework Utilities

Additional spacing and layout helper classes improve consistency and flexibility.

Javascipt Code

1function randomNum()
2        {
3            "use strict";
4            return Math.floor(Math.random() * 9)+1;
5        }
6            var loop1,loop2,loop3,time=30, i=0, number, selector3 = document.querySelector('.thirdDigit'), selector2 = document.querySelector('.secondDigit'),
7                selector1 = document.querySelector('.firstDigit');
8            loop3 = setInterval(function()
9            {
10              "use strict";
11                if(i > 40)
12                {
13                    clearInterval(loop3);
14                    selector3.textContent = 4;
15                }else
16                {
17                    selector3.textContent = randomNum();
18                    i++;
19                }
20            }, time);
21            loop2 = setInterval(function()
22            {
23              "use strict";
24                if(i > 80)
25                {
26                    clearInterval(loop2);
27                    selector2.textContent = 0;
28                }else
29                {
30                    selector2.textContent = randomNum();
31                    i++;
32                }
33            }, time);
34            loop1 = setInterval(function()
35            {
36              "use strict";
37                if(i > 100)
38                {
39                    clearInterval(loop1);
40                    selector1.textContent = 4;
41                }else
42                {
43                    selector1.textContent = randomNum();
44                    i++;
45                }
46            }, time);

The JavaScript adds a slot-machine style rolling animation to the digits.

Logic Breakdown:

randomNum() generates random digits from 1–9.

Each digit runs inside a setInterval() loop.

Digits stop at staggered intervals to create a cascading effect.

Final values settle into 404, reinforcing the error state.

This subtle animation enhances engagement without overwhelming the user.

Animated Bootstrap 404 Error Page with Rolling Digits Effect

🧠 Description

💻 HTML Code

CSS Code

Javascipt Code

Love this component?