<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/jtorre/pen/jARLzE?q=uikit&limit=all&type=type-pens" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.4/css/uikit.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.4/css/components/sticky.min.css'>
<style class="cp-pen-styles">/*
UIkit 2.xx.x CSS loaded from CDN:
https://cdnjs.com/libraries/uikit
*/
/* Used in "The responsive grid" example */
.my-container {
max-width: 1200px;
margin: 0 auto;
padding: 10px;
}
/* Used in "Parallax scrolling" example */
.header {
background-image: url(http://www.socwall.com/images/wallpapers/26614-1920x1080.jpg);
background-size: cover;
}
.header-inner {
/* limit width */
max-width: 50%;
/* center */
margin: 0 auto;
/* space out parent */
padding: 300px 10px 50px;
}
.header h1 {
font-size: 60px;
line-height: 50px;
letter-spacing: -2px;
font-weight: 900;
color: white;
}
.header h2 {
font-weight: lighter;
font-size: 32px;
color: rgba(255,255,255,0.65)
}
@media screen and (max-width: 480px) {
/* realign headline on smaller devices */
.header-inner {
max-width: 100%;
margin: 0 auto;
padding: 100px 10px;
}
}</style></head><body>
<!-- Starter template for the UIkit framework -->
<!-- https://getuikit.com -->
<!-- Getting started with basic markup -->
<!--<div class="uk-container uk-container-center uk-margin-top">
<div class="uk-panel uk-panel-box uk-text-center">
<h1>Hello universe</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a href="" class="uk-button uk-button-primary uk-button-large">This is a link</a>
</div>
</div>-->
<!-- The responsive grid -->
<!--<div class="my-container">
<ul class="uk-grid uk-grid-small uk-grid-width-1-1 uk-grid-width-medium-1-3 uk-grid-width-large-1-6" data-uk-grid-margin>
<li>
<div class="uk-panel uk-panel-box">
<h2>Nifty feature</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</li>
<li>
<div class="uk-panel uk-panel-box">
<h2>Nifty feature</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</li>
<li>
<div class="uk-panel uk-panel-box">
<h2>Nifty feature</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</li>
<li>
<div class="uk-panel uk-panel-box">
<h2>Nifty feature</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</li>
<li>
<div class="uk-panel uk-panel-box">
<h2>Nifty feature</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</li>
<li>
<div class="uk-panel uk-panel-box">
<h2>Nifty feature</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</li>
</ul>
</div>-->
<!-- Building a one pager website -->
<div class="uk-container uk-container-center uk-margin-top">
<nav class="uk-navbar" data-uk-sticky="{clsactive: 'uk-navbar-attached', top: -100, animation: 'uk-animation-slide-top'}">
<a href="" class="uk-navbar-brand">The Age of Space</a>
<ul class="uk-navbar-nav uk-navbar-flip uk-visible-medium" data-uk-scrollspy-nav="{closest: 'li', smoothscroll: {offset: 100}}">
<li><a href="#dream">The dream</a></li>
<li><a href="#launch">The launch</a></li>
<li><a href="#mars">Life on Mars</a></li>
</ul>
<a href="#offcanvas" class="uk-navbar-flip uk-navbar-toggle uk-hidden-medium" data-uk-offcanvas="{mode: 'slide'}"></a>
</nav>
<main>
<h1 class="uk-text-center uk-margin-large-top" id="dream">The dream</h1>
<img src="https://placehold.it/1200x800" alt="Night sky" />
<hr class="uk-grid-divider" />
<div class="uk-grid uk-grid-width-medium-1-2" data-uk-grid-margin>
<div>
<img src="https://placehold.it/600x400" alt="Space" />
</div>
<div>
<h2>Reaching for the stars</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>
</div>
</div>
<hr class="uk-grid-divider" />
<h1 class="uk-text-center" id="launch">The launch</h1>
<div class="uk-margin">
<img src="https://placehold.it/1200x800" alt="Space shuttle" />
</div>
<div class="uk-grid uk-grid-width-medium-1-1" data-uk-grid-margin>
<div>
<h2>Plenty of challenges ahead</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<hr class="uk-grid-divider" />
<div class="uk-grid uk-grid-width-medium-1-2" data-uk-grid-margin>
<div>
<h1 class="uk-text-center" id="mars">Life on Mars</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="uk-margin">
<img src="https://placehold.it/600x400" alt="Mars" />
</div>
</div>
</main>
<footer class="uk-text-center uk-margin-large">
<a href="#" data-uk-smooth-scroll>To the top</a>
</footer>
<div id="offcanvas" class="uk-offcanvas">
<div class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-offcanvas">
<li><a href="#dream">The dream</a></li>
<li><a href="#launch">The launch</a></li>
<li><a href="#mars">Life on Mars</a></li>
</ul>
</div>
</div>
</div>-->
<!-- Parallax scrolling -->
<!-- <div>
<header class="header" data-uk-parallax="{bg: 100}">
<div class="header-inner" data-uk-parallax="{opacity: 0, viewport: 0.7, y: 100}">
<h1>A world covered in mist</h1>
<h2>Some awesome subtitle to go along</h2>
</div>
</header>
<div style="height: 200vh;"></div>
</div> -->
<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.26.4/js/uikit.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.4/js/components/sticky.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.4/js/components/parallax.min.js'></script>
<script >/*
UIkit 2.xx.x JS loaded from CDN:
https://cdnjs.com/libraries/uikit
*/
//# sourceURL=pen.js
</script>
</body></html>
