cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-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.

            
              .container
  .wall-e-body
    .control-panel
    .button-panel-1
    .button-panel-2
  .wall-e-left-leg
  .wall-e-right-leg
  .wall-e-left-hand
    .finger-1
    .finger-2
  .wall-e-right-hand
    .finger-1
    .finger-2
  .wall-e-neck
  .wall-e-head-left
    .eye
  .wall-e-head-right
    .eye
            
          
!
            
              @import 'nib'
dark-color=#594946
light-color=#C5A784
html
  background-color dark-color
.container
  relative top left
  width 400px
  height 400px
  margin 0 auto
.wall-e-body
  absolute top 45% left 30%
  width 40%
  height @width
  background-color light-color
  &::after
    content "WALL"
    absolute bottom 5% right 21% 
    font-size 16px
    font-family 'Nova Square', cursive;
    letter-spacing 3px
    font-weight 700
    color dark-color
  &::before
    content "E"
    absolute bottom 1% right 2% 
    font-size 30px
    font-family 'Monofett', cursive;
    letter-spacing 3px
    color dark-color
  .control-panel
    absolute top 2% left 2%
    width 96%
    height 30%
    background-color dark-color
  .button-panel-1
    absolute top 5% left 32%
    width 16%
    height 14%
    background repeating-linear-gradient(to bottom, light-color, light-color 9%, dark-color 9%, dark-color 18%)
    &::after
      content ""
      absolute top left 45%
      width 10%
      height 100%
      background-color dark-color
  .button-panel-2
    absolute top 4% right 22%
    width 26%
    height 26%
    background light-color
    &::before
      content "*"
      color dark-color
      font-family 'PT Serif', serif
      font-size 35px
      padding-left 5%
    &::after
      content ""
      absolute top 15% right 12%
      width 40%
      height 75%
      background repeating-linear-gradient(to bottom, dark-color, dark-color 7%, light-color 5%, light-color 12%)
.wall-e-left-leg
  absolute bottom 5% left 11%
  width 18%
  height 30%
  background repeating-linear-gradient(to bottom, light-color, light-color 12%, dark-color 3%, dark-color 15%)
.wall-e-right-leg
  absolute bottom 5% right 11%
  width 18%
  height 30%
  background repeating-linear-gradient(to bottom, light-color, light-color 12%, dark-color 3%, dark-color 15%)
.wall-e-left-hand
  absolute top 48% left 21%
  width 17%
  height 13%
  .finger-1
    absolute top left
    width 100%
    height 48%
    background-color light-color
    border 3px solid dark-color
    box-sizing border-box
  .finger-2
    absolute bottom left
    width 100%
    height 48%
    background-color light-color
    border 3px solid dark-color
    box-sizing border-box
  &::after
    content ""
    absolute top 25% left -5%
    width 27%
    height 50%
    background-color light-color
    border 3px solid dark-color
    box-sizing border-box
.wall-e-right-hand
  absolute top 48% right 21%
  width 17%
  height 13%
  .finger-1
    absolute top right
    width 100%
    height 48%
    background-color light-color
    border 3px solid dark-color
    box-sizing border-box
  .finger-2
    absolute bottom right
    width 100%
    height 48%
    background-color light-color
    border 3px solid dark-color
    box-sizing border-box
  &::after
    content ""
    absolute top 25% right -5%
    width 27%
    height 50%
    background-color light-color
    border 3px solid dark-color
    box-sizing border-box
.wall-e-neck
  absolute top 19.5% left 48.5%
  width 3%
  height 25%
  background-color light-color
  &::after
    content ""
    absolute top 55% left -50%
    width 200%
    height 25%
    background-color light-color
    border 3px solid dark-color
    box-sizing border-box
.wall-e-head-left
  absolute top 15% left 25.5%
  width 26%
  height .7 * @width
  background-color light-color
  border-radius 40% 0 70% 30% / 50% 0 100% 40% 
  transform rotate(-10deg)
  border 3px solid dark-color
  box-sizing border-box
  .eye
    absolute top 8% left 35% 
    width 46%
    height 1.43 * @width
    background-color dark-color
    border-radius 50%
    &::before
      content ""
      absolute top 30% left 8%
      width 35%
      height @width
      background-color light-color
      border-radius 50%
    &::after
      content ""
      absolute top 15% left 28%
      width 25%
      height @width
      background-color light-color
      border-radius 50%
      border 2px solid dark-color
      box-sizing border-box
  &::before
    content ""
    absolute top 20% left 15%
    width 6%
    height 1.43 * @width
    background dark-color
    border-radius 50%
    box-shadow 3px 35px 0px 0px dark-color, 70px -5px 0px 0px dark-color
.wall-e-head-right
  absolute top 15% right 25.5%
  width 26%
  height .7 * @width
  background-color light-color
  border-radius 40% 0 70% 30% / 50% 0 100% 40% 
  border-radius 0 40% 30% 70% / 0 50% 40% 100% 
  transform rotate(10deg)
  border 3px solid dark-color
  box-sizing border-box
  .eye
    absolute top 8% right 35% 
    width 46%
    height 1.43 * @width
    background-color dark-color
    border-radius 50%
    &::before
      content ""
      absolute top 30% right 8%
      width 35%
      height @width
      background-color light-color
      border-radius 50%
    &::after
      content ""
      absolute top 15% right 28%
      width 25%
      height @width
      background-color light-color
      border-radius 50%
      border 2px solid dark-color
      box-sizing border-box
  &::before
    content ""
    absolute top 20% right 15%
    width 6%
    height 1.43 * @width
    background dark-color
    border-radius 50%
    box-shadow -3px 35px 0px 0px dark-color, -70px -5px 0px 0px dark-color, 11px 238px 0px 0px dark-color     

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console