"layout uikit"
Bootstrap 3.0.0 Snippet by evarevirus

<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/Iulius90/pen/KzQmbm?limit=all&page=19&q=uikit" /> <link rel='stylesheet prefetch' href='//cdnjs.cloudflare.com/ajax/libs/uikit/2.26.2/css/uikit.almost-flat.min.css'> <style class="cp-pen-styles">.uk-panel-box { overflow: hidden; text-align: center; } .uk-navbar-attached { z-index: 1000; } .uk-container { margin: 0 auto; } </style></head><body> <nav class="uk-navbar" data-uk-sticky="{clsactive: 'uk-navbar-attached' , animation: 'uk-animation-slide-top', top: -100 }"><a class="uk-navbar-brand" href="#">LearnFwd</a> <div class="uk-navbar-flip"><a class="uk-navbar-toggle uk-hidden-large" href="#offcanvas" data-uk-offcanvas="data-uk-offcanvas"></a> <ul class="uk-navbar-nav uk-visible-large"> <li class="uk-active"><a href="#home">Home </a></li> <li><a href="#solutions" data-uk-smooth-scroll="data-uk-smooth-scroll">Solutions</a></li> <li><a href="#products" data-uk-smooth-scroll="data-uk-smooth-scroll">Products</a></li> <li><a href="#contact" data-uk-smooth-scroll="data-uk-smooth-scroll">Contact </a></li> </ul> </div> </nav> <div class="uk-offcanvas" id="offcanvas"> <div class="uk-offcanvas-bar"> <ul class="uk-nav uk-nav-offcanvas"> <li class="uk-active"><a href="#home">Home </a></li> <li><a href="#solutions">Solutions</a></li> <li><a href="#products">Products</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> <h1 class="uk-text-center" id="solutions">Solutions</h1> <div class="uk-grid uk-grid-small uk-grid-match uk-container" data-uk-grid-match="{target:'.uk-panel'}"> <div class="uk-width-medium-1-3"> <div class="uk-container uk-container-center uk-margin-top"> <div class="uk-panel uk-panel-box uk-panel-box-secondary"> <div class="uk-panel-teaser"><br/><img src="https://learnfwd.com/img/book.png" alt="publishers"/></div> <h3 class="uk-panel-title"> <i class="uk-icon-book"> </i> Publishers</h3> Upgrading your textbooks or thinking to start fresh? Our technology powers state-of-the-art textbooks in ways you didn’t think possible.<br/> <button class="uk-button uk-button-large uk-button-primary uk-margin-top" type="button">See what we can do</button> </div> </div> </div> <div class="uk-width-medium-1-3"> <div class="uk-container uk-container-center uk-margin-top"> <div class="uk-panel uk-panel-box uk-panel-box-secondary"> <div class="uk-panel-teaser"><br/><img src="https://learnfwd.com/img/teacher.png" alt="schools & teachers"/></div> <h3 class="uk-panel-title"> <i class="uk-icon-users"> </i> Schools & Teachers</h3> Tired of spending fortunes on useless software? We are building a platform for lesson planning & delivery. <br/>Sign up your school for early access.<br/> <button class="uk-button uk-button-large uk-button-primary uk-margin-top" type="button">About the platform</button> </div> </div> </div> <div class="uk-width-medium-1-3"> <div class="uk-container uk-container-center uk-margin-top"> <div class="uk-panel uk-panel-box uk-panel-box-secondary"> <div class="uk-panel-teaser"><br/><img src="https://learnfwd.com/img/abacus.png" alt="corporate training"/></div> <h3 class="uk-panel-title"> <i class="uk-icon-users"> </i> Corporate training</h3> There’s life beyond spreadsheets, docs and powerpoint. Power-up your training capacities with exciting and engaging tech.<br/> <button class="uk-button uk-button-large uk-button-primary uk-margin-top" type="button">Find out more</button> </div> </div> </div> </div> <div class="uk-container uk-margin-top"> <p>Lorem ipsum dolor sit amet, virtute gloriatur no eum, et mea eros labitur. Sed homero libris utroque no, est impetus quaeque pertinax ea. Qui regione persius epicurei ne, illum summo vix ad. Quo summo cetero pertinax at. Ut sit veri numquam pertinacia. Sit cu possim numquam.<br/><br/>Id nonumy putent reformidans sit. Ne nam augue libris disputando, cum nusquam erroribus constituto ea. Pri detracto indoctum at. Vim prima graeco luptatum cu, platonem deseruisse ex pri. Eos nusquam perpetua dissentias ut, qui et graeci invenire oportere, et tacimates indoctum gubergren eos.<br/><br/>Nam soluta dissentiet eu. Vim no falli mazim, rebum iracundia ullamcorper ex cum. Eum ea causae luptatum adolescens, eam no justo facer, mea vero ullum reformidans no. Eu quo audire sensibus, mel te porro habemus recusabo. Usu movet forensibus ad, altera mucius consetetur ea sed. Esse offendit mediocrem vix at, decore partem principes ea ius.<br/><br/>Zril aperiri docendi pri ea. Ius ea tale essent facilis. Illud phaedrum cum ex, quem appetere in per. Posse debet vituperatoribus vix cu, ea utinam officiis splendide sit. Sea viderer voluptua et, cu duo porro neglegentur necessitatibus, eu qui veritus consectetuer. Has omnes temporibus te, ius ea eius mundi scriptorem.<br/><br/>Ancillae consequuntur ei ius. Eos ei falli ridens accusata. Eius consulatu intellegat pri eu, nibh luptatum te sit, novum lucilius his ut. An qui tota nemore moderatius, rebum scripta percipitur eos te. Liber quaeque pri ut.</p> </div><br/><br/> <h1 class="uk-text-center" id="products">Products</h1> <div class="uk-grid uk-grid-small uk-grid-match uk-container" data-uk-grid-match="{target:'.uk-panel'}"> <div class="uk-width-medium-1-2"> <div class="uk-container uk-container-center uk-margin-top"> <div class="uk-panel uk-panel-box uk-panel-box-secondary"> <div class="uk-panel-teaser"><br/><img src="https://learnfwd.com/img/publishers-fluid-image.png" alt="publishers"/></div> <h3 class="uk-panel-title"> <i class="uk-icon-book"> </i> Author</h3> Professional Authoring Tool for state-of-the-art digital textbooks. </div> </div> </div> <div class="uk-width-medium-1-2"> <div class="uk-container uk-container-center uk-margin-top"> <div class="uk-panel uk-panel-box uk-panel-box-secondary"> <div class="uk-panel-teaser"><br/><img src="https://learnfwd.com/img/schools-responsive.png" alt="schools & teachers"/></div> <h3 class="uk-panel-title"> <i class="uk-icon-users"> </i> Platform</h3> Digital lesson planning & delivery tool. With a twist. </div> </div> </div> </div> <div class="uk-container uk-margin-top"> <p>Lorem ipsum dolor sit amet, virtute gloriatur no eum, et mea eros labitur. Sed homero libris utroque no, est impetus quaeque pertinax ea. Qui regione persius epicurei ne, illum summo vix ad. Quo summo cetero pertinax at. Ut sit veri numquam pertinacia. Sit cu possim numquam.<br/><br/>Id nonumy putent reformidans sit. Ne nam augue libris disputando, cum nusquam erroribus constituto ea. Pri detracto indoctum at. Vim prima graeco luptatum cu, platonem deseruisse ex pri. Eos nusquam perpetua dissentias ut, qui et graeci invenire oportere, et tacimates indoctum gubergren eos.<br/><br/>Nam soluta dissentiet eu. Vim no falli mazim, rebum iracundia ullamcorper ex cum. Eum ea causae luptatum adolescens, eam no justo facer, mea vero ullum reformidans no. Eu quo audire sensibus, mel te porro habemus recusabo. Usu movet forensibus ad, altera mucius consetetur ea sed. Esse offendit mediocrem vix at, decore partem principes ea ius.<br/><br/>Zril aperiri docendi pri ea. Ius ea tale essent facilis. Illud phaedrum cum ex, quem appetere in per. Posse debet vituperatoribus vix cu, ea utinam officiis splendide sit. Sea viderer voluptua et, cu duo porro neglegentur necessitatibus, eu qui veritus consectetuer. Has omnes temporibus te, ius ea eius mundi scriptorem.<br/><br/>Ancillae consequuntur ei ius. Eos ei falli ridens accusata. Eius consulatu intellegat pri eu, nibh luptatum te sit, novum lucilius his ut. An qui tota nemore moderatius, rebum scripta percipitur eos te. Liber quaeque pri ut.</p> </div> <div class="uk-block uk-block-primary uk-contrast uk-margin-top uk-block-large" id="contact"> <div class="uk-container"> <h1>Contact</h1> <div class="uk-grid uk-grid-match" data-uk-grid-margin="data-uk-grid-margin"> <div class="uk-width-medium-1-3 uk-row-first"> <div class="uk-panel"> <h3>London</h3> <p>Lorem ipsum dolor sit amet, quo quodsi debitis eu. Ex mei voluptua dissentiunt, cu mel eros doming. Ut mea vero partiendo.</p> </div> </div> <div class="uk-width-medium-1-3"> <div class="uk-panel"> <h3>Bucharest</h3> <p>Lorem ipsum dolor sit amet, quo quodsi debitis eu. Ex mei voluptua dissentiunt, cu mel eros doming. Ut mea vero partiendo.</p> </div> </div> <div class="uk-width-medium-1-3"> <div class="uk-panel"> <h3>Iasi</h3> <p>Lorem ipsum dolor sit amet, quo quodsi debitis eu. Ex mei voluptua dissentiunt, cu mel eros doming. Ut mea vero partiendo.</p> </div> </div> </div> </div> </div> <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/uikit/2.26.2/js/uikit.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/uikit/2.26.2/js/components/sticky.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/uikit/2.26.2/js/core/offcanvas.min.js'></script> </body></html>

Related: See More


Questions / Comments: