<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class='light'>
<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/pongstr/pen/ByqwOX?depth=everything&limit=all&order=popularity&page=22&q=markdown+&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
<style class="cp-pen-styles">@charset "UTF-8";
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.light hr {
border-top: 1px solid #eee;
border-bottom: 1px solid #fff;
}
.dark hr {
border-top: 1px solid #111;
border-bottom: 1px solid rgba(102, 102, 102, 0.45);
}
html,
body {
height: 100%;
}
html.dark,
body.dark {
background-color: #333;
}
html.light,
body.light {
background-color: #fff;
}
.dark .widget {
border-color: #222;
background-color: #383838;
}
.dark .widget .widget-head {
text-shadow: 0 0.5px 0 #000;
background-color: #222;
}
.dark .widget .widget-body-table {
background-color: #2b2b2b;
}
.dark .widget .widget-body-table span {
text-shadow: 0 1px 1px #383838;
color: #161616;
}
.light .widget {
border-color: #ddd;
}
.light .widget .widget-head {
text-shadow: 0 0.5 #fff;
background-color: #ddd;
}
.light .widget .widget-body-table {
background-color: #fff;
}
.light .widget .widget-body-table span {
color: #c8c8c8;
}
.light .widget-container {
border-right-color: #ddd;
}
.dark .widget-container {
border-right-color: #222;
}
.widget-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: flex-start;
align-items: flex-start;
width: 100%;
margin: 25px;
}
.widget {
-moz-transition: left 0.1s ease, top 0.1s ease;
-o-transition: left 0.1s ease, top 0.1s ease;
-webkit-transition: left 0.1s ease, top 0.1s ease;
transition: left 0.1s ease, top 0.1s ease;
}
.widget,
.placeholder {
-webkit-flex-grow: 0;
flex-grow: 0;
-webkit-flex-shrink: 1;
flex-shrink: 1;
-webkit-align-self: center;
align-self: center;
-webkit-flex-basis: 120px;
flex-basis: 120px;
position: relative;
height: 90px;
margin: 12px 8px;
padding-top: 12px;
border-width: 3px;
border-style: solid;
border-radius: 2px;
border-color: transparent;
}
.widget-head {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: block;
width: 100%;
height: 12px;
padding-left: 5px;
font-size: 14px;
line-height: 0.8;
letter-spacing: 1px;
color: orange;
cursor: move;
}
.widget-head:before, .widget-head:after {
content: "•";
}
.widget-head:before {
color: tomato;
}
.widget-head:after {
color: #00b300;
}
.widget-body-table {
position: relative;
display: table;
width: 100%;
height: 100%;
padding: 2px 8px;
}
.widget-body-table .framework {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
position: absolute;
bottom: 2px;
right: 2px;
width: 12px;
height: 12px;
opacity: 0.25;
}
.widget-body-content {
display: table-cell;
height: 100%;
text-align: center;
vertical-align: middle;
}
.widget-body-content span {
font-size: 40px;
}
.placeholder {
border: 1px solid orange;
background-color: rgba(255, 165, 0, 0.25);
}
.ui-sortable-helper {
-moz-transition: box-shadow 0.5s ease;
-o-transition: box-shadow 0.5s ease;
-webkit-transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;
-moz-box-shadow: 0 32px 32px -16px rgba(66, 66, 66, 0.65);
-webkit-box-shadow: 0 32px 32px -16px rgba(66, 66, 66, 0.65);
box-shadow: 0 32px 32px -16px rgba(66, 66, 66, 0.65);
}
</style></head><body>
<div class='widget-container' id='bootstrap'>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-social-twitter'></span>
<img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-social-github'></span>
<img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-social-instagram-outline'></span>
<img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-social-dribbble'></span>
<img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-social-pinterest-outline'></span>
<img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-social-dropbox'></span>
<img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-images'></span>
<img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-erlenmeyer-flask'></span>
<img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-bag'></span>
<img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-calendar'></span>
<img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-clock'></span>
<img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-funnel'></span>
<img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-connection-bars'></span>
<img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-pie-graph'></span>
<img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-close-circled'></span>
<img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-music-note'></span>
<img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-ios-cog'></span>
<img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-ios-location'></span>
<img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-social-html5-outline'></span>
<img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-social-css3-outline'></span>
<img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-social-javascript'></span>
<img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-social-markdown'></span>
<img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-social-angular-outline'></span>
<img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-social-android'></span>
<img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-ios-cloud'></span>
<img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'>
</div>
</div>
</div>
</div>
<hr>
<div class='widget-container' id='foundation'>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-social-twitter'></span>
<img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-social-github'></span>
<img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-social-instagram-outline'></span>
<img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-social-dribbble'></span>
<img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-social-pinterest-outline'></span>
<img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-social-dropbox'></span>
<img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-images'></span>
<img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-erlenmeyer-flask'></span>
<img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-bag'></span>
<img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-calendar'></span>
<img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-clock'></span>
<img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-funnel'></span>
<img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-connection-bars'></span>
<img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-pie-graph'></span>
<img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-close-circled'></span>
<img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-music-note'></span>
<img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-ios-cog'></span>
<img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-ios-location'></span>
<img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-social-html5-outline'></span>
<img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-social-css3-outline'></span>
<img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-social-javascript'></span>
<img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-social-markdown'></span>
<img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-social-angular-outline'></span>
<img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-social-android'></span>
<img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-head'>•</div>
<div class='widget-body-table'>
<div class='widget-body-content'>
<span class='ion-ios-cloud'></span>
<img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'>
</div>
</div>
</div>
</div>
<hr>
<div class='widget-container'>
</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://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
<script >(function() {
$('#bootstrap, #foundation').sortable({
placeholder: 'placeholder',
connectWith: '.widget-container',
handle: '.widget-head',
cursor: 'move'
});
}).call(this);
//# sourceURL=pen.js
</script>
</body></html>
