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.
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.
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.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
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.
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).
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.
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.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
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.
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.
Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<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>
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;
}
Also see: Tab Triggers