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-fluid">
  <div class="row">
    <div class="col-xs-5 well left-well"><img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/564x/62/64/35/626435fde579ac6cf2dd5009fbdb3857.jpg"alt="Cristiano Ronaldo"</img></div>
    <div class="col-xs-6 right-well"><h1 class="text-center biography"><strong>Cristiano Ronaldo Biography</strong></h1>
    <ul class="list">
      <li class="list-item">Cristiano Ronaldo was born on 5 February 1985 in Madeira, Portugal, to Jose Dinis Aveiro and his wife Maria Dolores dos Santos Aveiro. His father was a gardener with the municipality while his mother worked as a cook. Ronaldo was the youngest child among four children; others being a son and two daughters.</li>
      <li class="list-item">In 1995, Cristiano Ronaldo joined the club ‘Nacional’ located in his home town of Madeira and following his good show for them he joined one of the biggest clubs in Portugal, namely, ‘Sporting CP’ after clearing a trial.</li>
      <li class="list-item">During his time at the Sporting CP Cristiano Ronaldo played for all the levels, i.e., under-16, under-17, under-18, B-team, and the first team before finally graduating into the senior team in the year 2002. He scored two goals in his league debut and announced his arrival on the big scene. His exploits for Sporting CP brought him into prominence and some of the biggest clubs in England like Liverpool, Arsenal and Manchester United started courting him.</li>
      <li class="list-item">Cristiano Ronaldo played in a UEFA Champions League against Manchester United, in 2003. The manager of the English club Sir Alex Ferguson was impressed by his performance and brought him to the club in the same year. In his first season at Machester United, Ronaldo scored three goals in the league and also scored in the FA Cup final to help the club win the trophy. A year after joining Manchester United, Ronaldo scored two goals in the European Championships for Portugal as the team ended runners up on home soil.</li>
      <li class="list-item">Cristiano Ronaldo became one of Manchester United’s most important players during his six year stint at the club and during that time the club became one of the most successful clubs in Europe as it won three league titles on the trot as well as the UEFA Champions League in 2008. Ronaldo scored 84 goals for the club in 196 league games and became one of the best players in the world.</li>
      <li class="list-item">In 2009, Cristiano Ronaldo became the most expensive player in the world after Spanish giant Real Madrid paid Manchester United £80 million to bring him to Madrid. He scored 33 goals in his very first season. In the following season he ended the Spanish league season with 40 goals, which became a record in the league’s history and helped Real Madrid win the Copa del Rey</li>
<li class="list-item">The seasons that started in 2013 was a particularly special one for Ronaldo as he scored a staggering 51 goals in the season and at the same time helped Real Madrid win their coveted 10th UEFA Champions League title. In the Champions League, Ronaldo scored 17 goals that made him the highest scorer ever in a single season of the tournament. He has a total of 89 goals in the tournament overall.
Read more at http://www.thefam</li>
<div class="row">
  <div class="col-sm-4 well manu"><img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/originals/81/6f/f4/816ff4a419e61c90c598ce81813d2d10.png"</img></div>
  <div class="col-sm-4 manutrophy"><ul>
      <li>Premier League: 2006–07, 2007–08, 2008–09</li>
      <li>FA Cup: 2003–04</li>
      <li>Football League Cup: 2005–06, 2008–09</li>
      <li>FA Community Shield: 2007</li>
      <li>UEFA Champions League: 2007–08</li>
      <li>FIFA Club World Cup: 2008</li>
  <div class="row">
    <div class="col-sm-4 well real"><img class="img-responsive realimage" src="https://s-media-cache-ak0.pinimg.com/originals/6f/58/05/6f5805db72f30f4c6b5052a5649bf670.png"alt="real"></img></div>
    <div class="col-sm-4 realtrophy">
    <li>La Liga: 2011–12</li>
    <li>Copa del Rey: 2010–11, 2013–14</li>
    <li>Supercopa de España: 2012</li>
    <li>UEFA Champions League: 2013–14, 2015–16</li>
    <li>UEFA Super Cup: 2014</li>
    <li>FIFA Club World Cup: 2014</li>
<div class="row">
    <div class="col-sm-4 well portugal"><img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/originals/8a/16/0c/8a160c9503ba953762a538902c7489c7.png"alt="portugal"</img></div>
    <div class="col-sm-4 pt"><ul>
      <li>UEFA European Championship: 2016</li>
      </ul> </div>
  <div class="row">
    <div class="col-xl-12 well text-center   link"><p><strong>If you want to learn more about Cristiano Ronaldo check this</strong> <a href="https://en.wikipedia.org/wiki/Cristiano_Ronaldo">link</a></p></div>


    <div class="row">
      <div class="col-xl-12 well coded text-center"><p class="me">Written and Coded by Hugo Machado</p></div>
              body {margin-top:60px; margin-left:40px; margin-right:40px;}

.left-well {margin-left:50px; padding:0px; border:0px;}
.right-well {margin-right:-15px; border:0px; background-color:white; }
.biography {font-size: 20px;}

.list-item {float: left;
    border: 0 !important;
    margin: 0px;
  padding: 10px 0px;}
.manu {padding:0px;margin-left:160px;}
.manutrophy {padding:0px; background-color:white; border:0px; padding-top:10px;padding-left:15px;}
.real {padding:0px;margin-left:160px;}
.realtrophy {background-color: white; border:0px;padding:0px; padding-top:10px;padding-left:15px;}
.portugal {padding:0px;margin-left:165px;}
.pt {padding-top:60px; padding-left:15px; background-color:white; border:0px; }
.link {background-color:white; border:0px;}
p {font-size:16px;}
.coded {background-color:white; border:0px;margin-bottom:-15px;}
.me {font-size:12px}
🕑 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.