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.

            
              <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>A tribute to Sangakkara</title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Abel&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Dancing+Script|Overpass&display=swap" rel="stylesheet">
    </head>
    <body>
        <main id="main">
            <header id="page-header">
               <h1 id="title">Kumar Sangakkara</h1> 
               <br>
               <p>Sri Lankan legendary cricketer </p>
            </header>
            <div id="img-div">
                <figure id="img-figure">
                    <img id="image" src="https://www.cricket.com.au/~/-/media/News/2014/12/14kumar.ashx?w=1600" alt="A picture of Kumar Sangakkara">
                    <figcaption id="img-caption">Sangakkara plays lead hand in farewell victory</figcaption>
                </figure>
            </div>
            <section id="tribute-info">
               <h2>Here's a time-line of Kumar Sangakkara:</h2> 
               <ul>
                   <li><b>1977</b> - Born in Matale, Sri Lanka</li>
                   <li><b>1983</b> - Received his primary and secondary education at Trinity College, Kandy</li>
                   <li><b>1996</b> - Awarded the highest honor of Trinity College, the Ryde Gold Medal</li>
                   <li><b>2000</b> - At the age of 22, he made his test debut and finished it with at an good average of 66.33</li>
                   <li><b>2002</b> - He scored his first double-centuary against Pakistan and secured victory for Sri Lanka</li>
                   <li><b>2004</b> - He made a partnership of 438 for the 2nd wicket—4th highest in the world—against Zimbabwe in 2004. In that game, he scored 270, his first 250+ score</li>
                   <li><b>2006</b> - In July 2006, Sangakkara made his second-highest Test score to-date (287) against South Africa. In a record-breaking partnership with Mahela Jayawardene, he set up the world record for the highset partnership in Test cricket—624 runs—in this match.</li>
                   <li><b>2009</b> - At the age of 31 and with the experience of 80 Tests and 246 ODIs, Sangakkara succeeded as Sri Lanka's captain in all formats of the game.</li>
                   <li><b>2011</b> - Led his team to finals of WCC and was named as captain and wicket keeper of the 'Team of the Tournament' for the 2011 World Cup by the ICC</li>
                   <li><b>2012</b> - He was honored as one of the Wisden Cricketers of the Year</li>
                   <li><b>2014</b> - He hits his highest test score to date with 319 against Bangladesh</li>
                   <li><b>2014</b> - Scored 51 not out off just 33 balls making his team win their second ICC trophy since 1996</li>
                   <li><b>2015</b> - On 27 June 2015, Sangakkara officially announced his retirement from all forms of national cricket</li>
                   <li><b>2015</b> - Sri Lanka Rupavahini Corporation recognized Sangakkara as the "Player of the Century" citing many of Sangakkara's past memories and achievements</li>
                   <li><b>2017</b> - Kumar Sangakkara made his ICC TV commentary debut during the 2017 ICC Champions Trophy </li>
                   <li><b>2018</b> - Kumar Sangakkara has joined SkySports for commentary throughout the English summer of 2018</li>
                   <li><b>2019</b> - Sangakkara becomes the first non-British MCC President since the club was founded in 1787</li>
               </ul>
               <br>
               <strong><q>We should not allow fear or anxiety to stop us from doing something. If you think through something well and prepare thoroughly, you can do a lot of things you think you can't </q> -  Kumar Sangakkara</strong>
            </section>
            <footer id="footer">
                <h3>You can check out about this wonderful sportman who led his nation to the greatest stages on his social media</h3>
                <a href="https://www.facebook.com/Official.Kumar.Sangakkara/" target="_blank"><img src="https://img.icons8.com/color/48/000000/facebook-new.png" alt="Sangakkara-FB"></a>
                <a href="https://twitter.com/KumarSanga2" target="_blank"><img src="https://img.icons8.com/color/48/000000/twitter.png" alt="Sangakkara-Twiiter"></a>
                <a id="tribute-link" href="https://en.wikipedia.org/wiki/Kumar_Sangakkara" target="_blank"><img src="https://img.icons8.com/ios/50/000000/wikipedia.png" alt="Sangakkara-Wiki"></a>
                &copy; ThanoshanMV, 2019
            </footer>
        </main>
      <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
    </body>
</html>
            
          
!
            
              *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#main{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    background-color: #EEEEEE;
    font-family: 'Abel', sans-serif;
}
#page-header{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    padding: 40px;
    background-color: #5d1072;
    color: #f2e71a;
    font-size: 2.5vmax;
    font-family: 'Dancing Script', cursive;
}
#image{
    max-width: 100%;
    display: block;
    height: auto;
    margin: 0 auto;
}
#img-caption{
    text-align: center;
}
#tribute-info{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80vw;
    padding: 20px;
    font-size: 2.3vmax;
}
#tribute-info li{
    margin: 10px;
}
#footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    padding: 20px;
    width: 100vw;
    background-color: #5d1072;
    color: #f2e71a;
    font-size: 2.5vmax;
    font-family: 'Overpass', sans-serif;
}
#footer a:hover{
    transform: translatex(10px);
}
/* For desktops and laptops */
@media only screen and (min-width: 768px) {
    #page-header{
        font-size: 2.3vh;
    }
    #tribute-info{
        font-size: 2vh;
    }
    #footer{
        font-size: 2vh;
    }
}
            
          
!
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