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

              
                <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>FreeCodeCamp_Tribute_HelioGracie</title>
</head>

<div id="body">
 <body>
  <div id="heading">
    <header>
      <h1>
         <b> The Gracie Family </b>
          <p>Brazilian Jiu-Jitsu founding fathers.</p>
      </h1>

      <img src="https://s-media-cache-ak0.pinimg.com/originals/10/1c/5b/101c5b2993940edcc66d385eddc6afdf.jpg" alt="Picture of Helio Gracie standing infront of Red Jiu-Jitsu Federation of Guanabara: A picture that is most Brazilian Jiu-Jitsu Schools.">
       
    </header>
 </div>

  <div id="helioQuote">
   <p>
     <q>
       Always assume that your opponent is going to be bigger, stronger, and faster than you; so that you learn to rely on technique, timing and leverage, rather than brute strength.
     </q> - Helio Gracie.
   </p>
  </div>

  <div id="mainContent">
   <p>Before, If you sought specific knowledge, one would need to travel to remote pockets of brazil, to learn Brazilian Jiujitsu, or Japan if you wanted traditional Jiu-Jitsu. Seek out a grandmaster whom they would have to prove dedication to learning the arts. That was until Helio Gracie and his brothers, Carlos, and George. Founded the martial art of Gracie Jiu-Jitsu. With the help of Oswaldo Fadda and Luiz Franca, two other student, founded the martial art known as Brazilian Jiu-Jitsu.

    <br>

     Learning modern day Jiu-Jitsu is one of the most humbling, exciting, and fun things someone can do, from first hand experience, I am looking forward to continuing my training aswell.
    </p>
 </div>

 <div id="accomplishmentsList">
   <p>This is but a small list of the fights Helio had taken part of.</p>
   <ul>
   <li><b>1913</b> - Born October 1st. </li>
   <li><p><b>1929</b> - At age 16, Helio Gracie begins to teach Judo, and with the help of his family, and funding from a banker, founds the martial art known as Gracie Jiu-Jitsu.</p></li>
   <li> <p><b>1929</b> - Helio Gracie also learns Catch Wrestling under Famous Orlando Americo "Dudu" da Silva. Whom also taught his brothers, Carlos, and George. </p></li>


   <li><p><b>1932</b> - Helio begins his fighting carreer at age 18.
   <li>
       <p><b>1932</b> - Helio's first fight being January 16, 1932, against Boxer Antonio Portugal. In a Jiu-Jitsu vs boxing event. The fight lasted 40 seconds, and was won by submission.</p>
     </li>
     <li>
       <p><b>1932</b> - The second match of the year, would be in a Jiu-Jitsu Exhibition against Japanese Takashi Namiki in September. The match resulted in a draw.</p>
     </li>
     
     <li>
       <p><b>1932</b> - Gracie faced professional wrestler Fred Ebert. November 6th. Ebert outweighed him significantly as well as being a decorated freestyle wrestler. The match had no time limit, and lasted for almost two hours. Until having police intervention
         on the promoters behalf to sop the fight.</p>
     </li>

     <li>
       <p>This is just the tip of the iceburg. To see the entire story on Helio Gracie and the Gracie legacy follow the link below.</p>
     </li>
     <li>  <p> If you would enjoied the content presented here, and would like to find more information on Helio Gracie and the Gracie family, continue reading on <a href="https://www.wikiwand.com/en/H%C3%A9lio_Gracie">Wikipedia</a></p></li>
     </ul>
  </div>


     <div class=figure>
       <figure>
        <img src="http://infograficos.estadao.com.br/uploads/galerias/7790/78372.jpg" alt="Carlos practicing with Helio" width="136" height="200">
        <figcaption>
          <p>Helio and Carlos Gracie Practising the craft.</p>
        </figcaption
      </figure>
    </div>

      <!-- Quickly Thrown together, Before researching Tables. -->
      <div id="fightRecord">
        <table border="1" summary="fightRecord">
          <colgroup>
            <col span="1">
          </colgroup>
          <thead>
            <tr>
              <th> Fight date.</th>
              <th> Result of match.</th>
              <th> Opponent.</th>
              <th> Helio's fight record.
            </tr>
          </thead>
          <tbody>
            <tr>
              <td> 1932</td>
              <td> Win</td>
              <td>Antonio Portugal</td>
              <td>1-0-0</td>
            </tr>
            <tr>
              <td> 1932</td>
              <td> Draw</td>
              <td> Takashi Namiki</td>
              <td> 1-0-1</td>
            </tr>
            <tr>
              <td> 1932</td>
              <td> Draw</td>
              <td> Fred Ebert </td>
              <td> 1-0-2</td>
            </tr>
            <tr>
              <td> 1934.</td>
              <td>Draw</td>
              <td>Waldek Zbyszko</td>
              <td> 1-0-3</td>
            </tr>
            <tr>
              <td> 1934 </td>
              <td>Win</td>
              <td>Taro Miyake</td>
              <td> 2-0-3</td>
            </tr>
            <tr>
              <td>1935</td>
              <td>Win</td>
              <td>Orlando Americo "Dudu" da Silva</td>
              <td>3-0-3</td>
            </tr>
            <tr>
              <td>1935</td>
              <td>Draw</td>
              <td>Yasuiti Ono</td>
              <td>3-0-4</td>
            </tr>
            <tr>
              <td>1936</td>
              <td>Draw</td>
              <td>Takeo Yano</td>
              <td>3-0-5</td>
            </tr>
            <tr>
              <td>1936</td>
              <td>Win</td>
              <td>Massagoichi</td>
              <td>4-0-5</td>
            </tr>
            <tr>
              <td>1936</td>
              <td>Draw</td>
              <td>Yassuiti Ono</td>
              <td>4-0-6</td>
            </tr>
            <tr>
              <td>1937</td>
              <td>Win</td>
              <td>Erwin Klausner</td>
              <td>5-0-6</td>
            </tr>
            <tr>
              <td>1937</td>
              <td>Loss</td>
              <td>Orlando Americo "Dudu" da Silva</td>
              <td>5-1-6</td>
            </tr>
            <tr>
              <td>1937</td>
              <td>Win</td>
              <td>Espingarda</td>
              <td>6-1-6</td>
            </tr>
            <tr>
              <td>1950</td>
              <td>Win</td>
              <td>Landulfo Caribe</td>
              <td>7-1-6</td>
            </tr>
            <tr>
              <td>1950</td>
              <td>Win</td>
              <td>Azevedo Maia</td>
              <td>8-1-6</td>
            </tr>
            <tr>
              <td>1951</td>
              <td>Draw</td>
              <td>Yukio Kato</td>
              <td>8-1-7</td>
            </tr>
            <tr>
              <td>1951</td>
              <td>Win</td>
              <td>Yukio Kato</td>
              <td>9-1-7</td>
            </tr>
            <tr>
              <td>1951</td>
              <td>Loss</td>
              <td>Masahiko Kimura</td>
              <td>9-2-7</td>
            </tr>
            <tr>
              <td>1954</td>
              <td>Draw</td>
              <td>Mestre Artur Emidio</td>
              <td>9-2-8</td>
            </tr>
            <tr>
              <td>1955</td>
              <td>Loss</td>
              <td>Valdemar Santana</td>
              <td>9-3-8</td>
            </tr>
            <tr>
              <td>1967</td>
              <td>Win</td>
              <td>Baldomiro dos Santo Ferrira</td>
              <td>10-3-8</td>
            </tr>
          </tbody>
        </table>
        </div>
         </div>
        <div class="footer">
         <footer>
           <p>Written and coded by <a href="https://twitter.com/pdxdev503">Anthony Branze</a>
       </footer>
       </div>
       </div>
      </body>

              
            
!

CSS

              
                html {
  background: lightgrey;
  font-size: 14px;
  margin:10px;
}

#heading {
  text-align: center;
  
}

img{
  max-width:100%;
}

#body{
  background-color:#fff;
  margin: 1.5rem;
  padding: 1.5rem;
  border: thin black solid;
 
}

#helioQuote{
 
  margin: .5rem;
  padding: .5rem;
  text-align: center;
}


#mainContent{
  text-align:center;
  }
#accomplishmentsList{
  text-align:center;
}

ul  li {
list-style: none;
  text-align:center;
}

#fightRecord{
  margin: .5rem;
  padding: .5rem
  
}

@media screen and (max-width: 200px) {
  table {
    border: 1;
  }
figure{
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: larger;
  text-indent: 0;
  border: thin silver solid;
  border-top: none;
  margin: .2rem;
  padding: .2rem;
  padding-top: 0;
  display: table;
  background-color: #fff;
}

figcaption {
  background-color: #ffff;
  display: table-caption;
  caption-side: top;
  border: thin silver solid;
  border-bottom: none;
  padding: 0.5rem;
}

img.scaled{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.footer{
  width: 100%;
  background-color: lightgrey;
  text-align: center;
  
}
              
            
!

JS

              
                
              
            
!
999px

Console