THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

Create Animated Responsive 404 Error Page using HTML and CSS

Create Animated Responsive 404 Error Page using HTML and CSS




What is a 404 Error?
The 404 error is what a webpage returns after a user tries to open a webpage that does not exist. The visitor may have mistyped the webpage URL or the webpage might have been moved completely. It may also be caused by your pages having an incorrect linking either internally or externally.
When some of the resources are removed from your web server, it may result in a 404 error too. You changed the link of your content, and thus the previous link was rendered useless and cannot be located online.
Another thing that causes the 404 error is when a crawler from a search engine tries to find a generic page that you do not have on your site. Note that having too many 404 errors from your site is lethal for your site traffic.


HTML CODE


<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>

<div class="main_body">
<div class="center_body">
<h1>404</h1>
<h2>PAGE NOT FOUND</h2>
<p>LETS C! DONATION FOR SUPPORT:    PhonePay = vinodbahadur@ybl      GooglePay: vbthapa55@oksbi</p>
<a href="https://www.thapatechnical.com/" target="_blank"> go to homepage</a>
</div>
</div>

</body>

</html>



CSS CODE


*{ margin: 0; padding: 0; box-sizing: border-box; 
 font-family: 'Montserrat', sans-serif;}

.main_body{
width: 100%; height: 100vh; 
background-image: url('images/blurbg.jpg');
background-repeat: no-repeat;
background-size: 100% 100%; 
display: flex; 
justify-content: center;
align-items: center;
}

.center_body{
width: 65%;
height: 70%;
background-image: url('images/bg.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex; 
flex-direction: column;
justify-content: center;
align-items: center;
transition: all 0.5s linear;
}

.center_body h1{
font-size: 200px;
color: white;
letter-spacing: 5px;
font-weight: 700;
text-shadow: 10px 9px 3px #74b9ff;
transition: all 1s linear;
}

.center_body h2{
color: white;
font-size: 26px;
font-weight: 700;
text-transform: uppercase;
}

.center_body p{
color: white;
font-weight: 400;
text-align: center;
margin: 20px auto;
}

.center_body a{
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
color: blue;
background: white;
padding: 15px 30px;
box-shadow: 5px 4px 15px -5px #0046d5;
border-radius: 40px;
transition: all 0.5s linear;
}

.center_body:hover h1{
text-shadow: 9px 6px 3px #b2bec3;
}

.center_body:hover a{
color: white;
background: blue;

}

2 comments: