html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/0b287dd95e.js" crossorigin="anonymous"></script>
<title>Login to MySky</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form action="">
<h1>Login to MySky</h1>
<div class="box">
<i class="fa fa-envelope"></i>
<input type="email" name="email" id="email" placeholder="Enter Your Email">
</div>
<div class="box">
<i class="fa fa-key"></i>
<input type="password" name="password" id="password" placeholder="Enter Your Password">
</div>
<button class="btn">Log In</button>
</form>
</div>
</body>
</html>
css code
*{
margin: 0;
padding: 0;
}
body{
background: url("bg.jpg") no-repeat center center fixed ;
background-size: cover;
}
.container{
/* border: 2px solid red; */
color: white;
position: absolute;
top: 25%;
left: 45%;
}
.container h1{
font-size: 40px;
border-bottom: 5px solid rgb(21 116 233);
margin-bottom: 21px;
padding: 10px 0px;
}
.box{
/* border: 2px solid palegoldenrod; */
width: 100%;
border-bottom: 2px solid rgb(21 116 233);
margin: 10px 0px;
}
.box i{
text-align: center;
width: 25px;
}
.box input{
width: 70%;
outline: none;
color: white;
font-size: 17px;
padding: 4px 1px;
background: none;
border: none;
}
.btn{
cursor: pointer;
outline: none;
margin: 10px 0px;
padding: 8px 14px;
border-radius: 10px;
border: 2px solid rgb(21 116 233);
font-weight: bold;
font-size: 17px;
background: none;
color: white;
}
.btn:hover{
color: rgb(21 116 233);
background-color: white;
}
Output Image
Happy coding :)
Comments
Post a Comment