cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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

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

Code Indentation

     

Save Automatically?

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

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <body>
  <header>
    NFL Team Colors using Sass Maps
  </header>

  <section class="row">  
    <h1 class="division">NFC East</h1>
    <figure class="team-card team__philadelphia-eagles"> 
      <img src="http://teamcolors.arc90.com/img/build/nfl/philadelphia-eagles.svg" />
      <figcaption class="team">
        <h2>PHI<span>Eagles</span></h2>
      </figcaption>
    </figure> 

    <figure class="team-card team__dallas-cowboys"> 
      <img src="http://teamcolors.arc90.com/img/build/nfl/dallas-cowboys.svg" />
      <figcaption class="team">
        <h2>DAL<span>Cowboys</span></h2>
      </figcaption>        
    </figure>

    <figure class="team-card team__new-york-giants"> 
      <img src="http://teamcolors.arc90.com/img/build/nfl/new-york-giants.svg" />
      <figcaption class="team">
        <h2>NY<span>Giants</span></h2>
      </figcaption>
    </figure>

    <figure class="team-card team__washington-redskins"> 
      <img src="http://teamcolors.arc90.com/img/build/nfl/washington-redskins.svg" />
      <figcaption class="team">
        <h2>WSH<span>Redskins</span></h2>
      </figcaption>
    </figure>
  </section>
  
  <section class="row">  
    <h1 class="division">NFC North</h1>
    <figure class="team-card team__green-bay-packers"> 
      <img src="http://teamcolors.arc90.com/img/build/nfl/green-bay-packers.svg" />
      <figcaption class="team">
        <h2>GB <span>Packers</span></h2>
      </figcaption>
    </figure> 

    <figure class="team-card team__minnesota-vikings"> 
      <!-- <img src="http://teamcolors.arc90.com/img/build/nfl/minnesota-vikings.svg" /> -->
      <figcaption class="team">
        <h2>MIN <span>Vikings</span></h2>
      </figcaption>        
    </figure>

    <figure class="team-card team__detroit-lions"> 
      <img src="http://teamcolors.arc90.com/img/build/nfl/detroit-lions.svg" />
      <figcaption class="team">
        <h2>DET <span>Lions</span></h2>
      </figcaption>
    </figure>

    <figure class="team-card team__chicago-bears"> 
      <img src="http://teamcolors.arc90.com/img/build/nfl/chicago-bears.svg" />
      <figcaption class="team">
        <h2>CHI <span>Bears</span></h2>
      </figcaption>
    </figure>
  </section>
  
  <section class="row">  
    <h1 class="division">NFC South</h1>
    <figure class="team-card team__carolina-panthers"> 
      <img src="http://teamcolors.arc90.com/img/build/nfl/carolina-panthers.svg" />
      <figcaption class="team">
        <h2>CAR <span>Panthers</span></h2>
      </figcaption>
    </figure> 

    <figure class="team-card team__atlanta-falcons"> 
      <img src="http://teamcolors.arc90.com/img/build/nfl/atlanta-falcons.svg" />
      <figcaption class="team">
        <h2>ATL<span>Falcons</span></h2>
      </figcaption>        
    </figure>

    <figure class="team-card team__new-orleans-saints"> 
      <img src="http://teamcolors.arc90.com/img/build/nfl/new-orleans-saints.svg" />
      <figcaption class="team">
        <h2>NO <span>Saints</span></h2>
      </figcaption>
    </figure>

    <figure class="team-card team__tampa-bay-buccaneers"> 
      <img src="http://teamcolors.arc90.com/img/build/nfl/tampa-bay-buccaneers.svg" />
      <figcaption class="team">
        <h2>TB <span>Buccaneers</span></h2>
      </figcaption>
    </figure>
  </section>
  
   <section class="row">  
    <h1 class="division">NFC West</h1>
    <figure class="team-card team__arizona-cardinals"> 
      <img class="logo" src="http://teamcolors.arc90.com/img/build/nfl/arizona-cardinals.svg" />
      <figcaption class="team">
        <h2>AZ <span>Cardinals</span></h2>
      </figcaption>
    </figure> 

    <figure class="team-card team__seattle-seahawks"> 
      <img src="http://teamcolors.arc90.com/img/build/nfl/seattle-seahawks.svg" />
      <figcaption class="team">
        <h2>SEA <span>Seahawks</span></h2>
      </figcaption>        
    </figure>

    <figure class="team-card team__san-francisco-49ers"> 
      <img src="http://teamcolors.arc90.com/img/build/nfl/san-francisco-49ers.svg" />
      <figcaption class="team">
        <h2>SF <span>49ers</span></h2>
      </figcaption>
    </figure>

    <figure class="team-card team__st-louis-rams"> 
      <img src="http://teamcolors.arc90.com/img/build/nfl/st-louis-rams.svg" />
      <figcaption class="team">
        <h2>STL <span>Rams</span></h2>
      </figcaption>
    </figure>
  </section>

</body>
            
          
!
            
              @import "compass/css3";

//BIG UPS TO http://teamcolors.arc90.com/ for the logos and hex codes.

@import "susy";

$susy: (
  columns: 4,
  gutters: 1/4,
  math: fluid,
  output: float,
  gutter-position: split,
  global-box-sizing: border-box,
);

$default-transition-duration: .6s;

// BEM selectors
@mixin e($element) {
  &__#{$element} {
    @content;
  }
}
@mixin m($modifier) {
  &--#{$modifier} {
    @content;
  }
}

// Call the color palette modifiers in color values
@function palette($palette, $team-colors: 'primary') {
  @return map-get(map-get($nfl-teams, $palette), $team-colors);
}

$black: #000000;
$white: #ffffff;
$nfl-red: #da2127;
$nfl-blue: #003a73;

//nfl team colors map
$nfl-teams: (
  arizona-cardinals: (
    primary : #870619,
    secondary : $black,
    alt-dark  : #fdbd12,
    alt-light : $white,
  ),
  atlanta-falcons: (
    primary : #BD0D18,
    secondary: $black,
    alt-light  : #DCE0E5,
  ),
  baltimore-ravens: (
    primary : #280353,
    secondary  : #D0B240,
  ),
  buffalo-bills: (
    primary : #00338D,
    secondary  : #C60C30,
  ),
  carolina-panthers: (
    primary : #0088CE,
    secondary  : #A5ACAF,
  ),
  chicago-bears: (
    primary : #03202F,
    secondary  : #DD4814,
  ),
  cincinnati-bengals: (
    primary : #FB4F14,
    secondary  : $black,
  ),
  clevland-browns: (
    primary : #26201E,
    secondary  : #E34912,
  ),
  dallas-cowboys: (
    primary : #002244,
    secondary  : #8C8B8A,
  ),
  denver-broncos: (
    primary : #FB4F14,
    secondary  : #002244,
  ),
  detroit-lions: (
    primary : #006DB0,
    secondary  : #C5C7CF,
  ),
  green-bay-packers: (
    primary : #213D30,
    secondary  : #FFCC00,
  ),
  houston-texans: (
    primary : #02253A,
    secondary  : #B31B34,
  ),
  indianapolis-colts: (
    primary : #003B7B,
    secondary  : $white,
  ),
  jacksonville-jaguars: (
    primary : #007198,
    secondary  : #D0B239,
  ),
  kansas-city-chiefs: (
    primary : #B20032,
    secondary  : #F2C800,
  ),
  miami-dolphins: (
    primary : #008D97,
    secondary  : #F5811F,
    alt : #015679,
  ),
  minnesota-vikings: (
    primary : #4F2682,
    secondary  : #FFC52F,
  ),
  new-england-patriots: (
    primary : #0D254C,
    secondary  : #C80815,
    alt : #D6D6D6,
  ),
  new-orleans-saints: (
    primary : #D2B887,
    secondary  : $black,
  ),
  new-york-giants: (
    primary : #192F6B,
    secondary  : #CA001A,
    alt : #808080,
  ),
  new-york-jets: (
    primary : #0C371D,
    secondary : $white,
  ),
  oakland-raiders: (
    primary : #C4C8CB,
    secondary  : $black,
  ),
  philadelphia-eagles: (
    primary : #003B48,
    secondary  : #708090,
    alt : #C0C0C0,
  ),
  pittsburgh-steelers: (
    primary : #F2C800,
    secondary  : $black,
  ),
  san-diego-chargers: (
    primary : #5B92E5,
    secondary  : #EEC607,
    alt: #08214A,
  ),
  san-francisco-49ers: (
    primary : #AF1E2C,
    secondary  : #E6BE8A,
  ),
  seattle-seahawks: (
    primary : #06192E,
    secondary  : #4EAE47,
    alt : #ACB6BC,
  ),
  st-louis-rams: (
    primary : #13264B,
    secondary  : #C9AF74,
  ),
  tampa-bay-buccaneers: (
    primary : #D60A0B,
    secondary  : #89765F,
    alt : #FF7A00,
  ),
  tennessee-titans: (
    primary : #648FCC,
    secondary  : #000080,
    alt : #ff0000,
  ),
  washington-redskins: (
    primary : #773141,
    secondary  : #FFB612,
  ),
);

//this is where the colors get mapped to
@each $nfl-team, $team-colors in $nfl-teams {
  .team__#{$nfl-team} {
    @each $team-color in $nfl-team {
      background: palette($nfl-team, primary);
      border-bottom: .25em solid (palette($nfl-team, secondary));
      //next line optional if you want to use alt colors, be sure to comment out color from team-card class
      /* color: palette($nfl-team, alt-dark); */
      
      //here the BG changes to logo
      //the urls structure is based on the team-colors site
      //probably reformat this for your own stuff
      //and be smart about how you name and save your files.
      &:hover {
        //optional 2-tone gradient
        
        $svg-gradient-shim-threshold: 1 !global;
         @include background(
           image-url("http://teamcolors.arc90.com/img/build/nfl/"+"#{$nfl-team}"+".svg"),
           linear-gradient((palette($nfl-team, secondary)), (palette($nfl-team, primary)))
           );
        
        /* background: url("http://teamcolors.arc90.com/img/build/nfl/"+"#{$nfl-team}"+".svg"), palette($nfl-team, secondary); */
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-origin: border-box;
        border-bottom: .25em solid (palette($nfl-team, primary));
      }
    }
  }
}

body {
  margin: 0 auto 5em;
  @include container($susy);
}

header {
  background: $nfl-red;
  border-bottom: .25em solid $nfl-blue;
  color: $white;
  padding: gutter(2) 0;
  font-size: 2em;
  text-align: center;
}
.row {
  height: 7em;
}

.division {
  display: block;
  @include span(4);
  font-size: 2em;
  text-align: center;
  margin: gutter(4);
  color: $nfl-blue;
}

.team-card {  
  @include span(1);
  overflow: hidden;    
  cursor: pointer;    
  @include transition;
  height: 100%;
  display: block;
  img {
    display: none;
    width: 12%;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;    
    @include transition;    
  }
  &:hover {
    .team {
      display: none;
    }
    img {
      display: block;
    }
  }
}

.team {
  color: $white;
  text-align: center;
  margin: .25em auto;
  padding: .75em 0;
  h2 {
    display: block;
    width: 100%;
    text-transfor: uppercase;
    font-size: 3em;
  }
  span {
    font-size: 35%;
    margin: 0 auto;
    width: 100%;
    display: block;
  }
}
            
          
!
999px
Loading ..................

Console