<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/samuel-pedraza/pen/xqNwWp?q=uikit&limit=all&type=type-pens" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://getuikit.com/assets/uikit/dist/css/uikit.css?nc=5319'>
<style class="cp-pen-styles"></style></head><body>
<nav class="uk-navbar-container uk-navbar" uk-navbar uk-sticky>
<div class="uk-navbar-left uk-visible@s">
<ul class="uk-navbar-nav">
<li>
<a href="#">
<span uk-icon="icon: nut; ratio: 3"></span>
</a>
</li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a>
<div uk-dropdown>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li><a href="#">Contact</a></li>
<li><a href="#">Call</a></li>
<li><a href="#">Location</a></li>
</ul>
</div>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">
<div>
<form class="uk-search uk-search-default">
<span uk-search-icon></span>
<input class="uk-search-input" type="search" placeholder="Search...">
</form>
</div>
</a></li>
</ul>
</div>
</nav>
<section class="uk-cover-container uk-height-large">
<img src="http://www.wallpapers-web.com/data/out/19/3864777-artistic-wallpapers.jpg" alt="" uk-cover />
</section>
<section class="uk-section-primary">
<section class="uk-container uk-padding-large">
<div class="uk-width-1-1">
<h1>Learn About Our Blog</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim unde neque magnam ipsam, assumenda delectus est minus voluptates, vitae ipsum fugiat porro ea. Repudiandae, odio dolores delectus voluptatum, maxime atque!</p>
</div>
</section>
</section>
<section class="uk-section-muted">
<section uk-grid>
<div class="uk-width-1-3@s">
<div class="uk-card uk-card-muted uk-card-body" uk-scrollspy="cls: uk-animation-slide-left; repeat: false">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque reiciendis, fugit maxime. Voluptatem est molestiae dolor tenetur aut rem assumenda provident, rerum voluptas! Nemo aut incidunt esse, eligendi veritatis perferendis.</p>
</div>
</div>
<div class="uk-width-1-3@s">
<div class="uk-card uk-card-muted uk-card-body" uk-scrollspy="cls: uk-animation-slide-left; repeat: false">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque reiciendis, fugit maxime. Voluptatem est molestiae dolor tenetur aut rem assumenda provident, rerum voluptas! Nemo aut incidunt esse, eligendi veritatis perferendis.</p>
</div>
</div>
<div class="uk-width-1-3@s">
<div class="uk-card uk-card-muted uk-card-body" uk-scrollspy="cls: uk-animation-slide-left; repeat: false">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque reiciendis, fugit maxime. Voluptatem est molestiae dolor tenetur aut rem assumenda provident, rerum voluptas! Nemo aut incidunt esse, eligendi veritatis perferendis.</p>
</div>
</div>
</section>
</section>
<article class="uk-article uk-section-primary">
<section class="uk-width-1-1 uk-padding-large">
<h1 class="uk-article-title">Blog Article</h1>
<p class="uk-article-meta">Written by <a href="#">Sam</a> Today. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, in odio debitis molestias hic. Magni, autem, minus. Deserunt vitae quas fugiat laboriosam reiciendis debitis beatae unde! Ducimus nobis ad voluptates. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus quis eum praesentium modi nam, necessitatibus assumenda, ipsa a omnis aspernatur aliquam iusto in quam pariatur perspiciatis possimus quidem. Rem, error?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, laboriosam ut ex placeat! Similique aliquid quisquam excepturi magnam ab, totam doloribus dignissimos porro tempora sunt explicabo, quia quas perferendis dolorem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus reprehenderit, quasi neque amet sint cum omnis iure quos harum atque tenetur quis, esse nihil repellat consequatur, eaque est impedit dolore?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, in odio debitis molestias hic. Magni, autem, minus. Deserunt vitae quas fugiat laboriosam reiciendis debitis beatae unde! Ducimus nobis ad voluptates. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus quis eum praesentium modi nam, necessitatibus assumenda, ipsa a omnis aspernatur aliquam iusto in quam pariatur perspiciatis possimus quidem. Rem, error?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, laboriosam ut ex placeat! Similique aliquid quisquam excepturi magnam ab, totam doloribus dignissimos porro tempora sunt explicabo, quia quas perferendis dolorem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus reprehenderit, quasi neque amet sint cum omnis iure quos harum atque tenetur quis, esse nihil repellat consequatur, eaque est impedit dolore?</p>
</section>
</article>
<section class="uk-section-secondary uk-padding-small">
<div class="uk-navbar-center">
<ul class="uk-navbar-nav">
<li>
<a href="#">
<span uk-icon="icon: github; ratio: 2"></span>
</a>
</li>
<li>
<a href="#">
<span uk-icon="icon: facebook; ratio: 2"></span>
</a>
</li>
<li>
<a href="#">
<span uk-icon="icon: twitter; ratio: 2"></span>
</a>
</li>
<li>
<a href="#">
<span uk-icon="icon: instagram; ratio: 2"></span>
</a>
</li>
<li>
<a href="#">
<span uk-icon="icon: google; ratio: 2"></span>
</a>
</li>
</ul>
</div>
</section>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script><script src='https://getuikit.com/assets/uikit/dist/js/uikit.js?nc=5319'></script><script src='https://getuikit.com/assets/uikit/dist/js/uikit-icons.js?nc=5319'></script>
</body></html>
