"layout"
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 lang='en' 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/m-lanser/pen/oLYzPm?limit=all&page=92&q=draggable" /> <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Coming+Soon); body { margin:0px; padding: 0px; font-family: 'Coming Soon', cursive; font-weight: 600; background: #F2F2F2; background-image: url("http://www.wzchutian.com/wp-content/uploads/h/h-engaging-coffee-table-wood-glass-top-joining-wood-table-top-table-top-wood-inlays-table-top-wood-ideas-wood-table-top-ironing-board-wood-table-top-is-sticky-wood-table-top-design-ideas-wood.jpg"); } * { transition: transform 500ms ease-in-out; } .letter { background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); margin:auto; margin-top: 70px !impoRTANT; max-width: 550px; min-height: 300px; padding: 24px; position: relative; width: 80%; } .letter:before, .letter:after { content: ""; height: 98%; position: absolute; width: 100%; z-index: -1; } .letter h1 { margin: 12px; } .letter ul { margin-top: -10px; } .letter li { line-height: 30px; } ul.tabs { display: block; margin:auto; background: rgba(255,255,255,0.79); padding:0px 50px; width:auto; box-shadow: 0px -8px 36px 9px rgba(0,0,0,0.75); z-index:-999; } .tabs li { display: inline-block; margin-top: 5px; } .tabs li a { color: #000; text-decoration: none; padding: 10px 10px; margin: 10px; } .tabs li.ui-tabs-active > a { top: 30px; padding-top: 47px; } .tabs li.ui-tabs-active { transform: rotate(-6deg) !important; } .tabs li:hover { transform: rotate(-5deg); } .right { float:right; } .stacked { background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.3); margin: 26px auto 0; max-width: 550px; min-height: 300px; padding: 24px; position: relative; width: 80%; z-index:999; } .stacked:before, .stacked:after { content: ""; height: 98%; position: absolute; width: 100%; z-index: -1; } .stacked:before { background: #fafafa; box-shadow: 0 0 8px rgba(0,0,0,0.2); left: -5px; top: 4px; transform: rotate(-2.5deg); } .stacked:after { background: #f6f6f6; box-shadow: 0 0 3px rgba(0,0,0,0.2); right: -3px; top: 1px; transform: rotate(1.4deg); } strike { position:relative; text-decoration:none; } strike::after { content:""; position:absolute; top:78%; left:0; width:100%; height:2px; background:black; transform:rotate(-3deg); } ul { margin-left: 0; padding-left: 0; list-style-type: none; } .letter ul li { position: relative; margin-left: 1em; } .letter ul li:before { position: absolute; left: -1em; content: "-"; }</style></head><body> <div id="tabs"> <ul class="tabs"> <li><a href="#tabs-1" class="stacked">Software</a></li> <li><a href="#tabs-2" class="stacked">Virtual machines</a></li> <li><a href="#tabs-3" class="stacked">Computers Specs</a></li> <li class="right"><a href="#tabs-4" class="stacked">About this pen</a></li> </ul> <div class="letter stacked" id="tabs-1"> <h1>Software I use:</h1> <ul> <li>Visual Studio 2015 Ultimate</li> <li>Visual Studio Code</li> <li>SQL Management Studio 2016</li> <li>Syncfusion Metro Studio 5</li> <li>Sublime Text 3</li> <li>Microsoft Office 365 Pro Plus</li> <li>Adobe Photoshop CC 2015</li> <li>Adobe Premiere Pro CC 2015</li> <li>Adobe After Effects CC 2015</li> <li>Adobe Illustrator CC 2015</li> <li>Telerik Fiddler4</li> <li>Oracle VM VirtualBox</li> <li>Spotify</li> <li>Bitdefender Antivirus 2016</li> <li>Google Chrome</li> <li>Citrix Receiver</li> </ul> </div> <div class="letter stacked" id="tabs-2"> <h1>Virtual machines I run:</h1> <ul> <li>Windows 8.1</li> <li>Windows 10</li> <li>Mac OSX El Capitan</li> <li>Ubuntu</li> <li>Arch Linux</li> <li>Android 5.1</li> </ul> </div> <div class="letter stacked" id="tabs-3"> <h1>My Computer Specifications</h1> <ul> <li><strike>CPU</strike> i7 6700K (overclocked)</li> <li><strike>Motherboard</strike> Asus Z170 Pro Gaming</li> <li><strike>RAM</strike> Corsair Vengeance DDR4-3200 (16GB)</li> <li><strike>GPU</strike> Asus GeForce GTX 1070</li> <li><strike>SDD</strike> Samsung 850 EVO 250GB</li> <li><strike>HDD</strike> Seagate Barracuda 1TB</li> </ul> </div> <div class="letter stacked" id="tabs-4"> <h1>About this pen</h1> <ul> <p>I bought a new PC and I'm using these lists to remember what it set up when I get it.</p> </ul> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script> <script >$(function() { $("#tabs").tabs(); }); $(function() { $( ".letter" ).draggable(); }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Rotating CSS Card
social network layout - bootstrap 4
Zigzag Timeline Layout
Multi Select Tiled Layout

Questions / Comments: