Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                //-
  ---------------------------------------------
  MIXINS
  ---------------------------------------------
//
//- Top Bar
mixin topBar
  ul.menu-top-list
    each val in ['1-800-446-1071', 'Register Grill', 'Store Locator', 'Newsletter']
      li.menu-top-item
          span(class="label")=val

//- Navigation
mixin navigation
  nav
    ul
      each val in ['Grills', 'Accessories', 'Grilling', 'Parts & Service']
        li.has-second-level
          a
            span(class="sub-heading h3-full label")= val
            +navArrow
          // +menuSecondLevel

//- Navigation Arrows
mixin arrowDown
  span(class="icon" data-bind="icon: 'menu-arrow-down'")
        svg(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 7")
          title "menu-arrow-down"
          g(data-name="Layer 2")
            path(d="M1 0l2.4 2.8h1.2L7 0l1 .4-3 5L4 7 3 5.4l-3-5z" fill="#fff" data-name="Layer 1")

mixin navArrow
  span.menu-arrow-down
    span.arrow-wrapper
      +arrowDown
      +arrowDown

//- NAVIGATION SECOND LEVEL
mixin secondLevList(val1, val2)
  li.menu-second-level-list-wrapper
    ul.menu-second-level-list
      li.menu-second-level-item.list-header
        a= val1
        each val in val2
          li.menu-second-level-item
            a(class="sub-heading h3-full")= val
            
mixin menuSecondLevel
  .menu-second-level
    .menu-second-level-inner
      ul.list
        +secondLevList("Gas", ['Spirit II Series', 'Genesis® II Series', 'Q Series', 'See All GAS GRILLS'])

        +secondLevList("Charcoal", ['Original Kettle Series', 'Master-Touch Series', 'Performer Series', 'Summit® Charcoal Series', 'Ranch Series', 'Smokey Mountain Cooker Series', 'See all CHARCOAL GRILLS'])

        +secondLevList("Electric", ['Electric Q Series', 'See All ELECTRIC GRILLS'])

        +secondLevList("Portable", ['Smokey Joe® Series', 'Go-Anywhere Series', 'Jumbo Joe Series', 'See All PORTABLE GRILLS'])


//- WEBER LOGO
mixin weberLogo
  span.logo
    svg(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 226.54 93.35")
      title "weber-logo"
      g(data-name="Layer 2")
        g(data-name="Layer 1")
          path(d="M10.51 0C4.42 0 0 4.57 0 10.88v71.83a10.76 10.76 0 0 0 11.09 10.64h204.76a10.91 10.91 0 0 0 10.69-10.58V10.51A10.57 10.57 0 0 0 215.71 0z")
          
          path(d="M204.85 66.88a3.92 3.92 0 0 0-.64.05l-4.5-12.78c1.08-.41 1.71-.9 1.71-1.43 0-.68-1.06-1.25-2.8-1.67l-1.36-3.86c5.58-2.48 8.8-8.55 8.8-11.18a10.27 10.27 0 0 0 .18-1.61c-.08-.42.44-.33.44-.33.71-.35.12-2.41 0-2.41s-.58.1-.65-.19c-1.4-6-7.11-7.49-11.43-7.86a4.78 4.78 0 0 0 .17-1.4 2.7 2.7 0 0 0 0-.47h.12a.92.92 0 0 0 0-1.85 20.11 20.11 0 0 0-3.55-.2 21.46 21.46 0 0 0-3.45.2.92.92 0 0 0-.09 1.84 3.76 3.76 0 0 0 0 .48 5.46 5.46 0 0 0 .12 1.33c-4.4.13-10.79 1-12.1 7.93h-.55c-.33 0-.74 1.76-.28 2.51.14.24.49.08.81.1.07.7.12.79.21 1.76.28 2.93 3.13 8.4 8.52 11L183 51c-2 .42-3.23 1-3.23 1.77 0 .57.74 1.1 2 1.53L174 74.87h1.68L177.3 71h23.47a4.09 4.09 0 1 0 4.08-4.1m-7.92-16.15a41.61 41.61 0 0 0-5.43-.42v-2.11a14.56 14.56 0 0 0 4.35-.56zm-.2 16.62l1.79.93-8.43.11zm-3.66-.37a4 4 0 0 0 .93-1l1.35.7zm.08-45.3a3.58 3.58 0 0 0 0 .47 5.1 5.1 0 0 0 .14 1.39h-4a5.09 5.09 0 0 0 .15-1.35 2.79 2.79 0 0 0 0-.47zm-7.35 25.66a11.54 11.54 0 0 0 4.26.8v2.14a43.51 43.51 0 0 0-5.48.37zm-2.69 7.29a33.93 33.93 0 0 0 7 .72v4.48a4.06 4.06 0 0 0-3.63 4 4 4 0 0 0 .28 1.48l-8.93 3.76zm4.12 11.62a4.09 4.09 0 0 0 2 1.43l-9.24 1.55zm13.68 3.57l-19.51-.08 5.3-.73H200l-.08-.06 1.08.56c0 .09-.07.19-.09.29m.63-1.29L194.45 65a4.12 4.12 0 0 0 .17-1.15 4.05 4.05 0 0 0-3.09-3.85v-4.63a32.18 32.18 0 0 0 6.78-.78l4.52 12.83a4.07 4.07 0 0 0-1.28 1.14" fill="#ed1d24")
          
          path(d="M155.73 72.92a1.64 1.64 0 1 1 1.65 1.69 1.64 1.64 0 0 1-1.65-1.69m1.65 2a2 2 0 1 0-2.05-2 2 2 0 0 0 2.05 2m-.43-1.87h.41l.62 1h.4l-.67-1a.61.61 0 0 0 .61-.64c0-.46-.27-.66-.82-.66h-.89v2.35h.35zm0-.3v-.72h.48c.24 0 .51.05.51.34s-.27.38-.57.38zM211.78 72.92a1.64 1.64 0 1 1 1.65 1.69 1.64 1.64 0 0 1-1.65-1.69m1.65 2a2 2 0 1 0-2.05-2 2 2 0 0 0 2.05 2m-.43-1.84h.4l.62 1h.4l-.67-1a.61.61 0 0 0 .61-.64c0-.46-.27-.66-.83-.66h-.89v2.32h.36zm0-.3v-.72h.48c.24 0 .51.05.51.34s-.26.38-.57.38z" fill="#fff")
          
          path(d="M23.49 27.42c0-3.32-3.17-1.88-3.17-3.9v-1.87H31.5v48.29a2.28 2.28 0 0 0 2.39 2.28 2.23 2.23 0 0 0 2.35-2.28V21.6h6.56v48.34a2.16 2.16 0 0 0 1.06 1.91 2.72 2.72 0 0 0 2.62 0 2.15 2.15 0 0 0 1-1.93V21.6h8.09v45.22c0 5.85-5.7 9.08-16.07 9.08s-16.1-3.16-16.1-9.08zM138 52v17.1c0 2.75-3.08 6.79-9.7 6.79h-1.35c-6.62 0-9.72-4-9.73-6.79V27.37c0-2.36 2.82-6.78 9.67-6.78h1.38c6.87 0 9.73 4.42 9.73 6.78v19.71h-12.75v23.57a2.07 2.07 0 0 0 2.29 2 2.18 2.18 0 0 0 2.4-2V52.04zm-12.76-11.34h4.7v-15a1.55 1.55 0 0 0-.79-1.36 3.35 3.35 0 0 0-3.07 0 1.5 1.5 0 0 0-.83 1.32zM83 52v17.1c0 2.75-3.09 6.79-9.71 6.79H72c-6.62 0-9.72-4-9.73-6.79V27.37c0-2.36 2.82-6.78 9.67-6.78h1.38c6.84 0 9.68 4.41 9.68 6.78v19.71H70.27v23.57a2.07 2.07 0 0 0 2.29 2 2.19 2.19 0 0 0 2.4-2S75 52.7 75 52zM70.27 40.66H75v-15a1.55 1.55 0 0 0-.78-1.36 3.36 3.36 0 0 0-3.08 0 1.5 1.5 0 0 0-.83 1.32zm71.15-18.93v1.88c0 2 3.17.58 3.17 3.89v47.55h8.07v-49.7a1.67 1.67 0 0 1 .83-1.08 3.06 3.06 0 0 1 2.91 0 1.72 1.72 0 0 1 .9 1.49V47h8.18V25.89a4.16 4.16 0 0 0-2.32-3.89c-2.69-1.4-6.93-2-9.88.18l-.58.4v-.84zm81.26-11.22v72.27a7 7 0 0 1-6.82 6.7H11.09a6.93 6.93 0 0 1-7.22-6.78V10.88c0-4.19 2.67-7 6.63-7h205.2a6.74 6.74 0 0 1 7 6.64m-3.1 0A3.63 3.63 0 0 0 215.71 7H97.83v15.36l.57-.58c1.08-1.09 5.17-1.64 8.38-.29 2.52 1.06 3.85 3.47 3.85 6.93v40.74c0 2.85-3.67 6.79-10.52 6.79-7.1 0-10.41-4-10.41-6.79V9.66c0-2.09-1.26-2.29-2.19-2.66h-77C8 7 7 8.69 7 10.88v71.83a3.88 3.88 0 0 0 4.12 3.68h204.73a3.9 3.9 0 0 0 3.72-3.61zM97.86 70.65a2.31 2.31 0 0 0 4.56 0V25.44c0-.91-.88-1.5-2.2-1.5-1.17 0-2.36.51-2.36 1.5z" fill="#fff")
          
  span.sub-heading.h3.logo-label= "For life!"

mixin miniCart
  button.button-menu-icon.cart-button
    span.cart-icon
      svg(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 85.46")
        title= "cart-full"
        path(d="M89.65 56a3.76 3.76 0 0 0 3.65-3.11l5.88-35.27c.16-.9.82-1.7.82-2.7A3.9 3.9 0 0 0 96.3 11H78a3.51 3.51 0 1 0 0 7h13.61l-4.94 30h-58l-9.9-44h-.11a4.53 4.53 0 0 0-4.13-4H0v4l11.75 2 14.43 64h3.7a7.71 7.71 0 0 0-7.41 7.76 7.51 7.51 0 0 0 7.41 7.53A7.36 7.36 0 0 0 37.29 78h37a7.51 7.51 0 0 0 7.41 7.46 7.74 7.74 0 0 0 0-15.46H33.58l-3.07-14h59.14z" fill="currentColor")

        path(fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="7" class="line-default" d="M37.03 14.36l42.66.15")

        path(fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="7" class="line-plus" d="M59.72 14.36H37.03")

//- HERO IMAGE
mixin heroImage
  #heroImage
    .headline
      span= "Only the best"

//- GRILLS CONTENT SECTION
mixin prodItem(val)
  .product-item(style="background-image: url("+val+");")
  

mixin contentGrills
  div.featured-grills
    +prodItem("https://production-weber-com.imgix.net/pim/62010001F_1800x1800.png")
    +prodItem("https://production-weber-com.imgix.net/pim/7370001F_1800x1800.png")
    +prodItem("https://production-weber-com.imgix.net/pim/57067001-F-1800x1800_Rev.png")
    
//- FOOTER
mixin footerWrap
  .footer
    .links
      section.shop
        .footer-wrapper
          ul.menu
            li.top
              h4.top-label="Shop"
              ul.submenu
                each val in ['Gas', 'Electric', 'Charcoal', 'Portable', 'Specials', 'Gifts']
                  li
                    a= val

      section.explore
        .footer-wrapper
          ul.menu
            li.top
              h4.top-label= 'Explore'
              ul.submenu
                each val in ['Explore by Color', 'Explore by Material', 'Recipes', 'About Weber']
                  li
                    a= val
  
      section.customer-care
        .footer-wrapper
          ul.menu
            li.top
              h4.top-label= 'Customer Care'
              ul.submenu
                each val in ['Customer Service', 'FAQS', 'Contact Us', 'Warranty', 'Privacy']
                  li
                    a= val

      address.copyright
        span= "All images and content are © 2018 WEBER. All rights reserved."

//-
  ---------------------------------------------
  END MIXINS
  ---------------------------------------------
//

#head
  .topBar
    +topBar
  .bottomBar
    .centerBox
      +weberLogo
      +navigation
      +miniCart
      
+heroImage
.contentSection.banner
  h1= "Free shipping on all orders over $50"
  button= "Shop Now"
.contentSection
  +contentGrills
+footerWrap
              
            
!

CSS

              
                html { font-size: 10px }

#head {
  width: 100%;
  height: 115px;
  background: #1a1a1a;
  
  .centerBox {
    nav {
      ul {
        list-style: none;
        li { 
          float: left; 
          
          &:hover {
            a { 
              color: #e01c1c;
              .menu-arrow-down { border-color: #e01c1c; }
            }
            
            .arrow-wrapper {
              transform: translateY(50%);
              transition: transform .6s cubic-bezier(.19,1,.22,1);
              svg, path { fill: #e01c1c; }
            }
          }
          a { 
            color: white; 
            text-transform: uppercase;
            display: flex;
            align-items: center;
            height: 100%;
            padding: 0 15px;
            text-decoration: none;
            transition: color .2s cubic-bezier(.25,.25,.75,.75);
            color: #fbf8f2;

            .menu-arrow-down {
              height: 17px;
              width: 17px;
              display: block;
              position: relative;
              border: 1px solid #fbf8f2;
              border-radius: 50%;
              overflow: hidden;
              transition: border .2s cubic-bezier(.25,.25,.75,.75);

              .arrow-wrapper {
                height: 200%;
                width: 100%;
                position: absolute;
                bottom: 0;
                left: 0;

                .icon {
                    height: 50%;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    
                  svg {
                    height: 7px;
                    width: 7px;
                    display: block;
                  }
                }
              }
            }
          }
          .menu-arrow-down {
            display: none;
            margin-left: 8px;
          }
        }
        .has-second-level {
          &:hover .menu-second-level {
            visibility: visible;
            pointer-events: auto;
            
            .menu-second-level-inner {
              transform: translateY(0);
            }
            a { color: white; }
            .list {
                display: flex;
                justify-content: center;
                width: 100%;
                max-width: 960px;
                margin: 0 auto;
              
              wrapper {
                  display: inline-block;
                  min-width: 170px;
                  text-align: left;
                  vertical-align: top;
                .menu-second-level-item {
                  a.sub-heading.h3-full {
                      letter-spacing: .12em;
                      margin: 7px 0;
                  }
                  .list-header {
                    margin-bottom: 10px;
                    font: 400 1.9rem/1em weber-serif,Arial,sans-serif;
                    color: #8c8c8c;
                    a {
                      color: #8c8c8c;
                    }
                  }
                }
              }
            }
          }
        }
        .menu-second-level {
          top: 60px;
          bottom: auto;
          left: 0;
          right: 0;
          position: absolute;
          text-align: center;
          visibility: hidden;
          z-index: 1;
          overflow: hidden;
          pointer-events: none;
          &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            border-top: 1px dashed rgba(105,105,105,.75);
            z-index: 1;
          }
        }
      }
    }
  }
}
  
.sub-heading.h3, .sub-heading.h3-full {
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    margin: -0.1875em 0 -0.375em;
}

.topBar {
  position: relative;
  border-bottom: 1px dashed rgba(105,105,105,.5);
  z-index: 2;
  .menu-top-list {
    font-size: 0;
    text-align: center;
    
    li {
      display: inline-block;
      position: relative;
      border-right: 1px dashed rgba(105,105,105,.5);
      vertical-align: top;
      color: #8c8c8c;
      transition: color .2s cubic-bezier(.25,.25,.75,.75),background .2s cubic-bezier(.25,.25,.75,.75);
      height: 41px;
      padding: 3px 16px 0;
      
      span {
        font: 600 1.5rem/1 DIN-Next-LT-Pro-Cond,Arial,sans-serif;
        letter-spacing: .12em;
        text-transform: uppercase;
        line-height: 41px;
      }
    }
  }
}
.logo {
    display: block;
    position: absolute;
    top: 3px;
    left: 16px;
    font-size: 0;
    text-decoration: none;
    background-size: 100% 100%;
    z-index: 1;
  
  svg {
      height: 32px;
      width: 79px;
      display: inline-block;
      margin-right: 14px;
      vertical-align: top;
  }
}
.logo-label {
    position: absolute;
    top: 3px;
    left: 110px;
    padding-top: 11px;
    color: #fbf8f2;
    vertical-align: top;
  }

.centerBox {
    display: flex;
    justify-content: center;
    flex-grow: 1;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    padding-left: 15px;
    background: #1a1a1a;
}
.leftSide {
  height: 60px;
  width: 200px;
}

.cart-button {
    background: url(https://www.weber.com/version/338/inc/image/texture_titles_white.png) repeat center center #e01c1c;
    height: 70px;
    width: 64px;
    padding: 0;
    border: 0;
    outline: 0;
    text-align: center;
    position: absolute;
    right: 0;
    top: -15px;
  
  .cart-icon svg {
    height: 23px;
    width: 28px;
    path { fill: white; stroke: white; }
  }
}

#heroImage {
  
    height: 400px;
    
    background-image: url(https://img.huffingtonpost.com/asset/5927277d150000210015b69f.jpeg?ops=1910_1000);
  
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  
    .headline {
    position: absolute;
    width: 30%;
    right: 0;
    height: 70px;
    background: rgba(0,0,0,.7);
    bottom: 0;
    text-align: center;
      
      span {
        font-size: 36px;
        font-weight: 900;
        color: white;
        line-height: 70px;
        text-transform: uppercase;
        letter-spacing: 2px;
      }
  }
}

/**
 * FOOTER
**/
.footer {
  ul { list-style: none; }
  h4, .h4 {
    margin: 0;
    margin-bottom: 10px;
    color: #363636;
    font-family: "MarkWeb-Bold",Verdana,Arial,sans-serif;
    font-size: 1.357rem;
    font-style: normal;
    line-height: 24px;
    text-transform: uppercase;
    
    span {
      display: inline;
      margin: 0;
      margin-bottom: 10px;
      color: #363636;
      font-family: "MarkWeb-Bold",Verdana,Arial,sans-serif;
      font-size: 1.357rem;
      font-style: normal;
      line-height: 24px;
      text-transform: uppercase;
    }
  }
  address {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 25px 0 30px 20px;
    color: #777;
    clear: both;
    font-style: initial;
    font-size: 16px;
    font-weight: 300;
  }
  ul {
    margin: 0;
    display: table;
    width: 100%;
    vertical-align: top;
    
    &.menu {
          padding: 20px 0 20px 20px;
    }
  }
  ul.submenu {
    padding-left: 20px;
    width: auto;
    display: table;
    padding: 0 0 0 20px;
    float: left;
    max-width: 1000px; 
    
    li {
      width: auto;
      display: table-cell;
      padding: 0 20px;
      margin-bottom: 0;
      line-height: 35px;
      vertical-align: middle;
      font-size: 16px;
      color: white;
    }
  }
  .shop {
    background: url(https://www.weber.com/version/338/inc/image/texture_titles_white.png) repeat center center black;
  }
  .explore {
    background: url(https://www.weber.com/version/338/inc/image/texture_titles_white.png) repeat center center #e01c1c;
  }
  .customer-care {
    background: url(https://www.weber.com/version/338/inc/image/texture_titles_white.png) repeat center center #1a1a1a;
  }
  .top-label {
    font-size: 40px;
    float: left;
    color: white;
  }
  .links {
    width: 100%;
    float: left;
    position: relative;
    
    .social {
      display: block;
      padding: 19px 0;
      min-height: 70px;
      position: relative;
      background: #fff;
    }
  }
}


.contentSection {
  background: url(https://www.weber.com/version/338/inc/image/texture_titles_white.png) repeat center center #DDD;
  min-height: 300px;
  
  &.banner {
    min-height: 80px;
    width: 100%;
    background: url(https://www.weber.com/version/338/inc/image/texture_titles_white.png) repeat center center #e01c1c;
    padding: 10px 15%;
    h1 {
      line-height: 30px;
      color: white;
      font-size: 36px;
      float: left;
    }
    button {
      float: right;
      width: 200px;
      margin-right: 30%;
      height: 50px;
      margin-top: 13px;
      border: none;
      color: #e01c1c;
      font-size: 30px;
      text-transform: uppercase;
      font-weight: 900;
    }
  }
}

/**
 * CONTENT - GRILLS
**/
.featured-grills {
  width: 100%;
  .product-item {
    width: 33.33%;
    height: 415px;
    float: left;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-origin: content-box;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console