Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

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.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

If the stylesheet you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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 

              
                <body style="background-color: #2f2f2f">
  <div class="jumbotron">
    <div class="container-fluid">
      <div class="row">
        <div class="col col-sm">
        </div>
      <div class="col-9 rounded mx-auto border border-dark" style="background-color:white">
        <h1 class="text-center">Tribute to the Great <br> Mohammed Ali</h1>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Muhammad_Ali_1966.jpg/800px-Muhammad_Ali_1966.jpg" class="rounded mx-auto d-block margin-bottom" alt="Mohammed Ali 1966">
        <br>
      </div>
        <div class='col col-sm'>
        </div>
      </div>
      <div class="row">
        <div class="col">
        </div>
        <div class="col-8">
          <h4 class="text-center">A beautiful timeline of Muhammed Ali's Life:</h4>
          <ul>
            <li><strong>1942</strong> - January 17, Muhammad Ali was born on Janurary 17th in Louisville, Kentucky. His given name was Cassius Clay.</li>
            <li><strong>1954</strong> - Clay bike was stolen, when a policement by the name of Joe Martin interviewed Clay. Clay advised Mr. Martin he <br><text style="padding-left:3.2li {
  margin: 1em 0;
}em; text-indent: -1.28571429em">wanted to "whup" whoever has stolen his bike. Martin trained young boxers and started to train Clay.</text></li>
            <li><strong>1956</strong> - Clay wins the novice Golden Gloves Championship as a light heavyweight.</li>
            <li><strong>1959</strong> - Clay wins the the AAU light heavyweight title at the Golden Gloves Tournament of Champions</li>
            <li><strong>1960</strong> - In September Clay won the light heavyweight gold medal at the Rome Olympics.<br><text style="padding-left:2.500714em; text-indent: -1.28571429em">
              - In October Clay wins his first professional bout with Tunney Hunsaker.</text></li>
            <li><strong>1963</strong> - In October Clay wins his first foreign professional bout with Henry Cooper in London before 55,000 fans.
</li>
            <li><strong>1964</strong> - February 25, Clay knocked out Sonny Liston. This defeat allowed him to become the heavyweight champion.<br><text style="padding-left:2.500714em; text-indent: -1.28571429em">- February 26, Clay joined the Nation of Islam.</text><br><text style="padding-left:2.500714em; text-indent: -1.28571429em"> - March 6, at the age of 22, Clay changed his name from Cassius Clay to Muhammad Ali.</text><br><text style="padding-left:2.500714em; text-indent: -1.28571429em"> - August 14, Ali married his first wife Sonji Roi.</text>
</li>
            <li><strong>1966</strong> - Ali is drafted and he files for conscientious objector status as a Muslim minister.
              <br><text style="padding-left:2.500714em; text-indent: -1.28571429em"> - Ali's marriage to Sonji Roi ended in divorce.</text>
</li>
<li><strong>1967</strong> - In April, the government denies Ali's filing for conscientious objector status and he was drafted into the Army.<br><text style="padding-left:3.2em; text-indent: -1.28571429em">He attends the induction ceremony, but he refused to step forward.</text><br><text style="padding-left:2.500714em; text-indent: -1.28571429em"> - In June, Ali is found guilty of refusing induction
  into the Army. His passport is revoked.</text><br><text style="padding-left:2.500714em; text-indent: -1.28571429em"> - The boxing association takes back his boxing titles and bans him from boxing for three years.</text><br><text style="padding-left:2.500714em; text-indent: -1.28571429em"> - He married his second wife, Belinda Boyd. They would go on to have four children together.</text>
</li>
            <li><strong>1970</strong> - On October 26, Ali returns to fighting in Atlanta and wins over Jerry Quarry.</li>
            <li><strong>1971</strong> - In March, in a famous match called "The Fight of the Century," Joe Frazier knocked Ali down, but Ali got up.<br><text style="padding-left:3.2em; text-indent: -1.28571429em">However, after 15 brutal rounds, it was still ruled that Frazier won.</text><br><text style="padding-left:2.500714em; text-indent: -1.28571429em"> - In June, the Supreme Court reverses its 1967 conviction and ruled that he was not guilty of evading the military,</text><br><text style="padding-left:3.2em; text-indent: -1.28571429em"> since he should not have been drafted in the first place due to his religious beliefs.</text></li>
            <li><strong>1974</strong> - January 28, he won over Joe Frazier.<br><text style="padding-left:2.500714em; text-indent: -1.28571429em"> - October 30, he defeated George Foreman and reclaimed the title of Heavyweight Champion of the World. This </text><br><text style="padding-left:3.2em; text-indent: -1.28571429em">fight was a very famous fight event known as the "Rumble in the Jungle" since the fight was at a stadium in Zaire.</text></li>
            <li><strong>1975</strong> - October 1st, Ali beats Joe Frazier in Manila.</li>
            <li><strong>1976</strong> - September 28, Ali beats Ken Norton in Yankee Stadium in New York.</li>
            <li><strong>1977</strong> - Due to an affair with Veronica Porsche, his marriage to Boyd ended in divorce. He went on to marry Porsche and <br><text style="padding-left:3.2em; text-indent: -1.28571429em">had two daughters together.</text></li> 
            <li><strong>1978</strong> - February 15, Ali lost the heavyweight title to Leon Spinks in a split decision.
September 15, Ali wins the <br><text style="padding-left:3.2em; text-indent: -1.28571429em">heavyweight title back from Leon Spinks after a battle at the Superdome in New Orleans.<text></li>
            <li><strong>1980</strong> - Ali came back and fought with Harry Holmes. Ali lost the fight.</li>
            <li><strong>1981</strong> - December 12, once again, Ali came back and fought with Trevor Berbick. Ali lost the fight.<br><text style="padding-left:2.500714em; text-indent: -1.28571429em"> - December 13, at the age of 39, Ali announces his retirement from boxing.</text></li>
            <li><strong>1984</strong> - He was diagnosed with Parkinson's disease.</li>
            <li><strong>1986</strong> - Ali and Porsche got a divorce, and Ali married Yolanda Ali. They adopted a son together</li>
            <li><strong>1996</strong> - Ali lit the Olympic flame in Atlanta, Georgia.</li>
            <li><strong>1997</strong> - He received the Arthur Ashe Courage Award.<br><text style="padding-left:2.500714em; text-indent: -1.28571429em"> - His picture is placed on the front of the Wheaties cereal box.</text><br><text style="padding-left:2.500714em; text-indent: -1.28571429em"> - He is named Sportsman of the Century by Sports Illustrated.</text></li>
            <li><strong>2005</strong> - He is awarded the Presidential Medal of Freedom, the highest U.S. civilian honor.<br><text style="padding-left:2.500714em; text-indent: -1.28571429em"> - Muhammad Ali left the public eye but continued to provide humanitarian support as well as support to the</text><br><text style="padding-left:3.2em; text-indent: -1.28571429em"> Muhammad Ali Parkinson Center at Barrow Neurological Institutes as well as other charities.</text></li>
            <li><strong>2016</strong> - Muhammad Ali died on June 3, 2016 as the result of septic shock due to unspecified natural causes. He was 74</text><br><text style="padding-left:3.2em; text-indent: -1.28571429em">years old.<br><text style="padding-left:2.500714em; text-indent: -1.28571429em"> - He was buried in Louisville, Kentucky. He planned his own funeral which included eulogies from former President</text><br><text style="padding-left:3.2em; text-indent: -1.28571429em">Bill Clinton, sportscaster Bryant Gumbel and comedian and close friend Billy Crystal.</text></li>
          </ul>
        </div>
        <div class="col"></div>
      </div>
    </div>
  </div>
  <footer>
    <div class="fluid-container"> 
      <p class="text-center" style="color: white">Written and Coded by <a href="http://www.damirdrljaca.com" target="_blank">Damir Drljaca</a> purely with HTML and Bootstrap. Thank you to <a href="https://www.freecodecamp.org/fccf0d252d9" target="_blank">Freecodecamp.com</a></p>
      </div>
  </footer>  
</body>
!

CSS 

              
                li {
  margin: 1em 0;
}
!

JS
!
999px

Console