Pen ID
Unlock Campus Themeforest adv



LoginRecover My Password

Forgot password ? Oh I remembered!
* { margin:0; padding:0; box-sizing:border-box;}
  body { background:#442c48; font-family:arial,sans-serif; }
  .box { border:1px solid #72427a; margin:10% auto; width:336px; padding:20px; overflow: hidden; border-radius:3px;}
  a { color:#fff; }

input[type="text"], input[type="password"] { width:100%; height:45px; border:none; padding:0 20px; background:#72427a; color:#eee;  border:1px solid #8e6895; 
font-size:16px; }

input.username { border-radius:3px 3px 0 0; border-bottom:1px solid #8e6895;}
input.password { border-radius:0 0 3px 3px; border-top: none;}

  .password , #forgotPwd span , h2 span, button span { -webkit-transition:all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;}

.forgot h2 span, .forgot button span {  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%); }

.forgot .password { margin-top:-43px;}

  .forgot .password { opacity:0; z-index:-1;}
  .forgot .username { border-radius:3px; }

  #forgotPwd, #forgotPwd span, h2 span  { display:block; overflow: hidden;}
  #forgotPwd { height:36px; margin-bottom: 15px; text-align: right; cursor: pointer; }
  #forgotPwd:hover { text-shadow:0 0 5px #fff;}
  #forgotPwd span { font-size: 13px;
    padding-bottom: 5px; -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);}

   .forgot #forgotPwd span  {  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);}

button { background-color: #000;
  background-image: -webkit-linear-gradient(bottom, #cca800, #d5b82f);
  background-image: -moz-linear-gradient(bottom, #cca800, #d5b82f);
  background-image: -o-linear-gradient(bottom, #cca800, #d5b82f);
  background-image: linear-gradient(to top, #cca800, #d5b82f);

  display: block; width:100%; height:40px; overflow: hidden; color:#333; font-size:14px; text-transform: uppercase; border:none; padding:10px 20px; border-radius:3px; }

  button:hover { cursor: pointer; background:#d4b62a;}

button span  {  display: block; height:30px;}

  h2 { color:#fff; height:30px; margin-bottom: 15px; overflow: hidden;}
$(document).ready(function() {




Host Instantly Drag and Drop Website Builder



why we cant have login page and forgot password on same page. Definately it would be better experience if we have them in same page. no page refresh :)
Wed, 11/29/2017 - 11:22

Related Codes

Pen ID
Pen ID
Pen ID