<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - A Pen by Muhammad Hany</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css#sthash.PZNEG0So.dpuf'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<section class="home-page">
<!--Start Home-page-->
<div class="container">
<!--Start Container-->
<div class="row">
<!--Start Row-->
<div class="col-md-3 hidden-xs hidden-sm"></div>
<div class="col-xs-12 col-md-6 ">
<!--login-->
<form class="login">
<!--Start Form (Log in)-->
<!-- start header -->
<div class="header">
<span class="sign">Sign in</span>
<span class="reg">Registration</span>
</div>
<!-- end header -->
<img src="https://cdn0.iconfinder.com/data/icons/shift-logotypes/32/Vimeo-128.png">
<div class="log">
<input type="text" placeholder="User-Name">
<input type="email" placeholder="E-mail">
<input type="password" placeholder="Password">
<button>Submit</button><br>
</div>
<div class="reg-info">
<input type="text" placeholder="First-Name">
<input type="text" placeholder="Last-Name">
<input type="email" placeholder="E-mail">
<input type="password" placeholder="Password">
<input type="password" placeholder="Confirm-Password">
<input type="text" placeholder="Phone-Number">
<button>Send</button><br>
</div>
<div class="links">
<a href="#">Forgt Your <span>Password?</span></a>
<a href="#">Our <span>Policy</span> And <span>Terms!</span></a>
</div>
</form>
<!--End Form-->
</div>
<div class="col-md-3 hidden-xs hidden-sm"></div>
</div>
<!--End Row-->
</div>
<!--End Container-->
</section>
<!--End Home-page-->
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
body {
perspective: 600px;
background: #285c7a
}
form {
min-height: 450px;
padding-bottom: 10px;
margin: 50px auto;
background: #041122;
text-align: center;
border-radius: 5px;
box-shadow: 1px 2px 2px rgba(4, 17, 34, 0.68);
position: relative;
}
form img {
opacity: 0.4;
margin-top: 31px;
margin-bottom: 30px;
width: 80px;
transition: 0.5s;
cursor: pointer;
}
form img:hover {
opacity: 1;
transform: rotate(360deg) scale(1.2, 1.2);
}
/*start header*/
form .header {
overflow: hidden;
width: 100%;
box-sizing: border-box;
display: inline-block;
}
form .header>.sign {
float: left;
width: 50%;
color: #fff;
background: #01AEF2;
padding: 17px;
font-size: 12px;
cursor: pointer;
transition: 0.3s
}
form .header>.sign:hover {
opacity: 0.6
}
form .header>.reg {
float: right;
width: 50%;
color: #fff;
background: #041122;
padding: 17px;
font-size: 12px;
cursor: pointer;
transition: 0.3s
}
form .header>.reg:hover {
opacity: 0.6
}
/*end header*/
form .log>input,
form .reg-info>input {
display: block;
padding: 25px;
background: transparent;
border: 0;
border-bottom: 1px solid #285c7a;
width: 90%;
margin: 0px auto;
font-size: 11px;
transition: 0.3s;
color: #fff;
cursor: pointer;
position: relative;
}
form input:hover {
background: #285c7a
}
form button {
padding: 15px;
border: 0;
width: 90%;
margin-top: 10px;
background: #285c7a;
color: #fff;
border-radius: 5px;
transition: 0.3s;
cursor: pointer;
}
form button:hover {
transform: scale(0.8, 0.8);
background: #5fccff
}
form .links {
text-align: -webkit-auto;
margin-top: 30px
}
form .links a {
font-size: 11px;
font-family: sans-serif;
text-decoration: none;
color: #285c7a;
margin-left: 10px;
}
form .links a>span {
color: rgba(255, 255, 255, 0.4)
}
.reg-info {
display: none;
}
$(document).ready(function() {
$(".header .sign").click(function() {
$(".reg-info").fadeOut(function() {
$(".log").slideDown();
$(".header .sign").css("background", "#01AEF2");
$(".header .reg").css("background", "#041122");
});
})
$(".header .reg").click(function() {
$(".log").fadeOut(function() {
$(".reg-info").slideDown();
$(".header .reg").css("background", "#01AEF2");
$(".header .sign").css("background", "#041122")
});
})
})