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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <!-- This pen is a tribute to a great man and inspiration to many, Dr APJ Abdul Kalam. The person who inspired me to persuit my dreams without looking back.

In this pen I am including some of the best inspirational Quotes delivered by Dr. Kalam along with some fantabuluous works and achievements of Kalam sir

I love him alot and sure every Indian too as he is an inspiration to all young generation.-->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

<div class="container-fluid">
  <h1 class="text-primary text-center beautiful-text">Dr. APJ Abdul Kalam</h1>
  <h3 class="text-muted text-center">A Small Tribute to the Missile Man of India!</h3>
  <br/>
  <br/>
  <div class="row">
    <div class="col-xs-5 col-sm-6 col-lg-8">
      <div class="text-justify">
        <h3 id="target1"><em>Quotes To Inspire You:</em></h3>
        <br/>
        <h4 id="text1"><em>"Man needs his difficulties because they are necessary to enjoy success."</em></h4>
        <br/>
        <h4 id="text2"><em>"Look at the sky. We are not alone. The whole universe is friendly to us and conspires only to give the best to those who dream and work."</em></h4>
        <br/>
        <h4 id="text3"><em>"All BIRDS find shelter during a rain but EAGLE avoids rain by flying above the clouds."</em></h4>
        <br/>
        <h4 class="text-color2"><em>End is not the end, in fact E.N.D means <span class="text-color1">"Effort Never Dies"</span>.</em></h4>
      </div>
      <br/>

      <h4>...and more to come at <a href="https://goo.gl/nYQl3F" target="_blank">most popular inspirational quotes</a> by Dr. Kalam.</h4>
    </div>
    <div class="col-xs-7 col-sm-6 col-lg-4">
      <a href="https://goo.gl/MpfJZt" title="Click to get more images of Dr. Kalam" target="_blank"><img class="img-responsive img-rounded img-margin" src="https://goo.gl/g6ehgB" alt="Dr. Kalam Thinking"></a>
    </div>
  </div>
  <hr/>
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12">
      <div class="jumbotron">
        <h4>A short glimpse of his entire life:</h5>
          <ul class="good-font text-justify">
            <li><b>A</b>vul <b>P</b>akir <b>J</b>ainulabdeen Abdul Kalam was born in <b>15 October 1931</b> in Rameswaram.</li>
            <li>He was 11th president of India from <b>2002 to 2007</b>.</li>
            <li>He is also known as Missile Man of India because of his work on the development of <b>ballistic missile</b> and <b>launch vehicle technology</b>.</li>
            <li>He was also the recipent of India's Highest Civilian Award <b>Bharat Ratna</b>.</li>
            <li>Kalam started his career by designing a small hovercraft.</li>
            <li>In <b>1969</b> he was transferred to ISRO where he was the project director of India's first Satellite Launch Vehicle (SLV-III).</li>
            <li>Kalam also served as the Chief Scientific Advisor to the Prime Minister and Secretary of the Defence Research and Development Organisation from <b>July 1992 to December 1999</b>.</li>
            <li>In <b>1998</b>, Kalam along with the cardiologist Soma Raju developed a low cost coronary stent, named the <b>"Kalam-Raju Stent"</b>.</li> 
            <li>He never owned a television and was in the habit of rising at 6:30 or 7:00 A.M and sleeping by 2 A.M.</li>
            <li>There was Hindi film made in <b>2011</b> named <i>I am Kalam</i> where Kalam is portrayed as a positive influence on a poor but bright rajasthani boy named Chhotu, who renamed himself Kalam in honour of his idol.</li>
            <li>Kalam also recieved 7 Honorary doctorates from 40 universities.</li>
            <li>Some of the famous books written by Dr. Kalam: <i>India 2020, Ignited Minds, Mission India, Inspiring Thoughts, Indomitable Spirit, Envisioning an Empowered Nation, You are Born to Blossom</i> and many more...</li>
            <li>He died on <b>27th July 2015</b> at the age of 83 while delivering a lecture on "Creating a Livable Planet Earth" at the Indian Institute of Management Shillong, Meghalya India.</li>
            <br/>
            <h3 class="text-muted">Wait a minute! It's not an end yet</h4>
        <br/>
        <h4>Find out more about his personal life, education, career and much more in this <a href="https://goo.gl/C7Ox3n" target="_blank">Wikipedia</a> entry.</h4>
        </ul>
      </div>
    </div>
  </div>
  <hr/>
  <h6 class="text-center">Coded with <span class="fa fa-heart heart-blink"></span> by <a href="https://goo.gl/nDrxqC" target="_blank">Jaspreet Singh</a></h6>
</div>
              
            
!

CSS

              
                body {
  font-family: comic-sans;
}

.good-font {
  font-family: Times-New-Roman;
  font-style: normal;
  font-size: 20px;
}

.text-color1 {
  color: #FFA07A;
}

.text-color2 {
  color: rgb(128, 0, 0);
}

#text1 {
  color: rgb(255, 165, 0);
}

#text2 {
  color: rgb(1, 211, 253);
}

#text3 {
  color: rgb(72, 213, 30);
}

@keyframes heart {
  from {color: black;}
  to {color: red;}
}

.heart-blink {
  animation-name: heart;
  animation-duration: 4s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
              
            
!

JS

              
                $(document).ready(function() {
    $(".beautiful-text").addClass("animated zoomIn");
    $("#target1").addClass("animated slideInRight");
  });
              
            
!
999px

Console