Errors are inevitable in the world of web development,. From server timeouts to broken links, users encounter various hiccups while navigating websites. One often overlooked aspect is the 408 error, signaling a server timeout due to a lack of communication with the client. However, creating a custom HTML 408 error page can turn a frustrating experience into an opportunity to engage users and maintain their trust.
In this blog post, we’ll guide you through the straightforward process of crafting a personalized 408 error page using HTML.
Step 1: Structure of 408 Error Page in HTML
This HTML code creates a visually striking 408 error page with a large, stylized “48” representing the error code and a concise message indicating a request timeout. Here is the code:
<h1 aria-label="408 Error">4<span></span>8</h1> <h2>Request Timeout.</h2>
Step 2: Styling with CSS
This CSS code styles a visually dynamic and engaging 408 error page, featuring a flexbox layout for centering content, animated clock emoji within the error code, and gradient background for added visual appeal.
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Open Sans', Arial, sans-serif;
font-size: calc(4em + 10vw);
text-align: center;
color: #fff;
background-image: linear-gradient(-225deg, #3eb583d6, #46405b, #caad9fd6);
overflow: hidden;
}
h1 {
font-size: 1em;
font-weight: 700;
text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.5);
}
h1 span::after {
content: '🕛';
font-size: 0.9em;
animation: clock 5s linear infinite;
}
h2 {
font-size: 0.15em;
font-weight: 700;
line-height: 1.2;
margin-top: 1em;
text-shadow: 0 0 0.2em rgba(0, 0, 0, 0.5);
}
.apple-os h1 span {
margin: 0 0.1em;
}
.apple-os h2 {
margin-top: 0.4em;
}
@keyframes clock {
8.333% {
content: '🕐';
}
16.666% {
content: '🕑';
}
25% {
content: '🕒';
}
33.333% {
content: '🕓';
}
41.666% {
content: '🕔';
}
50% {
content: '🕕';
}
58.333% {
content: '🕖';
}
66.666% {
content: '🕗';
}
75% {
content: '🕘';
}
83.333% {
content: '🕙';
}
91.666% {
content: '🕚';
}
}408 Error Page Using HTML:Source Code 408 Error Page Demo
Creating a custom 408 error page using HTML is a simple yet effective way to enhance the user experience on your website. By following the steps outlined in this blog post, you can provide users with a helpful and informative error page that reflects the professionalism of your brand.
