CodrGeek is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our Privacy Policy Explore Now!

How to Design a Tribute Page using HTML & CSS

In this article, we are creating a tribute webpage of Late A.P.J. Abdul Kalam Sir using HTML and CSS.

A tribute page is basically an overview of someone whom we admire in our life. In this article, we are creating a tribute webpage of Late A.P.J. Abdul Kalam Sir using HTML and CSS. We will add an image of him at the center (below the title) and create a box beneath that image. Inside that box, we will write a few of his achievements and details. We will use div tag and p tag to write the details and img tag for image. Then using CSS, we will align and beautify the design.

View Live Demo

Design a Tribute Page using HTML & CSS
Design a Tribute Page using HTML & CSS


  • In the <body> element, we will give the title of the page using h1 tag after that we will add an image of him in the img tag with some caption. We will create another div tag and write all the contents (using p tags). We have also given ID for each tag so that we can beautify the design using respective-ID in the CSS file.
  • In the CSS section we have basically maintained a central design and used box-shadow to create box effect around the main content.


<!DOCTYPE html>
<html lang="en">


		/* Styling the body element
		like body color and margin */
		body {
			background-color: #00FA9A;
			margin: 20%;

		/* Styling the Title and giving
		shadow to the title */
		#title {
			text-align: center;
			text-shadow: 5px 5px 10px white;
			font-size: 7vh;

		/* Setting width and display
		type of image */
		img {
			display: inline-block;
			width: 100%;

		/* Setting font color and font
		size of the image-caption */
		#caption {
			font-size: 17px;
			font-family: Gill Sans;
			color: black;

		/* Styling the content of the page like-
		padding, font-size, font color etc.*/
		div#tribute-data {
			background-color: rgb(46, 139, 87, 0.25);
			box-shadow: 20px 20px 20px #98FB98;
			font-family: Georgia;
			padding: 25px 25px;
			margin: 11px;
			margin-top: 50px;

		/* Styling the title of the content */
		h1.title-APJ {
			font-size: 35px;
			color: white;
			text-align: center;
			text-shadow: 5px 5px 10px black;

		/* Styling the link provided at the end */
		#tribute-link {
			text-decoration: none;
			color: black;

	<main id="main">

		<!-- Title of the page -->
		<h1 id="title">
			A. P. J. Abdul Kalam

		<div id="img">

			<!--Image of the Tribute Person-->
			<img src="APJ Kalam.png" id="image"
				alt="Error Loading Image">
			<small id="caption">
				Great Indian scientist and
				politician who played a leading
				role in the development of India’s
				missile and nuclear weapons

		<div id="tribute-data">

			<!--Achievements and other
				details of the person-->
			<h1 class="title-APJ">
				About the Legend


				☛ A.P.J. Abdul Kalam, in full
				Avul Pakir Jainulabdeen Abdul Kalam,
				was born on October 15, 1931, in
				Rameswaram, Tamil Nadu, India.<br><br>
				☛ He served as the 11th President
				of India from 2002 to 2007.<br><br>
				☛ Kalam earned a degree in
				aeronautical engineering from the
				Madras Institute of Technology and in
				1958 joined the Defence Research and
				Development Organisation (DRDO).<br><br>
				☛ In 1969, he moved to the Indian
				Space Research Organisation, where he
				was project director of the SLV-III, the
				first satellite launch vehicle that was
				both designed and produced in India.
				<br><br> ☛ Rejoining DRDO in 1982,
				Kalam planned the program that produced
				a number of successful missiles, which
				helped earn him the nickname <strong>
				“Missile Man.”</strong>
				<br><br> ☛ Among those successes
				was Agni, India’s first intermediate-range
				ballistic missile, which incorporated
				aspects of the SLV-III and was launched
				in 1989.
				<br><br> ☛ He also played a
				pivotal organisational, technical,
				and political role in India's Pokhran-II
				nuclear tests in 1998, the first since
				the original nuclear test by India in 1974.
				<br><br> ☛ From 1992 to 1997 Kalam
				was scientific adviser to the defense
				minister, and he later served as principal
				scientific adviser (1999–2001) to the
				government with the rank of cabinet minister.
				<br><br> ☛ His prominent role in
				the country’s 1998 nuclear weapons tests
				solidified India as a nuclear power and
				established Kalam as a national hero,
				although the tests caused great concern
				in the international community.
				<br><br> ☛ In 1998 Kalam put
				forward a countrywide plan called
				Technology Vision 2020, which he described
				as a road map for transforming India from
				a less-developed to a developed society
				in 20 years. The plan called for, among
				other measures, increasing agricultural
				productivity, emphasizing technology as
				a vehicle for economic growth, and
				widening access to health care and
				<br><br> ☛ Kalam received <b>7</b>
				honorary doctorates from <b>40</b>
				universities. The Government of India
				honoured him with the <b>Padma Bhushan
				in 1981</b> and the <b>Padma Vibhushan
				in 1990</b> for his work with ISRO and
				DRDO and his role as a scientific advisor
				to the Government.
				<br><br> ☛ In 1997, Kalam received
				India's highest civilian honour, the
				Bharat Ratna, for his contribution to
				the scientific research and modernisation
				of defence technology in India.
				<br><br> ☛ In 2013, he was the
				recipient of the Von Braun Award from
				the National Space Society "to recognize
				excellence in the management and leadership
				of a space-related project".
				<br><br> ☛ While delivering a
				lecture at the Indian Institute of
				Management Shillong, Kalam collapsed and
				died from an apparent cardiac arrest on
				<b>27 July 2015</b>, aged 83.
				<br><br> ☛ Wheeler Island, a
				national missile test site in Odisha, was
				renamed <b>Kalam Island</b> in September
				<br><br> ☛ A prominent road in
				New Delhi was renamed from Aurangzeb
				Road to <b>Dr APJ Abdul Kalam Road</b>
				in August 2015.
				<br><br> ☛ In February 2018,
				scientists from the Botanical Survey
				of India named a newly found plant
				species as Drypetes kalamii, in his

		 For more information,
		check out
		<a id="tribute-link" href="#">
			<b>A.P.J. Abdul Kalam</b> on Wikipedia. [
			<small>Developed by @<a href="#">
					Sushant Gaurav.</a></a>


About the Author

Hey there! My name is Mayank, a professional Blogger, Graphic Designer, Coder as well as Content Creator from Uttar Pradeh, India. I love to Code and create interesting things while playing with it.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.