HTML
<section class="hero">
<div class="hero--body">
<h1>This is the hero section (400px)</h1>
<a class="hero-btn" href="#">Call to action</a>
</div>
</section>
<nav id="main-nav">
<div class="main-nav--logo">Logo</div>
<div class="main-nav--links">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</nav>
<main id="page">
<article class="post">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
<h4>Maecenas nec pretium enim, ac fermentum velit. Cras convallis lectus nec lacus egestas molestie. Proin dictum, purus non pellentesque gravida, est purus pellentesque mi, vel ultrices neque orci vitae enim.</h4>
<p>Etiam velit erat, porttitor quis ante placerat, commodo semper nisl. Quisque rutrum mi id justo lobortis, a porta metus vulputate. Aenean maximus tristique sapien, et egestas felis rutrum id. Praesent consectetur dictum pellentesque. Donec accumsan elit a magna accumsan eleifend. Mauris consectetur risus quis auctor posuere. Mauris vel feugiat enim, quis vulputate ante. Etiam ac sodales massa. Phasellus sit amet eros metus.</p>
<p>Nullam gravida, libero eget viverra malesuada, mi arcu vulputate ipsum, sit amet ornare augue ligula quis arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam volutpat lorem turpis, in finibus neque pellentesque at. Cras pretium, tellus quis feugiat vestibulum, est enim hendrerit nulla, vitae mollis lacus mauris non leo. Etiam metus neque, blandit ut rutrum elementum, tincidunt dignissim eros. Ut eu ex volutpat, malesuada velit in, gravida velit. Nam laoreet orci eget metus rutrum, dapibus auctor sem egestas. Nullam iaculis lectus eu diam tempus, eget iaculis dolor varius. Aenean tempus mollis feugiat. Sed ullamcorper iaculis nisi ac ultricies. Vestibulum leo nisi, sollicitudin vitae enim in, imperdiet gravida augue. Nulla facilisi. Aliquam fermentum bibendum felis nec maximus. Quisque nec eleifend nunc. Curabitur gravida leo nec nisi sagittis posuere.</p>
<p>Fusce non erat ante. Praesent quis tincidunt eros, sed mollis lacus. Praesent elementum quam non ligula tristique, ac semper quam molestie. Maecenas malesuada condimentum nunc, ac rutrum elit viverra et. Morbi mattis, urna non lobortis vulputate, ante tortor laoreet ex, non commodo magna enim sit amet tellus. Praesent nec odio diam. Quisque cursus ut lorem id gravida. Cras eu auctor magna. In vel leo sit amet odio maximus facilisis id sed massa. Vivamus mauris odio, malesuada vel eros sit amet, imperdiet lacinia tortor. Morbi maximus blandit lacinia. Etiam non pretium enim. Nunc suscipit, enim id laoreet facilisis, velit leo auctor mauris, eu ullamcorper sem sapien ut nibh. Aenean sit amet dolor sed velit luctus convallis. Aliquam sem nisl, facilisis non quam at, faucibus imperdiet felis. Sed ac magna pulvinar, pulvinar magna ut, tempus dui.</p>
<p>Praesent elementum lectus ut est semper, eget blandit est cursus. Vestibulum tristique lobortis malesuada. Mauris sollicitudin hendrerit blandit. Phasellus nec pretium ipsum. Donec consequat magna ut viverra dapibus. Aliquam et molestie mauris. Etiam ut elementum urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus egestas, orci ac lobortis scelerisque, mauris ex ullamcorper velit, eu volutpat ex eros a est. Etiam venenatis justo at justo dignissim, et fringilla nibh euismod. Suspendisse placerat luctus lacus, et gravida erat ornare sit amet. Proin a tincidunt eros, vitae ultrices lacus. Nulla facilisi. Maecenas a nibh dictum, porta sapien gravida, condimentum augue. Sed aliquam neque felis, eget porta enim viverra a.</p>
<p>Praesent fermentum pharetra odio vel tincidunt. Etiam lobortis erat ac diam vulputate, ut cursus quam mollis. Nullam nec dapibus urna. Proin dignissim pretium commodo. Quisque pharetra nibh ultricies, viverra augue non, pulvinar tellus. Vestibulum vitae ex blandit, auctor diam ut, accumsan nisl. Sed ante velit, rutrum vel mattis ac, vestibulum sagittis purus. Aliquam sit amet maximus massa. Duis elementum odio in purus rhoncus, quis varius enim vulputate. Phasellus eu est ac diam rutrum pulvinar.</p>
</article>
</main>
CSS
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background-color: #ededed;
font-family: 'Montserrat', Arial, sans-serif;
}
.hero {
height: 400px;
width: 100%;
display: table;
background-color: #F64747;
}
.hero .hero--body {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
}
#main-nav {
position: relative;
width: 100%;
height: 120px;
padding: 30px;
z-index: 1;
background-color: #FFF;
-webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-out;
}
#main-nav .main-nav--logo {
float: left;
height: 60px;
line-height: 60px;
font-size: 2em;
}
#main-nav .main-nav--links {
float: right;
}
#main-nav .main-nav--links ul {
list-style: none;
margin: 0;
padding: 0;
}
#main-nav .main-nav--links ul li {
display: inline-block;
vertical-align: bottom;
height: 60px;
line-height: 60px;
padding-left: 30px;
}
#main-nav .main-nav--links ul li a {
display: block;
height: 100%;
font-size: 0.8em;
text-transform: uppercase;
font-weight: 700;
color: #000;
}
#main-nav.main-nav--sticky {
position: fixed;
top: 0;
height: 60px;
padding: 15px;
background-color: #F64747;
color: #fff;
}
#main-nav.main-nav--sticky .main-nav--logo {
height: 30px;
line-height: 30px;
font-size: 1.5em;
}
#main-nav.main-nav--sticky .main-nav--links ul li {
height: 30px;
line-height: 30px;
padding-left: 15px;
}
#main-nav.main-nav--sticky .main-nav--links ul li a {
font-size: 0.7em;
color: #fff;
}
#page {
padding-top:30px;
}
#page.page--sticky {
padding-top:150px;
}
.post {
width: 40%;
margin: 0 auto;
padding: 30px;
background-color: #fff;
}
.post h1 {
margin-top: 0;
}
.post p {
font-family: Georgia, serif;
}
