Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              


<div class="container">
  <div  id="header">
    <h1>James J.Braddock</h1>
       <h2>"The Cinderella Man"</h2>
    </div>
  <div class="row silver-box">
      <div class="col-md-4">
      <div class="thumbnail">
    <img class="small-img" src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Jim_Braddock.jpg"  alt="James J.Braddock" >
    <div class="caption">"I want to go out like a Champion, I want to be carried out"</div>
  </div>
  </div>
  <div class="text">
      <h3>Career</h3>
  <p >James Walter "Cinderella Man" Braddock (June 7, 1905 – November 29, 1974) was an American boxer who was the world heavyweight champion from 1935 to 1937.
Fighting under the name James J. Braddock (ostensibly to follow the pattern set by two prior world boxing champions, James J. Corbett and James J. Jeffries), he was known for his powerful right hand, solid chin and comeback from a floundering career. He had lost several bouts due to chronic hand injuries and was forced to work on the docks and collect social assistance to feed his family during the Great Depression.<br>
    <a href="https://www.youtube.com/watch?v=69ZLbCBYqMQ" target="_blank" >In 1935 he fought Max Baer for the Heavyweight title and won.</a> For this unlikely feat he was given the nickname "Cinderella Man" by Damon Runyon. Braddock was managed by Joe Gould.Braddock was born in Hell's Kitchen in New York City on West 48th Street, within a couple of blocks of the Madison Square Garden venue, (Madison Square Garden Bowl was on 48th Street and Northern Boulevard in Queens, not in Hell's Kitchen) where he later became famous. He was the son of immigrant parents; Irish mother Elizabeth O'Tool and Anglo-Irish father Joseph Braddock. He stated his life's early ambition was to play football for Knute Rockne at the University of Notre Dame, but he had "more brawn than brains."<br>Braddock pursued boxing, turning pro at the age of 21, fighting as a light heavyweight. After three years, Braddock's record was 44–2–2 with 21 knockouts.<br>
In 1928, he pulled off a major upset by knocking out highly regarded Tuffy Griffiths. The following year he earned a chance to fight for the title, but he narrowly lost to Tommy Loughran in a 15-round decision. Braddock was greatly depressed by the loss and badly fractured his right hand in several places in the process. His career suffered as a result, as did his disposition.<br>His record for the next 33 fights fell to 11–20–2. With his family in poverty during the Great Depression, Braddock had to give up boxing for a little while and worked as a longshoreman. Due to frequent injuries to his right hand, Braddock compensated by using his left hand during his longshoreman work, and it gradually became stronger than his right. He always remembered the humiliation of having to accept government relief money, but was inspired by the Catholic Worker Movement, a Christian social justice organization founded by Dorothy Day and Peter Maurin in 1933 to help the homeless and hungry. After his boxing comeback, Braddock returned the welfare money he had received and made frequent donations to various Catholic Worker Houses, including feeding homeless guests with his family.</p>
      </div>


    <div class="white-box text">
      <h3>Personal life, death and legacy</h3>
        <p>Braddock married Mae Fox in 1930 and the couple had three children, James (Jay), Howard and Rosemarie. He enlisted in the U.S. Army in 1942 and became a 1st Lieutenant. Upon return, he worked as a marine equipment surplus supplier and helped construct the Verrazano Bridge in the early 1960s.After his death in 1974 at the age of 69, James J. Braddock was interred in the Mount Carmel Cemetery in Tenafly, New Jersey. He was inducted into the International Boxing Hall of Fame in 2001. James J. Braddock North Hudson County Park in North Bergen, New Jersey is named in his honor.

The 2005 biographical film Cinderella Man tells Braddock's story. Directed by Ron Howard, it stars Russell Crowe as Braddock and Renée Zellweger as his wife, Mae. The film had an estimated budget of $88 million and grossed $108.5 million worldwide. Crowe's performance earned him a Golden Globe nomination for Best Actor. Paul Giamatti, playing Braddock's manager Joe Gould, was nominated for the Academy Award for Best Supporting Actor. The role of neighbor Sara Wilson was played by Rosemarie DeWitt, who is Braddock's real-life granddaughter (daughter of Braddock's daughter Rosemarie Braddock and husband Kenny DeWitt). The film received mostly positive reviews.</p>
    <div class="thumbnail">
      <img  src="https://www.awesomestories.com/images/user/33ec611722b108fb813cf95b0f0650f1.jpg" alt="James with children and wife">
    <div class="caption text-center">James with children and wife </div>
  </div>





<div class="text">
  <h3>Quotes:</h3>
  <ul>
    <li>"It's like someone jammed an electric light bulb in your face, and busted it. I thought half my head was blowed off...When he knocked me down I could have stayed there for three weeks."</li>
    <li>"I have to believe that when things are bad I can change them." </li>
    <li>"I want to go out like a Champion, I want to be carried out"</li>
    <li>"You think you're telling me something? Like, what, boxing is dangerous, something like that? You don't think working triple shifts and at night on a scaffold isn't just as likely to get a man killed?"</li>
  </ul>
</div>
<div>
  <h3>Links:</h3>
  <ol>
    <li><a href="http://www.jamesjbraddock.com/" target="_blank">Official James J.Braddock website</a></li>
    <li><a href="http://boxrec.com/boxer/012072" target="_blank">Braddoc proffesional record</a></li>
    <li><a href="https://en.wikipedia.org/wiki/James_J._Braddock" target="_blank">Wikipedia page</a></li>
  </ol>
  </div>
      </div>
    </div>
</div>
<p class="text-center">Writen and coded by:<a href="https://www.freecodecamp.com/kicaubuntu" target="_blank">kicaUBUNTU</a></p>
</div>




            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Francois+One');

body{
  background-color:white;
  }

#header{
color: #c0b283;
text-align: center;
font-family:"Francois One",sans-serif;

}
.thumbnail{
  margin: 20px 10px;
}
.text{
  padding: 5px 5px;
  text-align:justify;
}
.text h3{
  text-align: center;
}

.small-img{
  width:400px;
  height:500px;
  border:3px solid white;
  border-radius: 5px;
}

.silver-box{
  background-color:#e5e2da;
  }

.white-box{
  background-color:#ede0b1;
  }
  .white-box h3{
    text-align:center;
  }
  .white-box .thumbnail{
    margin: 30px 100px;
  }

.black-text{
  color:black;
  font-size:14px;
  font-style:italic;
  }


ul{
  align-self: center;
  text-align:center;
}


ol{
  align-self: center;
  text-align:center;
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console