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

              
                <div class="container-fluid">

  <div class="row">
    <div class="col-md-4 col-sm-6">
      <div class="well">
        <img class="img-responsive" src="http://images.indianexpress.com/2015/07/abdul-kalam-l.jpg" alt="Picture of APJ Abdul Kalam " />
      </div>

      <div class="well">
        <h5 class="text-center quick-facts">QUICK FACTS</h5>
        <dl class="text-center">
          <dt>NAME</dt>
          <dd>A.P.J. Abdul Kalam</dd>
          <dt>OCCUPATION</dt>
          <dd>Engineer, Scientist, President (non-U.S.)</dd>
          <dt>BIRTH DATE</dt>
          <dd>October 15, 1931</dd>
          <dt>DEATH DATE</dt>
          <dd>July 27, 2015</dd>
          <dt>EDUCATION</dt>
          <dd>Madras Institute of Technology</dd>
          <dt>PLACE OF BIRTH</dt>
          <dd>Dhanushkodi, Rameswaram, India</dd>
          <dt>PLACE OF DEATH</dt>
          <dd>Shillong, Meghalaya, India</dd>
          <dt>AKA</dt>
          <dd>A.P.J. Abdul Kalam</dd>
          <dd>Dr. A.P.J. Abdul Kalam</dd>
          <dt>NICKNAME</dt>
          <dd>Missile Man</dd>
          <dt>FULL NAME</dt>
          <dd>Avul Pakir Jainulabdeen Abdul Kalam</dd>
        </dl>
      </div>

    </div>

    <div class="col-md-8 col-sm-6">
      <div class="well">
        <h3 class="title">A.P.J. Abdul Kalam</h3> Engineer, Scientist, President (non-U.S.) (1931–2015)
        <hr>
        <p>
          A.P.J. Abdul Kalam is an Indian scientist and politician who served his country as president from 2002 to 2007.
          <br><br>
          <h4>Synopsis</h4> Born in 1931 in Dhanushkodi, India, A.P.J. Abdul Kalam joined India's defense department after graduating from the Madras Institute of Technology. He was a central figure in the development of the country's nuclear capabilities, and was hailed
          as a national hero after a series of successful tests in 1998. Kalam served as India's president for one term, and died of a heart attack on July 27, 2015.

          <br><br>
          <h4>Early Years</h4> Avul Pakir Jainulabdeen Abdul Kalam was born into a Muslim family on October 15, 1931, on the island of Dhanushkodi off the southeastern coast of India. He developed an early fascination with flight by watching birds, which developed into an
          interest in aeronautics after he saw a newspaper article about a British fighter plane.
          <br><br> Despite his modest beginnings – his dad built and rented boats – Kalam was a bright student who showed promise in science and mathematics. He attended St. Joseph's College, and went on to earn a degree in aeronautical engineering from
          the Madras Institute of Technology.

          <br><br>
          <h4>Rise to the Presidency </h4> His hopes of becoming a fighter pilot was dashed when he narrowly missed out on a spot with the Indian Air Force. Kalam instead joined the Defense Research and Development Organization (DRDO) as a senior scientific assistant in 1958. After
          moving to the newly formed Indian Space Research Organization (ISRO) in 1969, he was named project director of the SLV-III, the first satellite launch vehicle designed and produced on Indian soil.
          <br><br> Returning to the DRDO as director in 1982, Kalam implemented the Integrated Guided Missile Development Program. He then became the senior scientific adviser to India's defense minister in 1992, a position he used to campaign for the
          development of nuclear tests.
          <br><br> Kalam was a key figure in the May 1998 Pokhran-II tests, in which five nuclear devices were detonated in the Rajasthan Desert. Although the tests resulted in condemnation and economic sanctions from other world powers, Kalam was hailed
          as a national hero for his stanch defense of the country’s security.
          <br><br> In 2002, India's ruling National Democratic Alliance helped Kalam win an election against Lakshmi Sahgal and become India's 11th president, a largely ceremonial post. Known as the People's President, Kalam set a goal of conducting 500,000
          one-on-one meetings with young people over the course of his five-year term. His immense popularity led to him being nominated by MTV for a Youth Icon of the Year award in 2003 and 2006.
          <br><br> After leaving office in 2007, Kalam became a visiting professor at several universities. He formed the "What Can I Give Movement" in 2011 with the goal of creating a compassionate society, and in 2012, his efforts to improve healthcare
          led to the release of a tablet for medical personnel to use in remote areas.

          <br><br>
          <h4>Death and Legacy </h4> On July 27, 2015, Kalam suffered a massive heart attack while lecturing at the Indian Institute of Management and subsequently died at the age of 83.
          <br><br> Kalam was laid to rest on July 30 with full state honors in his native Tamil Nadu. In honor of the scientist and former president, the southeast Indian state government of Tamil Nadu created a "Dr. A.P.J. Abdul Kalam Award," which recognizes
          exceptional individuals who promote the sciences, students and humanities. The government has also established Kalam's birthday (October 15) as "Youth Renaissance Day." Discussion about building a large-scale memorial at his burial site is underway.
          <br><br> Among his many accolades, including honorary doctorates from 40 universities, he was granted the Padma Bhushan (1981), the Padma Vibhushan (1990) and the Bharat Ratna (1997) — India's highest civilian awards — for his contributions
          in modernizing government defense technology. He also wrote several books, including the autobiography Wings of Fire in 1999.</p>
        <hr>
        <p class="text-center">Read more about the Missile Man on <a href="https://en.wikipedia.org/wiki/A._P._J._Abdul_Kalam" target="_blank">Wikipedia </a></p>
        <hr>
      </div>
    </div>
  </div>
  <br>
  <h5 class="text-center">Written and Coded by <a href ="https://www.freecodecamp.com/cnvidya" target="_blank">Vidya CN</a></h5>
</div>
              
            
!

CSS

              
                .title{ font-size: 41.76px;
    line-height: 1em;
    margin-bottom: 5px;
}

hr{
    margin-top: 8px;
    background-color: rgba(51,51,51,.2);
    height: 2px;
    overflow: hidden;
  
}
.quick-facts {
    font-family: futura-pt,sans-serif;
    font-weight: 700;
    color:#AA9B97;
    text-transform: uppercase;
    line-height: 1.4em;   
}

.well{
  background-color:#e3e0cc;
}

body {
  margin:40px;
  padding:0;
}

dt{
  margin-top: 20px;
}
dl dd{
    margin-left: 0;
    display: block;
    font-family: Adelle,sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: none;
    letter-spacing: inherit;
    font-size: 14px;
    line-height: 1.5em;
    color: #333;
}
              
            
!

JS

              
                
              
            
!
999px

Console