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="link"></div> 
</div>

    <div class="credit">
      <p>2013 by <a href="https://twitter.com/_kevinatari">Kevin Gimbel</a>. Feel free to create new things based on it or optimize my work. I'd be happy if you link to this Pen as soon as you use the code in any way. Thanks <span class="red">&hearts;</span></p>
</div> <!-- credit -->
            
          
!
            
              @import "compass/css3";

/* Codepen.io credits */

.credit {
  width:500px;
  margin:50px auto;
  padding:10px 20px;
  background:#f1f1f1;
  color:#000000;
  font-size:0.7em;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  box-shadow:0px 0px 4px rgba(0,0,0,0.6);
  -moz-box-shadow:0px 0px 4px rgba(0,0,0,0.6);
}

a {
  color:#227799;
  text-decoration:none;
}

a:hover {
  color:#222222;
  border:none;
}
.red {color:#7a0208;}
/* END Codepen.io credits*/

$hair           :  rgb(255,238,69);
$hair-orange    :  rgb(189,166,54);
$darkgreen      :  rgb(40,56,27);
$lightgreen     :  rgb(81,108,53);
$lightestgreen  :  rgb(88,181,67);
$face           :  darken(rgb(187,176,130),5%);
$face-light     :  rgb(187,176,130);

$light          :  white;
$eye            :  rgb(3,22,52);
$shoe           :  rgb(69,5,18);
$shoe-dark      :  darken(rgb(69,5,18),10%);
$outline        :  rgb(48,32,6);
$outline-dark   :  darken(rgb(48,32,6),10%);
.wrapper {
 width:150px;
 height:600px;
 margin:20px auto;
}

body {
 background:#222222;
 font-family: Arial, Helvetica, sans-serif;
}

.link {
 width:25px;
 height:25px;
 background:$darkgreen;
 box-shadow:
  -25px 25px 0px $darkgreen,
  -50px 50px 0px $darkgreen,
  -75px 75px 0px $darkgreen,
  -75px 100px 0px $darkgreen,
  -100px 125px 0px $darkgreen,
  
  25px 0px 0px $lightgreen,
  50px 0px 0px $lightgreen,
  75px 0px 0px $lightgreen,
  100px 0px 0px $lightgreen,
  0px 25px 0px $lightgreen,
  25px 25px 0px $lightestgreen,
  50px 25px 0px $lightestgreen,
  75px 25px 0px $lightestgreen,
  100px 25px 0px $lightestgreen,
  0px 50px 0px $lightestgreen,
  25px 50px 0px $lightestgreen,
  50px 50px 0px $lightestgreen,
  75px 50px 0px $lightestgreen,
  100px 50px 0px $lightestgreen,
  125px 50px 0px $lightestgreen,
  -25px 75px 0px $lightestgreen,
  0px 75px 0px $lightestgreen,
  25px 75px 0px $lightestgreen,
  50px 75px 0px $lightestgreen,
  75px 75px 0px $lightestgreen,
  100px 75px 0px $lightestgreen,
  125px 75px 0px $lightestgreen,
  150px 75px 0px $lightestgreen,  
  -50px 100px 0px $lightestgreen,
    
  125px 0px 0px $darkgreen,  
  150px 25px 0px $darkgreen,
  175px 50px 0px $darkgreen,
  200px 75px 0px $darkgreen,
  200px 100px 0px $darkgreen,
  225px 125px 0px $darkgreen,
  175px 75px 0px $lightgreen,
  175px 100px 0px $outline,
    
  -25px 50px 0px $lightgreen,
  -50px 75px 0px $lightgreen,
  -75px 100px 0px $lightgreen,
  -75px 125px 0px $lightgreen,
  -100px 150px 0px $lightgreen,
  125px 25px 0px $lightgreen,
  150px 50px 0px $lightgreen,
  175px 75px 0px $lightgreen,
  200px 125px 0px $lightgreen,
  225px 150px 0px $lightgreen,  

  -25px 100px 0px $outline,
  0px 100px 0px $hair,
  25px 100px 0px $hair,
  50px 100px 0px $hair,
  75px 100px 0px $hair,
  100px 100px 0px $hair,
  125px 100px 0px $hair,
  150px 100px 0px $hair,
  -25px 125px 0px $hair,
  
  -50px 125px 0px $outline,
  0px 125px 0px $hair,
  25px 125px 0px $hair,
  50px 125px 0px $hair,
  75px 125px 0px $hair,
  100px 125px 0px $hair-orange,
  125px 125px 0px $outline,
  150px 125px 0px $hair,
  175px 125px 0px $hair,
    
  -75px 150px 0px $outline,
  -50px 150px 0px $hair,
  -25px 150px 0px $outline,
  0px 150px 0px $hair,
  25px 150px 0px $hair,
  50px 150px 0px $hair,
  75px 150px 0px $hair,  
  100px 150px 0px $outline,
  125px 150px 0px $hair-orange,
  150px 150px 0px $outline,
  175px 150px 0px $hair,
  200px 150px 0px $outline,
    
  -100px 175px 0px $hair-orange,
  -75px 175px 0px $outline,
  -50px 175px 0px $outline,
  -25px 175px 0px $hair-orange,
  0px 175px 0px $hair,
  25px 175px 0px $hair,
  50px 175px 0px $hair-orange,  
  75px 175px 0px $outline,
  100px 175px 0px $hair-orange,
  125px 175px 0px $face-light,
  150px 175px 0px $outline,
  175px 175px 0px $hair-orange,
  200px 175px 0px $outline,
  225px 175px 0px $hair-orange,
    
  -75px 200px 0px $outline,
  -50px 200px 0px $hair,
  -25px 200px 0px $face-light,
  0px 200px 0px $face-light,
  25px 200px 0px $outline,
  50px 200px 0px $outline,
  75px 200px 0px $face,
  100px 200px 0px $face-light,
  125px 200px 0px $face-light,
  150px 200px 0px $hair-orange,
  175px 200px 0px $outline,
  200px 200px 0px $hair,
  225px 200px 0px $outline,
    
  -75px 225px 0px $outline,
  -50px 225px 0px $hair,
  -25px 225px 0px $face,    
  0px 225px 0px $outline,    
  25px 225px 0px $outline,   
  50px 225px 0px $face,   
  75px 225px 0px $face-light,   
  100px 225px 0px $face,   
  125px 225px 0px $outline,
  150px 225px 0px $outline-dark,
  175px 225px 0px $outline,
  200px 225px 0px $hair,
    
  -75px 250px 0px $hair,
  -50px 250px 0px $face,
  -25px 250px 0px $light,
  0px 250px 0px $eye,    
  25px 250px 0px $outline,    
  50px 250px 0px $face-light,    
  75px 250px 0px $face-light,
  100px 250px 0px $outline,    
  125px 250px 0px $eye,
  150px 250px 0px $light,    
  175px 250px 0px $outline,  
  200px 250px 0px $face,
  
  -50px 275px 0px $outline-dark,
  -25px 275px 0px $face-light,
  0px 275px 0px $eye,
  25px 275px 0px $light,
  50px 275px 0px $face-light,
  75px 275px 0px $face-light,
  100px 275px 0px $light,
  125px 275px 0px $eye,
  150px 275px 0px $face-light,
  175px 275px 0px $outline-dark,
    
  -50px 300px 0px $outline-dark,
  -25px 300px 0px $outline,
  0px 300px 0px $face-light,
  25px 300px 0px $face-light,
  50px 300px 0px $face-light,
  75px 300px 0px $face-light,
  100px 300px 0px $face-light,
  125px 300px 0px $face-light,
  150px 300px 0px $outline,
  175px 300px 0px $outline-dark,
 
  -75px 325px 0px $outline-dark,
  -50px 325px 0px $lightgreen,
  -25px 325px 0px $outline,
  0px 325px 0px $outline,
  25px 325px 0px $face,
  50px 325px 0px $face,
  75px 325px 0px $face,
  100px 325px 0px $face,
  125px 325px 0px $outline,
  150px 325px 0px $outline,
  175px 325px 0px $lightgreen,
  200px 325px 0px $outline-dark,
    
  -100px 350px 0px $outline-dark,
  -75px 350px 0px $lightgreen,
  -50px 350px 0px $lightgreen,
  -25px 350px 0px $lightgreen,
  0px 350px 0px $darkgreen,
  25px 350px 0px $darkgreen,
  50px 350px 0px $darkgreen,
  75px 350px 0px $darkgreen,
  100px 350px 0px $darkgreen,
  125px 350px 0px $darkgreen,
  150px 350px 0px $lightgreen,
  175px 350px 0px $lightgreen,
  200px 350px 0px $lightgreen,
  225px 350px 0px $outline-dark,
  
  -125px 375px 0px $outline-dark,
  -100px 375px 0px $face-light,
  -75px 375px 0px $face-light,
  -50px 375px 0px $outline-dark,
  -25px 375px 0px $outline,
  0px 375px 0px $darkgreen,
  25px 375px 0px $darkgreen,
  50px 375px 0px $darkgreen,
  75px 375px 0px $darkgreen,
  100px 375px 0px $darkgreen,
  125px 375px 0px $darkgreen, 
  150px 375px 0px $outline, 
  175px 375px 0px $outline-dark, 
  200px 375px 0px $face-light, 
  225px 375px 0px $face-light, 
  250px 375px 0px $outline-dark,
    
  -125px 400px 0px $outline-dark,
  -100px 400px 0px $face,
  -75px 400px 0px $face-light,
  -50px 400px 0px $darkgreen,
  -25px 400px 0px $lightgreen,
  0px 400px 0px $outline,
  25px 400px 0px $outline,
  50px 400px 0px $hair,
  75px 400px 0px $hair,
  100px 400px 0px $outline,
  125px 400px 0px $outline,
  150px 400px 0px $lightgreen,
  175px 400px 0px $darkgreen,
  200px 400px 0px $face-light,
  225px 400px 0px $face,
  250px 400px 0px $outline-dark,
    
  -100px 425px 0px $outline-dark,
  -75px 425px 0px $outline-dark,
  -50px 425px 0px $outline-dark,
  -25px 425px 0px $lightgreen,
  0px 425px 0px $lightgreen,
  25px 425px 0px $darkgreen,
  50px 425px 0px $hair,
  75px 425px 0px $hair,
  100px 425px 0px $darkgreen,
  125px 425px 0px $lightgreen,
  150px 425px 0px $lightgreen,
  175px 425px 0px $outline-dark,
  200px 425px 0px $outline-dark,
  225px 425px 0px $outline-dark,

  -50px 450px 0px $outline-dark,
  -25px 450px 0px $outline-dark,
  0px 450px 0px $darkgreen,
  25px 450px 0px $lightgreen,
  50px 450px 0px $lightgreen,
  75px 450px 0px $lightgreen,
  100px 450px 0px $lightgreen,
  125px 450px 0px $darkgreen,
  150px 450px 0px $outline-dark,
  175px 450px 0px $outline-dark,
    
  -75px 475px 0px $outline-dark,
  -50px 475px 0px $shoe,
  -25px 475px 0px $shoe-dark,
  0px 475px 0px $outline-dark,
  25px 475px 0px $outline-dark,
  50px 475px 0px $outline-dark,
  75px 475px 0px $outline-dark,
  100px 475px 0px $outline-dark,
  125px 475px 0px $outline-dark,
  150px 475px 0px $shoe-dark,
  175px 475px 0px $shoe,
  200px 475px 0px $outline-dark,
    
  -75px 500px 0px $outline-dark,
  -50px 500px 0px $shoe,
  -25px 500px 0px $shoe,
  0px 500px 0px $shoe-dark,
  25px 500px 0px $outline-dark,
  100px 500px 0px $outline-dark,
  125px 500px 0px $shoe-dark,
  150px 500px 0px $shoe,
  175px 500px 0px $shoe,
  200px 500px 0px $outline-dark,  
  
  -50px 525px 0px $outline-dark,
  -25px 525px 0px $outline-dark,
  0px 525px 0px $outline-dark,
  125px 525px 0px $outline-dark,
  150px 525px 0px $outline-dark,
  175px 525px 0px $outline-dark;
}





            
          
!
            
              /*
Pure CSS3 single element Link from TLOZ

I made this to work around with box-shadow single element drawing. Kind of fun and pain at the same time. Anyway, the original "link" DIV is in the upper left corner of link's head. If you change the background inside the SCSS you'll see.

Colorsets:
http://www.colourlovers.com/palette/1782412/Hero_In_Green

http://www.colourlovers.com/palette/1765681/Link_Hero_of_Time

http://www.colourlovers.com/palette/515562/t_a_l_k_._t_o_._m_e

Inspired by:
http://doll-haus.deviantart.com/art/Pixel-Link-167513168

*/
            
          
!
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