LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

CSS
@charset "UTF-8";
body {
  background: url(http://www.timurtek.com/wp-content/uploads/2014/10/form-bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: 'HelveticaNeue','Arial', sans-serif;
}

a {
  color: #ccc;
  text-decoration: none;
}

a:hover {
  color: #34495E;
}

.pull-right {
  float: right;
}

.pull-left {
  float: left;
}

.clear-fix {
  clear: both;
}

div.logo {
  text-align: center;
}

.logo {
  margin-top: 20px;
  margin-bottom: 30px;
}

.logo-active {
  fill: #44aacc !important;
}

#formWrapper {
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all .3s ease;
}

.darken-bg {
  background: rgba(0, 0, 0, 0.5) !important;
  transition: all .3s ease;
}

form#form {
  position: absolute;
  width: 360px;
  height: 320px;
  height: auto;
  background-color: #fff;
  margin: auto;
  border-radius: 5px;
  padding: 20px;
  left: 50%;
  top: 50%;
  margin-left: -180px;
  margin-top: -200px;
}

div.form-item {
  position: relative;
  display: block;
  margin-bottom: 20px;
}

input, a {
  transition: all .2s ease;
}

input.form-style {
  color: #8a8a8a;
  display: block;
  width: 90%;
  /*este valor em produção é 100%*/
  height: 36px;
  /*este valor em produção é 46px*/
  padding: 5px 5%;
  border: 2px solid #ccc;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #fff;
  font-family: 'HelveticaNeue','Arial', sans-serif;
  font-size: 105%;
  letter-spacing: .8px;
}

div.form-item .form-style:focus {
  outline: none;
  border: 2px solid #12AA3E;
  color: #12AA3E;
}

div.form-item p.formLabel {
  position: absolute;
  left: 26px;
  top: -1px;
  transition: all .4s ease;
  color: #bbb;
}

.formTop {
  top: -22px !important;
  left: 26px;
  background-color: #fff;
  padding: 0 5px;
  font-size: 14px;
  color: #12AA3E !important;
}

.formStatus {
  color: #8a8a8a !important;
}

input[type="submit"].login,
a.login {
  float: right;
  width: 100%;
  height: 46px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #12AA3E;
  border: none;
  color: #fff;
  font-size: 16px;
}

input[type="submit"].login:hover,
a.login:hover {
  background-color: rgba(18, 170, 62, 0.85);
  color: #fff;
  cursor: pointer;
}

input[type="submit"].login:focus,
a.login:focus {
  outline: none;
}

#other-login ul {
  list-style: none;
  padding-left: 0px;
}
#other-login ul li {
  width: 32%;
  float: left;
  margin-right: 2%;
}
#other-login ul li .login {
  font-size: 12px;
  text-align: center;
  line-height: 46px;
}
#other-login ul li:last-child {
  margin-right: 0;
}
#other-login a, #other-login input {
  margin-bottom: 8px;
}
#other-login a:first-child, #other-login input:first-child {
  margin-top: 22px;
  display: block;
}
#other-login a:last-child, #other-login input:last-child {
  margin-bottom: 0px;
}

a.login.facebook,
input[type="submit"].login.facebook {
  background-color: #3b5998;
}
a.login.google,
input[type="submit"].login.google {
  background-color: #d34836;
}
a.login.cc,
input[type="submit"].login.cc {
  background-color: #417EB7;
}

a.login.facebook:hover,
input[type="submit"].login.facebook:hover {
  background-color: rgba(59, 89, 152, 0.85);
  color: #fff;
  cursor: pointer;
}
a.login.google:hover,
input[type="submit"].login.google:hover {
  background-color: rgba(211, 72, 54, 0.85);
  color: #fff;
  cursor: pointer;
}
a.login.cc:hover,
input[type="submit"].login.cc:hover {
  background-color: rgba(65, 126, 183, 0.85);
  color: #fff;
  cursor: pointer;
}

.form-item .rup-pass {
  margin-top: 5px;
  display: block;
}

.footer {
  margin-top: 16px;
}
.footer a {
  color: #ccc;
}
.footer a:hover {
  color: #34495E;
}
.footer .help {
  float: left;
}
.footer .language {
  float: right;
}
JS
$(document).ready(function(){
	var formInputs = $('input[type="email"],input[type="password"]');
	formInputs.focus(function() {
       $(this).parent().children('p.formLabel').addClass('formTop');
       $('div#formWrapper').addClass('darken-bg');
       $('div.logo').addClass('logo-active');
	});
	formInputs.focusout(function() {
		if ($.trim($(this).val()).length == 0){
		$(this).parent().children('p.formLabel').removeClass('formTop');
		}
		$('div#formWrapper').removeClass('darken-bg');
		$('div.logo').removeClass('logo-active');
	});
	$('p.formLabel').click(function(){
		 $(this).parent().children('.form-style').focus();
	});
});
Host Instantly Drag and Drop Website Builder

 

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

Related Codes

Pen ID
Pen ID
Pen ID