FCC Tribute Page | Dr. A. P. J. Abdul Kalam
A Pen by Ganesh Agarwal on CodePen.
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<title>FCC Tribute Page | Dr. A. P. J. Abdul Kalam</title> | |
</head> | |
<body> | |
<main id="main"> | |
<h1 id="title">Dr. A.P.J. Abdul Kalam</h1> | |
<p>Former President of India ("People's President")</p> | |
<figure id="img-div"> | |
<img src="https://i.postimg.cc/Yqj2HYG4/Dr-A-P-J-Abdul-Kalam.jpg" alt="Dr. A. P. J. Abdul Kalam with Hon. Pranab Mukherjee" id="image"> | |
<figcaption id="img-caption"> | |
Dr. A. P. J. Abdul Kalam (Left) with Hon. Pranab Mukherjee (Right) | |
</figcaption> | |
</figure> | |
<section id="tribute-info"> | |
<h3 id="headline">Here's a timeline of Dr. Kalam's life:</h3> | |
<ul> | |
<li><strong>1931</strong> - Born in Rameswaram, Tamil Nadu</li> | |
<li><strong>1954</strong> - Graduates in Physics from Saint Joseph's College, Tiruchirappalli</li> | |
<li><strong>1960</strong> - Gains degree in Aeronautical Engineering from Madras Institute of Technology</li> | |
<li><strong>1969</strong> - Transferred to ISRO from the DRDO.</li> | |
<li><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> | |
<li><strong>1980-1990</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> | |
<li><strong>1992-1999</strong> - Works as Chief Scientific Advisor to the PM and Secretary of the DRDO.</li> | |
<li><strong>1998</strong> - India conducts the Pokhran II nuclear tests in May with Dr. Kalam as the chief project coordinator.</li> | |
<li><strong>1999-2001</strong> - Principal Scientific Advisor to the Government of India.</li> | |
<li><strong>2002-2007</strong> - President of India</li> | |
<li><strong>2015</strong> - dies at the age of 83.</li> | |
</ul> | |
<blockquote cite="https://www.brainyquote.com/quotes/a_p_j_abdul_kalam_717810"> | |
<p>Never stop fighting until you arrive at your destined place - that is, the unique you. Have an aim in life, continuously acquire knowledge, work hard, and have perseverance to realise the great life.</p> | |
<cite>-- A. P. J. Abdul Kalam</cite> | |
</blockquote> | |
<h3>If you have time, you should read more about this incredible human being on his <a href="https://en.wikipedia.org/wiki/A._P._J._Abdul_Kalam" id="tribute-link" target="_blank">Wikipedia entry</a>.</h3> | |
</section> | |
</main> | |
</body> | |
</html> |
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> |
html { | |
font-size: 10px; | |
} | |
body { | |
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; | |
font-size: 1.6rem; | |
line-height: 1.5; | |
text-align: center; | |
color: #333; | |
margin: 0; | |
} | |
h1 { | |
font-size: 4rem; | |
margin-bottom: 0; | |
} | |
@media (max-width: 460px) { | |
h1 { | |
font-size: 3.5rem; | |
line-height: 1.2; | |
} | |
} | |
h2 { | |
font-size: 3.25rem; | |
} | |
a { | |
color: #477ca7; | |
text-decoration: none; | |
} | |
a:visited { | |
color: #74638f; | |
} | |
#main { | |
margin: 30px 8px; | |
padding: 15px; | |
border-radius: 5px; | |
background: #eee; | |
} | |
@media (max-width: 460px) { | |
#main { | |
margin: 0; | |
} | |
} | |
img { | |
max-width: 100%; | |
display: block; | |
height: auto; | |
margin: 0 auto; | |
} | |
#img-div { | |
background: white; | |
padding: 10px; | |
margin: 0; | |
} | |
#img-caption { | |
margin: 15px 0 5px 0; | |
} | |
@media (max-width: 460px) { | |
#img-caption { | |
font-size: 1.4rem; | |
} | |
} | |
#headline { | |
margin: 50px 0; | |
text-align: center; | |
} | |
ul { | |
max-width: 550px; | |
margin: 0 auto 50px auto; | |
text-align: left; | |
line-height: 1.6; | |
} | |
li { | |
margin: 16px 0; | |
} | |
blockquote { | |
font-style: italic; | |
max-width: 545px; | |
margin: 0 auto 50px auto; | |
text-align: left; | |
} |