Skip to content

Instantly share code, notes, and snippets.

@0-ali

0-ali/double-sign.markdown

Created November 9, 2016 21:51
Show Gist options
  • Save 0-ali/cc42cdfe4c72b0abda1a96c65663161e to your computer and use it in GitHub Desktop.
Save 0-ali/cc42cdfe4c72b0abda1a96c65663161e to your computer and use it in GitHub Desktop.
Download ZIP
Double Sign
Raw
index.html
<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>
Raw
script.js
$(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);
});
});
});
Raw
style.css
*
{
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