LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Click "Don't have an account" to switch between forms.

CSS
body, html {

-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0,0,0,0.01);
height: 100%;
margin:0px;
padding:0px;
line-height:20px;
background: -webkit-linear-gradient(90deg, #614385 10%, #516395 90%); /* Chrome 10+, Saf5.1+ */
background:    -moz-linear-gradient(90deg, #614385 10%, #516395 90%); /* FF3.6+ */
background:     -ms-linear-gradient(90deg, #614385 10%, #516395 90%); /* IE10 */
background:      -o-linear-gradient(90deg, #614385 10%, #516395 90%); /* Opera 11.10+ */
background:         linear-gradient(90deg, #614385 10%, #516395 90%); /* W3C */
                    
}

.about {
color:#fff;
text-align:center;
margin-top:20px;
}

.simplebox, .simplebutton {
outline: none;
border: 1px solid #ddd !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
font-size:12px;
}

.container {
position:relative;
top:50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

.formHolder {
width:300px;
margin:0 auto;
background:rgba(255,255,255,1);
-webkit-border-radius: 6px;
border-radius: 6px;
overflow:hidden;
padding:30px;
box-shadow: 0 4px 2px -2px rgba(0,0,0,0.2);

}

.formHolder h3 {
margin:0 0 14px 0;
font-size:19px;
font-weight:600;
}

.signUp {
display:none;
}

.login .loginButton {
margin-right:5px;
}

.signup .loginButton {
margin-left:5px;
}

.nav a {
color:#fff;
text-decoration:none;
display:inline-block;
border:2px solid rgba(255,255,255,0.6);
-webkit-border-radius: 6px;
border-radius: 6px;
padding:10px 15px 10px 15px;
letter-spacing:-0.5px;
}

.nav span {
font-style:italic;
display:inline-block;
margin:0 5px 0 5px;
font-size:14px;
color:#eee;
}

.signup {
display:none;
}

.page-transition {
width:20px;
height:20px;
background:#fff;
position:fixed;
top:50%;
margin-top:-10px;
left:50%;
z-index:10000;
margin-left:-10px;
-webkit-border-radius: 60px;
border-radius: 60px;
display:none;
}
JS
$('document').ready(function() {
  
  $('#loginButton, #signupButton').click(function() {
    
    setTimeout(function() {
      
    		$(".page-transition").velocity("fadeIn", {
          queue: false
    		});
      
	  }, 100);
    
    $('.page-transition').velocity({
      scale: "10000%",
      translateZ:0
    }, {duration:500, complete: function() {
      alert("Tada! That's where you handle this event (login/signup/whatever...), ie. redirect to another page. Reload the page to go back to the main screen!")
    }
       
       })
    
  })
  
  $('#showLogin').click(function() {
    
    $(".signup").velocity({ 
        scale: "65%",
        translateZ:0
    }, { duration: 400, easing: "easeInOutBack", complete: function() {
      
      $(".login").velocity({ 
        scale: "100%",
        translateZ:0
    }, { duration: 400, easing: "easeInOutBack"});
      
      setTimeout(function() {
      
    		$(".login").velocity("fadeIn", {
          queue: false,
      		duration: 150
    		});
      
			}, 150);
        
        
    } });
    
    setTimeout(function() {
      
    	$(".signup").velocity("fadeOut", {
     	 	queue: false,
      	duration: 150
    	});
      
		}, 150);
    
  });
  
  $('#showSignUp').click(function() {
    
    $(".signup").velocity({
      	scale: "65%",
        translateZ:0
    });
    
    $(".login").velocity({ 
        scale: "65%",
        translateZ:0
    }, { duration: 400, easing: "easeInOutBack", complete: function() {
      
      $(".signup").velocity({ 
        scale: "100%",
        translateZ:0
    }, { duration: 400, easing: "easeInOutBack"});
      
      setTimeout(function() {
      
    		$(".signup").velocity("fadeIn", {
          queue: false,
      		duration: 150
    		});
      
			}, 150);
        
        
    } });
    
    setTimeout(function() {
      
    	$(".login").velocity("fadeOut", {
     	 	queue: false,
      	duration: 150
    	});
      
		}, 150);
    
  });
  
});
Host Instantly Drag and Drop Website Builder

 

Term
Wed, 11/29/2017 - 11:23

Related Codes

Pen ID
Pen ID
Pen ID