CodePen

HTML

            
              <h1>Treehouse</h1>
            
          
!
via HTML Inspector

CSS

            
              @function old($direction) {
  $keywords: (to bottom, to left, to top, to right, 
            to bottom right, to bottom left, 
            to top left, to top right), 
  (top, right, bottom, left, 
  top left, top right, 
  bottom right, bottom left);
  
  @for $i from 1 through length(nth($keywords,1)) {
    @if $direction == nth(nth($keywords, 1), $i) {
      @return nth(nth($keywords, 2), $i);
    }
  }
  @return 90deg - unquote($direction);
}

@function stripes($colors, $direction: "to bottom", $syntax: "new") {  
    //$colors   : if(type-of($colors) != 'list', ($colors), $colors);
    $stripes  : 100% / length($colors);
    $firstCol : nth($colors, 1);
    $auto     : not(type-of($firstCol) == list); /* Thanks Paul d'Aoust */
    $gradient : ();
    
		@for $i from 1 through length($colors) {
      $item : nth($colors, $i);
      $dump : ();

      @if $auto == true {
        $dump : $item $stripes * ($i - 1), $item $stripes * $i;
      }
      
      @else {
                
        @if $i > 1 {
          $prev : nth($colors, $i - 1);
          $dump : $dump, nth($item, 1) nth($prev, 2);
        }
        $dump : $dump, $item;
        
      }
      
      $gradient : join($gradient, $dump, comma);

    }
		@if($syntax == "old") {
      $direction: old($direction);
      @return #{"-webkit-linear-gradient(" #{$direction} ", " #{$gradient} ")"};
    }
    @return #{"linear-gradient(" #{$direction} ", " #{$gradient} ")"};
}

html, body {
  height: 100%;
}
  
body {
  background: #33363b;
  display: table;
    width: 100%;
  
  &:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    border-top: 5em solid #25272a;
    height: .5em;
    $bp1: #fa9300, #66c9ee, #c9c9c9, #82b964, #d24d33, #fffbdb, #2e77bb, #6bd5b1, #f87aa0, #c9c9c9, #72664e, #ccd600, #fffbdb, #df620e, #993838, #ff9600, #d24d33, #8960a7, #82b964, #f87aa0, #d43f3f, #668000, #ff9600, #8960a7, #c9c9c9, #993838, #ccd600, #668000, #f4cc13, #72664e, #fa9300, #66c9ee, #c9c9c9, #82b964, #ccd600, #fffbdb, #2e77bb, #6bd5b1, #f87aa0, #c9c9c9, #fa9300, #66c9ee, #c9c9c9, #82b964, #ccd600, #fffbdb, #fa9300;
    background: stripes($bp1, to right, old);
    background: stripes($bp1, to right);
  }
    
  &:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 5em solid #25272a;
    height: .5em;
    $bp2: (#fa9300 2.61%, #66c9ee 4.35%, #c9c9c9 6.96%, #82b964 9.13%, #d24d33 11.3%, #fffbdb 13.91%, #2e77bb 16.52%, #6bd5b1 17.82%, #f87aa0 19.12%, #c9c9c9 21.29%, #72664e 23.9%, #ccd600 26.07%, #fffbdb 28.68%, #df620e 31.29%, #993838 33.03%, #ff9600 34.33%, #d24d33 36.94%, #8960a7 39.55%, #82b964 42.16%, #f87aa0 43.36%, #d43f3f 45.63%, #668000 47.8%, #ff9600 50.41%, #8960a7 51.71%, #c9c9c9 53.88%, #993838 55.18%, #ccd600 57.79%, #668000 59.53%, #f4cc13 60.83%, #72664e 63.44%, #fa9300 66.05%, #66c9ee 67.35%, #c9c9c9 69.96%, #82b964 71.7%, #ccd600 74.31%, #fffbdb 76.92%, #2e77bb 79.53%, #6bd5b1 80.4%, #f87aa0 81.7%, #c9c9c9 83.87%, #fa9300 86.04%, #66c9ee 87.78%, #c9c9c9 90.39%, #82b964 92.56%, #ccd600 95.17%, #fffbdb 97.34%, #fa9300 100%);
    background: stripes($bp2, to right, old);
    background: stripes($bp2, to right);
  }
}
 
h1 {
  display: table-cell;
  text-align: center;
  font-family: 'Days One', sans-serif;
  vertical-align: middle;
  color: white;
  font-size: 5em;
}
  
@import url(http://fonts.googleapis.com/css?family=Days+One);

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................