"slide uikit"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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/zslabs/pen/NGxEGK?limit=all&page=17&q=uikit" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.22.0/css/uikit.almost-flat.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.1/flickity.min.css'> <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Open+Sans); html { font-family: 'Open Sans', 'sans-serif'; font-size: 16px; line-height: 1.5; background: #f0f1eb; } h1, h2, h3, h4, h5 { font-family: 'Open Sans', 'sans-serif'; } .pres-cell { width: 100%; height: calc(100vh - 100px); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .pres-inner { width: 800px; padding: 0 15px; } .pres-justify-content { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .pres-heart { font-size: 60px; margin-left: 30px; margin-right: 30px; -webkit-animation: pulse 1s ease-in-out infinite; animation: pulse 1s ease-in-out infinite; } @-webkit-keyframes pulse { 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } } @keyframes pulse { 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } } .codepen-logo { width: 300px; } .codepen-inline { width: 200px; } .boomtown-logo { width: 300px; } .boomtown-logo--small { width: 150px; } .frontend-logo { height: 80px; } .pres-footer { position: absolute; left: 15px; right: 15px; bottom: -85px; } .pres-footer__img { border-radius: 50%; width: 60px; height: 60px; } </style></head><body> <div class="pres-container"> <div class="pres-cell"> <div class="pres-inner"> <div class="uk-grid uk-flex-middle"> <div class="uk-width-1-2"> <img class="codepen-logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/6813/codepen-logo.svg" alt="" /> </div> <div class="uk-width-1-2 uk-text-right"> <img class="boomtown-logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/6813/boomtown.png" alt="" /> </div> </div> <div class="uk-margin-large-top uk-text-center"> <h1>CodePen Meetup</h1> <h3 class="uk-text-muted">September 17th, 2015</h3> </div> </div> </div> <div class="pres-cell"> <div class="pres-inner"> <h1 class="uk-text-center">What Is <img class="codepen-inline" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/6813/codepen-logo.svg" alt="" /> ?</h1> <p class="uk-text-center">CodePen is a playground for the front end side of the web. It's all about inspiration, education, and sharing.</p> <h3 class="uk-text-center">What Can You Do on CodePen?</h3> <ul class="uk-grid uk-grid-width-1-2 uk-margin-top uk-text-center uk-text-large" data-uk-margin> <li> <div class="uk-panel uk-panel-box uk-panel-box-secondary">Collab Programming</div> </li> <li> <div class="uk-panel uk-panel-box uk-panel-box-secondary">Quick Mockups</div> </li> <li> <div class="uk-panel uk-panel-box uk-panel-box-secondary">Reduced Test-Cases</div> </li> <li> <div class="uk-panel uk-panel-box uk-panel-box-secondary">Blogging</div> </li> <li> <div class="uk-panel uk-panel-box uk-panel-box-secondary">Portfolios</div> </li> <li> <div class="uk-panel uk-panel-box uk-panel-box-secondary">Education</div> </li> <li> <div class="uk-panel uk-panel-box uk-panel-box-secondary">User Testing</div> </li> <li> <div class="uk-panel uk-panel-box uk-panel-box-secondary">Inspiration</div> </li> </ul> <div class="uk-margin-top uk-width-1-3 uk-container-center uk-text-center"> <div class="uk-text-large uk-panel uk-panel-box uk-panel-box-secondary">Presentations<br><div class="uk-text-small">Like this one</div></div> </div> </div> </div> <div class="pres-cell"> <div class="pres-inner"> <ul class="uk-grid uk-grid-width-1-4 uk-text-center"> <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/6813/consumer-website.png" alt="" /></li> <li> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/6813/lead-generation.png" alt="" /></li> <li> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/6813/lead-generation.png" alt="" /></li> <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/6813/success-management.png" alt="" /></li> </ul> <h1 class="uk-text-center">What Is <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/6813/boomtown.png" alt="" class="boomtown-logo--small" /> ?</h1> <ul class="uk-grid uk-grid-width-1-2 uk-margin-top uk-text-center uk-text-large uk-grid-match" data-uk-margin> <li> <div class="uk-panel uk-panel-box uk-panel-box-secondary">Lead Generation & Marketing Platform</div> </li> <li> <div class="uk-panel uk-panel-box uk-panel-box-secondary">Two Entities:<br>Consumer website / CRM</div> </li> <li> <div class="uk-panel uk-panel-box uk-panel-box-secondary">190+ Employees</div> </li> <li> <div class="uk-panel uk-panel-box uk-panel-box-secondary">1,500+ Clients Nationwide + Canada</div> </li> </ul> <div class="uk-width-1-3 uk-container-center uk-margin-top uk-text-center uk-text-large"> <div class="uk-panel uk-panel-box uk-panel-box-secondary">Serving about 50 million users each month</div> </div> </div> </div> <div class="pres-cell"> <div class="pres-inner"> <ul class="uk-grid uk-grid-width-1-4 uk-text-center"> <li> <img class="frontend-logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/6813/less-logo.png" alt="" /></li> <li><img class="frontend-logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/6813/uikit.png" alt="" /></li> <li> <img class="frontend-logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/6813/backbone.png" alt="" /></li> <li><img class="frontend-logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/6813/gulp.png" alt="" /></li> </ul> <h1 class="uk-text-center">Our Frontend Toolset</h1> <ul class="uk-grid uk-grid-width-1-2 uk-margin-top uk-text-center uk-text-large uk-grid-match" data-uk-margin> <li> <div class="uk-panel uk-panel-box uk-panel-box-secondary">UIkit<div class="uk-text-muted">CSS/JS Framework</div></div> </li> <li> <div class="uk-panel uk-panel-box uk-panel-box-secondary">Less<div class="uk-text-muted">CSS Preprocessor</div></div> </li> <li> <div class="uk-panel uk-panel-box uk-panel-box-secondary">GulpJS<div class="uk-text-muted">Build system</div></div> </li> <li> <div class="uk-panel uk-panel-box uk-panel-box-secondary">jQuery</div> </li> <li> <div class="uk-panel uk-panel-box uk-panel-box-secondary">Backbone</div> </li> <li> <div class="uk-panel uk-panel-box uk-panel-box-secondary">React</div> </li> <li> <div class="uk-panel uk-panel-box uk-panel-box-secondary">Polyfill.io<div class="uk-text-muted">Automatic Polyfills</div></div> </li> <li> <div class="uk-panel uk-panel-box uk-panel-box-secondary">SVGs <div class="uk-text-muted">Ermahgerd</div></div> </li> </ul> </div> </div> <div class="pres-cell"> <div class="pres-inner"> <div class="uk-text-center uk-margin-large-bottom"> <div class="uk-flex uk-flex-middle pres-justify-content"> <div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/6813/boomtown.png" alt="" class="boomtown-logo" /></div> <div><i class="uk-icon-heart uk-text-danger pres-heart"></i></div> <div> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/6813/codepen-logo.svg" alt="" class="codepen-logo" /></div> </div> </div> <h1 class="uk-text-center">How We Use CodePen at BoomTown</h1> <ul class="uk-grid uk-grid-width-1-2 uk-margin-top uk-text-center uk-text-large uk-grid-match" data-uk-margin> <li> <div class="uk-panel uk-panel-box uk-panel-box-secondary"><a href="https://codepen.io/zslabs/pen/zvvJXx">Element Queries</a></div> </li> <li> <div class="uk-panel uk-panel-box uk-panel-box-secondary"><a href="https://codepen.io/zslabs/pen/eNegqY">Floating Labels</a></div> </li> <li> <div class="uk-panel uk-panel-box uk-panel-box-secondary"><a href="https://codepen.io/zslabs/pen/meVWLR">SVG Background Fills</a></div> </li> <li> <div class="uk-panel uk-panel-box uk-panel-box-secondary">Loading Indicators<br><a href="https://codepen.io/zslabs/pen/avzYZX">SVG</a> <a href="https://codepen.io/zslabs/pen/WQNqMz">CSS</a> <a href="https://codepen.io/zslabs/pen/WQbzaz">Pseudo Element</a></div> </li> <li> <div class="uk-panel uk-panel-box uk-panel-box-secondary"><a href="https://codepen.io/zslabs/pen/vEedob">Browser Debugging</a></div> </li> <li> <div class="uk-panel uk-panel-box uk-panel-box-secondary"><a href="https://codepen.io/zslabs/pen/NGxEGK/">This Presentation</a></div> </li> </ul> </div> </div> <div class="pres-cell"> <div class="pres-inner"> <h1 class="uk-text-center uk-margin-large-bottom">Questions?</h1> <h2 class="uk-text-center">Do things like Gulp, React, Ping Pong and Beer interest you?!</h2> <h2 class="uk-text-center">We're Hiring! <a href="http://boomtownroi.com/careers">boomtownroi.com/careers</a></h2> </div> </div> <footer class="pres-footer"> <div class="uk-grid uk-flex-middle"> <div class="uk-width-1-2"> <div class="uk-flex uk-flex-middle"> <div class="uk-margin-small-right"> <img class="pres-footer__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/6813/me-squared.jpg" alt="" /> </div> <div> <h4 class="uk-margin-remove">Zach Schnackel</h4> <a href="https://twitter.com/zslabs"><i class="uk-icon-twitter" style="color:#55acee"></i> @zslabs</a> </div> </div> </div> <div class="uk-width-1-2 uk-text-right"> <a href="http://boomtownroi.com"><img class="boomtown-logo--small" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/6813/boomtown.png" alt="" /></a> </div> </div> </footer> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.1/flickity.pkgd.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.22.0/js/uikit.min.js'></script> <script >'use strict'; $('.pres-container').flickity({ cellSelector: '.pres-cell', pageDots: false }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Paper Kit
Mega menu slide down on hover with carousel
Slide dropdown navigation
Shoji Layout: Slide-in Side Panels for XS Viewports

Questions / Comments: