"mac 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/eduardoboucas/pen/EjKdWp?limit=all&page=5&q=mac" /> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Old+Standard+TT'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Source+Code+Pro:400,500'> <style class="cp-pen-styles">.sublime { position: relative; width: 80%; margin: 25px auto; padding: 2%; list-style: none; border-top: 25px solid #b4b4b4; border-radius: 10px; background: #262728; color: #f1f1f1; font-family: 'Source Code Pro'; font-weight: 200; font-size: 1.1em; /* Colors */ } .sublime li { min-height: 25px; line-height: 25px; } .sublime .buttons { min-height: 0; position: absolute; top: -18px; border-radius: 100%; width: 13px; height: 13px; background-color: #ff5d5b; border: 1px solid #e64344; } .sublime .buttons:before, .sublime .buttons:after { position: absolute; content: ""; width: 13px; height: 13px; border-radius: 100%; top: -1px; } .sublime .buttons:before { left: 20px; border: 1px solid #e3a041; background-color: #ffbc4c; } .sublime .buttons:after { left: 40px; border: 1px solid #13ad46; background-color: #00c956; } .sublime .tab { margin-left: 2%; list-style: none; } .sublime .blue { color: #66d9ef; } .sublime .purple { color: #8a7bff; } .sublime .red { color: #e92772; } .sublime .green { color: #a6e22d; } .sublime .orange { color: #fd9720; } .sublime .yellow { color: #e6db74; } .sublime .gray { color: #8f908a; } .sublime .cursor:before { opacity: 0; content: "|"; color: #f1f1f1; -webkit-animation: blink 0.8s infinite; animation: blink 0.8s infinite; } @-webkit-keyframes blink { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes blink { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } /* Demo */ .demo { font-size: 1.2em; text-align: center; font-family: 'Old Standard TT', serif; } a { color: inherit; } </style></head><body> <header class="demo"> <h1>Sublime in CSS</h1> <p>Look ma, it even has a blinking cursor!</p> </header> <ul class="sublime"> <li class="buttons"></li> <li><span class="orange">$breakpoints</span>: (phone: <span class="blue">320px</span>, tablet: <span class="blue">768px</span>, desktop: <span class="blue">1024px</span>);</li> <li></li> <li><span class="gray">/* Inclusive and exclusive operators for a finer control over the intervals */</span></li> <li><span class="red">@include media</span>(<span class="yellow">">phone"</span>,<span class="yellow"> "<=tablet"</span>) {</li> <ul class="tab"> <li><span class="blue">width:</span> <span class="purple">50%</span>;<span class="cursor"></span></li> </ul> <li>}</li> </ul> <footer class="demo"> <p><small>Originally used in <a href="http://include-media.com">http://include-media.com</a>.</small></p> </footer> </body></html>

Related: See More

Rubik Presentation Page
HTML Editor WYSIWYG Interface
Text editor toolbar

Questions / Comments: