LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

LoginRecover My Password

Forgot password ? Oh I remembered!
CSS
* { 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;}
JS
$(document).ready(function() {


$("#forgotPwd").click(function(){

    $(".box").toggleClass("forgot");

});


});
Host Instantly Drag and Drop Website Builder

 

Description

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 :)
Term
Wed, 11/29/2017 - 11:22

Related Codes

Pen ID
Pen ID
Pen ID