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='wrapper'>
<div class='megaman'/>
<p><strong>CSS3 Pixel Art Megaman 8-bit</strong>
  <br/>Recreation of: <a href="http://thecoolship.com/wp-content/uploads/2013/03/Mega-Man-Sprite.gif">http://thecoolship.com/wp-content/uploads/2013/03/Mega-Man-Sprite.gif<a/></p>
  </div>
            
          
!
            
              @import "compass/css3";

$black: #000;
$white: #fff;
$blue: rgb(1,113,239);
$lb: rgb(57,190,255);
$tan: rgb(255,231,165);

.wrapper{
  position: relative;
  top: 2em;
}
.megaman{
  position: relative;
  top: -30px;
  left: -30px;
  margin: 0px;
  padding: 0px;
	display: block;
	width: 20px;
	height: 20px;
	box-shadow: 
    380px 20px $black,
    400px 20px $black,
    420px 20px $black,
    340px 40px $black,
    360px 40px $black,
    380px 40px $black,
    400px 40px $lb,
    420px 40px $lb,
    440px 40px $black,
    460px 60px $black,
    440px 60px $lb,
    420px 60px $lb,
    400px 60px $black,
    380px 60px $blue,
    360px 60px $blue,
    340px 60px $blue,
    320px 60px $black,
    300px 80px $black,
    320px 80px $blue,
    340px 80px $blue,
    360px 80px $blue,
    380px 80px $blue,
    400px 80px $blue,
    420px 80px $black,
    440px 80px $black,
    460px 80px $black,
    480px 80px $black,
    300px 100px $black,
    320px 100px $blue,
    340px 100px $blue,
    360px 100px $blue,
    380px 100px $blue,
    400px 100px $blue,
    420px 100px $black,
    440px 100px $lb,
    460px 100px $lb,
    480px 100px $blue,
    500px 100px $black,
    280px 120px $black,
    300px 120px $lb,
    320px 120px $blue,
    340px 120px $blue,
    360px 120px $blue,
    380px 120px $blue,
    400px 120px $blue,
    420px 120px $blue,
    440px 120px $black,
    460px 120px $black,
    480px 120px $blue,
    500px 120px $black,
    240px 140px $black,
    260px 140px $black,
    280px 140px $black,
    300px 140px $lb,
    320px 140px $blue,
    340px 140px $blue,
    360px 140px $tan,
    380px 140px $white,
    400px 140px $white,
    420px 140px $white,
    440px 140px $blue,
    460px 140px $blue,
    480px 140px $white,
    500px 140px $black,
    200px 160px $black,
    220px 160px $black,
    240px 160px $lb,
    260px 160px $lb,
    280px 160px $black,
    300px 160px $lb,
    320px 160px $blue,
    340px 160px $tan,
    360px 160px $white,
    380px 160px $white,
    400px 160px $black,
    420px 160px $black,
    440px 160px $tan,
    460px 160px $black,
    480px 160px $white,
    500px 160px $black,
    180px 180px $black,
    200px 180px $lb,
    220px 180px $lb,
    240px 180px $lb,
    260px 180px $lb,
    280px 180px $lb,
    300px 180px $black,
    320px 180px $blue,
    340px 180px $tan,
    360px 180px $white,
    380px 180px $white,
    400px 180px $black,
    420px 180px $black,
    440px 180px $tan,
    460px 180px $black,
    480px 180px $white,
    500px 180px $black,
    580px 180px $black,
    600px 180px $black,
    620px 180px $black,
    640px 180px $black,
    160px 200px $black,
    180px 200px $blue,
    200px 200px $lb,
    220px 200px $lb,
    240px 200px $lb,
    260px 200px $lb,
    280px 200px $lb,
    300px 200px $black,
    320px 200px $blue,
    340px 200px $tan,
    360px 200px $tan,
    380px 200px $white,
    400px 200px $white,
    420px 200px $white,
    440px 200px $tan,
    460px 200px $white,
    480px 200px $tan,
    500px 200px $black,
    520px 200px $black,
    540px 200px $black,
    560px 200px $black,
    580px 200px $blue,
    600px 200px $blue,
    620px 200px $blue,
    640px 200px $black,
    660px 200px $black,
    680px 200px $black,
    160px 220px $black,
    180px 220px $blue,
    200px 220px $blue,
    220px 220px $blue,
    240px 220px $lb,
    260px 220px $black,
    280px 220px $lb,
    300px 220px $lb,
    320px 220px $black,
    340px 220px $blue,
    360px 220px $tan,
    380px 220px $black,
    400px 220px $black,
    420px 220px $black,
    440px 220px $black,
    460px 220px $tan,
    480px 220px $black,
    500px 220px $black,
    520px 220px $lb,
    540px 220px $lb,
    560px 220px $black,
    580px 220px $blue,
    600px 220px $lb,
    620px 220px $lb,
    640px 220px $lb,
    660px 220px $black,
    680px 220px $lb,
    700px 220px $black,
    160px 240px $black,
    180px 240px $blue,
    200px 240px $blue,
    220px 240px $blue,
    240px 240px $black,
    260px 240px $blue,
    280px 240px $black,
    300px 240px $lb,
    320px 240px $lb,
    340px 240px $black,
    360px 240px $tan,
    380px 240px $tan,
    400px 240px $tan,
    420px 240px $tan,
    440px 240px $tan,
    460px 240px $black,
    480px 240px $lb,
    500px 240px $lb,
    520px 240px $lb,
    540px 240px $lb,
    560px 240px $black,
    580px 240px $blue,
    600px 240px $blue,
    620px 240px $blue,
    640px 240px $blue,
    660px 240px $black,
    680px 240px $blue,
    700px 240px $black,
    180px 260px $black,
    200px 260px $blue,
    220px 260px $blue,
    240px 260px $black,
    260px 260px $blue,
    280px 260px $blue,
    300px 260px $black,
    320px 260px $lb,
    340px 260px $lb,
    360px 260px $black,
    380px 260px $black,
    400px 260px $black,
    420px 260px $black,
    440px 260px $black,
    460px 260px $lb,
    480px 260px $lb,
    500px 260px $lb,
    520px 260px $lb,
    540px 260px $lb,
    560px 260px $black,
    580px 260px $blue,
    600px 260px $blue,
    620px 260px $blue,
    640px 260px $black,
    660px 260px $black,
    680px 260px $black,
    200px 280px $black,
    220px 280px $blue,
    240px 280px $blue,
    260px 280px $blue,
    280px 280px $blue,
    300px 280px $black,
    320px 280px $lb,
    340px 280px $lb,
    360px 280px $lb,
    380px 280px $lb,
    400px 280px $lb,
    420px 280px $lb,
    440px 280px $lb,
    460px 280px $black,
    480px 280px $black,
    500px 280px $black,
    520px 280px $black,
    540px 280px $black,
    560px 280px $white,
    580px 280px $black,
    600px 280px $black,
    620px 280px $black,
    640px 280px $black,
    220px 300px $black,
    240px 300px $blue,
    260px 300px $blue,
    280px 300px $black,
    300px 300px $lb,
    320px 300px $lb,
    340px 300px $lb,
    360px 300px $lb,
    380px 300px $lb,
    400px 300px $lb,
    420px 300px $lb,
    440px 300px $black,
    240px 320px $black,
    260px 320px $black,
    280px 320px $blue,
    300px 320px $blue,
    320px 320px $lb,
    340px 320px $lb,
    360px 320px $lb,
    380px 320px $lb,
    400px 320px $lb,
    420px 320px $lb,
    440px 320px $black,
    260px 340px $black,
    280px 340px $blue,
    300px 340px $blue,
    320px 340px $blue,
    340px 340px $blue,
    360px 340px $blue,
    380px 340px $blue,
    400px 340px $blue,
    420px 340px $blue,
    440px 340px $black,
    240px 360px $black,
    260px 360px $lb,
    280px 360px $blue,
    300px 360px $blue,
    320px 360px $blue,
    340px 360px $blue,
    360px 360px $blue,
    380px 360px $blue,
    400px 360px $blue,
    420px 360px $lb,
    440px 360px $black,
    220px 380px $black,
    240px 380px $lb,
    260px 380px $lb,
    280px 380px $lb,
    300px 380px $blue,
    320px 380px $blue,
    340px 380px $blue,
    360px 380px $blue,
    380px 380px $blue,
    400px 380px $lb,
    420px 380px $lb,
    440px 380px $lb,
    460px 380px $black,
    200px 400px $black,
    220px 400px $blue,
    240px 400px $lb,
    260px 400px $lb,
    280px 400px $lb,
    300px 400px $lb,
    320px 400px $black,
    340px 400px $black,
    360px 400px $lb,
    380px 400px $lb,
    400px 400px $lb,
    420px 400px $lb,
    440px 400px $blue,
    460px 400px $blue,
    480px 400px $black,
    160px 420px $black,
    180px 420px $black,
    200px 420px $blue,
    220px 420px $blue,
    240px 420px $blue,
    260px 420px $lb,
    280px 420px $lb,
    300px 420px $black,
    320px 420px $white,
    340px 420px $white,
    360px 420px $black,
    380px 420px $blue,
    400px 420px $blue,
    420px 420px $blue,
    440px 420px $blue,
    460px 420px $blue,
    480px 420px $black,
    120px 440px $black,
    140px 440px $black,
    160px 440px $blue,
    180px 440px $blue,
    200px 440px $blue,
    220px 440px $blue,
    240px 440px $blue,
    260px 440px $blue,
    280px 440px $black,
    300px 440px $white,
    320px 440px $white,
    340px 440px $white,
    360px 440px $black,
    380px 440px $blue,
    400px 440px $blue,
    420px 440px $blue,
    440px 440px $blue,
    460px 440px $black,
    480px 440px $black,
    500px 440px $black,
    100px 460px $black,
    120px 460px $blue,
    140px 460px $blue,
    160px 460px $blue,
    180px 460px $blue,
    200px 460px $blue,
    220px 460px $blue,
    240px 460px $blue,
    260px 460px $black,
    280px 460px $white,
    300px 460px $white,
    320px 460px $white,
    340px 460px $black,
    360px 460px $blue,
    380px 460px $blue,
    400px 460px $blue,
    420px 460px $blue,
    440px 460px $blue,
    460px 460px $blue,
    480px 460px $blue,
    500px 460px $blue,
    520px 460px $black,
    100px 480px $black,
    120px 480px $black,
    140px 480px $black,
    160px 480px $black,
    180px 480px $black,
    200px 480px $black,
    220px 480px $black,
    240px 480px $black,
    260px 480px $black,
    280px 480px $white,
    300px 480px $white,
    320px 480px $white,
    340px 480px $black,
    360px 480px $black,
    380px 480px $black,
    400px 480px $black,
    420px 480px $black,
    440px 480px $black,
    460px 480px $black,
    480px 480px $black,
    500px 480px $black,
    520px 480px $black,
    400px 20px $black
    ;
}

p{
  position: absolute;
  width: 600px;
  left: 100px;
  top: 500px;
}
            
          
!
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