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

              
                <meta name="viewport" content="width=device-width, initial-scale=1.0">

<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bad+Script">

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<div class="container1">
  <div class="row">
    <div id="header" class="col-xs-12">
      <h1 class="text-center" style="font-family: Roboto; color: #4A6556; font-size: 70px; font-weight: bold">Ronaldo Luís Nazário de Lima</h1>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12">
      <img style="margin: auto; display: block; width: 900px;" src="https://i.ytimg.com/vi/YZEgLlRwi8c/maxresdefault.jpg" class="img-responsive" alt="Ronaldo-Brazil-World-Cup-2002."/>
    </div>
  </div>

  <div id="thirdrow" class="row">
    <div class="col-xs-12">
      <h2 id="quote" class="text-center"><span class="quotations">"</span> The best player I have ever played with? That’s Ronaldo, il Fenomeno.<br>I have seen il Fenomeno do things that nobody else has ever done <span class="quotations">"</span></h2>
      <h2 id="kaka" class="text-center"> - Kaká</h2>
    </div>
  </div>
</div>

<div class="container">
  <div id="fourthrow" class="row">
    <div class="col-xs-12">
      <p id="events-header"> Significant Events in Ronaldo's Life</p>
      <ul class="list-ul">
        <li><span class="dates">1976 - </span>Ronaldo is born to Nélio and Sônia. Ronaldo has one brother, Nélio. 
        </li>
        <li><span class="dates">1993 - </span>Ronaldo begins his career in football at the Brazilian club, Cruzeiro, making his professional debut at age 16. He went on to score 44 goals in 47 games, <span>earning him a move to Holland, for the football club PSV Einhoven.</span>
        </li>
        <li><span class="dates">1994 - </span>He spent two years at PSV, scoring 54 goals in 58 games, despite making playing 13 games during his second season due to knee injury.
        </li>
        <li><span class="dates">1996 - </span>A then world-record fee, Ronaldo moved to FC Barcelona for $19.5 million. During his brief one year stay, Ronaldo scored 47 goals in 49 games, winning the FIFA Player of the Year at only 20 years old. 
        </li>
        <li><span class="dates">1997 - </span>Due to contract negotiations, Ronaldo moved on and joined Inter Milan in Italy. This is where he developed his game to become a complete forward. He won the FIFA Player of the Year for a second time.
        </li>
        <li><span class="dates">1998 - </span>Ronaldo finally got a chance to play in a World Cup for his country in 1998 tournament held in France. He scored 4 goals and made 3 assist and reached the final. However, Ronaldo suffered an epileptic seizure hours before the final match. He insisted on playing, but was below his best performance as Brazil lost 3-0 to France. Ronaldo was crowned the best player of the tournament and awarded the Golden Ball.
        </li>
        <li><span class="dates">1999 - </span>His 1999 season at Inter was blighted by injury as Ronaldo ruptured a tendon in his knee and required surgery.
        </li>
        <li><span class="dates">2000 - </span>After rehab, tragedy struck again for Ronaldo as he injured his knee again after just seven minutes of his comeback. These knee injuries forced Ronaldo to miss nearly two full season and would contribute to health problems later on in his career.
        </li>
        <li><span class="dates">2002 - </span>Due to his knee injuries, Ronaldo played no part in Brazil's qualification for the World Cup. He was however selected for the team and made an amazing comeback scoring 8 goals in the tournament, won the World Cup for Brazil by scoring twice in the final against Germany, and winning the FIFA World Player of the Year award. These accomplishments earned him a move to Real Madrid FC in 2002.
        </li>
        <li><span class="dates">2002 -  </span>Ronaldo made up the 'Galacticos' era of Madrid and scored 23 goals his first season. However, from 2004-2006, injuries and weight problems held back Ronaldo's game time and eventually he signed for AC Milan in 2007.
        </li>
        <li><span class="dates">2006 - </span>Brazil entered the 2006 tournament as favorites and Ronaldo broke the record for most goals in a World Cup at the time with 15 goals. However, it was a dissapointing tournament for Ronaldo and Brazil, losing in the quarter-finals to France.
        </li>
        <li><span class="dates">2007 - </span>Ronaldo managed 9 goals in 20 games for AC Milan over a two year period, eventually ending his time with AC Milan after suffering another horrific knee injury.
        </li>
        <li><span class="dates">2009 - </span>Ronaldo headed back to his home country of Brazil to finish his career. He signed with Corinthians and won a Brazil Cup. Ronaldo scored 35 goals in 69 games.
        </li>
        <li><span class="dates">2011 - </span>The Brazilian Football Federation granted a 'farewell' match for Ronaldo. He played 15 minutes ending his Brazil National team career with 62 goals in 98 games. In February, Ronaldo announced his retirement in an emotional goodbye to the football world. 
        </li>
        <li><span class="dates">END &nbsp- </span>Ronaldo is considered one of the greats of the game and some place him above Pele and Maradona. One things for certain, he will always have a place among the Gods of Football.
        </li>
      </ul>      
    </div>
  </div>

  <div id="fifthrow" class="row">
    <div class="col-xs-12">
        <a id="button" href="https://en.wikipedia.org/wiki/Ronaldo" target="_blank" button type="button" class="btn">Learn More About Ronaldo</button></a>
    </div>
  </div>
</div>
  <div id="sixthrow" class="row">
    <div class="col-xs-12">
      <footer>
        <h4>Design and Code created by <a href="https://github.com/JoeKooner" target="_blank">Joe Kooner  </h4>
      </footer>
    </div>
  </div>
</div>
              
            
!

CSS

              
                body {
  background-color: #FCF5E6;
}

#thirdrow {
  background-color: #4A6556;
}

.quotations {
  font-size: 45px;
}

#quote {
  font-family: Bad Script;
  Color: white;
  margin-top: 20px;
  font-weight: bold;
}

#kaka {
  font-family: Bad Script;
  Color: white;
  font-weight: Bold;
  margin-bottom: 20px;
}

#fourthrow {
  text-align: center;
}

#events-header {
  margin-top: 40px;
  margin-bottom: 30px;
  font: 40px Roboto;
  color: #938653;
  text-align: center;
}

.dates {
  color: #938653;
  font-weight: bold;
  font-size: 20px;
}

.list-ul {
  list-style: none;
  font: 16px Roboto;
  line-height: 1.2em;
  color: #4A6556;
  text-align: justify;
  text-justify: inter-word;
  margin: 0px 30px;
  text-indent: -3.8em;
}

li {
  margin-top: 15px;
}

#button {
  background-color: #4A6556;
  font-family: Roboto, sans-serif;
  border: 3px solid #938653;
  color: white;
  border-radius: 15px;
  margin-top: 30px;
  text-align: center;
  margin-bottom: 30px;
}

#fifthrow {
  text-align: center;
}

#sixthrow {
  background-color: #4A6556;
}

footer {
  font-family: Bad Script;
  color: white;
  text-align: center;
}

footer a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  
}

footer a:hover {
  color: #938653;
  text-decoration: none;
}
              
            
!

JS

              
                
              
            
!
999px

Console