Project : 1 Tribute Page

index.html

<!-- HTML starts here -->

<!-- MAIN element -->
<div id="main" class="bg2">
  
  <!-- TITLE element -->
  <div id="title" class="bg1">
    
		<h1 id="h1">A P J Abdul Kalam</h1>
		<h3 id="h3">"Missile Man of INDIA"</h3>
   
  </div>
  
  <!-- IMAGE-DIV -->
  <div id="img-div" class="bg3">
    
    <!-- Tribute-image -->
    <img id="image" src="http://www.whoa.in/20150417-Whoa/Dr-APJ-Abdul-Kalam-with-National-Flag-HD-Wallpaper.jpg" alt="Missile Man"/>
    
    <!-- Image-Caption -->
    <div id="img-caption">
			<p id="p1"><span id="p12">"A true INSPIRATION for the DREAMERS"</span></p><hr/>
    </div>
    
    <!-- Tribute-info -->
    <div id="tribute-info" class="bg2">
<!--       about -->
			<h2 id="h2" class="bg1">BIRTH DETAILS</h2>
			<hr/>
			<p id="p2">
				<ul>
					<li>Full name: Abul Pakir Jainulabdeen Abdul Kalam</li>
					<li>Abul Pakir Jainulabdeen Abdul Kalam was an Indian scientist who served as the 11th President of India from 2002 to 2007.</li>				
					<li>Born: 15 October 1931, Rameswaram</li>
					<li>He was born and raised in Rameswaram, Tamil Nadu and studied physics and aerospace engineering.</li>
					<li>Died: 27 July 2015, Shillong</li>					
			</ul>
			
			</p>
		<hr/>
		<h2 id="h2" class="bg1">ACHIEVEMENTS</h2>
		<hr/>
		<p id="p2">
		<ul>
			<li>Padma Bhushan: 1981</li>
			<li>Padma Vibhushan: 1990</li>
			<li>Bharat Ratna: 1997</li>
			<li>Indira Gandhi Award for National Integration: 1997</li>
			<li>Veer Savarkar Award: 1998</li>
			<li>Ramanujan Award: 2000</li>
			<li>King Charles II Medal: 2007</li>
			<li>Hoover Medal: 2009</li>
			<li>International von Kármán Wings Award: 2009</li>			
			<li>IEEE Honorary Membership: 2011</li>
		</ul>
		</p2>
	<hr/>
	<h2 id="h2" class="bg1">THOUGHTS</h2>
	<hr/>
	<p id="p2">
		<ul>
			<li>One best book is equal to a hundred good friends, but one good friend is equal to a library.</li>
			<li>I am not a Handsome guy, but I can give my hand-to-some one who needs help. beauty is in the heart not in the face.</li>
			<li>We have no ability to be equal to all have opportunities equal to their ability lane.</li>
			<li>You have to dream before the dream comes true.</li>
			<li>You cannot change your future, but you can change your habits, and surely your habits will change your future.</li>
			<li>Success is when your signature turns into your autograph.</li>
			<li>Life is a difficult game. You can win it only by retaining your birthright to be a person.</li>
		</ul>
	</p>
<hr/>
<h2 id="h2" class="bg1">BOOKS</h2>
	<hr/>
	<p id="p2">
		<ul>
			<li>India 2020: A Vision for the New Millennium
Publishing year: 1998</li>
			<li>Wings of Fire: An Autobiography
Publishing year: 1999</li>
			<li>Ignited Minds: Unleashing the Power within India
Publishing year: 2002</li>
			<li>The Luminous Sparks: A Biography in Verse and Colours
Publishing year: 2004</li>
			<li>Guiding Souls: Dialogues on the Purpose of Life
Publishing year: 2005<br/>
Co-author: Arun Tiwari</li>
			<li>Mission of India: A Vision of Indian Youth
Publishing year: 2005</li>
			<li>Inspiring Thoughts: Quotation Series
Publishing year: 2007</li>
			<li>You Are Born to Blossom: Take My Journey Beyond
Publishing year: 2011<br/>
Co-author: Arun Tiwari</li>
			<li>The Scientific India: A Twenty First Century Guide to the World around Us
Publishing year: 2011<br/>
Co-author: Y. S. Rajan</li>
			<li>Failure to Success: Legendry Lives
Publishing year: 2011<br/>
Co-author: Arun Tiwari</li>
		</ul>
</p>
<hr/>
<h2 id="h2" class="bg1">FACTS</h2>
	<hr/>
	<p id="p2">
		<ul>
			<li>He was very famous among students.</li>
			<li>He died while giving a lecture in north indian college.</li>
			<li>He was fully devoted to his country.</li>
			<li>He Believed in indian Talent.</li>
			<li>He was against the Religious thoughts which are above Humanity.</li>
			<li>He was most loved President ever.</li>
			<li>He took ISRO(Indian Space Research Organisation) to another level of success.</li>
		</ul>
	</p>
      <!-- External-Link -->     
    </div>
<hr/>
<div id="footer" class="bg1">
	External Links: <a id="tribute-link" href="https://en.wikipedia.org/wiki/A._P._J._Abdul_Kalam" target="_blank">
        WIKIPEDIA
      </a><br/>Copyright: &copy; <a href="https://linktr.ee/immanishbainsla"> <span id="p21"> @immanishbainsla</span></a></div>
  </div>
  <hr/>
  
</div>
<!-- HTML ends here -->

project-1-tribute-page-final.markdown

Project : 1 Tribute Page(Final)

Tribute Page for APJ Abdul Kalam sir....

A Pen by Manish Bainsla on CodePen.

License.

style.css

/* CSS starts here */
*{
	padding: 0;
	margin: 0;
}

/* TITLE backgrounds */
.bg1{
	background-color: skyblue;
}

.bg2{
	background-color: #bbeedd;
}

/* MAIN element */
#main{
	width: 100%;
}

/* TITLE element */
#title{
  color: #f34a4c;
	text-align: center;
	font-family: 'Acme', sans-serif;
	width:100%;
	height: auto;
}

#title #h1{
	font-size: 3rem;
	padding-top:5px;
}

#h1:hover{
	text-decoration: underline;
}

#h3:hover{
	text-decoration: underline;
}

#title #h3{
	font-size: 1.4em;
	color: #ff4a1c;
	padding-bottom: 7px;
}

/* IMAGE-DIV element */
#img-div{
	background-color: #bbeedd;
  width: 100%;
	height: auto;
}

/* IMG element */
#image{
  max-width: 80%;
	display: block;
	height: auto;
	margin: 0 auto;
}

/* IMG-CAPTION element */
#image-caption{
	width:100%;
}

#img-caption #p1{
	text-align: center;
	font-size: 1.1rem;
	font-family: Courier;
	font-weight: 600;
	color: blue;
	line-height: 35px;
}

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

/* TRIBUTE-info element */
#tribute-info #h2{
	width: 100%;
	text-align: center;
	color: red;
	font-family: Segoe Script;
	font-size: 30px;
	font-weight: bold;
}

#tribute-info #p2{
  color: #ff6666;
	text-align: justify;
	padding-left: 20%;
	padding-right: 20%;
	font-size: 22px;
}

#p12{
	padding: 5px;
	background-color: #ddff9f;
}

ul{
	padding-left: 16%;
	padding-right: 16%;
	padding-top: 2%;
	padding-bottom: 2%;
}

li{
	font-size: 1.1rem;
	font-family: Segoe UI Symbol;
	color: darkblue;
	text-align: justify;
	line-height: 25px;
}

/* FOOTER section */
#footer{
	line-height: 30px;
	width: 100%;
	color: red;
	text-align: center;
	font-size: 20px;
}

a{
	text-decoration: none;
	color: red;
}

#tribute-link{
	text-align: center;
}
/* CSS ends here */

Transported from Codepen.