Input
<html>
<head>
<title>Login & Registration Form</title>
</head>
<body>
<div class="zero">
<div class="form-box">
<div class="button-box">
<div id="btn"></div>
<button type="button" class="toggle-btn" onclick="login()">Log In</button>
<button type="button" class="toggle-btn" onclick="register()">Register</button>
</div>
<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>
<form id="login" class="input-group">
<input type="text" class="input-field" placeholder="User Id" required>
<input type="text" class="input-field" placeholder="Enter Password" required>
<input type="checkbox" class="check-box" ><span>Remember Password</span>
<button type="submit" class="submit-btn">Log In</button>
</form>
<form id="register" class="input-group">
<input type="text" class="input-field" placeholder="User Id" required>
<input type="email" class="input-field" placeholder="Email Id" required>
<input type="text" class="input-field" placeholder="Enter Password" required>
<input type="checkbox" class="check-box" ><span>I agree to the terms & conditions.</span>
<button type="submit" class="submit-btn">Register</button>
</form>
</div>
</div>
<script>
var x=document.getElementById("login");
var y=document.getElementById("register");
var z=document.getElementById("btn");
function register(){
x.style.left = "-400px";
y.style.left = "50px";
z.style.left = "110px";
}
function login(){
x.style.left = "50px";
y.style.left = "450px";
z.style.left = "0px";
}
</script>
<footer>
<p>
This Is Created by
<a target="_blank" href="https://webdesignerpriyanshukumar.blogspot.com/">Web Designer Priyanshu Kumar</a>
</p>
</footer>
</body>
<style>*{
margin: 0;
padding: 0
}
.zero{
height: 95%;
width: 100%;
background: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url(https://wonderfulengineering.com/wp-content/uploads/2016/02/wallpaper-background-2-610x381.jpg);
background-position: center;
background-size: cover;
position: absolute;
}
.form-box{
width: 380px;
height: 480px;
position: relative;
margin: 6% auto;
background:;
padding: 5px;
overflow: hidden;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 8px 20px 0 rgba(0, 0, 5, 0.19);
border: 1px solid black;
border-radius: 20px;
}
.button-box{
width: 220px;
margin: 35px auto;
position: relative;
box-shadow: 0 0 20px 9px #ff61241f;
border-radius: 30px;
}
.toggle-btn{
padding: 10px 30px;
cursor: pointer;
background: transparent;
border: 0;
outline: none;
position: relative;
}
#btn{
top: 0;
left: 0;
position: absolute;
width: 110px;
height: 100%;
background: linear-gradient(to right, #ff105f,#ffad06);
border-radius:30px;
transition: .5s;
}
.social-icons {
margin: 30px auto;
text-align: center;
}
.social-icons img{
width: 30px;
margin: 0 12px;
box-shadow: 0 0 20px 0 #7f7f7f3d;
cursor: pointer;
border-radius: 50%;
}
.input-group{
top: 180px;
position: absolute;
width: 280px;
transition: .5s;
}
.input-field{
width: 100%;
padding: 10px 0;
margin: 5px 0;
border-left: 0;
border-top: 0;
border-right: 0;
border-bottom: 1px solid black;
outline: none;
font-style: red;
background: transparent;
}
.submit-btn{
width: 85%;
padding: 10px 30px;
cursor: pointer;
display: block;
margin: auto;
background: linear-gradient(to right, #ff105f,#ffad06);
border: 0;
outline: none;
border-radius: 30px;
}
.check-box{
margin: 30px 10px 30px 0;
}
span{
color: black;
font-size: 12px;
bottom: 68px;
position: absolute;
}
#login{
left: 50px;
}
#register{
left: 450px;
}
footer {
background-color: #555;
color: #fff;
font-size: 14px;
bottom: 0;
position: fixed;
left: 0;
right: 0;
text-align: center;
z-index: 999;
}
footer p {
margin: 10px 0;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
footer a {
color: black;
text-decoration: none;
margin-right:5px;
}</style>
</html>
0 Comments