A CodePen by Tim Pietrusky. Skynet - Please vote! - The logo for my project @work. Controls and analyzes all the data of the company. Which one should I use? Or do you have another idea? Fork it!

index.html

<article>
  <section>
    <h1>Skynet</h1>
  </section>

  <section>
    <h1>Skynet</h1>
  </section>

  <section>
    <h1>Skynet</h1>
  </section>
  
  <section>
    <h1>Skynet</h1>
  </section>
  
  <section>
    <h1>Skynet</h1>
  </section>
  
  <section>
    <h1>Skynet</h1>
  </section>
</article>

script.js

/**
  Skynet - Please vote!
  
  The logo for my project @work: Controls and analyzes all 
  the data of the company. 
  
  Which one should I use? Or do you have another idea? Fork it!
  
  # 2013 by Tim Pietrusky
  # timpietrusky.com
**/

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Unica+One);

$height: 15em;
$color-alpha: rgba(darken(#00B98B, 5%), .4);
$color-beta: #fff;
$color-gamma: rgba(darken(#FFA294, 15%), .5);
$color-delta: rgba(#282828, .8);
$color-epsilon: rgba(#4790D2, .5);
$color-zeta: rgba(#FFD64E, .5);
$color-eta: rgba(#A1D89F, .8);

.filter-alpha {
  @include filter(none);
}

.filter-beta {
  @include filter(grayscale(80%));
}

body {
  margin:0;
  overflow-x:hidden;
  background: url(http://s.cdpn.io/1202/honey_im_subtle.png);
  counter-reset: voteFor;
}

h1 {
  position:relative;
  font: 5em "Unica One", sans-serif;
  line-height:2.65em;
  margin:0;
  color:inherit;
  @include transition(
    transform .25s ease-in
  );
    
  &:before {
    position:absolute;
    bottom:-3%;
    left:0;
    counter-increment: voteFor;
    content: '#' counter(voteFor) ' ';
    opacity:.1;
    font-size:5em;
  }
}

article {
  section {
    height: $height;
    width: 100%;
    text-align:center;
    margin:3em 0;
    overflow:hidden;
    
    &:nth-child(1) {
      background:$color-alpha;
      color:$color-beta;
      margin-top:0;
    }
      
    &:nth-child(2) {
      background:$color-gamma;
      color:darken($color-gamma, 15%);
    }
      
    &:nth-child(3) {
      background:$color-delta;
      color:darken($color-beta, 15%);
    }
      
    &:nth-child(4) {
      background:$color-epsilon;
      color:darken($color-delta, 10%);
    }
      
    &:nth-child(5) {
      background:$color-eta;
      color:$color-beta;
    }
      
    &:nth-child(6) {
      background:$color-zeta;
      color:$color-delta;
      margin-bottom:0;
    }
  }
}