octocatstartv

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
via CSS Lint

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
via JS Hint

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Want a Run Button?

If active, the preview will update automatically when you change code.

HTML

            
              
<a href="http://www.df.eu/blog/2013/01/17/leserwahl-open-source-projekt-fur-lebenslanges-gratis-hosting-gesucht/#polls-2" target="_blank">
  
  <h1>
    V<span class="fontawesome-bullhorn"></span>TE for 
    <br>
    We <span class="fontawesome-heart"></span> Icon Fonts
  </h1>
  
  <br>
</a>

<div>
  I need your help! A <span>free lifetime hosting</span> is waiting for <span>one of 5</span> open-source projects. So please use the button above, vote for <span>We Love Icon Fonts</span> and be a <span>hero</span>.
  
  <br><br>
  
  The button brings you to the poll of a big German hosting company called <span>domainFACTORY</span>.
  
  <br><br>
  
  If you want some informations in English you can read my <a href="http://timpietrusky.com/vote-for-we-love-icon-fonts" target="_blank">blog post</a>. 
  
  <br><br>
  
  <span>Thanks!</span>
</div>
            
          
!

CSS

            
              @import "compass/css3";

@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

body {
  background:url(http://subtlepatterns.com/patterns/wood_pattern.png);
}

h1 {
  position:absolute;
  width:15em;
  height:7.5em;
  margin:0;
  top:-2.75em;
  left:50%;
  margin:0 0 0 -7.5em;
  font: bold 1.95em/1.5em sans-serif;
  color:#347590;
  text-transform:uppercase;
  letter-spacing:.075em;
  text-align:center;
  padding:7.5em 0 0 0;
  @include transition(color .15s ease-in-out);
  
  &:before,
  &:after {
    position:absolute;
    content:'';
    width:15em;
    height:7.5em;
    top:10.25%;
    left:0;
    z-index:-1;
    padding:7.5em 0 0 0;
    border-radius:50%;
    @include transform(scale(.8, .8));
  }
  
  &:before {
    background: 
      linear-gradient(top, rgba(255, 255, 255, .25) 0, rgba(255, 255, 255, 0) 33%),
      linear-gradient(top, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, .25) 100%),
      linear-gradient(top, #18406f 33%, #ffffff 33%, #ffffff 66%, #c40a10 66%, #c40a10 100%)
    ;
  
    box-shadow:
      inset 0 0 0 .25em rgba(255, 255, 255, 1),
      inset 0 0 .65em .1em rgba(0, 0, 0, 1),
      inset 0 0 0 .5em rgba(255, 255, 255, .75)
    ;
  }
  
  &:after {
    top:15.5%;
    left:.75em;
    width:13em;
    height:5.5em;
    border:.25em dashed rgba(255, 255, 255, .5);
    background:rgba(255, 255, 255, .1);
  }
}

a {
  position:relative;
  text-decoration:none;
  
  &:hover {
    > h1 {
      color:#c40a10;
      @include transform(rotate(15deg) scale(1.25, 1.25));
    }
  }
}

div {
  position:absolute;
  top:60%;
  z-index:-2;
  padding:5em;
  color:#347590;
  font: 2em sans-serif;
  
  a {
    color:#000;
    font-weight:bold;
    @include transition(color .25s ease-in-out);
    
    &:hover {
      color:#c40a10;
    }
  }
  
  span {
    color:#c40a10;
    font-weight:bold;
  }
}
            
          
!

JS

            
               /**
  Vote for We Love Icon Fonts
  
  # What? #
  I need your help! A free lifetime hosting is waiting 
  for one of 5 open-source projects. So please use the button, 
  vote for We Love Icon Fonts and be a hero. 
  http://www.df.eu/blog/2013/01/17/leserwahl-open-source-projekt-fur-lebenslanges-gratis-hosting-gesucht/#polls-2

  The button brings you to the poll of a big German hosting company
  called domainFACTORY.

  If you want some informations in English you can read my blog post
  http://timpietrusky.com/vote-for-we-love-icon-fonts

  Thanks!

  # 2013 by Tim Pietrusky
  # timpietrusky.com
**/
            
          
!
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