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.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              <div class="container">
  <div class="jumbotron">
  <div class="row">
    <div class="col-xs-12">
      <h1 class="text-center">MUHAMMAD ALI</h1><em>
      <h2 class="text-center">THE GREATEST OF ALL TIME</h2></em>
      
      <div class="thumbnail">
      <image class="img-responsive"  alt="Muhammad Ali" width="100%" src="http://sports.gunaxin.com/wp-content/uploads/2016/06/Muhammad-Ali.jpg">
        <div class="caption text-center">25-May 1965: Muhammad Ali vs Sonny - Liston First Minute, First Round</div>
      </div>
      <h3 class="text-center">Here's a time line of Muhammad Ali's life:</h3>
      <div>
        <ul>
          <li><strong>1942:</strong> Born Cassius Marcellus Clay, Jr. in Louisville, Kentucky</li>
          <li><strong>1954:</strong> Began training as a boxer when he was 12 years old when his bike is stolen. He was very angry, and a local policeman suggested he try boxing to help get his anger out.</li>
          <li><strong>1960:</strong> Won the Light Heavyweight gold medal in the 1960 Summer Olympics in Rome, and converted to Islam shortly afterwards.</li>
          <li><strong>1964:</strong> Won the WBC and WBA heavyweight championships from Sonny Liston in an upset. Clay then changed his legal name from Cassius Clay, which he called his "slave name", to Muhammad Ali, and gave a message of racial pride for African Americans and resistance to white domination during the 1960s Civil Rights Movement.</li>
          <li><strong>1966:</strong> Two years after winning the heavyweight title, Ali further antagonized the white establishment in the U.S. by refusing to be conscripted into the U.S. military, citing his religious beliefs and opposition to American involvement in the
            Vietnam War. He was eventually arrested, found guilty of draft evasion charges and stripped of his boxing titles</li>
          <li><strong>1970:</strong> Allowed to fight in Georgia, because Georgia didn't have a boxing commission to stop him. He won his fight against Jerry Quarry</li>
          <li><strong>1971:</strong> Muhammad challenged the boxing champion Joe Frazier. It was called the fight of the century, and Ali lost.
          </li>
          <li><strong>1971:</strong> Successfully appealed in the U.S. Supreme Court, which overturned his conviction, by which time he had not fought for nearly four years—losing a period of peak performance as an athlete</li>
          <li><strong>1979:</strong> Muhammad Ali announced he was retiring from boxing in 1979, but he came out of retirement in 1980</li>
          <li><strong>1984:</strong> Diagnosed with Parkinson's, a disease that is common among boxers</li>
          <li><strong>1986:</strong> At the summer games in Atlanta, Muhammad Ali lit and carried the torch for the Olympic Games</li>
          <li><strong>2005:</strong> President George W. Bush presented Ali with two special medals, the Presidential Citizens Medal and the Medal of Freedom</li>
          <li><strong>2016:</strong> Dies at the age of 74</li>
        </ul>
      </div>
      <blockquote><p>
        “The Man who believes real success comes when we rise after we fall.”</p> <footer><cite>President Barack Obama on Muhammad Ali</cite></footer></blockquote>
      <h3 class="text-center">Read more about the greatest of all time on his <a href="http://muhammadali.com/" target="_blank">Website</a>.</h3></div>
  </div></div>
    <footer class="text-center">
    <hr>
      <p>Written and Coded by <a href="https://www.linkedin.com/in/ahmadbasim">Basim Ahmad</a></p>
    </footer>
</div>
            
          
!

CSS

            
              body {
  margin-top: 60px;
}
            
          
!

JS

            
              
            
          
!
999px

Console