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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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">
  <h2 class="text-center">the</h2>
  <h1 class="text-center">Greatest  of  All  Time</h1>
  <div id="main-img">
    <img class="img-responsive" src="https://plaintain1.files.wordpress.com/2016/06/muhammad-ali-jpg.jpg" alt="Ali punching an air"   width="800px" class="mx-auto d-block" />
  </div>
  
  <div>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" style="margin-left:450px; width:17px;"/>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" class="glove"/>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" class="glove"/>    
  </div>
  
  <div class="row">
    <div class="col-md-1">1942</div>    
    <div class="col-md-10">Born Cassius Marcellus Clay, Jr., on Jan. 17, in Louisville, Ky., to Odessa and Cassius, Sr. (a sign and mural painter).</div>    
  </div>
  
  <div class="row">
    <div class="col-md-1">1954</div>    
    <div class="col-md-10">After having his bike stolen, a 12-year-old Clay promises to "whup whoever stole it." In an attempt to channel his aggression, the policeman he reported the crime to takes him under his wing and eventually directs him to boxing trainer Fred Stoner. Over the next six years, Clay would win six Kentucky Golden Gloves championships, two national Golden Gloves titles, and two AAU (Amateur Athletic Union) crowns.</div>    
  </div>
  
  <div class="row">
    <div class="col-md-1">1960</div>    
    <div class="col-md-10">Clay wins the light-heavyweight gold medal at the Summer Olympics in Rome with a 5–0 decision over Poland's Zbigniew Pietrzykowski.
Upon returning to his native Louisville, Clay finds he's not immune to the racism that is so prevalent in the U.S. After being refused service by a waitress at a "whites-only" restaurant, and then fighting with a white gang, a disgusted Clay throws his gold medal into the Ohio River.
He turns professional and wins the first two fights of his career.</div>    
  </div>
  
  <div class="row">
    <div class="col-md-1">1964</div>    
    <div class="col-md-10">Despite an unblemished 19–0 record, Clay is a heavy underdog in his championship bout with Sonny Liston. But you wouldn't know it by listening to him. He brashly and colorfully predicts victory, and teases the champ by calling him, among other things, an "ugly, old bear."
True to his word, Clay has his way with Liston through six rounds. When Liston refuses to leave his corner for the start of the seventh, the fight ends and Clay becomes heavyweight champion of the world.
After the fight, Clay announces he has become a Black Muslim and has changed his name to Muhammad Ali.</div>    
  </div>
  
  <div class="row">
    <div class="col-md-1">1967</div>    
    <div class="col-md-10">In April, Ali refuses induction into the U.S. Army due to his religious convictions. He angers many Americans after claiming, "I ain't got no quarrel with those Vietcong." He is subsequently stripped of his WBA title and his license to fight.
In June, a court finds him guilty of draft evasion, fines him $10,000, and sentences him to five years in prison. He remains free, pending numerous appeals, but is still barred from fighting.</div>    
  </div>
  
  <div class="row">
    <div class="col-md-1">1970</div>    
    <div class="col-md-10">Due to a loophole (there was no state boxing commission in Georgia), Ali returns to the ring in Atlanta and knocks out Jerry Quarry in three rounds.</div>    
  </div>
  
  <div class="row">
    <div class="col-md-1">1971</div>    
    <div class="col-md-10">In March, he fights heavyweight champ Joe Frazier in Madison Square Garden. A left hook by Frazier knocks Ali down in the 15th round. Frazier wins by unanimous decision.
Three months later, the Supreme Court rules in his favor, reversing the 1967 draft-evasion conviction.</div>    
  </div>
  
  <div class="row">
    <div class="col-md-1">1974</div>    
    <div class="col-md-10">In January, he gains a measure of revenge from Frazier, besting the former champ in 12 rounds.
Regains the heavyweight title in the "Rumble in the Jungle" on Oct. 30 in Kinshasa, Zaire after knocking out champion George Foreman in the eighth round. He successfully uses his "rope-a-dope" strategy—Ali allowed Foreman to get him against the ropes and swing away until he tired himself out. Then Ali attacked.</div>    
  </div>
  
  <div class="row">
    <div class="col-md-1">1975</div>    
    <div class="col-md-10">Ali fights Frazier for the third time at the "Thrilla in Manila" in the Philippines. The two heavyweights batter and bloody each other in a ferocious battle, but Ali retains his belt when Frazier can't come out for the 15th round.</div>    
  </div>
  
  <div class="row">
    <div class="col-md-1">1978</div>    
    <div class="col-md-10">With a career record of 55–2, an overconfident Ali loses his belt to 1976 Olympic champ Leon Spinks in a 15-round split decision. Spinks' reign as champ is brief, however, as Ali wins back the title in a unanimous decision seven months later.</div>    
  </div>
  
  <div class="row">
    <div class="col-md-1">1979</div>    
    <div class="col-md-10">Announces his retirement on June 27.</div>    
  </div>
  
  <div class="row">
    <div class="col-md-1">1980</div>    
    <div class="col-md-10">Comes out of retirement to fight new heavyweight champ Larry Holmes. Holmes punishes Ali, landing an estimated 125 punches in the ninth and tenth rounds alone, and then knocks him out in the 11th.</div>    
  </div>
  
  <div class="row">
    <div class="col-md-1">1981</div>    
    <div class="col-md-10">Loses a unanimous decision to Trevor Berbick, and finally hangs up the gloves for good, retiring with an overall professional record of 56—5.</div>    
  </div>
  
  <div class="row">
    <div class="col-md-1">1984</div>    
    <div class="col-md-10">Ali is diagnosed with Parkinson's disease, a neurological disorder whose symptoms include muscle tremors and slowness of speech.</div>    
  </div>
  
  <div class="row">
    <div class="col-md-1">1996</div>    
    <div class="col-md-10">Ali carries the Olympic torch and ignites the cauldron to signal the beginning of the Summer Olympics in Atlanta. He is also given a second gold medal, to replace the one he tossed in the river 36 years earlier.</div>    
  </div>
  
  <div>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" style="margin-left:450px; width:17px;"/>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" class="glove"/>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" class="glove"/>    
  </div>
  
  <div class="pair">
    <p class="p-head">Olympic Games 1960</p>
    <div>
      <img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Boxing_light-heavyweight_1960_Olympics.jpg" class="ali-olymp" alt="Ali wins OG"/>
  </div>
  
    <div>      
      <blockquote class="blockquote-reverse">
        <p class="p1">
          Clay made his amateur boxing debut in 1954 against local amateur boxer Ronnie O'Keefe. He won by split decision. He went on to win six Kentucky Golden Gloves titles, two national Golden Gloves titles, an Amateur Athletic Union national title, and the Light Heavyweight gold medal in the 1960 Summer Olympics in Rome. Clay's amateur record was 100 wins with five losses. Ali said in his 1975 autobiography that shortly after his return from the Rome Olympics, he threw his gold medal into the Ohio River after he and a friend were refused service at a "whites-only" restaurant and fought with a white gang. 
        </p>
      </blockquote>
      </div>
  </div>
  
  <div>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" style="margin-left:450px; width:17px;"/>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" class="glove"/>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" class="glove"/>    
  </div>
  
 <div class="pair"> 
   <p class="p-head">Ali vs Liston</p>
  <div>
    <img src="http://www.punditarena.com/wp-content/uploads/2014/05/Ali-vs-Liston.jpg" alt="Ali win by KO Sonny Liston" class="ali-liston"/>
  </div>      
  
    <div>      
      <blockquote class="blockquote">
        <p class="p2">
          By late 1963, Clay had become the top contender for Sonny Liston's title. The fight was set for February 25, 1964, in Miami Beach. Liston was an intimidating personality, a dominating fighter with a criminal past and ties to the mob. Based on Clay's uninspired performance against Jones and Cooper in his previous two fights, and Liston's destruction of former heavyweight champion Floyd Patterson in two first-round knock outs, Clay was a 7–1 underdog. Despite Liston's attempts to knock out a blinded Clay, Clay was able to survive the fifth round until sweat and tears rinsed the irritation from his eyes. In the sixth, Clay dominated, hitting Liston repeatedly. Liston did not answer the bell for the seventh round, and Clay was declared the winner by TKO.      
        </p>
      </blockquote>
    </div>
  </div>
  
  <div>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" style="margin-left:450px; width:17px;"/>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" class="glove"/>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" class="glove"/>    
  </div>
  
  <div class="pair">    
    <p class="p-head">Ali vs Fraizer</p>
    <div>
      <img  src="http://youfight.info/media/k2/items/cache/a07bb170c4a36161aa1f8f4859c19794_L.jpg" class="ali-fraizer" alt="Ali vs Fraizer"/>
    </div>
    
    <div>      
      <blockquote class="blockquote-reverse">
        <p class="p3">
          The fight was even in the early rounds, but Ali was taking more punishment than ever in his career. On several occasions in the early rounds he played to the crowd and shook his head "no" after he was hit. In the later rounds—in what was the first appearance of the "rope-a-dope strategy"—Ali leaned against the ropes and absorbed punishment from Frazier, hoping to tire him. In the 11th round, Frazier connected with a left hook that wobbled Ali, but because it appeared that Ali might be clowning as he staggered backwards across the ring, Frazier hesitated to press his advantage, fearing an Ali counter-attack. In the final round, Frazier knocked Ali down with a vicious left hook. Ali was back on his feet in three seconds. Nevertheless, Ali lost by unanimous decision, his first professional defeat.
        </p>      
      </blockquote>
    </div>
  </div>
  
  <div>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" style="margin-left:450px; width:17px;"/>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" class="glove"/>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" class="glove"/>    
  </div>
  
  <div class="pair">
    <p class="p-head">Ali's family</p>
     <div>
      <img src="https://2.bp.blogspot.com/-vNjZdwf-ZKM/V1KIekg9NZI/AAAAAAAAF9I/As1tCDQfSzQ_DXIncb8cWzoaFEIELJ15wCLcB/s320/Belinda.jpg" class="family" alt="Ali's family"/>
    </div>    
    
    <div>      
      <blockquote class="blockquote">
        <p class="p4">
          He married his first wife, a waitress named Sonji Roi, one month after meeting her in 1964. She had problems with the Islamic dress code for women, and they divorced in 1966. He was then married to Belinda Boyd from 1967 to 1977 and Veronica Porsche Ali from 1977 to 1986 before marrying Yolanda Williams in 1986. He has a total of nine children, and his youngest daughter, Laila, had a celebrated boxing career, with a career record of 24-0 with 21 wins by KO.
          He developed a close friendship with sports reporter Howard Cosell during his boxing career.
        </p>
      </blockquote>
    </div>
  </div>
  
  <div>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" style="margin-left:450px; width:17px;"/>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" class="glove"/>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" class="glove"/>    
  </div>
  
  <div class="div-quote">
    <i class="fa fa-quote-left fa-2x" aria-hidden="true" id="quote"></i>
    <p class="quotes">Boxing is a lot of white men watching two black men beat each other up.</p>
    <p class="quote-owner">Muhammad Ali</p>
  </div>
  
  <div>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" style="margin-left:450px; width:17px;"/>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" class="glove"/>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" class="glove"/>    
  </div>
    
  <div class="div-quote">
    <i class="fa fa-quote-left fa-2x" aria-hidden="true" id="quote"></i>
    <p class="quotes">Float like a butterfly, sting like a bee.</p>
    <p class="quote-owner">Muhammad Ali</p>
  </div>
  
  <div>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" style="margin-left:450px; width:17px;"/>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" class="glove"/>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" class="glove"/>    
  </div>
    
  <div class="div-quote">
    <i class="fa fa-quote-left fa-2x" aria-hidden="true" id="quote"></i>
    <p class="quotes">I’m prouder of sparring with Ali when he was young than I am of beating him when he was old.</p>
    <p class="quote-owner">Larry Holmes, reflecting on his defeat over Muhammad Ali in 1980</p>
  </div>
  
  <div>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" style="margin-left:450px; width:17px;"/>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" class="glove"/>
    <img src="https://maxcdn.icons8.com/iOS7/PNG/25/Sports/boxing-25.png" class="glove"/>    
  </div>
  
  <div class="div-quote">
    <i class="fa fa-quote-left fa-2x" aria-hidden="true" id="quote"></i>
    <p class="quotes">I don't call him the best boxer of all time, but he's the greatest human being I ever met.</p>
    <p class="quote-owner">George Foreman, on Muhammad Ali</p>
  </div> 
  
  <div id="wiki-icon">
    <a href="https://en.wikipedia.org/wiki/Muhammad_Ali" target="_blank" id="wiki">  
       <i class="fa fa-wikipedia-w fa-4x" aria-hidden="true" >
         
       </i>
  </a>
    
  </div>
         
  
  <div class="row">
    
    <div class="col-md-3">      
           
    </div> 
    
    <div class="col-md-2">      
     <a href="https://www.facebook.com/mers.vaneo" target="_blank" class="btn btn-facebook" role="button">
       <i class="fa fa-facebook-square" aria-hidden="true"> Facebook
       </i>
      </a>       
    </div>
    
    <div class="col-md-2">      
     <a href="https://www.freecodecamp.com/isaaknazar" target="_blank" class="btn btn-facebook" role="button">
       <i class="fa fa-free-code-camp" aria-hidden="true"> FreeCodeCamp
       </i>
      </a>       
    </div>
    
    <div class="col-md-2">      
     <a href="https://github.com/IsaakNazar" target="_blank" class="btn btn-git" role="button">
       <i class="fa fa-github-square" aria-hidden="true"> GitHub
       </i>
      </a>       
    </div>
    
  </div>  
  <div id="nazar">
    <a href="https://www.facebook.com/mers.vaneo" target="_blank" id="nazar-black">
      <i class="fa fa-copyright" aria-hidden="true">
        <p>2017 Nazar Isaak</p>
      </i>
    </a>
  </div>
</div>

              
            
!

CSS

              
                html, body, {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
body {
  background-color: #C4C7C7; 
 }
#main-img{
  margin-bottom:60px;
  text-align:center; 
  margin-top:50px;
}
h1 {
  font-size:100px;
  font-family:Impact;
}
h2{
  font-family:Impact;
}
.ali-olymp {
  width:200px;
  float:left;
}
.ali-liston {
  width:250px;
  float:right;
}
.ali-fraizer{
  width:270px;
  float:left;
}
.family{
  float:right;
  width:270px;
}
.p1 {
  margin-left:230px;
  font-family:Times;
  font-size:19px;
}
.p2 {
  margin-right:270px;
  text:100px;
  font-family:Times;
  font-size:19px;
}
.p3{
  margin-left:300px;
  font-family:Times;
  font-size:19px;
}
.p4 {
  margin-right:330px;
  text:100px;
  font-family:Times;
  font-size:19px;
}
.p-head{
  text-align:center;
  font-weight:bold;
  font-size:120%;
}
.pair{
  margin-top:50px;
  margin-bottom:50px;
}
.glove{
  margin-left:65px;
  width:17px;
}
.quotes{
  font-size:200%;
  font-style: italic;
}
.quote-owner{
  float:right;
  font-weight:bold;  
}
.div-quote{
  margin-bottom:70px;
}
.col-md-1{
  font-weight:bold;
}
.row{
  padding: 20px;
    border-bottom-width: 4px;
    border-bottom-style: double;
    border-bottom-color: white;
}

.btn-facebook{
  border-width:1px;
  border-color:#8D9191;
  background-color:#D8D2D2;
  color:black;
}
.btn-git{
  border-width:1px;
  border-color:#8D9191;
  background-color:#D8D2D2;
  margin-left:55px;
  color:black;
}
#wiki{
  color:black;
  }
#wiki-icon{
  text-align:center;
}
#nazar{
  text-align:center;
  
}
#nazar-black{
  color:black;
}

              
            
!

JS

              
                
              
            
!
999px

Console