"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/cusx/pen/rOXWWV?limit=all&page=20&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.24.0/css/uikit.min.css'> <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800); body { font-family: "Open Sans", sans-serif; } .left { background-color: #2F323A; background-image: url(http://www.transparenttextures.com/patterns/axiom-pattern.png); text-align: center; color: white; } .right { background-color: whitesmoke; min-height: 50vh; } .left { height: 50vh; } .left h1 { font-size: 3em; color: #fff; } .left .button { background-color: #fff; border: 1px solid #fff; color: black; font-weight: 600; text-transform: uppercase; padding: 1em 2em; margin-top: 10px; } /* CARD */ .card { display: block; min-height: 465px; width: 280px; margin: 0 auto; margin-top: 30px; background-color: #fff; border-radius: 5px; -webkit-transition: box-shadow 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; transition: box-shadow 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; } .card:hover { box-shadow: 0 0 46px rgba(0, 0, 0, 0.33); } .card-bg { background-color: #1abc9c; background-image: url(http://www.transparenttextures.com/patterns/food.png); border-radius: 5px 5px 0 0; height: 200px; overflow: hidden; position: relative; } .card-bg:hover { cursor: pointer; } .card-content { padding: 1.875rem; } .card-title { cursor: pointer; color: #888; font-weight: bold; font-size: 1.2em; } .card-info { list-style: none; margin-bottom: 0; padding: 0; } .card-info li { position: relative; padding-left: 10px; color: #888; line-height: 1.6; font-size: 0.8em; margin-bottom: 0.4375rem; -webkit-transition: color 250ms ease 0s; transition: color 250ms ease 0s; } .card-info li:hover { color: #1285e0; cursor: pointer; } .card-info li::before { cursor: pointer; border: 1px solid #c5c5c5; border-radius: 50%; content: ""; display: inline-block; height: 6px; width: 6px; position: absolute; top: 7px; left: -5px; -webkit-transition: border-color 250ms ease 0s; transition: border-color 250ms ease 0s; } .card-info li:hover::before { border-color: #1285e0; } @media (min-width: 768px) and (max-width: 960px) { .left-card { float: right; } .right-card { float: left; } } @media (min-width: 960px) { .left, .right { height: 100vh; } } </style></head><body> <!-- UIKIT --> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <div class="uk-grid"> <div class="uk-width-1-1 uk-vertical-align left uk-width-large-1-2"> <div class="uk-vertical-align-middle"> <h1>Latest News</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem accusantium a, quibusdam maiores autem atque obcaecati, commodi. Quidem sint esse quaerat corrupti ipsa blanditiis, facere voluptates excepturi, voluptatem tenetur tempora. </p> <button class="button">Try Now ! </button> </div> </div> <div class="uk-width-1-1 right uk-width-large-1-2"> <div class="uk-grid uk-grid-medium"> <div class="uk-width-1-1 uk-width-medium-1-2 uk-width-large-1-1"> <div class="card left-card"> <div class="card-bg"></div> <div class="card-content"> <h3 class="card-title">Happy Stuff Two</h3> <ul class="card-info"> <li>One Stuff</li> <li>Two Stuff</li> <li>Three Stuff</li> </ul> </div> </div> </div> <div class="uk-width-1-1 uk-width-medium-1-2 uk-width-large-1-1"> <div class="card right-card"> <div class="card-bg"></div> <div class="card-content"> <h3 class="card-title">Happy Stuff</h3> <ul class="card-info"> <li>One Stuff</li> <li>Two Stuff</li> <li>Three Stuff</li> </ul> </div> </div> </div> </div> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >/** TODO: Start from the most basic form, eg: Mobile layout first, then apply different responsive grid to response to different view port, check the dropbox site to see more **/ //# sourceURL=pen.js </script> </body></html>

Related: See More

Light Bootstrap Dashboard React

Questions / Comments: