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

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>  
<main id="main">
    <header>
      <h1>MUHAMMAD ALI</h1>
      <h5>The Greatest Boxer Of All Time</h5>
    </header>

    <figure id="img-div">
      <img src="https://chicagocrusader.com/wp-content/uploads/sites/2/2019/01/muhammad-ali-cassius-clay-sonny-listen-neil-leifer-facebook.jpg" id="image" alt="Mohammed Ali" />
      <figcaption id="img-caption">When Muhammad Ali floored Sonny Liston in their title-bout rematch in Lewiston, Maine, on May 25, 1965</figcaption>
    </figure>

    <div id="tribute-info">
      <section id="brief-intro">
        <hr>
        <h3>A Brief intro about Muhammad Ali</h3>
        <hr>
        <p>Muhammad Ali born Cassius Marcellus Clay Jr. was an American professional boxer,activist, and philanthropist. Nicknamed "The Greatest," he is widely regarded as one of the most significant and celebrated sports figures of the 20th century and
          as one of the <i><q>Greatest Boxers Of All Time</q></i>.</p>
        <p>Ali was a leading heavyweight boxer of the 20th century, and he remains the only three-time lineal champion of that division. His joint records of beating 21 boxers for the world heavyweight title and winning 14 unified title bouts stood for 35
          years. Ali is the only boxer to be named <i>The Ring magazine Fighter of the Year</i> six times. He has been ranked the greatest heavyweight boxer of all time, and as the greatest athlete of the 20th century by Sports Illustrated, the Sports
          Personality of the Century by the BBC, and the third greatest athlete of the 20th century by ESPN SportsCentury.</p>
      </section>
      <section>
        <hr>
        <h3>Here's a brief Timeline of Muhammad Ali's life:</h3>
        <hr>
        <ul>
          <li><strong>1942</strong> - Born on January 17 in Louisville, Kentucky. His birth name was Cassius Marcellus Clay Jr.</li>
          <li><strong>1954</strong> - In his first amateur bout, he won the fight by split decision.</li>
          <li><strong>1956</strong> - He won the Golden Gloves tournament for novices in the light heavyweight class.</li>
          <li><strong>1959</strong> - He won the National Golden Gloves Tournament of Champion and the Amateur Athletic Union's national title for the light heavyweight division.</li>
          <li><strong>1960</strong> - Won a spot on the U.S. Olympic boxing team, and traveled to Rome, Italy, to compete.</li>
          <li><strong>1964</strong> - He joined the black Muslim group Nation of Islam. At first he called himself Cassius X before converting to orthodox Islam in the 1970s.</li>
          <li><strong>1967</strong> -
            <ul>
              <li> In April, he was drafted into the military, he refused to serve on the grounds that he was a practicing Muslim minister with religious beliefs that prevented him from fighting. He was arrested for committing a felony and almost immediately
                stripped of his world title and boxing license.</li>
              <li> In June, he was found guilty of violating Selective Service laws and sentenced to five years in prison.</li>
            </ul>
          </li>
          <li><strong>1970</strong> - Ali returned to the ring with a win over Jerry Quarry, and the U.S. Supreme Court eventually overturned the conviction in June 1971.</li>
          <li><strong>1981</strong> - Following one final loss to Trevor Berbick, the great boxer retired from the sport at age 39.</li>
          <li><i>Fast forward to 2016.....</i></li>
          <li><strong>2016</strong> - Muhammad Ali died on June 3, 2016, in Phoenix, Arizona, after being hospitalized for what was reportedly a respiratory issue. He was 74 years old.</li>
        </ul>
      </section>

      <hr>

      <section>
        <h3>Muhammad Ali: Record</h3>
        <hr>
        <p>Muhammad Ali had a career record of 56 wins, five losses and 37 knockouts before his retirement from boxing in 1981 at the age of 39.</p>

        <img src="https://www.inforum.com/news/874281-Muhammad-Ali.jpg/alternates/BASE_LANDSCAPE/Muhammad%20Ali.jpg" alt="Muhammad Ali in his 70's" />

        <h4>Fights</h4>
        <p>Often referring to himself as "<b>The Greatest</b>", Ali was not afraid to sing his own praises. He was known for boasting about his skills before a fight and for his colorful descriptions and phrases.
        </p>
        <blockquote>Float like a Butterfly, Sting like a Bee.</blockquote>
      </section>
    </div>
    <footer>
      <p>Read more about this Legend, here on his <a href="#" target="_blank" id="tribute-link">Wikipedia page</a></p>
      <span>Coded by: <strong>Mustapha Oyenuga</strong></span>
    </footer>

  </main>
</>

</html>
              
            
!

CSS

              
                body {
  background-color: rgb(234, 241, 247);
  color: rgba(30, 30, 85, 0.918);
  background-attachment: scroll;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2em;
}

header {
  letter-spacing: 1px;
  text-align: center;
}
header > h1 {
  display: inline-block;
  margin-bottom: 5px;
  font-size: 3rem;
  font-family: Apple Chancery, cursive;
  text-shadow: 2px 2px 1px rgb(234, 241, 247), 4.5px 4px 0px rgba(0, 0, 0, 0.25);
}

img {
  width: 100%;
  max-width: 100%;
  display: block;
}

img#image {
  -webkit-filter: grayscale(0.8);
  filter: grayscale(0.8);
  -webkit-transition: all 1.5s ease;
  transition: all 2s ease;
}
img#image:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

div#tribute-info {
  width: 80%;
  text-align: justify;
  margin: auto;
}

div section > h3 {
  border: 1px 0 1px 0 solid rgba(30, 30, 85, 0.918);
  background-color: rgba(30, 30, 85, 0.918);
  margin: 5px;
  padding: 5px;
  color: whitesmoke;
}

p {
  text-indent: 1em;
}

li:nth-child(10) {
  list-style-type: none;
}

figcaption {
  color: #000;
  text-align: center;
}

a#tribute-link {
  color: whitesmoke;
}
a#tribute-link:hover {
  color: rgb(7, 7, 31);
}

blockquote {
  border-left: 7px solid rgb(30, 30, 85);
  font-size: 2.2em;
  padding-left: 15px;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

footer {
  border: 1px solid rgba(30, 30, 85, 0.918);
  background-color: rgba(30, 30, 85, 0.918);
  color: whitesmoke;
  text-align: center;
  width: 80%;
  margin: 0 auto;
}
footer p {
  padding: none;
  margin: none;
}

              
            
!

JS

              
                
              
            
!
999px

Console