Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container">
  <div class-"row">   
    <div class="col-md-12" style="background-color:#d2d5db; border-radius: 5px">
    <h1 class="text-center"><strong>Jack Black</strong></h1>
      <h2 class="text-center"><em>The man who rocked a billion socks off</em></h2>      
    <img class="img-responsive center-block" alt="Jack and Kyle" src="http://cdn.hitfix.com/photos/597022/tenacious-d_featured_photo_gallery.jpg">
    <div class="text-center caption">Jack (right) and his brother Kyle elucidate the health benefits of mustaches and how the music of Tenacious D draws inspiration from their formidable lip rugs.</div>    
  <br>
      <div class="col-md-3">
      </div>
      <div class="col-md-6">
  <h3 class="text-center">This is not the greatest timeline of Jack's life in the world, no, this is just a tribute*:</h3>
    <ul class="text-center inline-block">
      <li class="text-left">  <strong>1969</strong> - Born in Santa Monica, California</li>
      <li class="text-left"><strong>1974</strong> - Leads his school music program as a kindergartener after showing prodigious xylophone skills</li>
      <li class="text-left"><strong>1980</strong> - Reunites with long-lost brother Kyle Gass and forms the band Tenacious D</li>
      <li class="text-left"><strong>1984</strong> - Makes first road trip with KG -- hearts are broken, auditory systems inflamed</li>
      <li class="text-left"><strong>1987</strong> - Drops out of UCLA to pursue a career in modeling. After successfully avoiding the pitfalls of working in the modeling business, transitions to acting and music</li>
      <li class="text-left"><strong>1990</strong> - While hitchhiking down a long and lonesome road, comes across a shiny demon. He and Kyle (though mostly Jack) write the greatest song in the world to banish the demon from whence it came... then they forget it</li>
      <li class="text-left"><strong>1992</strong> - Inspired by his deul with a devil, Jack heads on down to the crossroads</li>
      <li class="text-left"><strong>2000</strong> - Jack explodes onto the movie scene with his breakout performance in High Fidelity. When informed that the Academy chose him for Best Actor, Jack asks that they give the award to his good friend Russel Crowe instead and pretend he was never even considered</li>
      <li class="text-left"><strong>2001</strong> - The first Tenacious D album is released. All of humanity rejoices. Also, dolphins, whales, and birds the world over</li>
      <li class="text-left"><strong> 2002-2011</strong> - Jack releases numerous commercially and critically successful movies blah blah blah</li>
      <li class="text-left"><strong>2001/2007</strong> - The D help the United Mitochondrial Disease Foundation raise awareness and funds</li>
      <li class="text-left"><strong>2015</strong> - Visits Kampala in Uganda as part of Comic Relief USA's Red Nose Day</li>
      <li class="text-left"><strong>2016</strong> - Works to benefit patients at Children's Miracle Network Hospitals. Actively supports 18 charities working for a range of causes</li>
      <li class="text-left"><strong>2016</strong> - Attempts to assassinate fellow king Kyle but is unsuccessful. Simultaneously escapes assassination at the hands of Kyle. The two kings rule the kingdom in peace and harmony...</li> 
    </ul>
    <h3 class="text-left"><em>"The greatest gift in life is the ability to think great thoughts and have the strength to take action so that those thoughts become reality in this wonderful and abundant world."</em></h3>
    <h3 class="text-left"><em>"You must never underestimate the power of the eyebrow."</em></h3>
    <h5 class="text-center"> - Jack Black</h5>
    <br>
    <h3><strong>If you are into rocking, or art, or love, or Kielbasa sausages, you should check out more about Jack Black on his <a href="https://en.wikipedia.org/wiki/Jack_Black" target="_blank">Wikipedia page</a> or watch <a href="https://www.youtube.com/watch?v=_lK4cX5xGiQ" target="_blank">this</a> true account of the writing and performing of the Greatest Song in the World.</strong></h3>
      <p>*Many of the facts listed above may or may not be factual</p>
      </div>
    </div>
  </div>
</div>
      <br>
<div class="container">
  <div class="row">
    <div class="col-md-12">  
      <p class="text-center" style="border-top:1px solid #d2d5de; padding-top:15px">Written and coded by Jonathan McAlpine</p>
    </div>
  </div>
</div>
 
              
            
!

CSS

              
                body {
  margin-top: 60px;
}

              
            
!

JS

              
                
              
            
!
999px

Console