A Pen by Mohammed Ali on CodePen.
Created
November 9, 2016 21:51
-
-
Save 0vulns/cc42cdfe4c72b0abda1a96c65663161e to your computer and use it in GitHub Desktop.
Double Sign
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Project1</title> | |
<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet"> | |
<link rel="stylesheet" href="css/style.css"> </head> | |
<body> | |
<div class="All"> | |
<div class="container"> | |
<div class="content"> | |
<div class="sign-up"> | |
<h2>Don't Have an account ? </h2> | |
<p>We Recommended you to sign up in our site you will be up-to-date of all the new of technology</p> | |
<button class="signup">Sign Up</button> | |
</div> | |
<div class="sign-in"> | |
<h2>Have an account ? </h2> | |
<p>The Right path is start from here ... </p> | |
<button class="signin">Log In</button> | |
</div> | |
</div> | |
<div class="signover"> | |
<div class="first" > | |
<h2>SIGN UP</h2> | |
<form> | |
<input type="text" placeholder="Full Name"> | |
<input type="password" placeholder="Password"> | |
<input type="email" placeholder="E-mail Address"> | |
<input type="submit" value="SIGN UP"> | |
</form> | |
</div> | |
<div class="second" style="display:none" > | |
<h2>LOG IN</h2> | |
<form> | |
<input type="email" placeholder="E-mail"> | |
<input type="password" placeholder="Password"> | |
<a href="#">Forget Password ? </a> | |
<input type="submit" value="LOG IN"> | |
</form> | |
</div> | |
</div> | |
</div> | |
</div> | |
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script></script> | |
<script src="js/plugins.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function () { | |
"use strict"; | |
$(window).resize(function () { | |
$(".All").each(function () { | |
$(this).css('marginTop', ($(window).height() - $(this).height()) / 2); | |
}); | |
$(".All .content div").each(function () { | |
$(this).css('marginTop', ($(".All").height() - $(this).height()) / 2); | |
}); | |
}); | |
$(".All").each(function () { | |
$(this).css('marginTop', ($(window).height() - $(this).height()) / 2); | |
}); | |
$(".All .content div").each(function () { | |
$(this).css('marginTop', ($(".All").height() - $(this).height()) / 2); | |
}); | |
$(".All .content .sign-in button").click(function () { | |
$(".signover .first").fadeOut(200, function () { | |
$(".signover .second").fadeIn(200); | |
}) | |
$(".signover").animate({ | |
left: $(".All .content .sign-in").offset().left | |
}, 500) | |
$(".All .content .sign-up button").click(function () { | |
$(".signover .second").fadeOut(200, function () { | |
$(".signover .first").fadeIn(200); | |
}) | |
$(".signover").animate({ | |
left: $(".All .content .sign-up").offset().left | |
}, 500); | |
}); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* | |
{ | |
box-sizing: border-box; | |
font-family: 'Droid Sans', sans-serif; | |
} | |
body { | |
background: url("http://i.imgur.com/rOdPf09.jpg") no-repeat fixed; | |
top: 0; | |
left: 0; | |
-webkit-background-size: cover; | |
-moz-background-size: cover; | |
-o-background-size: cover; | |
background-size: cover; | |
} | |
.container { | |
width: 1200px; | |
margin: auto; | |
} | |
.All | |
{ | |
overflow: hidden; | |
position: relative | |
} | |
.All | |
{ | |
background-color: rgba(63, 63, 63, .7); | |
height:600px | |
} | |
.All .content div | |
{ | |
float:left; | |
width:50% | |
} | |
.All .content .sign-up | |
{ | |
padding: 0px 30px; | |
} | |
.All .content .sign-up h2 { | |
color: #e67e22; | |
font-size: 30px; | |
border-bottom: 3px solid #FFF; | |
display: inline-block; | |
padding: 6px 3px | |
} | |
.All .content .sign-up p | |
{ | |
color:#FFF; | |
font-size: 20px | |
} | |
.All .content .sign-up button | |
{ | |
background: none; | |
border:none ; | |
padding :20px; | |
background-color: #e67e22; | |
width:200px; | |
font-size: 20px; | |
color:#FFF | |
} | |
.All .content .sign-in | |
{ | |
padding: 0px 30px; | |
} | |
.All .content .sign-in h2 | |
{ | |
color: #e67e22; | |
font-family: monospace; | |
font-size: 30px; | |
border-bottom: 3px solid #FFF; | |
display: inline-block; | |
padding: 6px 3px | |
} | |
.All .content .sign-in p | |
{ color:#FFF; | |
font-size: 20px | |
} | |
.All .content .sign-in button | |
{ | |
background: none; | |
border:none ; | |
padding :20px; | |
background-color: #e67e22; | |
width:200px; | |
font-size: 20px; | |
color:#FFF | |
} | |
.All .signover | |
{ | |
position: absolute; | |
background-color: #FFF; | |
padding: 50px; | |
height: 654px; | |
width: 595px; | |
} | |
.All .signover input | |
{ | |
display: block; | |
margin-bottom: 15px; | |
padding: 15px; | |
width: 500px; | |
background: none; | |
border: none; | |
background: rgba(0, 0, 0, .2); | |
border-radius: 20px; | |
outline: none; | |
} | |
.All .signover .first h2, | |
.All .signover .second h2 | |
{ | |
text-align: center; | |
margin-bottom: 100px | |
} | |
.All .signover .second a | |
{ | |
text-decoration: none ; | |
} | |
.All .signover input[type="submit"] | |
{ | |
background-color: #27ae60; | |
margin-top: 20px | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment