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

              
                <link href="https://fonts.googleapis.com/css?family=Baloo+Bhai|Indie+Flower|Orbitron" rel="stylesheet">


<div class=s style='background-color:rgb(100,200,200)' >
  <div class='color'>
    <p class='text-center font'><b> Dr. A.P.J Abdul Kalam</b></p>
    <h1 class='text-center p' style=color:rgb(200,100,0)>               <strong>The 'Missile' man of India</strong></h1>
  </div>
  <image   src='http://www.abdulkalam.com/kalam/theme/assets/images/Announcements.jpg' class='color img img-thumbnail ' style='background-color:rgb(100,100,100)' width=910px>
    <p class='q' style=color:rgb(0,0,0)><b><u>HERE'S A TIMELINE OF HIS LIFE</b></u></p> 
    <div class='x' style=color:rgb(100,20,100)>
      <ul>
        <li><p><strong>1931</strong> : Born Avul Pakir Jainulabdeen Abdul Kalam on October 15, in Rameswaram, Tamil Nadu.</li></p>
        <li><p><strong>1954</strong> : Graduates in Physics from Saint Joseph's College, Tiruchirappalli, in 1954.</li></p>
        <li><p><strong>1960</strong> : Gains degree in Aeronautical Engineering from Madras Institute of Technology.</li></p>
        <li><p><strong>1969</strong> : Transferred to ISRO from the DRDO.</li></p>
        <li><p><strong>1980</strong> : India enters the space club by putting the Rohini satellite in the near earth orbit with the first indigenous Satellite Launch Vehicle (SLV-III), developed under the stewardship of Dr. Kalam.</li></p>
        <li><p><strong>1980s-1990s</strong> : As the chief of the Integrated Guided Missile Development Programme, he was responsible for the development and operationalisation of AGNI and PRITHVI Missiles.</li></p>
        <li><p><strong>1992-1999</strong> : Works as Chief Scientific Advisor to the PM and Secretary of the DRDO.</li></p>
        <li><p><strong>1998</strong> : India conducts the Pokhran II nuclear tests in May with Dr. Kalam as the chief project coordinator.</li></p>
        <li><p><strong>1999-2001</strong> : Principal Scientific Advisor to the Government of India.</li></p>
        <li><p><strong>2002-2007</strong> : President of India</li></p>
</ul>
</div>
  <p class='q' style=color:rgb(0,0,0)><b><u>SOME OF HIS MOTIVATIONAL AND INSPIRATIONAL QUOTES</b></u></p> 
  <div class='x' style=color:rgb(100,20,100)>
    <ol>
      <li><p><i>Failure will never overtake me if my determination to succeed is strong enough.</i></p></li>
       <li><p><i>Don’t take rest after your first victory because if you fail in second, more lips are waiting to say that your first victory was just luck.</i></p></li>
       <li><p><i>All Birds find shelter during a rain. But Eagle avoids rain by flying above the Clouds.</i></p></li>
       <li><p><i>Man needs difficulties in life because they are necessary to enjoy the success.</i></p></li>
       <li><p><i>If you want to shine like a sun. First burn like a sun.</i></p></li>
       <li><p><i>All of us do not have equal talent. But , all of us have an equal opportunity to develop our talents.</i></p></li>
       <li><p><i>Be more dedicated to making solid achievements than in running after swift but synthetic happiness.</i></p></li>
       <li><p><i>Thinking should become your capital asset, no matter whatever ups and downs you come across in your life</i></p></li>
       <li><p><i>Without your involvement you can't succeed. With your involvement you can't fail.</i></p></li>
      </ul>
</div>
 <p class='q' style=color:rgb(0,0,0)><b><u>A FEW WORDS FROM MY SIDE</b></u></p>
<div class='x' style=color:rgb(100,20,100)>
  <p>Not all people in the world get the tribute of being loved by everyone. Dr Abdul Kalam was one such person whose marks remain in everyone’s hearts.</p>
 
  <p>Dr. Abdul Kalam, former President of India, is considered an honorable person of our country. Born in a simple family, on 15th October 1931, Abdul Kalam turned to be a scientist and administrator. As a scientist, his service to the Indian Space Research Organization (ISRO) is enormous. For the missile launches done under the accountability of Kalam, he is prominently called the “Missile Man of India”.</p>

<p>He not only served as a scientist; but also spent his time lecturing students of various institutes of India. The awards and honors Dr A.P.J. Abdul Kalam was innumerable; which includes the Bharat Ratna, Ramanujan Award, Veer Savarkar Award, Padma Bhushan and Padma Vibhushan.</p>

<p>Such a remarkable man departed his life while delivering a lecture at IIM, Shillong, on 27 July 2015.</p>
  </div>
<div class='y text-center'>
 <h3  style=color:rgb(0,0,0)><b> FOR FURTHER INFORMATION YOU CAN  READ HIS</b><a href='https://en.wikipedia.org/wiki/A._P._J._Abdul_Kalam'><h2 style=color:rgb(100,100,100)><u><b>Wikipedia Page</u></b></h2></a>
   <br></br>
  <h4><b><i>CREATED BY "GURKARAN SAHNI"</b></i></h4></h3> 
</div>

       
              
            
!

CSS

              
                .color{background-color:rgb(220,255,100);
  padding:10px;
  margin-top:100px;
  margin-left:400px;
  margin-right:400px;
}
.font{
  font-size:80px;
  font-family:'Baloo Bhai', cursive;
  color:rgb(150,100,150)
}
.img{
  border:10px solid rgb(0,0,0);
}
.s{
  margin-top:10px;
  margin-left:100px;
  margin-right:100px;
}
.p{
  font-family:'Indie Flower', cursive;
}
.x{
  background-color:rgb(255,255,255);
  font-size:20px;
  margin-top:40px;
  margin-left:400px;
  margin-right:400px;
}
.q{
 font-family:'Orbitron', cursive;
  background-color:rgb(220,255,100);
  font-size:30px;
  margin-top:30px;
  margin-left:400px;
  margin-right:400px;
}
.y{
  background-color:rgb(220,255,100);
  font-size:20px;
  margin-top:40px;
  margin-left:400px;
  margin-right:400px;
}

              
            
!

JS

              
                
              
            
!
999px

Console