CodePen

HTML

            
              <div class="main-content">
  
  <div class="ad">
    
    <h3>Learning Sponsor</h3> 
    
    <div class="canvas" id="canvas">
      <a id="treehouse-ad" href="http://teamtreehouse.com" target="_blank">Team Treehouse!</a>
      <img src="http://css-tricks.com/wp-content/themes/CSS-Tricks-10/images/mike-standard.png" alt="Mike">
    </div>
    
    <div id="code-area-wrap">
      <h3>jQuery <span id="step-counter">1/5</span></h3>
    <pre class="code-area" id="code-area">var treehouse = 
  $('#treehouse-ad')
    .addClass('button');</pre>
    </div>
    
    <div class="run-code-wrap">
      <a href="#" class="button" id="run-code">Run Code</a>
    </div>
    
  </div>
  
</div>
            
          
!

CSS

            
              html {
  background: url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/images/bg.png);
}

.main-content {
  width: 90%;
  margin: 50px auto;
  background: #D6D5D5;
  padding: 20px;
  overflow: hidden;
}

.ad {
  background: white;
  box-shadow: 0 0 5px rgba(black, 0.2);
  padding: 10px;
  width: 350px;
  float: right;
  h3 {
    background: #222;
    color: white;
    margin: -10px -10px 10px -10px;
    padding: 2px 5px;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 11px;
    letter-spacing: 1px;
  }
  pre {
    background: #222;
    margin: 0;
    color: white;
    font: 11px/1.6 Monaco, MonoSpace;
    padding: 10px;
    min-height: 80px;
  }
  .canvas {
    border: 1px dotted #ccc;
    text-align: center;
    padding: 80px 20px;
    margin: 0 0 10px 0;
    overflow: hidden;
    position: relative;
    @include transition(all 0.2s ease);
    &.all-done {
      background: #b7d181; 
      img {
       left: 50%; 
       @include transform(rotate(5deg));
      }
      #tagline {
        position: relative;
        left: -40px;
      }
    }
    img {
      position: absolute;
      bottom: -10px;
      left: 100%;
      width: 150px;
      @include transition(all 0.2s ease);
    }
  }
}

#tagline {
  position: relative;
  @include transition(all 0.2s ease);
  z-index: 1;
}

#code-area-wrap {
  position: relative;
  h3 {
    margin: 0;
    background: orange;
    text-transform: none;
    position: relative;
  }
  .clone {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
  }
}

#step-counter {
  position: absolute;
  right: 5px;
  top: 3px;
  color: black;
}

.run-code-wrap {
  text-align: center;
  margin: 20px 0 10px;
}

$bottomSide: #3852b1;
$rightSide: #203891;
.button {
  border: 0;
  border-radius: 0;
  outline: 0;
  background: #4e68c7;
  box-shadow:
    1px 0px 1px $rightSide, 0px 1px 1px $bottomSide,
    2px 1px 1px $rightSide, 1px 2px 1px $bottomSide,
    3px 2px 1px $rightSide, 2px 3px 1px $bottomSide,
    4px 3px 1px $rightSide, 3px 4px 1px $bottomSide,
    5px 4px 1px $rightSide, 4px 5px 1px $bottomSide,
    6px 5px 1px $rightSide;
  color: white;
  white-space: nowrap;
  padding: 9px 16px;
  position: relative;
  top: -5px;
  text-decoration: none;
  &:hover, &:focus {
    color: white;
    background: #3d57b4;
  }
  &:active {
    box-shadow:
    1px 0px 1px $rightSide, 0px 1px 1px $bottomSide,
    2px 1px 1px $rightSide, 1px 2px 1px $bottomSide,
    3px 2px 1px $rightSide;
    top: -2px;
    left: 3px;
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var treehouse; // nasty global just for example code readability

var TreehouseAd = {
  
  step: 0,
  delay: 400,
  codeArea: $("#code-area"),
  counter: $("#step-counter"),

  init: function() {
    this.bindUIActions();
  },
  
  code: [
    function () {
      treehouse =
      $('#treehouse-ad')
        .addClass('button');
    },
    function () {
      treehouse.animate({
        top: '-40px'
      });
    },
    function () {
      treehouse.text(
        'Learn jQuery at Treehouse!'
      );
    },
    function () {
      $('<div />', {
        id: 'tagline',
        text: "Hi, I'm Mike."
      }).insertAfter(treehouse);
    },
    function () {
      $('#canvas')
        .addClass('all-done');

      console.log('Thanks for playing!');
    }
  ],
  
  bindUIActions: function() {
    
    $("#run-code").on("click", function(e) {
      e.preventDefault();
      TreehouseAd.animateCode();
      TreehouseAd.runCode();
    });
                      
  },
                      
  animateCode: function() {
      
   this.codeArea
    .clone()
    .addClass("clone")
    .insertAfter(this.codeArea)
    .animate({
      top: "-60px",
      opacity: 0
    }, TreehouseAd.delay, function() {
      $(".clone").remove(); 
    });
      
  },
    
  runCode: function() {
    
    setTimeout(function() {
  
      if (TreehouseAd.step < 5) {
         
        TreehouseAd.code[TreehouseAd.step]();
        
        TreehouseAd.step++;
        
        TreehouseAd.counter.text((TreehouseAd.step+1) + "/5");
        TreehouseAd.codeArea.text(
          TreehouseAd.getFunctionText(
            TreehouseAd.code[TreehouseAd.step]
          )
        );
                
      }
      
      if (TreehouseAd.step == 6) {
          
        // reset canvas
        treehouse
          .text("Team Treehouse!")
          .removeClass()
          .removeAttr("style");
        
        $("#tagline").remove();
        $("#canvas").removeClass("all-done");
        $("#run-code").text("Run Code");
        
        TreehouseAd.step = 0;
        TreehouseAd.codeArea.text(
          TreehouseAd.getFunctionText(
            TreehouseAd.code[TreehouseAd.step]
          )
        );
        TreehouseAd.counter.text((TreehouseAd.step+1) + "/5");
        
      }
      
      if (TreehouseAd.step == 5) {
        
        $("#run-code").text("Start Over");
        TreehouseAd.codeArea.text("");
        TreehouseAd.counter.text("Done!");
        
        TreehouseAd.step++;
        
      }
    
    }, TreehouseAd.delay);
    
  },

  getFunctionText: function ( func ) {
    return func.toString()
            .replace(/function \(\) \{\w*/, '')
            .replace(/\w*\}$/, '');
  }
  
}; 

TreehouseAd.init();
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................