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

              
                <html>
<head>
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>

<body id="main">
    <h1 id="title"><em><center>A. P. J. Abdul Kalam</center></em></h1>

  <div id="img-div">
    <div id="img-div">
    <center><img id="image" src="https://i2.wp.com/kashmirobserver.net/wp-content/uploads/2020/07/APJ-Abdul-Kalam.png?resize=375%2C375&ssl=1" width="300" height="309" / target=_blank></center>
    
    <center><div id="img-caption">"Missile Man of India"</div></center>

    <div id="tribute-info">
        <h4>
            <p><strong><em>Avul Pakir Jainulabdeen Abdul Kalam</em></strong>, better known as APJ Abdul Kalam, was an illustrious scientist turned statesman who served as the 11<sup>th</sup> President of India from 2002 to 2007. Kalam spent more than forty years as a science administrator and scientist mainly at the Indian Space Research Organization (ISRO) and Defence Research and the Development Organization (DRDO). He was closely associated with the military missile development efforts and civilian space programme of India. For his work on launch vehicle technology and development of ballistic missile, he was given the pseudonym of ‘The Missile Man of India.’ In 1998, he played a prominent role in Pokhran-II Nuclear Tests.</p>
            <p>In 2002, he was elected the 11th President of the country and became widely known as the ‘People’s President.’ After serving his presidential term he pursued what he loved most – teaching, writing and reading. For his achievements and contributions as a scientist, he was honoured with the ‘Bharat Ratan Award,’ India’s highest civilian honour.</p>
            <p>He left for the heavenly abode on July 27, 2015, while delivering a lecture at the Indian Institute of Management (IIM) Shillong. He was laid to rest with full state-honours and his funeral was attended by thousands of people including national-level dignitaries.</p>

            <ul>
                <li>
                    <strong>President of India:</strong> July 25, 2002 – July 25, 2007 (11<sup>th</sup> President of India)
                </li>
                <li>
                    <strong>Date of Birth:</strong> October 15, 1931
                </li>
                <li>
                    <strong>Place of Birth:</strong> Rameswaram, Ramnad District, Madras Presidency, British India
                </li>
                <li>
                    <strong>Parents:</strong> Jainulabdeen (Father) and Ashiamma (Mother)
                </li>
                <li>
                    <strong>Spouse:</strong> Remained Unmarried
                </li>
                <li>
                    <strong>Education:</strong> St. Joseph’s College, Tiruchirappalli; Madras Institute of Technology
                </li>
                <li>
                    <strong>Profession:</strong> Professor, Author, Scientist
                </li>
                <li>
                    <strong>Died:</strong> July 27, 2015
                </li>
                <li>
                    <strong>Place of Death:</strong> Shillong, Meghalaya, India
                </li>
                <li>
                    <strong>Awards:</strong> Bharat Ratna (1997), Padma Vibhushan (1990), Padma Bhushan (1981)
                </li>
            </ul>
        </h4>
    </div>

    <nav>
        <a href="#about">About</a>
        <a href="#careers">Career</a>
        <a href="#awards">Awards</a>
        <a href="#writings">Writings</a>
        <a href="#death">Death</a>
        <a href="#facts">Facts</a>
    </nav>
    
    <div id="about">
        <h2><strong><em>About</em></strong></h2>
        <p> APJ Abdul Kalam was born into a poor Tamil Muslim family in the pilgrimage town of Rameswaram, Tamil Nadu, on October 15, 1931. His mother, Ashiamma, was a housewife and his father, Jainulabdeen, was an imam of a local mosque and a boat owner. He was the youngest in the family with four elder brothers and a sister.</p>
        <p>Though, the family was not financially affluent yet all the children were raised in an atmosphere that was full of love and compassion. In order to add to the family’s income, Kalam had to sell newspapers during his early years.</p>
        <p>He was an average student during his school, but possessed a strong desire to learn and was very hard working. He loved mathematics and spent hours studying the subject. He pursued his education from ‘Schwartz Higher Secondary School,’ and then graduated from ‘Saint Joseph’s College, Tiruchirappalli,’ in 1954. He wanted to become a fighter pilot but his dream could not be fulfilled as here were only eight positions available in the IAF and he secured the ninth place.</p>

    </div>
    
    <div id="careers">
            <h2><strong><em>Careers</em></strong></h2>
        <ul>

            <li>
                <h3>As a Scientist</h3>
                <p>In 1960, he graduated from the ‘Madras Institute of Technology,’ and joined as a scientist at the ‘Aeronautical Development Establishment,’ after becoming a member of the ‘Defence Research and Development Service.’ Kalam also worked under the eminent space scientist Vikram Sarabhai while he was a part of ‘INCOSPAR’ committee. Kalam was transferred to the ‘Indian Space Research Organization (ISRO)’ in 1969. He became the project head of the country’s foremost Satellite Launch Vehicle (SLV-III). In July 1980, SLV-III deployed the ‘Rohini’ satellite successfully near-earth orbit under Kalam’s leadership.</p>
                <p>Kalam was a part of a number of projects, including ‘Project Devil,’ in 1970. Though the project was not successful, yet it laid the foundation for the development of the ‘Prithvi Missile,’ in 1980. He was also associated with ‘Project Valiant.’</p>
                <p>In 1983, Kalam returned to DRDO as its chief as he was asked to lead the ‘Integrated Guided Missile Development Program’ (IGMDP).</p>
                <p>In May 1998, he played a key role in carrying out ‘Porkhran-II’ nuclear tests by India. The success of these nuclear tests made Kalam a national hero and his popularity went skyrocketing.</p>
                <p>As a technical visionary, he made several recommendations in the fields of technological innovations, agriculture, and nuclear energy to make India a developed nation by 2020.</p>
            </li>

            <li>
                <h3>As President</h3>
                <p>In 2002, Kalam was chosen the Presidential nominee by the ruling National Democratic Alliance (NDA), and he was elected the President. He became the 11th President of India on July 25, 2002 and served the position till July 25, 2007.</p>
                <p>He also became the third President of India to have received ‘Bharat Ratna’ before assuming the office of the President.</p>
                <p>Due to his style of working and interaction with common people, especially the youth, he was affectionately called ‘The People’s President.’ According to Dr. Kalam, the most arduous decision he had taken during his tenure was that of signing the ‘Office of Profit Bill.’</p>
                <p>During his tenure as President, he faced criticism for his inaction in deciding the fate of mercy petitions that were submitted to him. Out of the 21 mercy petitions, he acted only on one mercy plea. In 2005, he recommended for President’s rule in Bihar, which also became a controversial decision.</p>
            </li>

            <li>
                <h3>As an Academician</h3>
                <p>After the end of his presidential term, he became a visiting professor at the ‘Indian Institute of Management (IIM), Ahemdabad,’ ‘Indian Institute of Management ((IIM), Indore,’ and the ‘Indian Institute of Management (IIM), Shillong.’ He served as a professor of Aerospace Engineering at Anna University, as chancellor at the ‘Indian Institute of Space Science and Technology Thiruvananthapuram,’ an honorary fellow of ‘Indian Institute of Science (IISc), Bangalore,’ and an adjunct at a number of other research and academic institutes across the country. He also taught technology at ‘Anna University,’ and ‘Banaras Hindu University,’ and taught information technology at the ‘International Institute of Information Technology (IIIT), Hyderabad.’</p>
                <p>With an aim to defeat corruption and bring efficiency, Kalam launched a program for the youth, called ‘What Can I Give Movement,’ in 2012.</p>
            </li>

        </ul>

    </div>

    <div id="awards">
            <h2><strong><em>Awards</em></strong></h2>

            <ul>
                <li>
                        Kalam was honoured with the prestigious ‘Bharat Ratan,’ ‘Padma Vibhushan,’ and ‘Padma Bhushan’ from the Government of India.
                </li>
                <li>
                        He was bestowed upon the ‘Indira Gandhi Award for National Integration’ by the Government of India in 1997.
                </li>
                <li>
                        He was the recipient of Veer Savarkar Award.
                </li>
                <li>
                        In 2000, he was bestowed with ‘Ramanujan Award’ by the ‘Alwars Research Centre.’
                </li>
                <li>
                        In 2007, he received the ‘Kings Charles II Medal’ from the Royal Society.
                </li>
                <li>
                        The ASME Foundation, USA, honoured Kalam with the Hoover Medal.
                </li>
                <li>
                        He also received honorary doctorate from 40 universities.
                </li>
                <li>
                        The United Nations recognized Kalam’s 79<sup>th</sup> birthday as World Students’ Day.
                </li>
                <li>
                        In 2003 and 2006, he was nominated for the ‘MTV Youth Icon of the Year.’
                </li>
            </ul>

    </div>

    <div id="writings">
            <h2><strong><em>Writings</em></strong></h2>
            <p>Dr Kalam authored and co-authored a number of instructional and inspirational books, including ‘India 2020: A Vision for the New Millennium,’ ‘Wings of Fire,’ ‘The Luminous Sparks: A Biography in Verse and Colours,’ ‘Mission of India: A Vision of Indian Youth,’ ‘You Are Born To Blossom,’ ‘Ignited Minds: Unleashing the Power within India,’ ‘Guiding Souls,’ ‘Inspiring Thoughts,’ ‘Turning Points: A Journey Through Challenges,’ ‘Transcendence My Spiritual Experiences,’ ‘Beyond 2020: A Vision for Tomorrow’s India,’ and various others.</p>

    </div>

    <div id="death">
            <h2><strong><em>Death</em></strong></h2>
            <p>Kalam went to IIM Shillong to deliver a lecture on ‘Creating a Livable Planet Earth,’ on July 27, 2015. While climbing a flight of stairs, he expressed some discomfort, but made his way to the auditorium. Only five minutes into the lecture, around 6:35pm IST, he collapsed in the lecture hall. He was taken to ‘Bethany Hospital’ in a critical condition. He was kept in the intensive care unit but lacked signs of life. At 7:45pm IST, he was declared dead due to cardiac arrest.</p>
            <p>Kalam’s body was airlifted in an Indian Air Force helicopter and was flown to New Delhi on July 28. Numerous dignitaries and masses paid homage to him at his residence at 10 Rajaji Marg. Kalam’s body, wrapped in the national flag, was then flown to the town of Mandapam, from where an army truck took it to his home town of Rameswaram. His body was displayed at Rameswaram in front of a bus station to allow people to pay their last respect to the departed soul. On July 30, 2015, the former President was laid to rest with full state honours at Rameswaram’s Pei Karumbu Ground. Kalam’s last rites were attended by more than 350,000 people.</p>

    </div>

    <div id="facts">
            <h2><strong><em>Facts</em></strong></h2>
            <ul>
                <li>A man who spent approximately five decades in public service that included one stint as ‘The President,’ Kalam owned precious little. He owned no property, TV, fridge, car, AC, but owned approximately 2,500 books, six shirts, a pair of shoes, a wristwatch, four trousers and three suits.</li>
                <li>He never accepted any gifts from anyone, except books.</li>
                <li>He never charged any fee for the lectures that he delivered within or outside the country.</li>
                <li>His love for technology is no secret and he kept an eye on all the latest developments primarily through radio.</li>
                <li>He was a vegetarian and was always happy with what he was served.</li>
                <li>He was a pious soul and particular about his morning prayer, which he never missed.</li>
                <li>He was never seen wearing his religion on his sleeves nor was he seen playing up his humble origins.</li>
                <li>He never wrote his will. However, whatever was left behind was to be given to his elder brother and to grandchildren. Kalam always called his elder brother before going or returning from a significant assignment.</li>
                <li>His autobiography ‘Wings of Fire,’ was initially published in English but has been translated into thirteen languages, including Chinese and French.</li>
                <li>In 2011, Nila Madhab Panda directed a movie based on the life of Kalam, titled, ‘I Am Kalam.’</li>
                <li>Mathematics and Physics were his favourite subjects.</li>
            </ul>

    </div>
    <footer>
        <a id="tribute-link"href="https://en.wikipedia.org/wiki/A._P._J._Abdul_Kalam" target="_blank">For More Information</a>
    </footer>
</body>
</html>
              
            
!

CSS

              
                body {
    margin: 0 20px;
    background-color: floralwhite;
    padding-left: 50px;
    padding right:50px;
}
img{
  max-width: 100%; 
  display: block; 
  height: auto;
  margin: auto;
  border-radius: 30px;
}
#img-caption {
  font-family: cursive;
  font-size: 40px;
}

#title {
    font-family: lobster;
    font-size: 60px;
}
 
h2 {
    color: darkblue;
    font-size: 40px
}

h3 {
    font-size: 25px;
}

p {
    font-family: helvetica;
    font-size: 20px;
}

li {
    font-size: 19px;
    font-family: sans-serif;
}

a:link, a:visited {
    font-family: Verdana, sans-serif;
    background-color: #4620d3;
    color: white;
    padding: 10px 20px;
    text-align: center; 
    text-decoration: none;
    display: inline-block;
    border-radius: 100px;
    font-size: 18px;
}
a:hover {
    background-color: rgb(208, 214, 224);
    color: black;
  }
 
              
            
!

JS

              
                
              
            
!
999px

Console