Skip to content

Instantly share code, notes, and snippets.

@immanishbainsla

immanishbainsla/index.html

Last active January 24, 2019 06:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save immanishbainsla/eb13c0a05e93a7dcc2e85e3f990ca6c7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save immanishbainsla/eb13c0a05e93a7dcc2e85e3f990ca6c7 to your computer and use it in GitHub Desktop.
Download ZIP
Project : 1 Tribute Page
Raw
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 -->
Raw
project-1-tribute-page-final.markdown
Raw
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 */
@immanishbainsla
Copy link
Author

immanishbainsla commented Jan 24, 2019

Transported from Codepen.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment