<!DOCTYPE html>
<html>
<head>
<title>login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button type="button" class="toggle-btn" onclick="login()">Log in</button>
<button type="button" class="toggle-btn" onclick="register()">Register</button>
</div>
<img src="facebook.jpg" url="https://developers.facebook.com/docs/plugins/">
<img src="twitter.png" url="https://publish.twitter.com/">
<img src="google.png" url="https://apis.google.com/js/platform.js">
<img src="insta.png" url="http://www.instagram.com/yourusername">
</div>
<form id="login" class="groups">
<input type="text" class="field" placeholder="USERNAME" required>
<input type="text" class="field" placeholder="PASSWORD" required>
<input type="checkbox" class="checkbox"><span>REMEMBER PASSWORD</span>
<button type="submit" class="submit-btn" onclick="showAlert()">Log in</button>
</form>
<form id="register" class="groups">
<input type="text" class="field" placeholder="EMAIL ID" required>
<input type="text" class="field" placeholder="USERNAME" required>
<input type="text" class="field" placeholder="PASSWORD" required>
<input type="checkbox" class="checkbox" required><span>I agreed to terms and conditions.</span>
<button type="submit" class="submit-btn" onclick="call()">REGISTERED</button>
</form>
</div>
<script type="text/javascript">
var x = document.getElementById("login");
var y = document.getElementById("register");
var z = document.getElementById("btn");
var s = document.getElementById("submit");
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 = "0";
}
function showAlert() {
debugger;
alert ("SUCCESSFULLY LOGIN!!!");
}
function call() {
alert ("SUCCESSFULLY REGISTERED!!!");
}
</script>
</body>
</html>
CSS CODE:
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
background-image: url('cover.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
.form-box{
width: 380px;
height: 480px;
position: relative;
margin: 6% auto;
background: transparent;
padding: 5px;
border: 1px solid;
border-color: black ;
overflow: hidden;
-webkit-box-shadow: -1px 4px 26px 11px rgba(0,0,0,1.00);
box-shadow: -1px 4px 26px 11px rgba(0,0,0,1.00);
}
.button-box{
width: 220px;
margin: 35px auto;
position: relative;
box-shadow: 0 0 20px 9px #ff61214f;
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: 0.5s;
}
.icons{
margin: 30px auto;
text-align: center;
}
.icons img{
width: 40px;
}
.groups{
top: 180px;
position: absolute;
width: 280px;
transition: 0.5s;
}
.field{
width: 100%;
padding: 10px 0;
margin: 5px 0;
border-left: 0;
border-top: 0;
border-right: 0;
border-bottom: 1px solid #999;
outline: none;
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;
}
.checkbox{
margin: 30px 10px 30px 0;
}
span{
color: #888;
font-size: 15px;
bottom: 68px;
position: absolute;
}
#login{
left: 50px;
}
#register{
left: 450px;
}
OUTPUT:
Comments
Post a Comment