css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

            
              <h1 class="primary-text">LIONEL MESSI</h1>
<h2>The greatest footballer of all time.</h2>
<figure>
<div style="text-align: center"><img src="https://static.sportskeeda.com/wp-content/uploads/2014/09/barcelonas-argentinian-forward-lionel-messi-poses-with-his-4-fifa-ballon-dor-trophies-prior-to-the-spanish-copa-del-rey-1404807659-1411481622.jpg" ""alt"Messi with some of his awards" class="img-responsive">
  <figcaption>Messi posing with some of his awards</figcaption>
  </figure></div>
<div><h5>Lionel Andrés "Leo" Messi (Spanish pronunciation: [ljoˈnel anˈdɾes ˈmesi] ( listen); born 24 June 1987) is an Argentine professional footballer who plays as a forward for Spanish club FC Barcelona and captains the Argentina national team. <p>Often considered the best player in the world and rated by many in the sport as the greatest of all time, Messi is the only player in history to win five FIFA Ballon d'Or awards, four of which he won consecutively, and was the first to win three European Golden Shoes.<p>With Barcelona he has won eight La Liga titles and four UEFA Champions League titles, as well as six Supercopa de España titles, four Copas del Rey, three UEFA Super Cups, and three FIFA Club World Cups. Both a prolific goalscorer and a creative playmaker, Messi holds the records for most goals scored in La Liga, a La Liga season (50), a football season (73), and a calendar year (91), as well as the most goals in the Supercopa de España (12) and most goals in El Clásico (21), and also those for most assists made in La Liga and the Copa América. He has scored over 500 senior career goals for club and country, making him the 10th most prolific goalscorer of all time.

<p>Born and raised in central Argentina, Messi was diagnosed with a growth hormone deficiency as a child. At age 13, he relocated to Spain to join Barcelona, who agreed to pay for his medical treatment. After a fast progression through Barcelona's youth academy, Messi made his competitive debut aged 17 in October 2004. Despite being injury-prone during his early career, he established himself as an integral player for the club within the next three years, finishing 2007 as a finalist for both the Ballon d'Or and FIFA World Player of the Year award, a feat he repeated the following year. His first uninterrupted campaign came in the 2008–09 season, during which he helped Barcelona achieve the first treble in Spanish football. <p>At 22 years old, Messi won the Ballon d'Or and FIFA World Player of the Year award by record voting margins.

<p>Three successful seasons followed, with Messi winning three consecutive FIFA Ballons d'Or, including an unprecedented fourth. His personal best campaign to date was the 2011–12 season, in which he set the La Liga and European records for most goals scored in a single season, while establishing himself as Barcelona's all-time top scorer in official competitions in March 2012. <p>He again struggled with injury during the following two seasons, twice finishing second for the Ballon d'Or behind Cristiano Ronaldo, his perceived career rival. Messi regained his best form during the 2014–15 campaign, breaking the all-time goalscoring records in both La Liga and the Champions League in November 2014,and led Barcelona to a historic second treble.

<p>An Argentine international, Messi is his country's all-time leading goalscorer, with 57 international goals. At youth level, he won the 2005 FIFA World Youth Championship, finishing the tournament with both the Golden Ball and Golden Shoe, and an Olympic gold medal at the 2008 Summer Olympics. <p>His style of play as a diminutive, left-footed dribbler drew comparisons with compatriot Diego Maradona, who declared the teenager his successor. After making his senior debut in August 2005, Messi became the youngest Argentine to play and score in a FIFA World Cup during the 2006 edition, and reached the final of the 2007 Copa América, where he was named young player of the tournament. As the squad's captain from August 2011, he led Argentina to three consecutive finals: the 2014 World Cup, for which he won the Golden Ball, the 2015 and the 2016 Copas América.</
  h5></div>
<h4>For more information about this genius, visit his <a  href="https://en.wikipedia.org/wiki/Lionel_Messi">official website.</a></h4>
            
          
!
            
              h1{text-align: center;
color: blue;}
h2{text-align: center;}
h5{text-align: justify;
font-family: verdana;
font-size: 15px;
padding: 30px;}
a:link{color: green;}
body{background-color: silver;}
figcaption{font-style: italic;}
h4{padding: 10px;}
            
          
!
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.
Loading ..................

Console