404 Page Error
<!DOCTYPE html>
<html>
<head>
<title>404 Page</title>
</head>
<body>
<div id="container">
<div class="content">
<h2>404</h2>
<h4>Opps! Page Not Found</h4>
<p>The Page You were Looking for does'nt exist. You May Have Mistyped The Address or The Page My Have Moved.</p>
<a href="#">Back to Home</a>
</div>
</div>
</body>
</html>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: arial;
}
body{
background: linear-gradient(45deg, #8500ff, #5acaff);
height: 100vh;
}
#container{position: absolute; border-radius: 15px; top: 10%; left:10%; right: 10%; bottom: 10%; display: flex; justify-content: center; align-items: center; background: url("p404.png") #151729; box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.5);}
#container .content{max-width: 600px; text-align: center;}
#container .content h2{font-size: 18vw; color: #fff; line-height: 1em;}
#container .content h4{position: relative; font-size: 1.5em; margin-bottom: 20px; color: #111; background-color: #fff; font-weight: 300; padding: 10px 20px; display: inline-block;}
#container .content p{color: #fff; font-size: 1.2em;}
#container .content a{position: relative; display: inline-block; padding: 10px 25px; background-color: #ff0562; text-decoration: none;color: #fff; margin-top: 25px; border-radius: 25px; border-bottom: 4px solid #d00d56;}
</style>
<script>
var container = document.getElementById('container');
window.onmousemove = function (e) {
var x = - e.clientX/5,
y = - e.clientY/5;
container.style.backgroundPositionX = x + 'px';
container.style.backgroundPositionY = x + 'px';
}
</script>
Comments
Post a Comment