Video:
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Error! 404</title>
</head>
<style>
*{
margin: 0;
padding: 0;
font-family: Nunito;
box-sizing: border-box;
}
body{
background: linear-gradient(to right, #48dbfb, #1dd1a1);
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.box{
width: 40%;
background: #0abde3;
padding: 50px;
text-align: center;
color: #ffffff;
border-radius: 8px;
box-shadow: 0 19px 38px rgba(0, 0, 0, .3), 0 15px 12px rgba(0, 0, 0, .22);
}
.box h1{
margin: 10px;
font-size: 100px;
font-weight: 800;
letter-spacing: 20px;
}
.box p{
font-size: 18px;
padding-bottom: 40px;
}
.btn{
text-decoration: none;
color: #ffffff;
font-size: 18px;
background: #ee5253;
padding: 10px;
border-radius: 8px;
}
</style>
<body>
<div class="box">
<h2>Oops! Page not found.</h2>
<h1>404</h1>
<p>Can't find the page you're looking for.</p>
<a class="btn" href="#">Go Back Home</a>
</div>
</body>
</html>
Comments
Post a Comment