Monday, 10 June 2019

404 page create



Create 404 Error Page Design

<!Doctype html>
<html>
<head>
<title>404 page</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.main_body{
width:100%;
height:100vh;
background-image:url("bg.jpg");
background-repeat:no-repeat;
background-size:100% 100%;
display:flex;
justify-content:center;
align-item:center;
}
.center_body{
width:55%;
height:60%;
background-image:url("bg.jpg");
background-repeat:no-repeat;
background-size:100% 100%;
display:flex;
flex-direction :column;
justify-content:center;
align-items:center; 
margin-top:5%;
transition:all 0.5s linear;
}
.center_body h1{
font-size:200px;
color:#fff;
text-shadow:10px 9px 3px #74b9ff;
font-weight:700px;
letter-spacing:5px;
transition:all 0.2s linear;

}
.center_body h3{
font-size:25px;
color:#fff;
font-weight:700px;
letter-spacing:5px;
}
.center_body p{
font-size:25px;
color:#fff;
font-weight:400px;

}
.center_body a{
font-size:20px;
text-decoration:none;
display:inline-box;
background:#fff;
color:green;
text-transform:uppercase;
padding: 13px ;
border-radius:20px;
margin-top:5px;
}
.center_body:hover a{
color:red;
transition:all 0.5s linear;

}

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

</style>
</head>
<body>
<div class="main_body">
<div class="center_body">
<h1>404</h1>
<h3>PAGE NOT FOUND</h3>
<p>Page not Found !! Go to Home page</p>
<a href="https://rajashreetri.github.io/rajshreeweb.github.io/" target="_blank"> Go to Homepage</a>
</div>
</div>
</body>
</html>

Out put



No comments:

Post a Comment

SEO introduction

What is SEO? SEO(Search Engine Optimization ) is a technique that helps to bring the Website on top. Seo depends on the Keyword . Ke...