Design a Tribute Page using HTML and CSS
A tribute page is an overview of someone whom we admire in our life. In this article, we are creating a tribute webpage of the Late A.P.J. Abdul Kalam Sir using HTML and CSS. The page features a clean and visually appealing design, incorporating a header with a centered title, a main section with content including text and images, and a footer for additional information or credits.
Approach:
- In the <body> element, we will give the title of the page using the 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 an ID for each tag so that we can beautify the design using the respective ID in the CSS file.
- In the CSS section, we have maintained a central design and used box-shadow to create a box effect around the main content.
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < style > /* 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; } </ style > </ head > < body > < main id = "main" > <!-- Title of the page --> < h1 id = "title" > A. P. J. Abdul Kalam </ h1 > < 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 programs. </ small > </ div > < div id = "tribute-data" > <!--Achievements and other details of the person--> < h1 class = "title-APJ" > About the Legend </ h1 > < p > ☛ 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 education. < 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 2015. < 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 honour. < br >< br >< br > </ p > </ div > < br > For more information, check out < a id = "tribute-link" href = "#" > < b >A.P.J. Abdul Kalam</ b > </ a >on Wikipedia. [ < small >Developed by @< a href = "#" > Sushant Gaurav.</ a > </ small >] </ main > </ body > </ html > |
Output: