"editor"
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/Reklino/pen/xbaKJJ?depth=everything&limit=all&order=popularity&page=3&q=code+editor&show_forks=false" /> <link rel="stylesheet" href="https://cdn.rawgit.com/Reklino/strings/master/strings.css"> <script src="//use.typekit.net/cua2obb.js"></script> <script>try{Typekit.load();}catch(e){}</script> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">.col-1 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 8.33333%; float: left; padding-left: 2.08333%; padding-right: 2.08333%; } .col-2 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 16.66667%; float: left; padding-left: 2.08333%; padding-right: 2.08333%; } .col-3 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 25%; float: left; padding-left: 2.08333%; padding-right: 2.08333%; } .col-4 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 33.33333%; float: left; padding-left: 2.08333%; padding-right: 2.08333%; } .col-5 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 41.66667%; float: left; padding-left: 2.08333%; padding-right: 2.08333%; } .col-6 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 50%; float: left; padding-left: 2.08333%; padding-right: 2.08333%; } .col-7 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 58.33333%; float: left; padding-left: 2.08333%; padding-right: 2.08333%; } .col-8 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 66.66667%; float: left; padding-left: 2.08333%; padding-right: 2.08333%; } .col-9 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 75%; float: left; padding-left: 2.08333%; padding-right: 2.08333%; } .col-10 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 83.33333%; float: left; padding-left: 2.08333%; padding-right: 2.08333%; } .col-11 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 91.66667%; float: left; padding-left: 2.08333%; padding-right: 2.08333%; } .col-12 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; float: left; padding-left: 2.08333%; padding-right: 2.08333%; } .row { margin-bottom: 24px; overflow: hidden; *zoom: 1; } .container { max-width: 100%; margin-left: auto; margin-right: auto; width: 600px; margin: 0 auto; } .container:after { content: " "; display: block; clear: both; } body { font-family: 'proxima-nova', sans-serif; } p { line-height: 24px; } h1 { font-size: 72px; } h2 { font-size: 48px; } h3 { font-size: 36px; } h4 { font-size: 24px; } h5 { font-size: 18px; } h6 { font-size: 14px; } h1, h2, h3, h4, h5, h6 { line-height: 1em; font-weight: 700; } ul { margin: 0 0 0 1em; padding: 0; } li { line-height: 24px; } .s { font-size: 20px; line-height: 24px; } .align-left { text-align: left; } .align-right { text-align: right; } .align-center { text-align: center; } .pull-right { float: right; } .pull-left { float: left; } .remove-top { margin-top: 0; } .remove-bottom { margin-bottom: 0; } body { color: #1B1F2B; background: #FFFFFF; border-color: #1B1F2B; } .dark { background: #2f364a; color: #e6e6e6; border-color: #e6e6e6; } nav { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: fixed; bottom: 0; width: 100%; padding: 0 2em; text-align: center; line-height: 72px; font-weight: 400; font-size: 14px; } nav .title { padding: 0 1.5em; float: left; } nav .name { position: absolute; width: 200px; left: 0; right: 0; margin: 0 auto; } nav #light-switch { cursor: pointer; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; float: left; line-height: 72px; } nav .specimen { padding: 0 1.5em; float: right; } section { padding: 48px 0; } .space-block { width: 100%; height: 72px; border: 1px solid; margin-bottom: 24px; } .icon-tab { position: relative; text-align: center; cursor: pointer; } .icon-tab .s { position: relative; z-index: 1; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; font-size: 30px; line-height: 70px; margin: 0 auto; color: #8d98b8; } .icon-tab:before { position: absolute; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; content: ''; display: block; width: 0; height: 0; margin: 0 auto; top: 35px; left: 0; right: 0; background: #f2f2f2; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; } .icon-tab .label { -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; color: #b3b3b3; font-size: 14px; font-weight: 400; margin: 0 0 1em; } .icon-tab:hover:before { top: 7px; width: 56px; height: 56px; line-height: 56px; } .icon-tab:hover .label { color: #1B1F2B; margin: 0.5em 0; } .icon-tab.active .s { color: white; } .icon-tab.active:before { top: 0; width: 70px; height: 70px; line-height: 70px; background: #56cd88; } .icon-tab.active .label { color: #1B1F2B; margin: 0.75em 0; } .dark .icon-tab .s { color: #bcc3d5; } .dark .icon-tab:before { background: #39415a; } .dark .icon-tab .label { color: #566389; } .dark .icon-tab:hover .label { color: #FFFFFF; } .dark .icon-tab.active .s { color: white; } .dark .icon-tab.active:before { background: #56cd88; } .dark .icon-tab.active .label { color: #FFFFFF; } .col-3:nth-child(1) .icon-tab.active:before { background: #4ddfdc; } .col-3:nth-child(2) .icon-tab.active:before { background: #50ecbd; } .col-3:nth-child(3) .icon-tab.active:before { background: #56cd88; } .col-3:nth-child(4) .icon-tab.active:before { background: #4dd85d; } </style></head><body> <body class='dark'> <nav> <div class='title'>Enchirideon</div> <div class='s s-sun' id='light-switch'></div> <div class='specimen'>1.0.3</div> <div class='name'>Icon Tabs</div> </nav> <section> <div class='container align-center'> <div class='col-3'> <div class='icon-tab'> <div class='s s-layout'></div> <div class='label'>Modules</div> </div> </div> <div class='col-3'> <div class='icon-tab'> <div class='s s-code'></div> <div class='label'>Code Editor</div> </div> </div> <div class='col-3'> <div class='icon-tab'> <div class='s s-image'></div> <div class='label'>Assets</div> </div> </div> <div class='col-3'> <div class='icon-tab'> <div class='s s-cog'></div> <div class='label'>Settings</div> </div> </div> </div> </section> </body> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdn.rawgit.com/desandro/classie/master/classie.js'></script><script src='https://codepen.io/Reklino/pen/RNYNaZ.js'></script> <script >document.addEventListener("DOMContentLoaded", function(event) { var iconTabs = document.getElementsByClassName('icon-tab'), iconTabActive; for(var i=0;i<iconTabs.length;i++) {if (window.CP.shouldStopExecution(1)){break;} (function(iCopy){ iconTabs[i].addEventListener('click', function(){ if(iconTabActive) { classie.toggle(iconTabActive, 'active'); } classie.toggle(this, 'active'); iconTabActive = this; }); setTimeout(function(){ iconTabs[iCopy].click(); }, iCopy*350); }(i)); } window.CP.exitedLoop(1); }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Vue Now UI Kit
HTML Editor WYSIWYG Interface
Text editor toolbar

Questions / Comments: