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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                
<main id="main">
  <h1 id="title">MOHAMED ALI</h1>
  <h2>The greatest</h2>
  <p>(17-01-1942 - 3-06-2016)</p>
  
  <div><figure id="img-div"> 
    <img id="image" src="https://cdn03.allafrica.com/download/pic/main/main/csiid/00340061:133eacca97f026edf0704b3bdec6f26c:arc614x376:w735:us1.jpg" alt="Mohamed Ali met K.O Sonny Liston au 1er round le 25 mai 1965">
    <figcaption id="img-caption">Muhammed Ali met Sonny Liston au 1er round lors de la revanche en 1965.</figcaption>
  </figure>
  </div>
  
  <section id="tribute-info">
     <ul>
       <h3>The greatest en quelques dates</h3>
      <li><a href="https://www.sportscollectorsdaily.com/wp-content/uploads/2016/06/Ali-1960-Olympic-gold-medal-ceremony.jpg" alt="Casius Clay se tient sur la plus haute marche du podium de boxeur mi-lourds aux Jeux olympiques de Rome, en 1960." target="_blank">L'ASCENSION:</a> C'est en <strong>1960</strong>, aux <strong>Jeux olympiques de Rome</strong>, que le monde fait la connaissance de <strong>Cassius Clay</strong>, un boxeur de <strong>18 ans</strong>, originaire du <strong>Kentucky</strong>, médaillé d'or chez les mi-lourds. Devenu professionnel, ce bavard flamboyant fait les délices des médias. Son magnétisme ne laisse personne indifférent.</li>

      <li><a href="https://img.src.ca/2016/06/03/1250x703/GI_160603_qt4si_mohamed-ali-sonny-liston_sn1250.jpg" alt="Cassius Clay, courant autour du ring pour célébrer sa victoire contre le champion du monde Sonny Liston, le 25 février 1965" target="_blank">UN PREMIER TITRE MONDIAL:</a> Il remporte ses <strong>19 premiers combats</strong> avant d'affronter le champion <strong>Sonny Liston</strong> pour le titre des poids lourds. À la surprise de tous, celui qui était considéré comme invincible abandonne après le <strong>7e round</strong>. À <strong>22 ans, Clay</strong> est champion du monde.</li>

      <li><a href="https://i.eurosport.com/2020/03/09/2792094-57625890-2560-1440.jpg" alt="Cassius Clay envoie Sonny Liston au tapis dès le 1er round, en 1965" target="_blank">SUPRÉMATIE CONFIRMÉE:</a> L'année suivante, <strong>Cassius Clay</strong> remporte haut la main un combat revanche contre le même <strong>Sonny Liston</strong> , qui s'écroule au tapis dès le <strong>1er round.</strong></li>

      <li><a href="https://img.src.ca/2016/06/03/1250x703/160603_628w5_mohamed-ali-malcolm-x_sn1250.jpg" alt="Malcolm X, à gauche, en compagnie de Muhammed Ali, à droite, le 1er mars 1964" target="_blank">UN HOMME DE CONVICTIONS:</a> Aussi habile avec les mots qu'avec ses poings, <strong>Cassius Clay</strong> devient le pourfendeur du racisme. Il se lie d'amitié avec <strong>Malcolm X,</strong> chef charismatique des <strong>Black Muslims</strong>. Converti à l'islam, il sera dorénavant <strong>Muhammed Ali</strong>.</li>
      
      <li>UN COMBAT AU CANADA: <strong>Muhammed Ali</strong> s'est battu deux fois au Canada. <a href="https://img.src.ca/2016/06/03/1250x703/160603_h64lm_ali-chuvalo_sn1250.jpg" alt="Muhammed Ali encaisse un coup du Canadien George Chuvalo, en 1966." target="_blank">Sur cette photo</a> le <strong>30 mars 1966</strong>, le Canadien <strong>George Chuvalo</strong>, blessé sous l'oeil droit, lance une gauche à son adversaire durant un combat de <strong>15 rounds</strong> au <strong>Maple Leaf Gardens de Toronto</strong>. <strong>Ali</strong> gagne par décision unanime des juges. Les deux hommes s'affronteront de nouveau à <strong>Vancouver</strong> en <strong>mai 1972</strong>, avec le même résultat.</li>

      <li><a href="https://img.src.ca/2016/06/03/1250x703/160603_nb764_mohamed-ali-proces_sn1250.jpg" alt="Muhammed Ali à sa sortie d'un immeuble fédéral de Houston, le 19 juin 1967, après une audience de son procès pour avoir refusé de s'enrôler dans l'armée américaine" target="_blank">REFUSER DE SE BATTRE:</a> Les convictions religieuses et l'engagement politique <strong>d'Ali</strong> dérangent les autorités. En <strong>1967</strong>, en pleine guerre du <strong>Vietnam</strong>, il refuse de s'enrôler. On le condamne alors à <strong>cinq ans de prison</strong> et on lui retire son titre de <strong>champion du monde des poids lourds. Ali</strong> porte la cause en appel, mais ce n'est que <strong>trois ans et demi</strong> plus tard que la <strong>Cour suprême</strong> lui donne raison.</li>

      <li><a href="https://img.src.ca/2016/06/03/1250x703/160603_9z18l_mohamed-ali-joe-frazier_sn1250.jpg" alt="Muhammed Ali tombe sous les coups de Joe Frazier" target="_blank">UN PREMIER REVERS:</a> De retour sur le ring en <strong>1971, Ali</strong> subit la <strong>première défaite</strong> de sa carrière contre <strong>Joe Frazier</strong> à l'issue de ce qu'il est désormais convenu d'appeler <strong>« le combat du siècle ».</strong></li>

      <li><a href="https://img.src.ca/2014/10/30/1250x703/PC_141030_ud1hh_foreman_ali_zaire_sn1250.jpg" alt="George Foreman va au tapis après avoir encaissé un solide coup de Muhammed Ali au 8e round" target="_blank">DE RETOUR AU SOMMET:</a> Déterminé à reprendre sa couronne, il en a l'occasion <strong>trois ans plus tard</strong>, en <strong>1974</strong>, face au nouveau champion <strong>George Foreman </strong>, plus jeune et plus fort. Le <strong>« Rumble in the jungle »</strong> se déroule à <strong>Kinshasa</strong>, au <strong>Zaïre</strong>. Appuyé sur les câbles, <strong>Ali</strong> encaisse les coups de massue de <strong>Foreman</strong>. Le champion finit par s'épuiser et, au <strong>8e round</strong>, la contre-attaque est décisive. <strong>Ali</strong> est de nouveau champion du monde.</li>

      <li><a href="https://i.pinimg.com/originals/21/d3/85/21d385281f0375d46400c80360f43515.jpg" alt="Muhammed Ali dans son coin, lors de son dernier combat, le 11 décembre 1981, à Nassau, au Bahamas" target="_blank">UN NOUVEL ADVERSAIRE: LE PARKINSON:</a><strong> Muhammed Ali</strong> remporte <strong>10 de ses 11 combats suivants</strong>. Il prend sa retraite le <strong>27 juillet 1979</strong> après avoir vaincu <strong>Leon Spinks</strong> en <strong>15 rounds</strong>, mais annonce peu de temps après son retour sur le ring face à <strong>Larry Holmes.</strong> Le duel est une véritable boucherie. Certains croient qu'il a contribué à l'apparition des premiers symptômes du <strong>Parkinson</strong> chez le boxeur, qui recevra un diagnostic officiel quelques années plus tard. Un ultime revers contre <strong>Trevor Berbick</strong>, en <strong>1981</strong>, le pousse à la retraite pour de bon.</li>

      <li><a href="https://img.src.ca/2016/06/03/1250x703/160603_0m0yw_mohamed-ali-atlanta_sn1250.jpg" alt="Muhammed Ali allume la vasque olympique des JO de 1996." target="_blank">LE COUP D'ENVOI DES JEUX D'ATLANTA:</a> Son combat contre la maladie ne l'empêche pas de s'engager dans différentes causes humanitaires. Aux <strong>Jeux olympiques de 1996</strong>, c'est à lui que revient l'honneur d'allumer la vasque.</li>

      <li><a href="https://img.src.ca/2016/06/03/1250x703/160603_7o2om_mohamed-ali-michael-j-fox-3_sn1250.jpg" alt="Muhammed Ali et Michael J. Fox" target="_blank">UN TÉMOIGNAGE ÉMOUVANT:</a> Le <strong>22 mai 2002 Muhammed Ali</strong> se présente devant un sous-comité du <strong>Sénat américain</strong> pour sensibiliser les élus à la maladie de <strong>Parkison.</strong> Mais le mal a déjà fait son oeuvre et l'empêche de parler. C'est une lobbyiste qui le fera pour lui, suivie du comédien <strong>Michael J. Fox</strong>, également atteint. Ce témoignage bouleversera les <strong>États-Unis.</strong></li>

      <li><a href="https://img.src.ca/2016/06/03/1250x703/160603_762jx_ali-bush-2_sn1250.jpg" alt="Muhammed Ali décoré par le président américain George W. Bush, en 2005." target="_blank">HOMMAGE DE LA MAISON-BLANCHE:</a> Décrit comme l'être humain le plus connu de la planète, <strong>Ali</strong> est fait <strong>« messager de la paix »</strong> par les <strong>Nations unies</strong>. Le <strong>9 novembre 2005</strong>, il reçoit la <strong>médaille présidentielle de la liberté</strong>, la plus haute récompense civile des <strong>États-Unis.</strong></li>
      </ul>
    
    <button>
      <a href="https://www.youtube.com/watch?v=Qpbh3-Q8o4Y" target="_blank"> Une vie hors du commun</a>
    </button>
  </section>
</main>

<footer><a class="footer" id="tribute-link" href="https://fr.wikipedia.org/wiki/Mohamed_Ali" target="_blank">La biographie d'une légende</a></footer>

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
              
            
!

CSS

              
                body {
   background: rgba(243, 240, 136, 0.3);
   font-family: sans-serif;
}

#main {
  background: rgba(153, 195, 231, 0.9);
  padding-bottom: 1em;
}

#title {
  display: flex;
  justify-content: center;
  font-size: 2em;
  text-shadow: 5px 4px 5px yellowgreen;
  padding-top: 0.5em;
  letter-spacing: 0.1em;
  margin-bottom: -1em;
}

h2 {
  text-align: center;
  margin-top: 1.3em;
  letter-spacing: 6px;
  font-size: 2em;
  text-shadow: 4px 3px 2px olivedrab;
  color: #7f2c3d;
  margin-bottom: -0.5em;
}

p {
  text-align: center;
  font-weight: 900;
  line-height: 1.7em;
  font-size: 1.6em;
  letter-spacing: 2px;
  text-shadow: 3px 4px 2px #0dfacc;
}

#image {
  max-width: 100%;
  width: 90%;
  height: auto;
  border: 5px ridge rgb(109, 55, 15);
  display: block;
  margin: 1em auto;
  border-radius: 1em;
}

#img-caption {
  font-size: 20px;
  margin-top: 1em;
  max-width: 100%;
  width: 85%;
  margin: auto;
  color: #00f;
  letter-spacing: 1px;
}

#tribute-info {
  display: flex;
  flex-direction: column; 
  width: 90%;
  margin: auto; 
}

h3 {
  letter-spacing: 2px;
  font-size: 1.6em;
  width: 100%;
  text-align: left;
  text-shadow: 4px 1px 9px red;
}

ul {
  list-style: none;
  margin-top: 30px;
  width: 80%;
}

li {
  font-size: 1.2rem;
  margin-bottom: 1.5em;
  line-height: 1.5em;
}

a {
  text-decoration: none;
  color: blue;
}

a:hover {
  color: rgba(255, 255, 255, 0.8); 
  font-size: 1em;
  border-bottom: 3px solid blanchedalmond;
}

strong {
  color: #7f2c3a;
}

button {
  display: block;
  margin: auto;
  text-align: center;
  border-radius: 5px;
}

button:hover {
  padding: 5px;
  background-color: orangered;
}


footer {
  display: flex;
  justify-content: center;
  padding: 2em;
  letter-spacing: 0.1em;
  background: #8E7A72;
  font-size: 1em;
  font-weight: bolder;
}

.footer {
  color: green;  
}

#tribute-link:hover {
  border-bottom: none; 
}

@media (max-width: 480px) {
  #image {
    width: 100%;
  }
  
  #tribute-info {
    width: 90%;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console