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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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.

            
              h1 BABY FRANKIE

.frankie
  .hair
  .ear
  .ear
  .face
    .scar
      div
      div
      div
    .scar
      div
      div
      div
    .eyebrow
    .eyebrow
    .eyes
      .eyes-orange
        .eyes-black
    .eyes
      .eyes-orange
        .eyes-black
    .nose
    .teether
  .bolt
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Amatic+SC')

body
  background: #F58282
  
  h1
    text-align: center
    font-family: 'Amatic SC'
    font-size: 60px
    color: #222
    margin-bottom: 0px
    
  
  .frankie
    position: relative
    top: -10px
    margin: 0px auto
    height: 300px
    width: 260px
    //border: 1px solid red
    
    .hair
      position: absolute
      left: 110px
      top: 45px
      
      &::after
        content: ""
        position: absolute
        height: 40px
        width: 20px
        border-radius: 50%
        border-right: 2px solid #B26D46
        border-top: 2px solid #B26D46
        transform: rotate(30deg)
    
      &::before
        content: ""
        position: absolute
        left: 20px
        height: 40px
        width: 20px
        border-radius: 50%
        border-right: 2px solid #B26D46
        border-top: 2px solid #B26D46
        transform: rotate(50deg)
    
    .ear
      position: absolute
      top: 130px
      height: 70px
      width: 50px
      border-radius: 50%
      background: darkgreen
      border: 10px solid green
      box-sizing: border-box
      
      &:nth-child(2)
        left: 0px
      
      &:nth-child(3)
        right: 0px
      
    .face
      position: absolute
      top: 80px
      left: 30px
      height: 220px
      width: 200px
      background: green
      border-radius: 20%
      
      .scar
        position: absolute
        height: 5px
        width: 45px
        background: darkgreen
        transform: rotate(20deg)
        
        &:nth-child(even)
          top: 165px
          left: 15px
          transform: rotate(-120deg)
        
        &:nth-child(odd)
          top: 25px
          right: 45px
          transform: rotate(20deg)
    
        div
          position: absolute
          height: 20px
          width: 5px
          background: darkgreen
          
          &:nth-child(1)
            top: -6px
            left: 6px
          
          &:nth-child(2)
            top: -4px
            left: 16px
          
          &:nth-child(3)
            top: -6px
            right: 7px
      
      .eyes
        position: absolute
        top: 50px
        height: 70px
        width: 70px
        background: #eee
        border-radius: 50%
        box-sizing: border-box
        overflow: hidden
        
        &::before
          content: ""
          position: absolute
          top: 0px
          height: 70px
          width: 80px
          background: #fff
          border-radius: 50%
        
        &::after
          content: ""
          position: absolute
          height: 0%
          width: 100%
          background: darkgreen
          animation: blink 3s linear infinite
        
        .eyes-orange
          position: absolute
          height: 40px
          width: 40px
          background: orangered
          border-radius: 50%
          top: 20px
          
          &::before
            content: ""
            position: absolute
            top: 0px
            height: 14px
            width: 14px
            background: #fff
            border-radius: 50%
          
          .eyes-black
            position: absolute
            top: 12px
            height: 24px
            width: 24px
            background: #333
            border-radius: 50%
            
            &:before
              content: ""
              position: absolute
              top: 0px
              background: #fff
              border-radius: 50%
              height: 8px
              width: 8px
            
          
        &:nth-child(odd)
          left: 25px
          
          &::before
            left: 12px
          
          .eyes-orange
            right: 8px
            
            .eyes-black
              right: 5px
              
              &::before
                right: 2px
          
        &:nth-child(even)
          right: 25px
          
          &::before
            right: 12px
          
          .eyes-orange
            left: 8px
            
            .eyes-black
              left: 5px
              
              &::before
                left: 2px
         
            &::before
              right: 0px
            
      .nose
        position: absolute
        top: 105px
        left: 90px
        height: 20px
        width: 20px
        border-radius: 50%
        border-bottom: 5px solid rgba(0, 0, 0, 0.3)
        transform: rotate(-110deg)
        
      .teether
        position: absolute
        bottom: 15px
        left: 70px
        height: 70px
        width: 70px
        background: #4319FF
        border-radius: 50%
        border: 1px solid rgba(0, 0, 0, 0.2)
  
        &::before
          content: ""
          position: absolute
          top: 15px
          left: 20px
          height: 30px
          width: 30px
          border: 1px solid rgba(0, 0, 0, 0.4)
          background: #7E5AFF
          border-radius: 50% 
          box-sizing: border-box
  
        &::after
          content: ""
          position: absolute
          top: 22px
          right: 14px
          height: 32px
          width: 32px
          border: 3px solid #fff
          border-radius: 50%
          box-sizing: border-box
          
    .bolt
      position: absolute
      bottom: 20px
      left: 10px
      height: 20px
      width: 240px
      background: #555
      z-index: -1
    
      &::before
        content: ""
        position: absolute
        top: -8px
        left: -10px
        height: 36px
        width: 20px
        background: #333
  
      &::after
        content: ""
        position: absolute
        top: -8px
        right: -10px
        height: 36px
        width: 20px
        background: #333
  
  
    @keyframes blink
      0%, 8%
        height: 0%
      4%
        height: 100px
            
          
!
999px
Loading ..................

Console