#menu
h4 Main Site Navigation
#close
.fa.fa-times.fa-2x
span CLOSE
ul.group
li
a(href="") Pharetra Ultricies
li
a(href="") Commodo Dolor
li
a(href="") Pellentesque Condimentum
li
a(href="") Ipsum Mollis
li
a(href="") Ligula Amet
li
a(href="") Inceptos Sollicitudin
li
a(href="") Tellus Pharetra
li
a(href="") Malesuada Sollicitudin
li
a(href="") Magna Dolor
li
a(href="") Egestas Amet
footer
.fa.fa-twitter
.fa.fa-facebook
.fa.fa-instagram
p Customer Service: 800-123-4567
p
span.link Privacy Policy
span.line |
span.link Contact
span.line |
span.link Sponsors
span.line |
span.link Help
#content
header
.logo
i.fa.fa-globe.fa-4x
div WEBSITE
#menu-button
.icon
i.fa.fa-bars.fa-3x
i.fa.fa-arrows-alt
div MENU
.title
h2 Use the Menu
h3 Instead of a footer!
.text
p Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum
a(href="") nulla leo
| sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur.
p Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Donec sed odio dui. Duis mollis, est non commodo luctus,
a(href="") nisi erat porttitor ligula
| , eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
p.pullquote Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui.
p Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
p Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
#sizer$sans: 'PT Sans', sans-serif
$sans-narrow: 'PT Sans Narrow', sans-serif
$tan: #E5E1D1
$brown: #303030
$red: #E0393D
$darkblue: #253746
$lightblue: #425563
//https://meyerweb.com/eric/tools/css/reset/
//v2.0 | 20110126
//License: none (public domain)
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video
margin: 0
padding: 0
border: 0
font-size: 100%
font: inherit
vertical-align: baseline
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section
display: block
body
line-height: 1
ol, ul
list-style: none
blockquote, q
quotes: none
blockquote:before, blockquote:after,
q:before, q:after
content: ''
content: none
table
border-collapse: collapse
border-spacing: 0
.group:after
content: ""
display: table
clear: both
*
box-sizing: border-box
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
#sizer
position: fixed
bottom: 0
background-color: #444
height: 25px
width: 100%
color: white
text-shadow: 0 -1px 0 black
text-align: center
font-size: .8rem
line-height: 25px
// +-+-+-+-+-+-+-+- End CSS Reset +-+-+-+-+-+-+-+-
body, html
position: relative
width: 100%
height: 100%
h2
color: $darkblue
font-size: 3rem
font-family: $sans-narrow
h3
color: $lightblue
.text a
color: $brown
display: inline-block
position: relative
text-decoration: none
&:hover
color: $red
&:after
content: ""
width: 100%
height: 0px
position: absolute
bottom: 0
display: block
border-bottom: 2px solid $red
p
margin: 10px 0
line-height: 1.25
&.pullquote
width: 90%
margin: auto
padding: 0 20px
margin: 20px 0
position: relative
border-left: 2px solid $red
body
background-color: $tan
background-image: url(https://subtlepatterns.com/patterns/halftone.png)
color: $brown
font-family: $sans
font-size: 16px
#content
header
background-color: white
background-color: rgba(255,255,255,.5)
box-shadow: 0 5px 10px rgba(0,0,0,.15)
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.15)
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.15)
-o-box-shadow: 0 5px 10px rgba(0,0,0,.15)
text-align: center
position: relative
border-bottom: 1px solid $lightblue
h3
margin-top: 1%
.logo
width: 20%
height: 150px
padding-top: 25px
display: inline-block
background: $darkblue
color: $tan
vertical-align: top
position: absolute
left: 0
z-index: 2
@media all and (max-width: 599px)
float: left
width: 50%
height: 100px
padding-top: 18px
.fa
font-size: 48px
#menu-button
width: 20%
height: 150px
padding-top: 35px
display: inline-block
border-left: 1px solid $lightblue
position: absolute
right: 0
cursor: pointer
@media all and (max-width: 599px)
width: 50%
border-bottom: 1px solid $lightblue
height: 100px
padding-top: 18px
.icon
height: 48px
overflow: hidden
.fa
display: block
position: relative
transition: all .2s
-webkit-transition: all .2s
-moz-transition: all .2s
margin: 0
&.fa-arrows-alt
font-size: 44px
&:hover .fa-bars
margin-top: -48px
.title
width: 50%
height: 150px
display: inline-block
padding-top: 40px
@media all and (max-width: 599px)
width: 100%
height: auto
padding: 20px 5px
margin-top: 100px
.text
padding: 5%
max-width: 800px
margin: auto
#menu
background: rgba(66,85,99,.98)
position: absolute
top: 0
right: 0
width: 0
height: 0
opacity: 0
z-index: 1
text-align: center
transition: all .5s
overflow: hidden
@media all and (max-width: 599px)
padding-bottom: 50px
&.open
width: 100%
height: auto
min-height: 100%
opacity: 1
overflow: auto
h4
color: $tan
font-size: 24px
margin-top: 200px
@media all and (max-width: 599px)
margin-top: 120px
#close
width: 20%
height: 150px
position: absolute
top: 0
right: 0
color: $tan
text-align: center
padding-top: 25px
cursor: pointer
@media all and (max-width: 599px)
width: 50%
padding-top: 8px
height: 100px
.fa
display: block
line-height: 60px
ul
display: block
width: 90%
max-width: 800px
margin: auto
margin-top: 50px
border-top: 1px solid rgba(37,55,70,.5)
@media all and (max-width: 599px)
margin-top: 20px
li
display: inline-block
width: 50%
float: left
color: $tan
line-height: 60px
border-bottom: 1px solid rgba(37,55,70,.5)
@media all and (max-width: 599px)
width: 100%
line-height: 40px
&:nth-of-type(even)
border-left: 1px solid rgba(37,55,70,.5)
@media all and (max-width: 599px)
border-left: none
a
text-decoration: none
display: block
width: 100%
height: 100%
color: $tan
&:hover
background-color: $lightblue
footer
margin-top: 50px
color: $tan
p:first-of-type
margin: 20px 0
.fa
width: 50px
height: 50px
line-height: 50px
border-radius: 9999px
border: 1px solid rgba(37,55,70,.5)
.line
color: $darkblue
display: inline-block
margin: 0 20px
$(window).resize(function() {
$('body').append('<div id="sizer">' + $(window).width() + 'px x ' + $(window).height() + ' px</div>');
});
$('#menu-button').click(function(){
$("#menu").addClass('open');
});
$('#close').click(function() {
$('#menu').removeClass('open');
});
External CSS
This Pen doesn't use any external CSS resources.