LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



  

Dont have an account yet?

Well doggonit you should sign up today!

Do you already have an account?

Well doggonit let's get you logged in!

CSS
* {
  margin: 0;
  padding: 0;
}

body {
  background: url(http://eskipaper.com/images/mountain-landscape-2.jpg);
  font-family: 'PT Sans';
}

button:hover {
  cursor: pointer;
}

.hide {
  display: none;
}

.wrapper {
  background: rgba(0, 0, 0, 0.6);
  position: relative;
  width: 800px;
  height: 300px;
  margin: 0 auto;
  margin-top: 150px;
}

.left,
.right {
  width: 50%;
}

.left {
  float: left;
}

.right {
  float: right;
}

.back-header,
.back-p {
  margin: 20px;
  color: #fafafa;
  letter-spacing: 1px;
}

.back-header {
  font-family: 'Ubuntu';
  font-size: 30px;
  font-weight: 500;
}

.back-p {
  font-family: 'PT Sans';
  letter-spacing: 1px;
  font-size: 20px;
  line-height: 30px;
  margin-right: 60px;
}

.background button {
  position: absolute;
  left: 0;
  bottom: 60px;
}

.background .left button {
  left: 20px;
}

.background .right button {
  left: 420px;
}

.form-container {
  position: absolute;
  width: 375px;
  height: 350px;
  background-color: white;
  top: -25px;
  left: 10px;
  box-shadow: 9px 13px 16px 0px rgba(0, 0, 0, 0.75);
}

.sign-up,
.login {
  margin: 40px;
}

.back-btn {
  width: 100px;
  height: 30px;
  font-size: 15px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  border: 1px solid white;
  color: #fafafa;
  transition: .3s all;
}

.back-btn:hover {
  background-color: #145977;
  border: 1px solid #145977;
}

.form-btn {
  display: block;
  margin-top: 30px;
  width: 150px;
  height: 35px;
  font-size: 18px;
  border: 0;
  border-radius: 3px;
  background-color: #FC7D5F;
  color: #fafafa;
  transition: .4s all;
}

.sign-up button:hover,
.login button:hover {
  background-color: #C53716;
}

.form-header {
  font-size: 32px;
  color: #FC7D5F;
}

.form-container input {
  margin-top: 20px;
  width: 80%;
  height: 30px;
  border: 0;
  border-bottom: 1px solid #888;
}

input[type="text"],
input[type="email"] {
  color: #555;
}

.form-container i {
  margin-left: 10px;
  margin-bottom: -5px;
  color: #888;
}

.login button,
.forgot {
  display: inline-block;
}

.forgot {
  margin-left: 15px;
  text-decoration: none;
  color: black;
}

.forgot:hover {
  color: #FC7D5F;
  text-decoration: underline;
}
JS
$(document).ready(function(){
  var signUp = $('.signup-but');
  var logIn = $('.login-but');
  
  signUp.on('click', function(){
    $('.login').fadeOut('slow').css('display', 'none');
    $('.sign-up').fadeIn('slow');
    
    $('.form-container').animate({left: '10px'}, 'slow');
  });
  
  logIn.on('click', function(){
    $('.login').fadeIn('slow');
    $('.sign-up').fadeOut('slow').css('display', 'none');
    
    $('.form-container').animate({left: '400px'}, 'slow');
  });
});
Host Instantly Drag and Drop Website Builder

 

Description

Another sign up and login form challenge from dribbbles stream. Here is the inspiration: https://dribbble.com/shots/2311260-Day-1-Sign-Up-and-Login-Animated-Download-Template
Term
Wed, 11/29/2017 - 11:22

Related Codes

Pen ID
Pen ID
Pen ID