innovativesahil/free-code-camp-tribute-page.markdown

## free-code-camp-tribute-page.markdown

      
    Raw
  

              free-code-camp-tribute-page.markdown
            
          
    free-code-camp-tribute-page

Project to get the certification
https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-tribute-page
A Pen by Sahil Kumar Verma on CodePen.
License.

  
## index.html
<body id="body" class="body-pattern">
  <div id="overlay-back">
    <header>
      <h2 id="title" class="header-text">A. P. J. Abdul Kalam</h2>
      <p class="punch-line">Hero for the generations to come.</p>
    </header>
    <main id="main" class="main">
      <div id="img-div">
        <img id="image" class="img img-centre" src="https://3.bp.blogspot.com/-PalaGNwZpTc/VztLI9pOomI/AAAAAAAAA2w/DDtb325_JewszNAD-Mgrb745tP5egR95QCLcB/s1600/Dr-APJ-Abdul-Kalam-Success-Quotes-Wallpaper.jpg" alt="Kalam addressing students" />
        <figcaption id="img-caption">The leader of the century addressing the next generation</figcaption>
      </div>

      <section id="tribute-info">

        <ul>
          <li><strong>1931</strong> - Born as Avul Pakir Jainulabdeen Abdul Kalam in Rameswaram, Tamil Nadu</li>
          <li><b>1954:</b> Graduates in Physics from Saint Joseph's College, Tiruchirappalli, in 1954.</li>
          <li><b>1960:</b> Gains degree in Aeronautical Engineering from Madras Institute of Technology.</li>
          <li><b>1969:</b> Transferred to ISRO from the DRDO.</li>
          <li><b>1980:</b> 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><b>1980s-1990s:</b> 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><b>1992-1999:</b> works as Chief Scientific Advisor to the PM and Secretary of the DRDO.</li>
          <li><b>1998:</b> India conducts the Pokhran II nuclear tests in May with Dr. Kalam as the chief project coordinator.</li>
          <li><strong>1998</strong> - along with cardiologist Soma Raju, Kalam developed a low cost coronary stent, named the "Kalam-Raju Stent"</li>
          <li>
          <li><b>1999-2001:</b> Principal Scientific Advisor to the Government of India.</li>

          <strong>2002</strong> - Kalam served as the 11th President of India. His term lasted from 25 July 2002 to 25 July 2007
          </li>
          <li>
            <strong>2008-2015</strong> - bbecame a visiting professor at the Indian Institute of Management Shillong, the Indian Institute of Management Ahmedabad, and the Indian Institute of Management Indore; an honorary fellow of Indian Institute of Science, Bangalore chancellor of the Indian Institute of Space Science and Technology Thiruvananthapuram; professor of Aerospace Engineering at Anna University; and an adjunct at many other academic and research institutions across India. taught information technology at the International Institute of Information Technology, Hyderabad, and technology at Banaras Hindu University and Anna University
          </li>
          <li>
            <strong>2012</strong> - launched a programme for the youth of India called the What Can I Give Movement, with a central theme of defeating corruption.
          </li>
          <li><strong>2015</strong> - dies at the age of 83.</li>
        </ul>

        <blockquote cite="https://www.theeducationmagazine.com/word-art/apj-abdul-kalam-quotes/">
          <p>"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."

            <p>
              <cite>-- Dr. A. p. J. Abdul Kalam</cite>
        </blockquote>
      </section>
    </main>
    <footer id="additional-info">
      <h3>If you have time, you should read more about this incredible human being on his
        <a id="tribute-link" href="https://en.wikipedia.org/wiki/A._P._J._Abdul_Kalam" target="_blank">Wikipedia entry.</a></h3>
    </footer>
  </div>
</body>

## scripts
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

## style.css
/*
Imported fonts. Use them at will
font-family: 'Bangers', cursive;
font-family: 'Dancing Script', cursive;
font-family: 'Merienda One', cursive;
font-family: 'Ubuntu', sans-serif;
*/
html {
  font-size: 12px;
}

body {
  margin: 40px;
  font-family: "Merienda One", cursive;
  font-size: font-size: 1.6rem;
  line-height: 1.5;
}

.body-pattern {
  background-image: url('data:image/svg+xml,%3Csvg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="%239C92AC" fill-opacity="0.4" fill-rule="evenodd"/%3E%3C/svg%3E');
}

#overlay-back {
  padding : 10px 20px;
  background-color: #78909C;
  opacity: 0.75;
  border-radius: 5px;
}

header  {
  background-color: #A5D6A7;
  padding: 10px 0px;
  opacity: 0.75;
  border-radius: 5px;
}

.header-text {
  font-family: "Dancing Script", cursive;
  font-size: 3rem;
}

header .header-text {
  margin: 0px;
}

header .punch-line {
  margin: 0px;
  text-align: center;
}

@media (max-width: 400px) {
  body {
    margin: 0;
    padding: 0;
  }

  #main {
    padding
  }

  #overlay-back {
    padding: 0;
    margin: 0;
  }

  header .header-text {
    padding: 0px;
    margin: 0;
    font-size: 2rem;
  }
}

#title.header-text {
  text-align: center;
  font-stretch: expanded;
}

#img-div {
  padding: 10px 20px;
}

div .img {
  display: block;
  max-width: 100%;
  height: auto;
}

div .img-centre {
  margin: auto;
}

@media (max-width: 400px) {
  #img-div {
    padding: 5px;
  }
}

@media (min-width: 800px) {
  #img-div {
    padding: 10px 20px;
  }

  div .img {
    max-width: 70%;
  }
}

figcaption {
  font-family: 'Ubuntu', sans-serif;
  text-align: center;
}

figcaption#img-caption {
    font-size: 1.2rem;
}

@media (max-width: 400px) {
  figcaption#img-caption {
    font-size: 1rem;
  }
}

ul {
  max-width: 700px;
  margin: 0 auto 50px auto;
  text-align: justify;
  line-height: 1.6;
}

li {
  margin: 16px 0;
}

@media (max-width: 400px){
  section {
    padding: 0px 10px;
  }
}

blockquote {
  font-style: italic;
  font-size: 1.2rem;
  max-width: 545px;
  margin: 0 auto 50px auto;
  text-align: left;
  padding: 0px 5px;
}

cite {
  font-size: 1.1rem;
  font-style: normal;
  font-family: 'Ubuntu', sans-serif;
}

@media (max-width: 400px) {
  blockquote p{
    padding 20px;
  }
}

footer {
  font-style: normal;
  font-family: 'Ubuntu', sans-serif;
}

footer#additional-info {
  padding: 0px 5px;
  text-align: center;
}
	<body id="body" class="body-pattern">
	<div id="overlay-back">
	<header>
	<h2 id="title" class="header-text">A. P. J. Abdul Kalam</h2>
	<p class="punch-line">Hero for the generations to come.</p>
	</header>
	<main id="main" class="main">
	<div id="img-div">
	<img id="image" class="img img-centre" src="https://3.bp.blogspot.com/-PalaGNwZpTc/VztLI9pOomI/AAAAAAAAA2w/DDtb325_JewszNAD-Mgrb745tP5egR95QCLcB/s1600/Dr-APJ-Abdul-Kalam-Success-Quotes-Wallpaper.jpg" alt="Kalam addressing students" />
	<figcaption id="img-caption">The leader of the century addressing the next generation</figcaption>
	</div>

	<section id="tribute-info">

	<ul>
	<li><strong>1931</strong> - Born as Avul Pakir Jainulabdeen Abdul Kalam in Rameswaram, Tamil Nadu</li>
	<li><b>1954:</b> Graduates in Physics from Saint Joseph's College, Tiruchirappalli, in 1954.</li>
	<li><b>1960:</b> Gains degree in Aeronautical Engineering from Madras Institute of Technology.</li>
	<li><b>1969:</b> Transferred to ISRO from the DRDO.</li>
	<li><b>1980:</b> 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><b>1980s-1990s:</b> 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><b>1992-1999:</b> works as Chief Scientific Advisor to the PM and Secretary of the DRDO.</li>
	<li><b>1998:</b> India conducts the Pokhran II nuclear tests in May with Dr. Kalam as the chief project coordinator.</li>
	<li><strong>1998</strong> - along with cardiologist Soma Raju, Kalam developed a low cost coronary stent, named the "Kalam-Raju Stent"</li>
	<li>
	<li><b>1999-2001:</b> Principal Scientific Advisor to the Government of India.</li>

	<strong>2002</strong> - Kalam served as the 11th President of India. His term lasted from 25 July 2002 to 25 July 2007
	</li>
	<li>
	<strong>2008-2015</strong> - bbecame a visiting professor at the Indian Institute of Management Shillong, the Indian Institute of Management Ahmedabad, and the Indian Institute of Management Indore; an honorary fellow of Indian Institute of Science, Bangalore chancellor of the Indian Institute of Space Science and Technology Thiruvananthapuram; professor of Aerospace Engineering at Anna University; and an adjunct at many other academic and research institutions across India. taught information technology at the International Institute of Information Technology, Hyderabad, and technology at Banaras Hindu University and Anna University
	</li>
	<li>
	<strong>2012</strong> - launched a programme for the youth of India called the What Can I Give Movement, with a central theme of defeating corruption.
	</li>
	<li><strong>2015</strong> - dies at the age of 83.</li>
	</ul>

	<blockquote cite="https://www.theeducationmagazine.com/word-art/apj-abdul-kalam-quotes/">
	<p>"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."

	<p>
	<cite>-- Dr. A. p. J. Abdul Kalam</cite>
	</blockquote>
	</section>
	</main>
	<footer id="additional-info">
	<h3>If you have time, you should read more about this incredible human being on his
	<a id="tribute-link" href="https://en.wikipedia.org/wiki/A._P._J._Abdul_Kalam" target="_blank">Wikipedia entry.</a></h3>
	</footer>
	</div>
	</body>
	/*
	Imported fonts. Use them at will
	font-family: 'Bangers', cursive;
	font-family: 'Dancing Script', cursive;
	font-family: 'Merienda One', cursive;
	font-family: 'Ubuntu', sans-serif;
	*/
	html {
	font-size: 12px;
	}

	body {
	margin: 40px;
	font-family: "Merienda One", cursive;
	font-size: font-size: 1.6rem;
	line-height: 1.5;
	}

	.body-pattern {
	background-image: url('data:image/svg+xml,%3Csvg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="%239C92AC" fill-opacity="0.4" fill-rule="evenodd"/%3E%3C/svg%3E');
	}

	#overlay-back {
	padding : 10px 20px;
	background-color: #78909C;
	opacity: 0.75;
	border-radius: 5px;
	}

	header {
	background-color: #A5D6A7;
	padding: 10px 0px;
	opacity: 0.75;
	border-radius: 5px;
	}

	.header-text {
	font-family: "Dancing Script", cursive;
	font-size: 3rem;
	}

	header .header-text {
	margin: 0px;
	}

	header .punch-line {
	margin: 0px;
	text-align: center;
	}

	@media (max-width: 400px) {
	body {
	margin: 0;
	padding: 0;
	}

	#main {
	padding
	}

	#overlay-back {
	padding: 0;
	margin: 0;
	}

	header .header-text {
	padding: 0px;
	margin: 0;
	font-size: 2rem;
	}
	}

	#title.header-text {
	text-align: center;
	font-stretch: expanded;
	}

	#img-div {
	padding: 10px 20px;
	}

	div .img {
	display: block;
	max-width: 100%;
	height: auto;
	}

	div .img-centre {
	margin: auto;
	}

	@media (max-width: 400px) {
	#img-div {
	padding: 5px;
	}
	}

	@media (min-width: 800px) {
	#img-div {
	padding: 10px 20px;
	}

	div .img {
	max-width: 70%;
	}
	}

	figcaption {
	font-family: 'Ubuntu', sans-serif;
	text-align: center;
	}

	figcaption#img-caption {
	font-size: 1.2rem;
	}

	@media (max-width: 400px) {
	figcaption#img-caption {
	font-size: 1rem;
	}
	}

	ul {
	max-width: 700px;
	margin: 0 auto 50px auto;
	text-align: justify;
	line-height: 1.6;
	}

	li {
	margin: 16px 0;
	}

	@media (max-width: 400px){
	section {
	padding: 0px 10px;
	}
	}

	blockquote {
	font-style: italic;
	font-size: 1.2rem;
	max-width: 545px;
	margin: 0 auto 50px auto;
	text-align: left;
	padding: 0px 5px;
	}

	cite {
	font-size: 1.1rem;
	font-style: normal;
	font-family: 'Ubuntu', sans-serif;
	}

	@media (max-width: 400px) {
	blockquote p{
	padding 20px;
	}
	}

	footer {
	font-style: normal;
	font-family: 'Ubuntu', sans-serif;
	}

	footer#additional-info {
	padding: 0px 5px;
	text-align: center;
	}