cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <header class="sticky row">
  <div class="col-sm col-lg-10 col-lg-offset-1">
    <a href="#" role="button">Home</a>
    <a href="#" role="button">About</a>
    <a href="#" role="button">Contact</a>
  </div>
</header>
<br />
<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-7 col-lg-6 col-lg-offset-1">
      <br />
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt ex quis pharetra imperdiet. Morbi imperdiet egestas purus eget dictum. Vestibulum sed diam nisl. Quisque maximus, mauris id semper ultricies, diam lorem pretium lorem, et tempor
        dui mi id urna. Fusce orci nulla, pharetra non est vitae, finibus lobortis diam. In condimentum odio quis tellus luctus mattis. Duis finibus tortor nulla, in posuere ante ullamcorper at. Nulla placerat tellus sed urna blandit congue.</p>

      <p>Nam dapibus consectetur mi, quis convallis enim pellentesque sit amet. Fusce quis pulvinar odio. Aliquam et porta arcu, sed ullamcorper lacus. Nulla vehicula nec sapien eget pretium. Duis at finibus justo. Nam vitae arcu odio. Phasellus laoreet
        fermentum libero ut tempus.</p>

      <p>Sed consequat egestas bibendum. Morbi massa ex, scelerisque vitae auctor a, volutpat auctor erat. Nullam eu euismod nisl. Phasellus id tempus ligula. Duis egestas nibh non ipsum hendrerit cursus. Maecenas ac nisi non justo malesuada pellentesque
        et ut nisi. Sed a est ut turpis pellentesque varius nec id ligula.</p> <br />
    </div>
    <div class="col-sm-12 col-md-5 col-lg-4">
      <br />
      <h2>Currabitur Fringilla</h2>
      <p>Curabitur fringilla velit sed tincidunt consequat. Proin pharetra bibendum ornare. Integer faucibus facilisis tortor vitae dapibus. Donec erat sapien, pharetra nec bibendum non, vulputate vel nulla. Cras non commodo orci. Suspendisse congue tristique
        nisl. Nulla imperdiet non sapien sit amet rutrum. Donec pulvinar nulla nec mollis luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla fermentum lectus sit amet velit placerat, nec facilisis justo
        volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc venenatis neque orci, quis dignissim felis iaculis sit amet. Phasellus aliquam turpis non enim tempor, quis porta sapien accumsan. Pellentesque
        nisl lorem, semper volutpat nisi vel, cursus imperdiet leo. Integer malesuada ornare vulputate.</p>

      <p>Mauris sodales massa eu nulla tincidunt, quis consequat lectus hendrerit. Suspendisse maximus sem in sem consectetur egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
        posuere cubilia Curae; Donec cursus dolor eu ornare venenatis. Nulla diam ipsum, fermentum nec est quis, condimentum scelerisque sem. Aenean interdum eu velit sit amet egestas. Nulla id erat sit amet felis euismod consectetur. Donec sagittis dui
        dui, non rutrum nunc pharetra eu. Fusce ac libero ut nisl dictum ullamcorper.</p>

      <p>Etiam in venenatis justo. Quisque tempor tortor et purus posuere pharetra. Mauris et elementum nibh. Suspendisse in volutpat orci. Duis vel sagittis libero. Nam at ipsum scelerisque, laoreet sapien non, pharetra purus. Nunc vehicula enim hendrerit
        est fermentum efficitur. Maecenas eget nibh sit amet erat laoreet aliquet. Etiam hendrerit lorem ut mauris fermentum malesuada. Quisque non tristique quam, vel vehicula augue. Donec accumsan ligula at faucibus accumsan. Integer scelerisque arcu
        non urna sagittis dignissim. Curabitur tincidunt eleifend sagittis. Quisque fermentum ipsum nec arcu malesuada, vitae finibus massa pellentesque. Vestibulum vitae elit viverra nulla vulputate viverra vel in nunc. Lorem ipsum dolor sit amet, consectetur
        adipiscing elit.</p> <br />
    </div>
  </div>
</div>
<footer>
  <div class="col-sm col-md-10 col-md-offset-1">
    <p>Copyright &copy; Your Website 2017 | Built using <a href="https://chalarangelo.github.io/mini.css/">mini.css</a>
    </p>
  </div>
</footer>
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console