LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css);
body {
  background-color: #ACAFB8;
  color: #fff;
  font-family: arial, helvetica, sans-serif;
  line-height: 1.4;
  font-size: 0.6em;
}

*, *:before, *:after {
  box-sizing: border-box;
}

.login-form-container {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  width: 270px;
  border-radius: 3px;
  background-color: #272E38;
  overflow: hidden;
}
.denied .login-form-container {
  -webkit-animation: shake 0.35s normal forwards ease-in-out;
          animation: shake 0.35s normal forwards ease-in-out;
}
.login-form-container fieldset {
  border: none;
}
.login-form-container header {
  background-color: #202731;
  color: #C5C6C8;
  display: block;
  padding: 1.5em;
  text-align: center;
}
.login-form-container .input-wrapper {
  position: relative;
  display: block;
  margin: 2em auto;
  border-bottom: 1px solid #FC7148;
  border-radius: 3px;
  width: 170px;
  padding-left: 20px;
}
.login-form-container .input-wrapper input {
  width: 100%;
  line-height: 2;
  background-color: transparent;
  border: none;
  padding: .6em .5em;
  outline: 0;
}
.login-form-container .input-wrapper input::-webkit-input-placeholder, .login-form-container .input-wrapper input::-moz-placeholder, .login-form-container .input-wrapper input:-ms-input-placeholder {
  color: #9EA2AB;
}
.login-form-container .input-wrapper:before {
  font-family: FontAwesome;
  position: absolute;
  display: inline-block;
  top: 9px;
  left: 8px;
  font-size: 10px;
  color: #FC7148;
}
.login-form-container .input-wrapper:nth-child(1):before {
  content: "\f007";
}
.login-form-container .input-wrapper:nth-child(2):before {
  content: "\f023";
}
.login-form-container button {
  outline: 0;
  font-size: 8px;
  letter-spacing: 0.1em;
  background-color: #FC7148;
  color: #fff;
  border: none;
  border-radius: 3px;
  width: 200px;
  padding: 1.2em 0;
  margin: 4em auto;
  display: block;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
}
.login-form-container button:hover {
  border-bottom-color: #c12e03;
}

@-webkit-keyframes shake {
  0% {
    margin-left: 0;
  }
  12% {
    margin-left: 0;
  }
  25% {
    margin-left: -10px;
  }
  50% {
    margin-left: 10px;
  }
  75% {
    margin-left: -10px;
  }
  87% {
    margin-left: 0;
  }
  100% {
    margin-left: 0;
  }
}

@keyframes shake {
  0% {
    margin-left: 0;
  }
  12% {
    margin-left: 0;
  }
  25% {
    margin-left: -10px;
  }
  50% {
    margin-left: 10px;
  }
  75% {
    margin-left: -10px;
  }
  87% {
    margin-left: 0;
  }
  100% {
    margin-left: 0;
  }
}
JS
var vContinue = document.getElementById("continue"),
    vLogin = document.getElementById("login");

vContinue.addEventListener("click", function() {
   document.body.className += ' denied';
}, false);

var pfx = ["webkit", "moz", "MS", "o", ""];
function PrefixedEvent(element, type, callback) {
  for (var p = 0; p < pfx.length; p++) {
    if (!pfx[p]) type = type.toLowerCase();
    element.addEventListener(pfx[p]+type, callback, false);
  }
}

PrefixedEvent(vLogin, "AnimationEnd", function () {
  document.body.className = '';
});
Host Instantly Drag and Drop Website Builder

 

Description

Inspired by dribbble shot designed by polanquette http://dribbble.com/shots/1482065-Login
Term
Wed, 11/29/2017 - 11:21

Related Codes

Pen ID
Pen ID
Pen ID