<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/tutsplus/pen/NRzApJ?limit=all&page=3&q=uikit" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.1/css/uikit.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.1/css/components/sticky.min.css'>
<style class="cp-pen-styles">div.uk-cover-background {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/moon.jpg);
}
header {
background: #333;
}
.uk-navbar {
background: transparent;
}
.uk-navbar-nav > li > a {
color: #fff;
}
main {
margin-top: 20px;
}</style></head><body>
<div class="uk-cover-background uk-position-relative">
<img class="uk-invisible" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/moon.jpg" alt="">
</div>
<header data-uk-sticky>
<div class="uk-container uk-container-center">
<nav class="uk-navbar">
<ul class="uk-navbar-nav">
<li class="uk-active">
<a href="">Home</a>
</li>
<li>
<a href="">About</a>
</li>
<li>
<a href="">Services</a>
</li>
<li>
<a href="">Portfolio</a>
</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="uk-container uk-container-center">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit posuere ipsum in bibendum. In egestas tempor lacus, rhoncus fringilla ante viverra ac. Fusce sagittis, tellus a faucibus molestie, enim magna ornare nunc, vel placerat orci purus
vitae dolor. Phasellus eu rutrum enim, et aliquam enim. Quisque laoreet nulla vitae velit condimentum, eget maximus massa dignissim. Phasellus et volutpat leo. Aliquam aliquam purus at ligula ultricies, sit amet consequat ligula porttitor. Etiam
facilisis mauris turpis, nec fermentum dui blandit sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam dapibus libero ut orci luctus congue. Nam a tellus turpis. Morbi sed pretium nibh, sed hendrerit
tortor. Mauris vitae congue ante. Etiam ac enim et erat suscipit malesuada dictum at lectus. Suspendisse potenti. Duis bibendum congue arcu, sit amet condimentum ex porttitor ut. Donec magna erat, malesuada eu dui vitae, lobortis porttitor augue.
Donec ut feugiat ipsum, eu accumsan dui. Vestibulum pretium luctus ante in rutrum. In rutrum scelerisque nisl, suscipit volutpat dolor feugiat ut. Aenean quis molestie tellus. Suspendisse potenti. Donec lacus nulla, congue ut arcu a, viverra tincidunt
leo. Maecenas sed nulla non tortor lobortis aliquam. Aenean auctor tincidunt lorem, a semper ex pla.</p>
<p>Aenean quis lectus eget lacus mollis interdum. Donec leo augue, fermentum ac mauris non, auctor ullamcorper libero. Sed id facilisis enim. Nullam sed lobortis mi. Morbi sit amet nibh eu libero tristique egestas nec non magna. Nullam sit amet dui nec
libero laoreet rhoncus nec a mi. Vestibulum dictum ut ligula sit amet vehicula. Maecenas vitae elit euismod, tincidunt leo nec, luctus lacus.</p>
<p>Nam id augue ut velit auctor consequat. Vivamus porttitor placerat imperdiet. Ut efficitur gravida risus, et finibus ipsum venenatis eget. Donec vestibulum sapien ac mauris rhoncus pellentesque. Ut ut tincidunt leo. Nulla lobortis finibus sodales.
Integer lectus ante, mollis vitae mauris quis, facilisis congue diam.</p>
<p>Etiam ac enim et erat suscipit malesuada dictum at lectus. Suspendisse potenti. Duis bibendum congue arcu, sit amet condimentum ex porttitor ut. Donec magna erat, malesuada eu dui vitae, lobortis porttitor augue. Donec ut feugiat ipsum, eu accumsan
dui. Vestibulum pretium luctus ante in rutrum. In rutrum scelerisque nisl, suscipit volutpat dolor feugiat ut. Aenean quis molestie tellus. Suspendisse potenti. Donec lacus nulla, congue ut arcu a, viverra tincidunt leo. Maecenas sed nulla non tortor
lobortis aliquam. Aenean auctor tincidunt lorem, a semper ex pla.</p>
<p>Etiam venenatis lectus et justo pharetra facilisis. Pellentesque sollicitudin sem ac diam egestas, nec varius felis luctus. Vestibulum ipsum nisi, lobortis a orci nec, fringilla dictum ex. Praesent vehicula purus id ligula placerat, eget vehicula
elit rhoncus. Morbi aliquam quis tellus in egestas. Mauris consequat condimentum tortor, euismod porta purus consectetur eget. Quisque blandit id massa ac porta. Nulla a accumsan dui. Morbi ultrices dui mi, vitae dictum erat elementum dapibus. Fusce
at urna massa. Donec felis orci, tempus et suscipit id, facilisis quis lorem. Curabitur quis enim eget velit hendrerit facilisis pulvinar eu mi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit posuere ipsum in bibendum. In egestas tempor lacus, rhoncus fringilla ante viverra ac. Fusce sagittis, tellus a faucibus molestie, enim magna ornare nunc, vel placerat orci purusvitae
dolor. Phasellus eu rutrum enim, et aliquam enim. Quisque laoreet nulla vitae velit condimentum, eget maximus massa dignissim. Phasellus et volutpat leo. Aliquam aliquam purus at ligula ultricies, sit amet consequat ligula porttitor. Etiamfacilisis
mauris turpis, nec fermentum dui blandit sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam dapibus libero ut orci luctus congue. Nam a tellus turpis. Morbi sed pretium nibh, sedhendrerit tortor.
Mauris vitae congue ante.</p>
<p>Aenean quis lectus eget lacus mollis interdum. Donec leo augue, fermentum ac mauris non, auctor ullamcorper libero. Sed id facilisis enim. Nullam sed lobortis mi. Morbi sit amet nibh eu libero tristique egestas nec non magna. Nullam sit amet duinec
libero laoreet rhoncus nec a mi. Vestibulum dictum ut ligula sit amet vehicula. Maecenas vitae elit euismod, tincidunt leo nec, luctus lacus.</p>
<p>Nam id augue ut velit auctor consequat. Vivamus porttitor placerat imperdiet. Ut efficitur gravida risus, et finibus ipsum venenatis eget. Donec vestibulum sapien ac mauris rhoncus pellentesque. Ut ut tincidunt leo. Nulla lobortis finibus sodales.Integer
lectus ante, mollis vitae mauris quis, facilisis congue diam.</p>
<p>Etiam ac enim et erat suscipit malesuada dictum at lectus. Suspendisse potenti. Duis bibendum congue arcu, sit amet condimentum ex porttitor ut. Donec magna erat, malesuada eu dui vitae, lobortis porttitor augue. Donec ut feugiat ipsum, eu accumsandui.
Vestibulum pretium luctus ante in rutrum. In rutrum scelerisque nisl, suscipit volutpat dolor feugiat ut. Aenean quis molestie tellus. Suspendisse potenti. Donec lacus nulla, congue ut arcu a, viverra tincidunt leo. Maecenas sed nulla nontortor
lobortis aliquam. Aenean auctor tincidunt lorem, a semper ex pla. Etiam ac enim et erat suscipit malesuada dictum at lectus. Suspendisse potenti. Duis bibendum congue arcu, sit amet condimentum ex porttitor ut. Donec magna erat, malesuada eu dui
vitae, lobortis porttitor augue. Donec ut feugiat ipsum, eu accumsan dui. Vestibulum pretium luctus ante in rutrum. In rutrum scelerisque nisl, suscipit volutpat dolor feugiat ut. Aenean quis molestie tellus. Suspendisse potenti. Donec lacus nulla,
congue ut arcu a, viverra tincidunt leo. Maecenas sed nulla non tortor lobortis aliquam. Aenean auctor tincidunt lorem, a semper ex pla.</p>
<p>Aenean quis lectus eget lacus mollis interdum. Donec leo augue, fermentum ac mauris non, auctor ullamcorper libero. Sed id facilisis enim. Nullam sed lobortis mi. Morbi sit amet nibh eu libero tristique egestas nec non magna. Nullam sit amet duinec
libero laoreet rhoncus nec a mi. Vestibulum dictum ut ligula sit amet vehicula. Maecenas vitae elit euismod, tincidunt leo nec, luctus lacus.</p>
<p>Nam id augue ut velit auctor consequat. Vivamus porttitor placerat imperdiet. Ut efficitur gravida risus, et finibus ipsum venenatis eget. Donec vestibulum sapien ac mauris rhoncus pellentesque. Ut ut tincidunt leo. Nulla lobortis finibus sodales.Integer
lectus ante, mollis vitae mauris quis, facilisis congue diam.</p>
<p>Etiam ac enim et erat suscipit malesuada dictum at lectus. Suspendisse potenti. Duis bibendum congue arcu, sit amet condimentum ex porttitor ut. Donec magna erat, malesuada eu dui vitae, lobortis porttitor augue. Donec ut feugiat ipsum, eu accumsandui.
Vestibulum pretium luctus ante in rutrum. In rutrum scelerisque nisl, suscipit volutpat dolor feugiat ut. Aenean quis molestie tellus. Suspendisse potenti. Donec lacus nulla, congue ut arcu a, viverra tincidunt leo. Maecenas sed nulla nontortor
lobortis aliquam. Aenean auctor tincidunt lorem, a semper ex pla. Etiam ac enim et erat suscipit malesuada dictum at lectus. Suspendisse potenti. Duis bibendum congue arcu, sit amet condimentum ex porttitor ut. Donec magna erat, malesuada eu dui
vitae, lobortis porttitor augue. Donec ut feugiat ipsum, eu accumsan dui. Vestibulum pretium luctus ante in rutrum. In rutrum scelerisque nisl, suscipit volutpat dolor feugiat ut. Aenean quis molestie tellus. Suspendisse potenti. Donec lacus nulla,
congue ut arcu a, viverra tincidunt leo. Maecenas sed nulla non tortor lobortis aliquam. Aenean auctor tincidunt lorem, a semper ex pla.</p>
<p>Aenean quis lectus eget lacus mollis interdum. Donec leo augue, fermentum ac mauris non, auctor ullamcorper libero. Sed id facilisis enim. Nullam sed lobortis mi. Morbi sit amet nibh eu libero tristique egestas nec non magna. Nullam sit amet duinec
libero laoreet rhoncus nec a mi. Vestibulum dictum ut ligula sit amet vehicula. Maecenas vitae elit euismod, tincidunt leo nec, luctus lacus.</p>
<p>Nam id augue ut velit auctor consequat. Vivamus porttitor placerat imperdiet. Ut efficitur gravida risus, et finibus ipsum venenatis eget. Donec vestibulum sapien ac mauris rhoncus pellentesque. Ut ut tincidunt leo. Nulla lobortis finibus sodales.Integer
lectus ante, mollis vitae mauris quis, facilisis congue diam.</p>
<p>Etiam ac enim et erat suscipit malesuada dictum at lectus. Suspendisse potenti. Duis bibendum congue arcu, sit amet condimentum ex porttitor ut. Donec magna erat, malesuada eu dui vitae, lobortis porttitor augue. Donec ut feugiat ipsum, eu accumsandui.
Vestibulum pretium luctus ante in rutrum. In rutrum scelerisque nisl, suscipit volutpat dolor feugiat ut. Aenean quis molestie tellus. Suspendisse potenti. Donec lacus nulla, congue ut arcu a, viverra tincidunt leo. Maecenas sed nulla nontortor
lobortis aliquam. Aenean auctor tincidunt lorem, a semper ex pla. Etiam ac enim et erat suscipit malesuada dictum at lectus. Suspendisse potenti. Duis bibendum congue arcu, sit amet condimentum ex porttitor ut. Donec magna erat, malesuada eu dui
vitae, lobortis porttitor augue. Donec ut feugiat ipsum, eu accumsan dui. Vestibulum pretium luctus ante in rutrum. In rutrum scelerisque nisl, suscipit volutpat dolor feugiat ut. Aenean quis molestie tellus. Suspendisse potenti. Donec lacus nulla,
congue ut arcu a, viverra tincidunt leo. Maecenas sed nulla non tortor lobortis aliquam. Aenean auctor tincidunt lorem, a semper ex pla.</p>
</div>
</main>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.1/js/uikit.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.1/js/components/sticky.min.js'></script>
<script >// Image from New Old Stock
// http://nos.twnsnd.co/post/149655436306/full-moon-over-the-alps-stefano-de-rosa
//# sourceURL=pen.js
</script>
</body></html>
