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") © 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);
});
External CSS
This Pen doesn't use any external CSS resources.