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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                
<html>

<head>
  <title>Tribute Page</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>

  <div class="container">
    <div class="jumbotron">
      
      <h1>Dr. A. P. J. Abdul Kalam</h1>
      <h3><em>Scientist & 11th President of India</em></h3>
    <div class = "image">
      <img src="http://img01.ibnlive.in/ibnlive/uploads/2016/07/Kalam-Quote-1.jpg" alt="Kalam's pic">
     <p><em>known as People's President</em></p>
        </div>
     <div class="timeline"> 
      <h3>Here's a time line of Dr. Kalam's life:</h3>
        <!--<div class = "list">-->
        
        <ul>
          <li><b>1931</b>- Born and raised in Rameswaram, Tamil Nadu, India.</li>
          <li><b>1954</b>- Graduated in physics from University of Madras.</li>
          <li><b>1960</b>- Graduated in Aerospace engineering from Madras Institute of Technology and joined the Aeronautical Development Establishment of the Defence Research and Development Organisation (by Press Information Bureau, Government of India) as a scientist after becoming a member of the Defence Research & Development Service (DRDS).</li>
          <li><b>1969</b>- Kalam was transferred to the Indian Space Research Organisation (ISRO) where he was the project director of India's first Satellite Launch Vehicle (SLV-III) which successfully deployed the Rohini satellite in near-earth orbit in July 1980.</li>
          <li><b>1981</b>- Awarded Padma Bhushan by Government of India.</li>
          <li><b>1990</b>- Awarded Padma Vibhushan by Government of India.</li>
          <li><b>1992-1999</b>- Kalam served as the Chief Scientific Adviser to the Prime Minister and Secretary of the Defence Research and Development Organisation. </li>
          <li><b>1997</b>- Awarded  Bharat Ratna, India's highest civilian honour by Government of India.</li>
          <li><b>2002</b>- Kalam was elected as the 11th President of India in 2002 with the support of both the ruling Bharatiya Janata Party and the then-opposition Indian National Congress. Widely referred to as the "People's President", he returned to his civilian life of education, writing and public service after a single term. He was a recipient of several prestigious awards, including the Bharat Ratna, India's highest civilian honour.</li>
          <li><b>2015</b>- While delivering a lecture at the Indian Institute of Management Shillong, Kalam collapsed and died from an apparent cardiac arrest on 27 July 2015, aged 83.Thousands including national-level dignitaries attended the funeral ceremony held in his hometown of Rameshwaram, where he was buried with full state honours.</li>
        </ul>
       <p>If you have time, you should read more about this incredible human being and also known as "missile man of India" on his <a href="https://en.wikipedia.org/wiki/A._P._J._Abdul_Kalam" target="_blank">Wikipedia entry</a>.</p>
        <!--</div>-->
     </div> 
    </div>

  </div>
  <p>Written and coded by <a href="https://twitter.com/NRanjanWebDev" target="_blank">Nitish Ranjan</a></p>
</body>

</html>
              
            
!

CSS

              
                .container{
  padding-top: 50px;
  letter-spacing: 0.9px;
  text-align: center;
}

h1{
  font-size: 4em;
}
.image{
  padding: 30px 0 2.5px 0;
  background: #fff;
  
}
img{
  width: 94%;
  border-radius: 5px;
}
.timeline{
  padding-top: 15px;
  
}

ul{
  text-align: left;
}

p{
  text-align: center;
}
  


              
            
!

JS

              
                
              
            
!
999px

Console