cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="menu">
  <ul class="mainmenu clearfix">
    <li class="menuitem">Well</li>
    <li class="menuitem">how</li>
    <li class="menuitem">about</li>
    <li class="menuitem">that?</li>
  </ul>
</div>
<button id="findpass">What's the password?</button>
<div class="form">
  <div class="forceColor"></div>
  <div class="topbar">
    <div class="spanColor"></div>
    <input type="password" class="input" id="password" placeholder="Password"/>
  </div>
  <button class="submit" id="submit" >Login</button>
</div>
<article class="article">
  <h1>This is an article</h1>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in laoreet mi. In hac habitasse platea dictumst. Ut varius scelerisque ipsum ac pretium. Aenean a luctus dolor. Fusce sodales iaculis ipsum vel aliquam. In tincidunt tellus faucibus nibh interdum, vel sollicitudin erat maximus. Etiam leo nisl, sodales id vulputate in, tincidunt facilisis felis. Mauris pellentesque libero in vestibulum porta. Vestibulum at nisi ullamcorper, molestie magna non, rhoncus nisi.

Duis vitae dapibus tortor. Quisque nec accumsan lacus. Ut purus nisl, semper sed justo interdum, venenatis facilisis mauris. Nulla et ipsum porttitor, hendrerit justo eu, euismod diam. Curabitur ac porttitor purus, ac gravida massa. Curabitur eleifend dolor eu tellus pretium, sit amet tristique leo tristique. Nulla sed maximus urna, quis varius neque. Pellentesque a ante tincidunt, maximus urna vitae, ultricies metus. Duis eu accumsan turpis. Ut vitae lorem auctor augue aliquet accumsan. Etiam sit amet eleifend libero, nec gravida nibh. Maecenas vitae ligula sodales, tempor nulla eget, bibendum justo. Proin vitae lectus malesuada, varius lacus a, tempor nisl. Vestibulum eget massa a arcu euismod fringilla a vitae magna. Aliquam nec ultricies nisi. Mauris et accumsan purus.

Sed quis felis consequat, posuere urna sodales, finibus nibh. Morbi euismod ut leo in gravida. In eu arcu a leo cursus tincidunt at sit amet nunc. Nunc volutpat massa eu tortor ornare, at elementum purus finibus. Integer nec feugiat felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed blandit, est id luctus porta, risus elit varius nibh, non tempus lectus nisl vel velit. Nulla cursus malesuada felis. Duis eget orci in massa auctor porttitor sed auctor lectus.

Praesent eget pulvinar metus. Cras aliquam mollis mollis. Suspendisse potenti. Ut massa eros, ultrices mollis venenatis sit amet, posuere eu velit. Pellentesque a ligula dolor. Fusce mollis sed odio non dictum. Cras at pharetra nisl. Vivamus feugiat est ac vehicula pulvinar. Integer sed metus ut justo elementum suscipit sed sed eros. Proin ornare lacus vitae orci pellentesque varius.

Sed malesuada ac lorem sit amet convallis. Nulla et mauris nec magna faucibus viverra. Maecenas imperdiet nulla at orci malesuada rhoncus. Maecenas vel efficitur purus. Cras sit amet nibh congue, varius leo in, tempor nisl. Vestibulum a orci non tellus feugiat consequat. Ut at turpis lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer quam ante, luctus ac pulvinar id, gravida id odio. Mauris eu neque venenatis, fermentum nunc eget, convallis turpis.
</article>
            
          
!
            
              @import "compass/css3";

$base: rgba(255,255,255,0.4);
$red: #FF2B4B;
$green: #26C97D;
$padding:10px 16px;
body{
  font-size:62.5%;
  width:100%;
  height:100%;
  position:absolute;
  font-family:Raleway;
 background:url(https://newevolutiondesigns.com/images/freebies/city-wallpaper-18.jpg) no-repeat fixed;
  background-size:cover;
  background-position:50%;
  -webkit-font-smoothing:antialiased;
  font-smoothing:antialiased;
  .menu{
    position:absolute;
    width:100%;
    background:inherit;
    .mainmenu{
      background:url(https://newevolutiondesigns.com/images/freebies/city-wallpaper-18.jpg) no-repeat fixed;
  background-size:cover;
  background-position:50%;
      &:before{
        position:absolute;
        content:"";
        display:block;
        width:100%;
        height:100%;
        background:inherit;
        @include filter(blur(3px));
      }
      &:after{
        clear: both;
        content: "";
        display: block;
      }
      .menuitem{
        float:left;
        width:10%;
        padding-top:10px;
        padding-bottom:10px;
        text-align:center;
        cursor:pointer;
        color:white;
        font-size: 1.5rem;
      }
    }
  }
  #findpass{
    top:50%;
    left:5%;
    padding: 10px 20px;
    width:auto;
    background: white;
    color:rgba(0,0,0,0.7);
    position:fixed;
    background: rgba(255,255,255,0.5);
    border:none;
    font-size: 1.2rem;
    @include border-radius(10px);
    cursor:pointer;
    @include transform(translate3d(0,-50%,0));
    &:focus{
      outline:none;
    }
  }
  .article{
    width:960px;
    font-size: 1.4rem;
    margin:20px auto;
    color:white;
    opacity:0;
    visibility:hidden;
    @include transition(opacity 400ms linear);
    @include transition-delay(800ms);
    top:0;
    position:relative;
    &.active{
      opacity:1;
      visibility:visible;
    }
    h1{
      font-size:3rem;
      text-align:center;
      margin-bottom:20px;
    }
  }
}
*{
  @include box-sizing(border-box);
}
.form{
  margin:0 auto;
  position:fixed;
  top:35%;
  left:50%;
  @include transform(translate3d(-50%,0,0));
  width:350px;
  padding: 20px;
  overflow:hidden;
  background-color:rgba(0,0,0,1);
  border: 1px solid rgba(255,255,255,0.5);
  background:inherit;
  @include border-radius(12px);
  .forceColor{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background-color:rgba(0,0,0,0.4);
  }
  
  &:before{
    content:"";
    width:110%;
    height:110%;
    position:absolute;
    background:inherit;
    left:-5%;
    right:0;
    bottom:0;
    top:-5%;
    @include filter(blur(3px));
  }
  &.goAway{
    opacity:0;
    @include transform(scale(0.6) translate3d(-50%,0,0));
    @include transition(transform 200ms ease-in-out,opacity 100ms linear);
    @include transition-delay(600ms);
  }
  .topbar{
    .spanColor{
      position:absolute;
      width:0px;
      right:20px;
      height:43px;
      opacity:0.2;
      background-color:white;
      border-top-left-radius:0px;
      border-bottom-left-radius:0px;
      border-top-right-radius:6px;
      border-bottom-right-radius:6px;
      @include transition(width 150ms ease-in-out, background-color 150ms 250ms ease-in-out, border 150ms 250ms ease-in-out);
    }
    .input{
      display:block;
      width:100%;
      position:relative;
      border-top-left-radius:6px;
      border-bottom-left-radius:6px;
      border-top-right-radius:6px;
      border-bottom-right-radius:6px;
      font-size:1rem;
      background: transparent;
      border-top: 1px solid $base;
      border-left: 1px solid $base;
      border-bottom: 1px solid $base;
      border-right: 1px solid $base;
      margin-bottom: 25px;
      color:$base;
      padding: 10px 20px;
      &::-webkit-input-placeholder{
        color:white;
        font-size: 1.2rem;
        font-family:Raleway;
        line-height:1.3rem;
        font-weight:200;
      }
      &:focus{
        outline:none;
        color:white;
        border: 1px solid white;
      }
      &.disabled:hover{
        border: 1px solid $base;
      }
      &:hover{
        border:1px solid white;
      }
    }
  }
  .submit{
      padding: 10px 20px;
      width:100%;
      font-size: 1.2rem;
      font-family: Raleway;
      font-weight:200;
      display:block;
      color: white;
      position:relative;
      border:1px solid $base;
      background: rgba(255,255,255,0.5);
      @include border-radius(6px);
      cursor:pointer;
      &:focus{
        outline:none;
      }
      &:hover{
        color:white;
        border: 1px solid white;
      }
      &.recover{
        background:$red;
        color:white !important;
        border: 1px solid white !important;
        transition: all 400ms linear;
      }
   }
}
.topbar.error{
  .spanColor{
    width:calc(100% - 39px);
    border-top-left-radius: 6px;
    border: 1px solid $base;
    border-bottom-left-radius: 6px;
    background-color:$red;
  }
  &+.submit{
    color:white;
  }
  .input{
    color: $base;
    border: 1px solid $base;
    &::-webkit-input-placeholder{
      color:white;
    }
  }
}
.topbar.success{
  .spanColor{
    width:calc(100% - 39px);
    border-top-left-radius: 6px;
    border: 1px solid $green;
    border-bottom-left-radius: 6px;
    background-color:$green;
  }
  &+.submit{
    color:white;
    border: 1px solid white;
  }
  .input{
    color: white;
    border: 1px solid $green;
    &::-webkit-input-placeholder{
      color:white;
    }
  }
}
            
          
!
            
              
var form = $('.form');
var btn = $('#submit');
var topbar = $('.topbar');
var input = $('#password');
var article =$('.article');
var tries = 0;
var h = input.height();
$('.spanColor').height(h+23);
$('#findpass').on('click',function(){
  $(this).text('this-is-soo-cool');
});
input.on('focus',function(){
  topbar.removeClass('error success');
  input.text('');
});
btn.on('click',function(){
  if(tries<=2){
    var pass = $('#password').val();
    console.log(pass);
    if(pass==='this-is-soo-cool'){
    setTimeout(function(){
      btn.text('Success!');
    },250);
    topbar.addClass('success');
    form.addClass('goAway');
    article.addClass('active');
    tries=0;
  }
    else{
      topbar.addClass('error');
      tries++;
      switch(tries){
        case 0:
          btn.text('Login');
          break;
        case 1:
          setTimeout(function(){
          btn.text('You have 2 tries left');
          },300);
          break;
        case 2:
          setTimeout(function(){
          btn.text('Only 1 more');
          },300);
          break;
        case 3:
          setTimeout(function(){
          btn.text('Recover password?');
          },300);
          input.prop('disabled',true);
          topbar.removeClass('error');
          input.addClass('disabled');
          btn.addClass('recover');
          break;
         defaut:
          btn.text('Login');
          break;
      }
    } 
  }
  else{
    topbar.addClass('disabled');
  }
  
});

$('.form').keypress(function(e){
   if(e.keyCode==13)
   submit.click();
});
input.keypress(function(){
  topbar.removeClass('success error');
});
            
          
!
999px
Loading ..................

Console