cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-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">
  <a href="#" role="button">Home</a>
  <a href="#" role="button">About</a>
  <a href="#" role="button">Contact</a>
</header>
<br />
<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-4">
      <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-6 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 class="col-sm-12 col-lg-4">
      <br />
      <h2>Morbi pretium</h2>
      <p>Morbi pretium leo a libero facilisis viverra. Pellentesque posuere ex odio, eget scelerisque purus laoreet ac. Pellentesque porta elit id libero tincidunt consequat. Praesent quis euismod elit. Praesent ipsum nisi, elementum quis neque vitae, dictum aliquet quam. Vivamus ultrices et magna ac tempor. Nulla facilisi. Nullam molestie sit amet diam non porttitor. Sed varius purus ut turpis laoreet sollicitudin. Nam vehicula lobortis gravida. Sed justo dui, placerat eu mi molestie, eleifend faucibus ipsum. Phasellus mattis dui ut felis rutrum iaculis. Donec vehicula libero et dictum ornare. In vestibulum tempus enim quis euismod.</p>

      <p>Nam sit amet erat a dui faucibus ullamcorper ut a mauris. Fusce id justo gravida, tincidunt leo vel, dapibus mi. Phasellus aliquam eros quis porttitor elementum. Fusce justo sapien, ullamcorper et justo vel, hendrerit interdum eros. Ut placerat lacus sed lectus efficitur, a porttitor sem consectetur. Aliquam vitae neque magna. Morbi vitae scelerisque diam, id efficitur quam.</p>

      <p>Nam sed sodales mauris. In placerat, tortor at dignissim accumsan, mauris nibh tristique risus, vel ultricies dolor lorem id odio. Aliquam malesuada mi vitae metus mollis elementum. Vestibulum a laoreet est, eget tempus eros. Maecenas sit amet lorem et tellus aliquam sodales. Nunc ac luctus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque cursus, ligula a tempus interdum, arcu lorem porttitor felis, id lobortis nulla mauris non felis. In in maximus lorem. Pellentesque commodo pulvinar dictum. Donec a risus nunc. In sed fringilla mi, et blandit massa. Sed suscipit ac dolor eu suscipit. Morbi maximus mauris sed scelerisque feugiat. Donec sit amet nisl id tortor finibus pulvinar. </p> <br />
    </div>
  </div>
</div>
<footer>
    <p>Copyright &copy; Your Website 2017 | Built using <a href="https://chalarangelo.github.io/mini.css/">mini.css</a>
    </p>
</footer>
            
          
!
999px
Loading ..................

Console