cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

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.

            
              nav.nav_bar(role="navigation")
  .nav_logo
    span Site Logo
    svg(xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', width='87', height='42', viewbox='0 0 87 42')
      defs
        path#a(d='M-577-60H663v2000H-577z')
      clippath#b
        use(xlink:href='#a', overflow='visible')
      g(clip-path='url(#b)')
        defs
          path#c(d='M41.004 0C29.404 0 20 9.4 20 21c0 11.598 9.4 21 21.004 21h10.992C63.596 42 73 32.6 73 21 73 9.402 63.6 0 51.996 0H41.004z')
        clippath#d
          use(xlink:href='#c', overflow='visible')
        path(clip-path='url(#d)', fill='none', stroke='#B0B3C4', stroke-width='10', stroke-miterlimit='10', d='M41.004 0C29.404 0 20 9.4 20 21c0 11.598 9.4 21 21.004 21h10.992C63.596 42 73 32.6 73 21 73 9.402 63.6 0 51.996 0H41.004z')
      g#knife
        defs
          path#e(d='M-577-60H663v2000H-577z')
        clippath#f
          use(xlink:href='#e', overflow='visible')
        g(clip-path='url(#f)')
          defs
            path#g(d='M85.323 5.945l-6.323 15 5.01 2.377s.762 9.735 1.012 12.623c.62 1.764 2.003.752 2.003 0v-30s-.78-1.957-1.702 0z')
          clippath#h
            use(xlink:href='#g', overflow='visible')
          path(clip-path='url(#h)', fill-rule='evenodd', clip-rule='evenodd', fill='#B0B3C4', d='M74 .075h18.025v41.85H74z')
      g#fork
        defs
          path#i(d='M-577-60H663v2000H-577z')
        clippath#j
          use(xlink:href='#i', overflow='visible')
        g(clip-path='url(#j)')
          defs
            path#k(d='M9.928 7h1.355l2.272 15-5.628 1.674V37c-.982 2.084-2 0-2 0V23.674L.3 22 2.572 7h1.355v13c1 1.45 2 0 2 0V7h2v13c.974 1.33 2 0 2 0V7z')
          clippath#l
            use(xlink:href='#k', overflow='visible')
          path(clip-path='url(#l)', fill-rule='evenodd', clip-rule='evenodd', fill='#B0B3C4', d='M-4.7 2h23.256v40.926H-4.7z')
  .nav_toggle
    span.hamb_toggle
      span.line.line-1
      span.line.line-2
      span.line.line-3
    span.toggle_name MENU
.blocks_container(role="main")
  div.nav_overlay
    .fix_top
      svg(xmlns='http://www.w3.org/2000/svg', width='349.629', height='349.629', viewbox='0 0 349.629 349.629')
        path(d='M174.827 73.433L0 253.42l23.434 22.77 151.393-155.872 151.39 155.878 23.412-22.776')

    nav.overlay_menu
      ul
        li
          a(href="#") Home
        li
          a(href="#") Work
        li
          a(href="#") Blog
        li
          a(href="#") Contact
          
  .big_block(style="background-image: url('https://dl.dropboxusercontent.com/u/81135676/uova.jpg')")
    .block_content
      h2 A Modern Twist on a Classic
      h4 Eggs with avocado and salsa in a soft corn tortilla
      button.food_cta Read More
  .middle_block_container
    .b_half
      .medium_block.medium_tall(style="background-image: url('https://dl.dropboxusercontent.com/u/81135676/pumpkin.jpg')")
        .block_content
          h2 Pumpkin <br/> Season
          h4 The recipes of autumn
          button.food_cta Read More
    .b_half
      .medium_block(style="background-image: url('https://dl.dropboxusercontent.com/u/81135676/peas.jpg')").peas
        .block_content
          h2 Green Peas
          h4 A <br/> Vitamin </br> Powerhouse
          button.food_cta Read More
      .small_block.recipe
        .recipe_container
          h2 Recipe Finder
          input(type="text", placeholder="e.g. ingredients, mood").food_input
          div.check_container
            input#evidence(type='checkbox', checked='checked').check_box
            label(for='evidence')
              span vegetarian
          button.food_cta Search
      .small_block(style="background-image: url('https://dl.dropboxusercontent.com/u/81135676/choco.jpg')")
        .small_block_container
          h2 Chocolate Chia Seed Pudding
          button.food_cta
            svg(xmlns='http://www.w3.org/2000/svg', width='401.948', height='401.949', viewbox='0 0 401.948 401.949')
              path(d='M397 190.734L228.738 73.444c-6.6-5.632-11.996-3.147-11.996 5.528v49.068c0 8.672-7.1 15.77-15.77 15.77l-104.176.156H15.69v.125C7.05 144.14.002 151.215 0 159.858l.002 82.79c0 8.672 7.095 15.77 15.765 15.77l183.426-.275h1.834c8.647.028 15.717 7.107 15.717 15.765v49.067c0 8.675 5.397 11.163 11.993 5.535l168.265-117.295c6.596-5.636 6.596-14.848-.002-20.48z')

  .last_blocks_container
    .last_half
      .last_medium_block(style="background-image: url('https://dl.dropboxusercontent.com/u/81135676/jamie.jpg')")
        .lmb_content
          h2 Jamie Oliver
          h4 Is starting the food <br/> revolution
          button.food_cta Read More
        
    .last_half
      .small_social.twitter
        .sms_content
          .sms_ill
            svg(xmlns='http://www.w3.org/2000/svg', viewbox='0 0 612 612')
              path(d='M612 116.258c-22.525 9.98-46.694 16.75-72.088 19.772 25.93-15.527 45.777-40.155 55.184-69.41-24.322 14.378-51.17 24.82-79.775 30.48-22.906-24.438-55.49-39.66-91.63-39.66-69.333 0-125.55 56.218-125.55 125.514 0 9.828 1.11 19.427 3.25 28.606-104.325-5.24-196.834-55.223-258.75-131.174-10.822 18.51-16.98 40.078-16.98 63.1 0 43.56 22.182 81.994 55.836 104.48-20.575-.688-39.926-6.348-56.867-15.756v1.568c0 60.806 43.29 111.554 100.692 123.104-10.517 2.83-21.607 4.398-33.08 4.398-8.107 0-15.947-.803-23.634-2.333 15.985 49.907 62.336 86.2 117.253 87.194-42.946 33.655-97.098 53.656-155.915 53.656-10.134 0-20.116-.612-29.944-1.72 55.568 35.68 121.537 56.484 192.44 56.484 230.947 0 357.187-191.29 357.187-357.188l-.42-16.253C573.87 163.525 595.21 141.42 612 116.257z', fill='#010002')
          a(href="https://twitter.com/RiccardoZanutta" target="_blank").food_cta Follow
      .small_social.fb
        .sms_content
          .sms_ill
            svg(xmlns='http://www.w3.org/2000/svg', width='430.113', height='430.114', viewbox='0 0 430.113 430.114')
              path(d='M158.08 83.3v59.218h-43.384v72.412h43.385v215.183h89.123V214.936h59.805s5.6-34.72 8.316-72.685H247.54V92.74c0-7.4 9.717-17.354 19.32-17.354h48.558V0h-66.02c-93.52-.004-91.317 72.48-91.317 83.3z')
          button.food_cta Like
          
          
footer.footer(role="contentinfo") &copy; 2015 Food Magazine
            
          
!
            
              // Vars 
$pickled-bluewood =  #363c5c
$cadet-blue       =  #b0b3c4
$golden-dream     =  #e9d039
$indigo           =  #4167c9
$royal-blue       =  #636fe6
$wine-berry       =  #4b1a3a
$comet            =  #5d5f81
$downy            =  #65d8b9
$santas-gray      =  #9b9db1
$red-damask       =  #d95d4f
$twitter          =  #00b1ed
$facebook         =  #3e5a9a

$body-bg          =  $pickled-bluewood
$body-color       =  white
$sans             =  'League Spartan', sans-serif
$serif            =  'Old Standard TT', serif
$max-width        =  1024px
$height-icon      =  14px
$width-line       =  25px
$height-line      =  2px
$transition-time  =  0.4s
$rotation         =  45deg
$translateY       =  ($height-icon / 2)
$translateX       =  0
$snappy           =  cubic-bezier(0.694,  0.048, 0.335, 1.000)

// Mixins 
clearfix()
  &:before
  &:after
    content: ""
    display: table
  &:after
    clear: both
    
visual-hide() 
  clip: rect(1px, 1px, 1px, 1px)
  height: 1px
  overflow: hidden
  position: absolute
  width: 1px
  
placeholder()
  &::-webkit-input-placeholder
    {block}
  &:-moz-placeholder
    {block}
  &::-moz-placeholder
    {block}
  &:-ms-input-placeholder
    {block}

media(minWidth, maxWidth)
    @media only screen and (min-width: minWidth) and (max-width: maxWidth)
        {block}

media-max(maxWidth)
    @media only screen and (max-width: maxWidth)
        {block}

media-min(minWidth)
    @media only screen and (min-width: minWidth)
        {block}
        
@font-face {
  font-family: 'League Spartan';
  src: url('https://dl.dropboxusercontent.com/u/81135676/leaguespartan-bold.eot');
  src: url('https://dl.dropboxusercontent.com/u/81135676/leaguespartan-bold.eot?#iefix') format('embedded-opentype'),
       url('https://dl.dropboxusercontent.com/u/81135676/leaguespartan-bold.woff2') format('woff2'),
       url('https://dl.dropboxusercontent.com/u/81135676/leaguespartan-bold.woff') format('woff'),
       url('https://dl.dropboxusercontent.com/u/81135676/leaguespartan-bold.ttf') format('truetype'),
       url('https://dl.dropboxusercontent.com/u/81135676/leaguespartan-bold.svg#league_spartanbold') format('svg');
  font-weight: bold;
  font-style: normal;
}        


@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

.check_box
  &:not(:checked), &:checked 
    position: absolute
    left: -9999px
    + label
      position: relative
      color: white
      font-size: 12px
      padding-left: 25px
      cursor: pointer
      span
        position: relative
        top: 4px
      &:before
        content: ""
        position: absolute
        left: 0
        top: 2px
        width: 12px
        height: 12px
        border: 2px solid #e1e1e1
        background-color: #f8f8f8
        border-radius: 3px
        transition: border-color 0.2s ease, background-color 0.2s ease
      &:after
        content: "✔"
        position: absolute
        top: 7px
        left: 4px
        text-align: center
        font-size: 11px
        line-height: 0.8
        color: white
        transition: transform 0.2s $snappy, opacity 0.3s ease
    &:hover
      + label
        &:before
          border-color: $downy
    &:focus
      + label
        &:before
          //border: 1px dotted blue
  &:not(:checked)
    + label
      &:after
        opacity: 0
        transform: scale(0)
  &:checked
    + label
      &:before
        background-color: $downy
        border-color: $downy
      &:after
        opacity: 1
        transform: scale(1)

body
  width: 100%
  height: 100%
  font-family: $sans
  line-height: 1.2
  background-color: $body-bg
  
::selection 
  background: #999
  color: white
  text-shadow: none

::-webkit-selection
  background: #999
  color: white
  text-shadow: none  

.food_cta
  display: inline-block
  padding: 11px 28px
  text-decoration: none
  letter-spacing: 1px
  position: relative
  border: 0
  border-radius: 1.4em
  color: white
  &:focus
    outline: none

.nav_bar
  width: 88%
  max-width: $max-width
  margin: 70px auto 0 auto
  color: $cadet-blue
  padding-bottom: 38px
  clearfix()
  .nav_logo
    width: 150px
    float: left
    cursor: pointer
    span
      visual-hide()
    #fork, #knife
      transform: rotate(0deg) translateX(0)
      transform-origin: 50% 50%
      transition: all 0.3s $snappy
      path
        transition: all 0.25s ease
    &:hover
      #fork
        transform: rotate(30deg) translateX(30px)
        path
          fill: white
      #knife
        transform: rotate(-30deg) translateX(-30px)
        path
          fill: white
  .nav_toggle
    float: right
    cursor: pointer
    overflow: hidden
    padding: 15px 0
    .toggle_name
      padding-left: 9px
      font-size: 11px
      position: relative
      left: 0
      color: $cadet-blue
      transform: translateX(0)
      transition: color 0.25s ease, left 0.2s $snappy
      &.is-open
        left: 100px
    .hamb_toggle
      width: $width-line
      height: $height-icon
      position: relative
      display: inline-block
      margin: 0
      .line
        display: block
        background: $cadet-blue
        width: $width-line
        height: $height-line
        position:absolute
        left:0
        border-radius: ($height-line / 2)
        transition: all $transition-time
        &.line-1 
          top: 0
        &.line-2
          top: 50%
        &.line-3
          top: 100%
          
      &:hover, &:focus
       .line-1
          transform: translateY($height-line / 2 * -1)
       .line-3 
          transform: translateY($height-line / 2)
      &.is-open
        .line-1
          transform: translateY($translateY) translateX($translateX) rotate($rotation)
        .line-2
          opacity:0
        .line-3
          transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1)
        &:hover
          .line
            background: white
  &:hover
    .toggle_name
      color: white

    
.nav_overlay
  position: absolute
  top: 0
  left: 0
  width: 100%
  visibility: hidden
  opacity: 0
  height: 100%
  z-index: 10
  transition: all 0.3s ease
  &:before
    content: ''
    position: absolute
    top: 0
    left: 0
    opacity: 0
    width: 50%
    height: 100%
    background-color: $body-bg
    transform: translateX(-150%)
    transition: transform 0.4s $snappy, opacity 0.25s ease-in-out
  &:after
    content: ''
    position: absolute
    top: 0
    right: 0
    opacity: 0
    width: 51%
    height: 100%
    background-color: $body-bg
    transform: translateX(150%)
    transition: transform 0.4s $snappy, opacity 0.25s ease-in-out
  .fix_top
    position: fixed
    bottom: 40px
    right: 80px
    cursor: pointer
    width: 50px
    height: 50px
    color: white
    transition: all 0.3s ease
    z-index: 101
    svg
      width: 50px
      height: 50px
      path
        fill: white
    &:hover
      bottom: 45px
  .overlay_menu
    position: relative
    height: 70%
    top: 50%
    transform: translateY(-50%)
    font-size: 50px
    font-weight: 400
    text-align: center
    z-index: 100
    ul
      list-style: none
      padding: 0
      margin: 0 auto
      display: inline-block
      position: relative
      height: 100%
      li
        display: block
        height: 25%
        height: calc(100% / 4)
        min-height: 50px
        position: relative
        opacity: 0
        a
          display: block
          position: relative
          color: white
          transform: scale(1)
          text-decoration: none
          overflow: hidden
          transition: transform 0.25s ease
          &:after
            background: none repeat scroll 0 0 transparent
            bottom: 0.6em
            content: ""
            display: block
            height: 9px
            left: 0
            width: 100%
            position: absolute
            background: rgba(#0BC4D9, 0.8)
            transform: scaleX(0)
            transition: transform 0.3s $snappy
          &:hover
            transform: scale(0.9)
            &:after
              transform: scaleX(1);
        &:nth-child(2)
          a:after
            background: rgba($red-damask, 0.8)
        &:nth-child(3)
          a:after
            background: rgba($golden-dream, 0.8)
        &:last-child
          a:after
            background: rgba(#636FE6, 0.8)
  &.is-open
    visibility: visible
    opacity: 0.8
    &:before, &:after
      transform: translateX(0)
      opacity: 1
    .overlay_menu
      ul
        li
          animation: fadeInRight 0.55s ease forwards
          animation-delay: 0.35s
          &:nth-of-type(2)
            animation-delay: 0.45s
    
          &:nth-of-type(3)
            animation-delay: 0.55s
          
          &:nth-of-type(4)
            animation-delay: 0.65s
          
    
.blocks_container
  width: 88%
  max-width: $max-width
  margin: 0 auto
  position: relative
  margin-bottom: 50px
  overflow: hidden
  background-color: white
  box-shadow: 0px 8px 21px 0px rgba(50, 50, 50, 0.50)
  min-height: 30vh
  clearfix()
  transition: all 0.3s ease
  &:hover
    box-shadow: 0px 11px 48px 0px rgba(50, 50, 50, 0.50)
  
$block
  float: left
  position: relative
  background-size: cover
  background-repeat: no-repeat
  transition: all 0.3s ease
  clearfix()

.big_block
  @extend $block
  width: 100%
  height: 420px
  .block_content
    float: right
    width: 60%
    text-align: right
    padding-right: 35px
    color: white
    h2
      font-size: 48px
      margin-bottom: 0
      clearfix()
    h4
      font-size: 21px
      width: 76%
      float: right
      font-weight: 300
      font-family: $serif
      clearfix()
    .food_cta
      background-color: $golden-dream

.middle_block_container
  width: 100%
  height: 600px
  clearfix()
  .b_half
    height: 100%
    float: left
    clearfix()
    &:first-child
      width: 40%
    &:last-child
      width: 60%
      
.medium_block
  @extend $block
  width: 100%
  height: 320px
  &.peas
    .block_content
      position: absolute
      width: 60%
      margin: 0
      top: 20px
      right: 30px
      text-align: right
      color: white
      padding: 10px 20px
      h2
        font-size: 40px
        color: white
        margin-top: 0
        margin-bottom: 7px
      h4
        font-size: 30px
        color: white
        font-weight: 300
        margin: 0
        line-height: 1.5
        font-family: $serif
      .food_cta
        background-color: #3E67C9
        font-size: 13px
        padding: 9px 24px
        margin-top: 17px
  &.medium_tall
    height: 600px
    .block_content
      position: absolute
      text-align: center
      width: 90%
      margin: 0 auto
      bottom: 60px
      left: 0
      color: white
      padding: 10px 20px
      h2
        font-size: 30px
        line-height: 1.5
        margin-bottom: 0
      h4
        font-size: 22px
        font-weight: 300
        margin-top: 0
        font-family: $serif
      .food_cta
        font-size: 13px
        padding: 10px 16px
        background-color: $wine-berry

.small_block
  @extend $block  
  width: 50%
  height: 280px
  .small_block_container
    position: absolute
    top: 40px
    left: 0
    width: 100%
    margin: 0 auto
    text-align: center
    h2
      color: white
      font-size: 17px
      padding: 0 11px
    .food_cta
      background-color: $red-damask
      border-radius: 50%
      width: 40px
      height: 40px
      line-height: 40px
      padding: 0
      text-align: center
      svg
        width: 40px
        height: 25px
        position: relative
        top: 7px
        left: 1px
        path
          fill: white
      
  &.recipe
    background-color: $royal-blue
    .recipe_container
      position: absolute
      top: 50%
      left: 50%
      width: 100%
      padding: 0 10px
      transform: translate(-50%, -50%)
      text-align: center
      h2
        font-family: $serif
        color: white
        font-size: 28px
        font-weight: 400
      .check_container
        margin: 10px auto 25px auto
     .food_cta
       background-color: $downy
       padding: 9px 23px
       font-size: 12px
.food_input
  width: 70%
  margin: 10px auto
  border: 0
  font-size: 13px
  background: none
  background-color: white
  padding: 6px 10px
  border-radius: 1.3em
  color: darken($santas-gray, 55%)
  +placeholder()
   color: $santas-gray
   font-size: 11px
   text-align: center
   position: relative
   top: 4px
  &:focus
    outline: none
 
.last_blocks_container
  width: 100%
  height: 420px
  clearfix()
  .last_half
    height: 100%
    float: left
    clearfix()
    &:first-child
      width: 70%
    &:last-child
      width: 30%
.last_medium_block
  @extend $block
  width: 100%
  height: 100%
  .lmb_content
    position: absolute
    top: 20px
    left: 35px
    h2
      font-size: 40px
      color: $comet
      margin-bottom: 7px
    h4
      font-size: 30px
      color: $comet
      font-weight: 300
      margin: 0
      line-height: 1.5
      font-family: $serif
    .food_cta
      background-color: $red-damask
      font-size: 13px
      padding: 9px 24px
      margin-top: 17px

.small_social
  width: 100%
  height: 50%
  position: relative
  .sms_content
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    transform-style: preserve-3d
    .sms_ill
      text-align: center
      svg
        width: 35px
        height: 50px
        path
          fill: white
    .food_cta
      margin-top: 8px
  &.fb
    background-color: $facebook
    .food_cta
      background-color: #5B79B8
  &.twitter
    background-color: $twitter
    .food_cta
      background-color: #72C8E6
      
.footer
  color: $cadet-blue
  font-size: 12px
  text-align: center
  padding-bottom: 50px
  transition: letter-spacing 0.35s ease
  &:hover
    letter-spacing: 2px
    
+media-max(766px)
  .nav_overlay
    .overlay_menu
      height: 80%
      font-size: 30px
      ul
        li
          height: 18%
          height: calc(100% / 10)
  .middle_block_container
    height: 500px
    .b_half
      &:first-child, &:last-child
        width: 100%
        height: auto
      .medium_block
        height: 320px
  .last_blocks_container
    height: 500px
    .last_half
      &:first-child, &:last-child
        width: 100%
        height: auto
      .last_medium_block
        width: 100%
        height: 320px
      .small_social
        float: left
        width: 50%
        height: 220px
        
+media-max(495px)
  .big_block
    .block_content
      h2
        font-size: 35px
      h4
        font-size: 18px
  .medium_block
    @extend $block
    width: 100%
    height: 320px
    &.peas
      .block_content
        h2
          font-size: 34px
        h4
          font-size: 23px
    &.medium_tall
      .block_content
        h2
          font-size: 27px
        h4
          font-size: 19px
  .small_block
    width: 100%
  .last_blocks_container
    .last_half
      .last_medium_block
        .lmb_content
          h2
            font-size: 30px
          h4
            font-size: 20px
      .small_social
        width: 100%
            
          
!
            
              var $navOverlay  = $('.nav_overlay'),
    $overlayMenu = $('.overlay_menu'),
    $toggle      = $('.hamb_toggle'),
    $toggleName  = $toggle.find('.toggle_name');

$(document).on('click', '.nav_toggle', function() {

  $navOverlay.toggleClass('is-open');
  $toggle.toggleClass('is-open');
  $toggleName.toggleClass('is-open');
  
  // Let's scroll onClick
  var offset = $overlayMenu.find('li:first').offset().top;
  if($navOverlay.hasClass('is-open')) {
    setTimeout(function() {
      $('html, body').animate({
        scrollTop: offset - 100
      }, 500);
    }, 380);
  }
});

$(document).on('click', '.fix_top', function(event) {
  event.preventDefault();
  $('html, body').animate({
    scrollTop: 0
  }, 500);
  setTimeout(function() {
    $navOverlay.removeClass('is-open');
    $toggle.removeClass('is-open');
    $toggleName.removeClass('is-open');
  }, 550);
});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console