Let’s create an Animated 404 Page Not Found using HTML and CSS! 🚫💻
This creative project turns a dull error page into a fun, animated experience that keeps users engaged.
We’ll use:
- HTML to structure the 404 message and elements.
- CSS for styling, background animation, moving graphics, or fun effects.
Whether it’s animated text, a floating ghost, or a bouncing number – the idea is to make the 404 page feel intentional and on-brand.
HTML :
This HTML creates a clean animated 404 error page. It uses Bootstrap for layout and Google Fonts for styling. The page displays a large “404” with a background image, a message saying the user is lost, and a button to go back to the homepage. The layout is centered using Bootstrap grid classes for responsiveness.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Animated 404 | @coding.stella</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Arvo'><link rel="stylesheet" href="./style.css">
</head>
<body>
<section class="page_404">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-10 col-sm-offset-1 text-center">
<div class="four_zero_four_bg">
<h1 class="text-center">404</h1>
</div>
<div class="contant_box_404">
<h3 class="h2">Look like you're lost</h3>
<p>the page you are looking for not avaible!</p>
<a href="" class="link_404">Go to Home</a>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
CSS :
This CSS styles a 404 error page by setting a white background, custom font, and hiding overflow for the body. The .page_404 img is made full-width, and .four_zero_four_bg adds a background GIF with centered positioning and a fixed height. The large headings (h1 and h3) inside it are sized to 80px. The .link_404 styles a green button with padding and white text, and .contant_box_404 shifts its content upward using a negative top margin.
body{
padding: 40px 0;
background: #fff;
font-family: "Arvo", serif;
overflow: hidden;
}
.page_404 img {
width: 100%;
}
.four_zero_four_bg {
background-image: url(bg.gif);
height: 500px;
background-position: center;
}
.four_zero_four_bg h1 {
font-size: 80px;
}
.four_zero_four_bg h3 {
font-size: 80px;
}
.link_404 {
color: #fff !important;
padding: 10px 20px;
background: #39ac31;
margin: 20px 0;
display: inline-block;
}
.contant_box_404 {
margin-top: -50px;
}
An animated 404 page using HTML and CSS makes error pages more engaging and creative. It’s a perfect project to learn CSS animations and impress users even when they’re lost! 🎨🛠️
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
