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 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

              
                
<center>
  <h1>
Jose Aldo </h1>
</center>
<center>
    <h2> The most dominant Featherweight champion of all time
  </h2>
</center>

  <center>
    <img class="imgborder"src="http://cdn.lowkickmma.com/wp-content/uploads/2014/12/457871444.01.jpg" alt="Jose aldo exchanges with Chad Mendes in their second fight">
</center>
<center>
    <p> Jose Aldo (left) exchanging combinations with Chad Mendes (right) in their second fight.
    </p>
</center>
  
<center>
<h3>Here's a timeline of Jose Aldo's life:</h3>
</center>

<center>
<ul>
  <li><strong>1986</strong> - Born in Manaus, Brazil</li>
  <li><strong>2003</strong> - Moved from Manaus to Rio de Janeiro to train jiu-jitsu</li>
  <li><strong>2004</strong> - Fought his first proffesional mma fight at the age of 17</li>
  <li> <strong>2005</strong> - After stringing a few wins to top competition in other organizations,  he suffered his first loss to Luciano Azeveda, a respected luta libre black belt</li>
  <li><strong>2006</strong> - Wins a unanimous decision over Thiago Meller to rebound his career</li>
  <li><strong>2007</strong> - Beats Shoji Maruyuma in the Pancrase Neo-Blood Tournament finals</li>
  <li><strong>2008</strong> - Made his debut for mixed martial arts promoter World Extreme Cagefighting by defeating Alexandre Franca Nogueira at WEC 34</li>
  <li><strong>2009</strong> - defeats Cub Swanson at WEC 41 via double flying knee, 8 seconds into the first round</li>
  <li><strong>2009</strong> - Wins WEC Featherweight Championship against Mike Brown via TKO in the second round</li>
  <li><strong>2010</strong> - Defeats former title holder, Urijah Faber via a dominant unanimous decision</li>
    <li><strong>2010</strong> - Became the inagural UFC Featherweight Champion after the WEC was bought out by the UFC</li>
    <li><strong>2011</strong> - Won his first UFC title defense against Mark Hominick</li>
    <li><strong>2015</strong> - After defending his belt 6 more times, he loses his belt at UFC 200 after being flash KO'd in the begining of the first round by irishman Conor Mcgregor</li>
    <li><strong>2016</strong> - Wins UFC Featherweight Interim Title in a rematch against a former opponent former UFC Lightweight Champion, Frankie Edgar </li>
</ul>
</center>
  
<center>
<h4> "I hate to talk about it, because I think one of the easiest things to do analysis on is to say, ‘he’s athletic.’ Everyone says that. But man, is that fucking kid athletic. It’s just, the speed and power and explosiveness in that kid is on another level. It’s one of those things, you don’t know until you experience it firsthand."
</h4>
</center>
<center>
<h5>- Kenny Florian</h5>
</center>
<center>
<h6>To learn more about Jose check out his <a href="https://en.wikipedia.org/wiki/Jos%C3%A9_Aldo" target="_blank">wikipedia</a>page or his <a href="http://www.sherdog.com/fighter/Jose-Aldo-11506" action="_blank">sherdog</a> page to see his record and upcoming fights.</h6>
</center>
<center>
<h7>coded by <a href="https://codepen.io/AdoSae/"action="_blank">Adolfo Saenz</a></h7>
</center>
              
            
!

CSS

              
                
body {
    Background-color: grey;
    
  }
  h1 {
    font-size: 60px;
    font-family: Monospace;
    color:orange;
  }
  p {
    color: black;
    font-size: 15px;
    margin-top:10px;
    margin-bottom: 5px;
  }
  h2 {
    font-size: 20px;
    color: black;
  }
  h3 {
    color: orange;
    font-size: 30px;
    width: 700px;
    text-align: left;
  }
  
  h4 {
    font-size:25px;
    width: 700px;
    margin-top:20px;
    color: black;
    text-align: left;
  }
  h5 {
    width: 700px;
    color: lightgrey;
    text-align: left;
  }
  h6 {
    font-size: 30px;
    color: black;
    width: 700px;
    margin-top: 30px; 
    margin-bottom: 50px;
    text-align: left;
  }
  h7 {
    font-size: 15px; 
    color: black;
  }
  ul {
    width: 700px;
    color: black;
    text-align: left;
  }
 .background-color{
    Background-color: red;
  }
 .imgborder {
    border-radius: 1%;
  }

              
            
!

JS

              
                
              
            
!
999px

Console