Pen Settings

HTML

CSS

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.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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.

+ add another resource

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .center
  .ear.ear--left
  .ear.ear--right
  
  .face
    .eyes
      .eye.eye--left
        .glow
      .eye.eye--right
        .glow
    .nose
      svg(width="38.161" height="22.03")
        path(d="M2.017 10.987Q-.563 7.513.157 4.754C.877 1.994 2.976.135 6.164.093 16.4-.04 22.293-.022 32.048.093c3.501.042 5.48 2.081 6.02 4.661q.54 2.579-2.051 6.233-8.612 10.979-16.664 11.043-8.053.063-17.336-11.043z" fill="#243946")
      .glow

    .mouth
      svg.smile(viewBox="-2 -2 84 23" width="84" height="23")
        path(d="M0 0c3.76 9.279 9.69 18.98 26.712 19.238 17.022.258 10.72.258 28 0S75.959 9.182 79.987.161" fill="none" stroke-width="3" stroke-linecap="square" stroke-miterlimit="3")
      .mouth-hole
      .tongue.breath
        .tongue-top
        .line
        .median

  .hands
    .hand.hand--left
      .finger
        .bone
        .nail
      .finger
        .bone
        .nail
      .finger
        .bone
        .nail

    .hand.hand--right
      .finger
        .bone
        .nail
      .finger
        .bone
        .nail
      .finger
        .bone
        .nail

  .login
    label
      .fa.fa-phone
      input.username(type='text' autocomplete='on' placeholder='手机号码')

    label
      .fa.fa-commenting
      input.password(type='password' autocomplete='off' placeholder='健谈的')
      button.password-button 显示密码

    button.login-button 登录

  .social-buttons
    .social
      .fa.fa-wechat
    .social
      .fa.fa-weibo
    .social
      .fa.fa-paw

  .footer 随机文本

a(href='https://dribbble.com/shots/4485321-Login-Page-Homepage' class='inspiration' target='_blank' rel='noopener')
  img(src='https://cdn.dribbble.com/assets/logo-footer-hd-a05db77841b4b27c0bf23ec1378e97c988190dfe7d26e32e1faea7269f9e001b.png' alt='inspiration')

              
            
!

CSS

              
                $dark-blue = #243946

@keyframes breath
  0%
  100%
    transform: rotateX(0deg)
  50%
    transform: rotateX(60deg)

*
  box-sizing: border-box
  
body
  width: 100vw
  height: 100vh
  background-color: #e0e0e0
  overflow: hidden
  font-size: 12px
  
.inspiration
  position: fixed
  bottom: 0
  right: 0
  padding: 10px
  text-align: center
  text-decoration: none
  font-family: 'Gill Sans', sans-serif
  font-size: 12px
  color: rgb(150, 150, 150)
  
  img
    width: 60px

.center
  position: relative
  top: 50%
  left: 50%
  display: inline-block
  width: 275px
  height: 490px
  border-radius: 3px
  transform: translate(-50%, -50%)
  overflow: hidden
  background-image: linear-gradient(to top right, #f9a743, #f9db5f)
  
  @media screen and (max-height: 500px)
    transition: transform 0.5s
    transform: translate(-50%, -50%) scale(0.8)

  .ear
    position: absolute
    top: -110px
    width: 200px
    height: 200px
    border-radius: 50%
    background-color: $dark-blue
    
    &.ear--left
      left: -135px

    &.ear--right
      right: -135px

  .face
    display: flex
    flex-direction: column
    align-items: center
    width: 200px
    height: 150px
    margin: 80px auto 10px
    --rotate-head: 0deg
    transform: rotate(var(--rotate-head))
    transition transform 0.2s
    transform-origin: center 20px
    
  .eye
    display: inline-block
    width: 25px
    height: 25px
    border-radius: 50%
    background-color: $dark-blue
    
    &.eye--left
      margin-right: 40px
    &.eye--right
      margin-left: 40px
    
    .glow
      position: relative
      top: 3px
      right: -12px
      width: 12px
      height: 6px
      border-radius: 50%
      background-color: white
      transform: rotate(38deg)

  .nose
    position: relative
    top: 30px
    transform: scale(1.1)
    
    .glow
      position: absolute
      top: 3px
      left: 32%
      width: 15px
      height: 8px
      border-radius: 50%
      background-color: #476375
      
  .mouth
    position: relative
    margin-top: 45px
    
  svg.smile
    position: absolute
    left: -28px
    top: -19px
    transform: scaleX(1.1)
    stroke: $dark-blue

  .mouth-hole
    position: absolute
    top: 0
    left: -50%
    width: 60px
    height: 15px
    border-radius: 50% / 100% 100% 0% 0
    transform: rotate(180deg)
    background-color: $dark-blue
    z-index: -1

  .tongue
    position: relative
    top: 5px
    width: 30px
    height: 20px
    background-color: #ffd7dd
    transform-origin: top
    transform: rotateX(60deg)

    &.breath
      animation: breath 0.3s infinite linear
      
  .tongue-top
    position: absolute
    bottom: -15px
    width: 30px
    height: 30px
    border-radius: 15px
    background-color: #ffd7dd
    
  .line
    position: absolute
    top: 0
    width: 30px
    height: 5px
    background-color: #fcb7bf
  
  .median
    position: absolute
    top: 0
    left: 50%
    transform: translateX(-50%)
    width: 4px
    height: 25px
    border-radius: 5px
    background-color: #fcb7bf


  .hands
    position: relative
    
    .hand
      position: absolute
      top: -6px
      display: flex
      transition: transform 0.5s ease-in-out
      z-index: 1

    .hand--left
      left: 50px

      &.hide
        transform: translate(2px, -155px) rotate(-160deg)
      &.peek
        transform: translate(0px, -120px) rotate(-160deg)
    
    .hand--right
      left: 170px
      
      &.hide
        transform: translate(-6px, -155px) rotate(160deg)  
      &.peek
        transform: translate(-4px, -120px) rotate(160deg)
      
    .finger
      position: relative
      z-index: 0
      
      .bone
        width: 20px
        height: 20px
        border: 2px solid $dark-blue
        border-bottom: none
        border-top: none
        background-color: #fac555
        
      .nail
        position: absolute
        left: 0
        top: 10px
        width: 20px
        height: 18px
        border-radius: 50%
        border: 2px solid $dark-blue
        background-color: #fac555
        z-index: -1

      &:nth-child(1)
      &:nth-child(3)
        left: 4px
        z-index: 1
        .bone
          height: 10px
          
      &:nth-child(3)
        left: -4px
  
      &:nth-child(2)
        top: -5px
        z-index: 2
      
      &:nth-child(1)
      &:nth-child(3)
        .nail
          top: 0px
              
    
  .login
    position: relative
    display: flex
    flex-direction: column
    
    label
      position: relative
      padding: 0 20px
      
      .fa
        position: absolute
        top: 40%
        left: 35px
        color: #bbb
        
      .fa:before
        position: relative
        left: 1px
    
    input
    .login-button
      width: 100%
      height: 35px
      border: none
      border-radius: 30px
    
    input
      padding: 0 20px 0 40px
      margin: 5px 0
      box-shadow: none
      outline: none
      
    input::placeholder
      color: #ccc
    
    input.password
      padding: 0 90px 0 40px  
    
    .password-button
      position: absolute
      top: 9px
      right: 25px
      display: flex
      justify-content: center
      align-items: center
      width: 80px
      height: 27px
      border-radius: 30px
      border: none
      outline: none
      background-color: $dark-blue
      color: white
      
      &:active
        transform: scale(0.95)
      
    .login-button
      width: calc(100% - 40px)
      margin: 20px 20px 0
      outline: none
      background-color: $dark-blue
      color: white
      transition: transform 0.1s
      
      &:active
        transform: scale(0.95)

  .social-buttons
    display: flex
    justify-content: center
    margin-top: 25px
    
    .social
      display: flex
      justify-content: center
      align-items: center
      width: 35px
      height: 35px
      margin: 0 10px
      border-radius: 50%
      background-color: $dark-blue
      color: white
      font-size: 18px
      
      &:active
        transform: scale(0.95)
  
  .footer
    text-align: center
    margin-top: 15px
    
              
            
!

JS

              
                /*
  Inspired by: "Login Page & Homepage"
  By: Neo
  Link: https://dribbble.com/shots/4485321-Login-Page-Homepage
*/

let usernameInput = document.querySelector('.username')
let passwordInput = document.querySelector('.password')
let showPasswordButton = document.querySelector('.password-button')
let face = document.querySelector('.face')

passwordInput.addEventListener('focus', event => {
  document.querySelectorAll('.hand').forEach(hand => {
    hand.classList.add('hide')
  })
  document.querySelector('.tongue').classList.remove('breath')
})

passwordInput.addEventListener('blur', event => {
  document.querySelectorAll('.hand').forEach(hand => {
    hand.classList.remove('hide')
    hand.classList.remove('peek')
  })
  document.querySelector('.tongue').classList.add('breath')
})

usernameInput.addEventListener('focus', event => {
  let length = Math.min(usernameInput.value.length - 16, 19)
  document.querySelectorAll('.hand').forEach(hand => {
    hand.classList.remove('hide')
    hand.classList.remove('peek')
  })
  
  face.style.setProperty('--rotate-head', `${-length}deg`)
})

usernameInput.addEventListener('blur', event => {
  face.style.setProperty('--rotate-head', '0deg')
})
  
usernameInput.addEventListener('input', _.throttle(event => {
  let length = Math.min(event.target.value.length - 16, 19)
  
  face.style.setProperty('--rotate-head', `${-length}deg`)
}, 100))

showPasswordButton.addEventListener('click', event => {
  if (passwordInput.type === 'text') {
    passwordInput.type = 'password'
    document.querySelectorAll('.hand').forEach(hand => {
      hand.classList.remove('peek')
      hand.classList.add('hide')
    })
  } else {
    passwordInput.type = 'text'
    document.querySelectorAll('.hand').forEach(hand => {
      hand.classList.remove('hide')
      hand.classList.add('peek')
    })
  }
})
              
            
!
999px

Console