Sublime Editor

<section class="container">

  <h1>The Sublime Editor basic window in CSS/HTML/JS</h1>

  <h2>You can maximise it too with the buttons, it's also responsive</h2>

  <div class="sublime">

​

    <header class="sublime__title">Sublimey Text</header>

​

    <ul class="sublime-tabs">

      <li class="sublime-tabs__tab">

        <a href="#_github/index" class="sublime-tabs__link" data-type="html" data-project="index">index.html</a>

      </li>

      <li class="sublime-tabs__tab">

        <a href="#_github/mainjs" class="sublime-tabs__link" data-type="js" data-project="mainjs">main.js</a>

      </li>

      <li class="sublime-tabs__tab">

        <a href="#_github/maincss" class="sublime-tabs__link" data-type="css" data-project="maincss">main.css</a>

      </li>

      <li class="sublime-tabs__tab sublime-tabs__tab--soon">

        <a href="#" class="sublime-tabs__link" data-type="canvas" data-project="">sublime.css</a>

      </li>

    </ul>

​

    <button class="sublime__button sublime__button--full js-sublime-maximise" tabindex="-1">go fullscreen</button>

    <button class="sublime__button sublime__button--maxi js-sublime-toggle" tabindex="-1">maximise</button>

    <button class="sublime__button sublime__button--exit js-sublime-minimise" tabindex="-1">exit</button>

​

    <div class="sublime-project" data-project-name="index">

​

      <h4 class="sublime-project__title">HTML Example</h4>

​

      <pre class="sublime-project__code prettyprint lang-html linenums">

​

<ul>

   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>

   <li>Aliquam tincidunt mauris eu risus.</li>

   <li>Vestibulum auctor dapibus neque.</li>

</ul>

      </pre>

​

    </div>

​

​

    <div class="sublime-project" data-project-name="mainjs">

​

      <h4 class="sublime-project__title">Javascript File</h4>

​

      <pre class="sublime-project__code prettyprint lang-js linenums">

function Class(){

    this.method = function(){alert('simple method')};

}•••••••••

// some random JS

var object = new Class();

object.method();•

      </pre>

​

    </div>

​

​

    <div class="sublime-project" data-project-name="maincss">

​

      <h4 class="sublime-project__title">CSS File</h4>

​

      <pre class="sublime-project__code prettyprint lang-css linenums">

position: fixed;

top: 0;

right: 0;

width: 100%;

​

font-family: "Source Code Pro", Consolas, "Courier New", monospace;

font-size: 1em;

font-weight: 400;

z-index: 40;

​

background: 

    linear-gradient( 

        to top , 

        rgba(255,255,255,0.8), 

        rgba(255,255,255,0.6) 

    );

​

box-shadow: 

    inset 0 -1px 1px rgba(255,255,255,1), 

    inset 0 -3px 3px rgba(255,255,255,0.7), 

    0 0 20px rgba(0,0,0,0.2);

</pre>

​

    </div>

​

​

    <footer class="sublime__footer">HTML</footer>

​

  </div>

​

</section>