Owl replica from readme.io

index.html

<div class="owl">
  <div class="hand"></div>
  <div class="hand hand-r"></div>
  <div class="arms">
    <div class="arm"></div>
    <div class="arm arm-r"></div>
  </div>
</div>
<div class="form">
  <div class="control">
    <label for="email" class="fa fa-envelope"></label>
    <input id="email" placeholder="Email" type="email"></input>
</div>
<div class="control">
  <label for="password" class="fa fa-asterisk"></label>
  <input id="password" placeholder="Password" type="password"></input>
</div>
</div>

Owl replica from readme.io.markdown

Owl replica from readme.io

Replica of owl hiding his hands when going on password field from readme.io

A Pen by Vincenzo Chianese on CodePen.

License.

script.js

$('input[type="password"]').on('focus', () => {
  $('*').addClass('password');
}).on('focusout', () => {
  $('*').removeClass('password');
});;

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css?family=Roboto')
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css')  

body
  background-color #1a8fb4
  font-family 'Roboto', sans-serif
  font-size 14px

.owl
  margin auto
  width 211px
  height 108px
  background-image url('https://dash.readme.io/img/owl-login.png')
  position relative
  
  .hand
    width 34px
    height 34px
    border-radius 40px
    background-color #472d20
    transform scaleY(0.6)
    position absolute
    left 14px
    bottom -8px
    transition 0.3s ease-out
    
    &.password
      transform translateX(42px) translateY(-15px) scale(0.7);
    
    &.hand-r
      left 170px
      
      &.password
        transform translateX(-42px) translateY(-15px) scale(0.7);
    
  .arms
    position absolute
    top 58px
    height 41px
    width 100%
    overflow hidden
  
    .arm
      width 40px
      height 65px
      background-image url('https://dash.readme.io/img/owl-login-arm.png')
      position absolute
      left 20px
      top 40px
      transition 0.3s ease-out
      
      &.password
        transform translateX(40px) translateY(-40px)


      &.arm-r
        left 158px
        transform scaleX(-1)
        
        &.password 
          transform translateX(-40px) translateY(-40px) scaleX(-1)
          
.form
  margin auto
  margin-top -9px
  padding 30px
  background-color white
  width 175px
    
  .control
    margin-bottom 10px
    position relative

    label
      position absolute
      font-size 16px
      top 11px
      left 9px
      color rgba(0,0,0,0.3)
    
    input
      padding 9px 6px 9px 30px
      border-radius 4px
      border 1px solid #cccccc
      font-size 14px