CodePen

HTML

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

CSS

            
              @mixin stripes($colors, $direction: "to bottom") {  
    
    $stripes   : 100% / length($colors);
    $auto      : not(type-of(nth($colors, 1)) == list);
    $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 : append($dump, nth($item, 1) nth($prev, 2));
        }
        $dump : append($dump, $item);
        
      }
      
      $gradient : join($gradient, $dump, comma);

    }

    @include background-image(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;
    @include 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%);
    @include 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 ..................