Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <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>

  
            
          
!
            
              $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%);
  }
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console