LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Login Screen - Animation 3d

Inspired by

Howdy, space cowboy!

He's bad! He's mean! He's the Space Cowboy in the spacey jeans. He's bad, he's number one He's the Space Cowboy with the laser gun!

Sign Up Already user?
CSS
@import url("https://fonts.googleapis.com/css?family=Dosis:300,700");
html {
  background: #D9C23D;
  font-size: 62.5%;
  font-family: "Dosis", sans-serif;
  overflow: hidden;
}

.title-app {
  font-size: 3.5em;
  color: #ffffff;
  text-align: center;
}

.author {
  font-size: 1.5em;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: #e74c3c;
  display: block;
}

.perspective {
  background: url("https://goo.gl/zEqaiE") no-repeat fixed;
  width: 360px;
  height: 520px;
  margin: 20px auto;
  box-shadow: 0px 5px 10px #212C3C;
  perspective: 500px;
  position: relative;
}
.perspective .bg {
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
}
.perspective .welcome {
  width: 100%;
  height: 100%;
  margin: 20px auto;
  border-radius: 5px;
  position: absolute;
  text-align: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: 0.5s ease-in-out;
}
.perspective .welcome .container {
  width: 90%;
  margin: 0px auto;
  padding: 90px 0;
}
.perspective .welcome .container .title {
  font-size: 2.8em;
  color: #ffffff;
  text-align: center;
  display: block;
}
.perspective .welcome .container .text {
  font-size: 1.6em;
  color: #ffffff;
  line-height: 1.8;
}
.perspective .welcome .container .btn {
  background: #e74c3c;
  width: 290px;
  height: 50px;
  font-size: 1.8em;
  color: #ffffff;
  line-height: 2.8;
  text-transform: uppercase;
  margin: 10px auto;
  display: block;
  cursor: pointer;
}
.perspective .welcome .container .help {
  color: #ffffff;
  font-size: 1.4em;
  font-weight: 300;
}
.perspective .welcome .container .btn-login {
  width: 150px;
  color: #ffffff;
  font-size: 1.6em;
  font-weight: 700;
  padding: 10px 5px;
  margin: 10px auto;
  border: 1px solid #ffffff;
  cursor: pointer;
  transition: 0.4s ease-in-out;
  display: block;
}
.perspective .welcome .container .btn-login:hover {
  background: #ffffff;
  color: #212C3C;
  border: 1px solid #ffffff;
  box-shadow: 5px 5px 0px #212C3C;
}
.perspective .signup,
.perspective .login {
  width: 100%;
  height: 100%;
  text-align: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform: rotateX(-180deg);
  transition: 0.5s ease-in-out;
  position: absolute;
}
.perspective .signup .form-signup,
.perspective .signup .form-login,
.perspective .login .form-signup,
.perspective .login .form-login {
  width: 90%;
  height: auto;
  padding: 50px 0 0 0;
  margin: 0 auto;
}
.perspective .signup .form-signup .title,
.perspective .signup .form-login .title,
.perspective .login .form-signup .title,
.perspective .login .form-login .title {
  font-size: 2.8em;
  color: #e74c3c;
}
.perspective .signup .form-signup label,
.perspective .signup .form-login label,
.perspective .login .form-signup label,
.perspective .login .form-login label {
  font-size: 1.5em;
  font-weight: 700;
  color: #B1BDC3;
  margin: 20px auto 10px auto;
  display: block;
}
.perspective .signup .form-signup input,
.perspective .signup .form-login input,
.perspective .login .form-signup input,
.perspective .login .form-login input {
  background: none;
  width: 100%;
  height: 30px;
  font-family: "Dosis", sans-serif;
  font-size: 1.6em;
  color: #ffffff;
  text-align: center;
  border: none;
  border-bottom: 1px solid #B1BDC3;
}
.perspective .signup .form-signup input:focus,
.perspective .signup .form-login input:focus,
.perspective .login .form-signup input:focus,
.perspective .login .form-login input:focus {
  outline: none;
}
.perspective .signup .form-signup .btn,
.perspective .signup .form-login .btn,
.perspective .login .form-signup .btn,
.perspective .login .form-login .btn {
  background: #e74c3c;
  width: 290px;
  height: 50px;
  font-size: 1.8em;
  color: #ffffff;
  line-height: 2.8;
  text-transform: uppercase;
  margin: 10px auto;
  display: block;
  cursor: pointer;
}
.perspective .signup .form-signup .btn-signup,
.perspective .signup .form-signup .btn-login,
.perspective .signup .form-login .btn-signup,
.perspective .signup .form-login .btn-login,
.perspective .login .form-signup .btn-signup,
.perspective .login .form-signup .btn-login,
.perspective .login .form-login .btn-signup,
.perspective .login .form-login .btn-login {
  width: 150px;
  color: #ffffff;
  font-size: 1.6em;
  font-weight: 700;
  padding: 10px 5px;
  margin: 10px auto;
  border: 1px solid #ffffff;
  cursor: pointer;
  transition: 0.4s ease-in-out;
  display: block;
}
.perspective .signup .form-signup .btn-signup:hover,
.perspective .signup .form-signup .btn-login:hover,
.perspective .signup .form-login .btn-signup:hover,
.perspective .signup .form-login .btn-login:hover,
.perspective .login .form-signup .btn-signup:hover,
.perspective .login .form-signup .btn-login:hover,
.perspective .login .form-login .btn-signup:hover,
.perspective .login .form-login .btn-login:hover {
  background: #ffffff;
  color: #212C3C;
  border: 1px solid #ffffff;
  box-shadow: 5px 5px 0px #212C3C;
}
.perspective .signup .form-signup .help,
.perspective .signup .form-login .help,
.perspective .login .form-signup .help,
.perspective .login .form-login .help {
  color: #ffffff;
  font-size: 1.3em;
  left: 10px;
  bottom: 10px;
  position: absolute;
}
.perspective .signup .form-signup a,
.perspective .signup .form-login a,
.perspective .login .form-signup a,
.perspective .login .form-login a {
  color: #e74c3c;
  font-size: 1.3em;
  text-decoration: none;
  right: 10px;
  bottom: 10px;
  position: absolute;
}
JS
$('#signup').click(function(){
	$('.signup').css({
		'transform' : 'rotateX(0deg)'
	});
	$('.welcome').css({
		'transform' : 'rotateX(-180deg)'
	})
})

$('#done, #signin').click(function() {
	$('.signup, .login').css({
		'transform' : 'rotateX(180deg)'
	});
	$('.welcome').css({
		'transform' : 'rotateX(0deg)'
	})
})

$('.btn-login').click(function() {
	$('.login').css({
		'transform' : 'rotateX(0deg)'
	})
	$('.welcome, .signup').css({
		'transform' : 'rotateX(-180deg)'
	})
})

$('.btn-signup').click(function(){
	$('.signup').css({
		'transform' : 'rotateX(0deg)'
	});
	$('.login').css({
		'transform' : 'rotateX(-180deg)'
	})
})
Host Instantly Drag and Drop Website Builder

 

Description

HTML Preprocessor: Haml CSS Preprocessor: Sass JS Library: jQuery
Term
Wed, 11/29/2017 - 11:21

Related Codes

Pen ID
Pen ID
Pen ID