Input:-
<!doctype html>
<html>
<head>
<title>Priyanshu Kumar| Log In</title>
<body>
</body>
<center>
<div class="screen"><br><br><br>
<h2>This Is Created By<a href="https://webdesignerpriyanshukumar.blogspot.com/">Priyanshu Kumar</a></h2>
<div class="box"><br>
<center>
<h1>Log In</h1>
<input type="text" class="feild" placeholder="Username"><br><br>
<input type="password" class="feild" placeholder="Password"><br><br>
<input type="submit" class="submit" value="Log In"><p>Log In With</p>
<div class="social-icons">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSbFScKFZGx-EJmpSnIS5G2JiGgohC9qHzg-50ZDYdmIg_AsS7FIGHvItrmxeSH_G00dQ5-JxnGsomVrK7_FXUs0rjsaZsv2v6n4mllO3vFa-34z4wP8JQ68bvCxmBwvxYXvDA5ft0NWD-/s200/fb.png">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVOmLvzWNlc4-YnYbBzQFQ7nffEBJmrokbe_2lCftwD4trm3lbj4H2leoyKwSdg8C9vSWDVlqgA9f4EJl1qJ_rl32kBcvN9GUfTqv3VQhKOYpJt72VX5WfPz7OtjbjRToReESabtjT8RTn/s200/tw.png">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmzWb7FKTx3CIvFVeEWO9mY2ST1YfpisUovQxxkiEbtvJzR8V2JZ8wy_vZLTmzGX2a8dI13Scs5-qSUCyzCa-lQUGJ1s9mBi6ehmRqIRVdP75R7VuBnvpV4OLsN-SWpPSJ_-PS9jt6FgZJ/s200/gp.png">
</div>
</center>
</div>
</head>
<style>
.social-icons img{
width: 30px;
margin: 0 12px;
box-shadow: 0 0 20px 0 #7f7f7f3d;
cursor: pointer;
border-radius: 50%;
}
.box{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
position: relative;
overflow: hidden;
width: 400px;
height: 350px;
border-radius:20px;
border-color:red;
background:transparent;
}
.hr{
width:20px;
}
.submit{
width:200px;
height:50px;
border-color:rgb(10, 9, 9);
background-color:rgb(247, 56, 8);
border-radius:30px;
}
.screen{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj81jI8q2jgqIaKt917mqd5VVXiq7kFVqfz7_abxpMhs9hA-cfLrsXIGUSiEpXP3J3lIWtM6VHEv3hHwKLqh-FDA2K8jHpa3rGFJDzJoE9GFfIPaz6gUNH1bQE4NYxzBpcyaChaCuGE13U/s1920/nature3.jpg);
width:100%;
height:100%;
background-size:cover;
background-position:center;
position: absolute;
}
.feild{
height:30px;
width:280px;
padding:5px;
border:5px black;
background:transparent;
border-radius:20px;
background-color: rgba(255, 250, 250, 0.363);
box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.363), 0 10px 20px 0 rgba(0, 0, 0, 0.445);
color:white;
}
</style>
</html>
0 Comments