Missile Man's Tribute

In this example below you will see how to do a Missile Man's Tribute with some HTML / CSS and Javascript

It's a Tribute Page of respected APJ Abdul Kalam Sir, The Missile Man of India.

Thumbnail
This awesome code was written by makkBit, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright makkBit ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Missile Man's Tribute</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Knightlab timeline -->
	<link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
 
<body id="boudy">


	<div class="container-fluid">

		<div id="header">
			
			<img id="image1" class="img-responsive" src="http://fantoosy.com/wp-content/uploads/2015/07/apj-abdul-kalam-azad.jpg" alt="Dr. APJ Abdul Kalam smiling with kids" />
			<h1 style="font-size:3.9vw;color:white" class="text-primary"> Dr. A.P.J. Abdul Kalam</h1>
            <h3 style="font-size:2.8vw;color:white"> The Missile Man of India </h3>
        	</br>

	    </div>


	    <div id="content">

	    	<p class="text-center" id="heading">Here's a time line of Dr. A.P.J. Abdul Kalam's life:</p>

	    	 <div id='timeline-embed' style="width: 100%; height: 600px"></div>
	  
	    	 </br>
	    	 </br>
	    
	    </div>

	    <div id="footer">

	    	<p id="more">Read more about this great most loved person :</p>
	    	<ul id="list">
	    		<li><a href="https://en.wikipedia.org/wiki/A._P._J._Abdul_Kalam">Wikipedia</a></li>
	    		<li><a href="http://www.bbc.com/news/world-asia-india-33685041">BBC News</a></li>
	    		<li><a href="http://www.biography.com/people/apj-abdul-kalam-39325">Biography.com</a></li>
	    	</ul>

	    	<p id="me">Written and Coded by <span>Mahak</span></p>

	    	<!-- twitter -->
	    	<p id="twitter"><a href="https://twitter.com/makk_bit" class="twitter-follow-button" data-show-count="false">Follow @makk_bit</a></p>
			<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

		</div>

</div>

</body>
</html>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/makkBit/missile-manandaposs-tribute-MKxvmr */

    .container-fluid{
      padding:0;
      margin:0;
    }

#boudy{
	background-color: silver;
	}
#image1{
	width:100%;
	height:100%;
	position: relative;
	border-left: 0px;
}

h1{
	position: absolute;
	top: 0px; 
    right: 28px;
}

h3{
	position: absolute;
	top: 65px; 
    right: 28px; 
}

#heading{
	font-size: 40px;
	color:white;
}

#footer{
	width:100%;
	height:18%;
	background-color: black;
	position: relative;
}

#more{
	padding-top: 15px;
	margin-left: 30px;
	color:white;
}

#list{
	margin-top: -10px;
}


#me{
	padding-right: 27px;
	padding-top: 17px;
	position: absolute;
	top:0px;
	right:20px;
	color:white;
}

#twitter{
	position: absolute;
	top:50px;
	right:103px;
}




/*Downloaded from https://www.codeseek.co/makkBit/missile-manandaposs-tribute-MKxvmr */
var additionalOptions = {
            start_at_end: false,
            default_bg_color: {r:192, g:192, b:192},
            timenav_height: 250
          }

timeline = new TL.Timeline('timeline-embed',
          'https://docs.google.com/spreadsheets/d/1DGCQ0r4aY_PUcrdKSY9UlNcuUt2atMwXFZAAYQPzrG4/pubhtml',
           additionalOptions);

Comments