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

              
                <div class="pokemon-sky"> 
  <div class="cloud cloud-1"></div>
  <div class="cloud cloud-2"></div>
  <div class="cloud cloud-3"></div>
  <div class="cloud cloud-4"></div>
</div> 
<div class="trainer">
</div>  
<div class="pokemon">
</div>
<div class="pokemon-grass"></div>

  
              
            
!

CSS

              
                $red: #ff3300;
$skin: #ffe6e6;
$purple: #9933ff;
$sky-blue:  #1ad1ff;
$blue:  #66ccff;
$teal: #00cc99;
$black: #000;
$white: #fff;
$orange: #ff9900;
$dark-orange: #ff6600;
$yellow: #ffff00;
$path: #b8b894;
$grass: #33cc33;
$cloud: #e6e6e6;

body {
  margin: 0;
}
.pokemon-sky {
  height: 70vh;
  width: 100%;
  background-color: $sky-blue;
}
.pokemon-grass {
  height: 30vh;
  width: 100%;
  background-color: $grass;
}

.cloud {
  &:after {
    content: '';
    display: block;
    height: 8px;
    width: 8px;
    box-shadow:
      32px 0 $cloud,
      40px 0 $cloud,
      48px 0 $cloud,
      56px 0 $cloud,
    
      24px 8px $cloud,
      32px 8px $white,
      40px 8px $white,
      48px 8px $white,
      56px 8px $white,
      64px 8px $cloud,
      
      16px 16px $cloud,
      24px 16px $white,
      32px 16px $white,
      40px 16px $white,
      48px 16px $white,
      56px 16px $white,
      64px 16px $white,
      72px 16px $cloud,
      
      8px 24px $cloud,
      16px 24px $white,
      24px 24px $white,
      32px 24px $white,
      40px 24px $white,
      48px 24px $white,
      56px 24px $white,
      64px 24px $white,
      72px 24px $white,
      80px 24px $cloud,
      
      0px 32px $cloud,
      8px 32px $white,
      16px 32px $white,
      24px 32px $white,
      32px 32px $white,
      40px 32px $white,
      48px 32px $white,
      56px 32px $white,
      64px 32px $white,
      72px 32px $white,
      80px 32px $white,
      88px 32px $cloud,
      
      8px 40px $cloud,
      16px 40px $cloud,
      24px 40px $cloud,
      32px 40px $cloud,
      40px 40px $cloud,
      48px 40px $cloud,
      56px 40px $cloud,
      64px 40px $cloud,
      72px 40px $cloud,
      80px 40px $cloud,
      
  } 
}

.cloud-1 {
  position: absolute;
  top: 10%;
  left: 20%;
}

.cloud-2 {
  position: absolute;
  top: 15%;
  left: 45%;
}


.cloud-3 {
  position: absolute;
  top: 10%;
  left: 80%;
}


.cloud-4 {
  position: absolute;
  top: 20%;
  left: 2%;
}

.trainer {
  position: absolute;
  top: calc(70vh - 100px);
  left: 35%;
  animation: bob 0.3s alternate infinite;
  animation-timing-function: ease-out;

   &:after {
    content: '';
    display: block;
    height: 8px;
    width: 8px;
    box-shadow:
      32px 0 $black,
      40px 0 $black,
      48px 0 $black,
      56px 0 $black,
      64px 0 $black,
      
      24px 8px $black,
      32px 8px $red,
      40px 8px $red,
      48px 8px $red,
      56px 8px $red,
      64px 8px $red,
      72px 8px $black,
      
      16px 16px $black,
      24px 16px $red,
      32px 16px $red,
      40px 16px $red,
      48px 16px $red,
      56px 16px $red,
      64px 16px $red,
      72px 16px $red,
      80px 16px $black,
      
      8px 24px $black,
      16px 24px $black,
      24px 24px $white,
      32px 24px $red,
      40px 24px $red,
      48px 24px $red,
      56px 24px $red,
      64px 24px $red,
      72px 24px $red,
      80px 24px $black,
      
      0 32px $black,
      8px 32px $white,
      16px 32px $white,
      24px 32px $white,
      32px 32px $white,
      40px 32px $red,
      48px 32px $black,
      56px 32px $black,
      64px 32px $black,
      72px 32px $black,
      80px 32px $black,
      88px 32px $black,
      
      8px 40px $black,
      16px 40px $black,
      24px 40px $red,
      32px 40px $red,
      40px 40px $red,
      48px 40px $skin,
      56px 40px $black,
      64px 40px $black,
      72px 40px $black,
      80px 40px $black,
      88px 40px $black,
      96px 40px $black,
      
      16px 48px $black,
      24px 48px $skin,
      32px 48px $black,
      40px 48px $skin,
      48px 48px $skin,
      56px 48px $black,
      64px 48px $skin,
      72px 48px $skin,
      80px 48px $black,
      88px 48px $black,
      96px 48px $black,
      
      16px 56px $black,
      24px 56px $skin,
      32px 56px $black,
      40px 56px $skin,
      48px 56px $skin,
      56px 56px $black,
      64px 56px $skin,
      72px 56px $skin,
      80px 56px $black,
      88px 56px $black,
      
      16px 64px $black,
      24px 64px $skin,
      32px 64px $skin,
      40px 64px $skin,
      48px 64px $skin,
      56px 64px $skin,
      64px 64px $skin,
      72px 64px $skin,
      80px 64px $black,
      
      24px 72px $black,
      32px 72px $skin,
      40px 72px $skin,
      48px 72px $skin,
      56px 72px $skin,
      64px 72px $black,
      72px 72px $black,
      80px 72px $purple,
      88px 72px $black,
      
      32px 80px $black,
      40px 80px $black,
      48px 80px $black,
      56px 80px $black,
      64px 80px $black,
      72px 80px $black,
      80px 80px $purple,
      88px 80px $black,
      
      16px 88px $black,
      24px 88px $black,
      32px 88px $black,
      40px 88px $black,
      48px 88px $black,
      56px 88px $black,
      64px 88px $skin,
      72px 88px $skin,
      80px 88px $black,
      88px 88px $black,
      
      8px 96px $black,
      16px 96px $blue,
      24px 96px $blue,
      32px 96px $black,
      40px 96px $teal,
      48px 96px $teal,
      56px 96px $black,
      64px 96px $skin,
      72px 96px $skin,
      80px 96px $black,
      88px 96px $blue,
      96px 96px $black,
      
      16px 104px $black,
      24px 104px $blue,
      32px 104px $blue,
      40px 104px $black,
      48px 104px $black,
      56px 104px $black,
      64px 104px $black,
      72px 104px $black,
      80px 104px $blue,
      88px 104px $blue,
      96px 104px $black,
      
      24px 112px $black,
      32px 112px $black,
      40px 112px $black,
      80px 112px $black,
      88px 112px $black,
      96px 112px $black;
      
  }
}

.pokemon {
  position: absolute;
  top: calc(70vh - 100px);
  left: 50%;
  animation: bob 0.3s alternate infinite; 
  animation-timing-function: ease-out;
   &:after {
    content: '';
    display: block;
    height: 8px;
    width: 8px;
    box-shadow:
      32px 0 $black,
      40px 0 $black,
      48px 0 $black,
      56px 0 $black,
      136px 0 $black,
      
      24px 8px $black,
      32px 8px $orange,
      40px 8px $orange,
      48px 8px $orange,
      56px 8px $dark-orange,
      64px 8px $black,
      128px 8px $black,
      136px 8px $red,
      144px 8px $black,
      
      16px 16px $black,
      24px 16px $orange,
      32px 16px $orange,
      40px 16px $orange,
      48px 16px $orange,
      56px 16px $orange,
      64px 16px $dark-orange,
      72px 16px $black,
      128px 16px $black,
      136px 16px $red,
      144px 16px $red,
      152px 16px $black,
      
      16px 24px $black,
      24px 24px $orange,
      32px 24px $orange,
      40px 24px $orange,
      48px 24px $orange,
      56px 24px $orange,
      64px 24px $orange,
      72px 24px $black,
      128px 24px $black,
      136px 24px $red,
      144px 24px $red,
      152px 24px $black,
      
      8px 32px $black,
      16px 32px $orange,
      24px 32px $orange,
      32px 32px $orange,
      40px 32px $orange,
      48px 32px $orange,
      56px 32px $orange,
      64px 32px $orange,
      72px 32px $dark-orange,
      80px 32px $black,
      120px 32px $black,
      128px 32px $red,
      136px 32px $red,
      144px 32px $red,
      152px 32px $black,
      
      0 40px $black,
      8px 40px $orange,
      16px 40px $orange,
      24px 40px $orange,
      32px 40px $orange,
      40px 40px $white,
      48px 40px $black,
      56px 40px $orange,
      64px 40px $orange,
      72px 40px $dark-orange,
      80px 40px $black,
      112px 40px $black,
      120px 40px $red,
      128px 40px $red,
      136px 40px $dark-orange,
      144px 40px $red,
      152px 40px $red,
      160px 40px $black,
      
      0 48px $black,
      8px 48px $orange,
      16px 48px $orange,
      24px 48px $orange,
      32px 48px $orange,
      40px 48px $black,
      48px 48px $black,
      56px 48px $orange,
      64px 48px $dark-orange,
      72px 48px $dark-orange,
      80px 48px $dark-orange,
      88px 48px $black,
      112px 48px $black,
      120px 48px $red,
      128px 48px $dark-orange,
      136px 48px $yellow,
      144px 48px $dark-orange,
      152px 48px $red,
      160px 48px $black,
      
      0 56px $black,
      8px 56px $orange,
      16px 56px $orange,
      24px 56px $orange,
      32px 56px $orange,
      40px 56px $black,
      48px 56px $black,
      56px 56px $orange,
      64px 56px $dark-orange,
      72px 56px $dark-orange,
      80px 56px $dark-orange,
      88px 56px $black,
      112px 56px $black,
      120px 56px $red,
      128px 56px $dark-orange,
      136px 56px $yellow,
      144px 56px $dark-orange,
      152px 56px $red,
      160px 56px $black,
      
      8px 64px $black,
      16px 64px $dark-orange,
      24px 64px $orange,
      32px 64px $orange,
      40px 64px $orange,
      48px 64px $orange,
      56px 64px $dark-orange,
      64px 64px $dark-orange,
      72px 64px $dark-orange,
      80px 64px $dark-orange,
      88px 64px $dark-orange,
      96px 64px $black,
      120px 64px $black,
      128px 64px $yellow,
      136px 64px $yellow,
      144px 64px $black,
      152px 64px $black,
      
      16px 72px $black,
      24px 72px $black,
      32px 72px $dark-orange,
      40px 72px $dark-orange,
      48px 72px $dark-orange,
      56px 72px $dark-orange,
      64px 72px $dark-orange,
      72px 72px $dark-orange,
      80px 72px $dark-orange,
      88px 72px $dark-orange,
      96px 72px $dark-orange,
      104px 72px $black,
      120px 72px $black,
      128px 72px $dark-orange,
      136px 72px $black,
      
      24px 80px $black,
      32px 80px $black,
      40px 80px $black,
      48px 80px $dark-orange,
      56px 80px $dark-orange,
      64px 80px $black,
      72px 80px $dark-orange,
      80px 80px $dark-orange,
      88px 80px $dark-orange,
      96px 80px $dark-orange,
      104px 80px $black,
      120px 80px $black,
      128px 80px $dark-orange,
      136px 80px $black,
      
      32px 88px $black,
      40px 88px $yellow,
      48px 88px $yellow,
      56px 88px $black,
      64px 88px $orange,
      72px 88px $orange,
      80px 88px $dark-orange,
      88px 88px $dark-orange,
      96px 88px $dark-orange,
      104px 88px $black,
      120px 88px $black,
      128px 88px $dark-orange,
      136px 88px $black,
      
      32px 96px $black,
      40px 96px $yellow,
      48px 96px $yellow,
      56px 96px $yellow,
      64px 96px $black,
      72px 96px $black,
      80px 96px $dark-orange,
      88px 96px $dark-orange,
      96px 96px $dark-orange,
      104px 96px $black,
      112px 96px $black,
      120px 96px $dark-orange,
      128px 96px $dark-orange,
      136px 96px $black,
      
      24px 104px $black,
      32px 104px $white,
      40px 104px $yellow,
      48px 104px $yellow,
      56px 104px $yellow,
      64px 104px $dark-orange,
      72px 104px $dark-orange,
      80px 104px $dark-orange,
      88px 104px $dark-orange,
      96px 104px $dark-orange,
      104px 104px $dark-orange,
      112px 104px $dark-orange,
      120px 104px $dark-orange,
      128px 104px $black,
      
      32px 112px $black,
      40px 112px $black,
      48px 112px $black,
      56px 112px $orange,
      64px 112px $orange,
      72px 112px $dark-orange,
      80px 112px $dark-orange,
      88px 112px $dark-orange,
      96px 112px $dark-orange,
      104px 112px $dark-orange,
      112px 112px $dark-orange,
      120px 112px $black,
      
      56px 120px $black,
      64px 120px $black,
      72px 120px $black,
      80px 120px $dark-orange,
      88px 120px $dark-orange,
      96px 120px $dark-orange,
      104px 120px $black,
      112px 120px $black,
      
      64px 128px $black,
      72px 128px $white,
      80px 128px $dark-orange,
      88px 128px $white,
      96px 128px $black,
      104px 128px $black,
      
      72px 136px $black,
      80px 136px $black,
      88px 136px $black,
  }  
}

@keyframes bob {
   0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(50%);
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console