Making a tribute page is an Innovative way to honor someone special in your life. In this article, we create a tribute webpage using HTML and CSS. This page has a simple and creative design. It contains a header with a title, a main section with text and images, and a footer for main details or credits.
Setting Up the Project
To start a project, create a folder and add files to it.
- index.html: The main file that contains the structure of the webpage.
- style.css: The file where you will add all the styling to make the page more appealing.
Building the HTML Structure
The HTML structure forms the backbone of your tribute webpage. It will Include elements like headings , images, text content, and a footer. Below is a Easy example of how you can create structure of the HTML webpage:
file: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tribute to A.P.J. Abdul Kalam</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Tribute to A.P.J. Abdul Kalam</h1>
</header>
<div class="content">
<section class="biography">
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20250417162607911633/APJ.jpg">
<h2>About A.P.J. Abdul Kalam</h2>
<p>A.P.J. Abdul Kalam, the "Missile Man of India," was born on October 15, 1931, in Rameswaram,
Tamil Nadu. He served as the 11th President of India and was a renowned scientist, known for
his work in India's space and missile programs.</p>
</section>
<section class="achievements">
<h2>Achievements</h2>
<ul>
<li>Developed India’s first satellite launch vehicle (SLV-III)</li>
<li>Led India's successful nuclear tests in 1998</li>
<li>Wrote books like "Wings of Fire" and "India 2020"</li>
<li>Received the Bharat Ratna, India's highest civilian award</li>
</ul>
</section>
</div>
<footer>
<p>Created by Mahima Bhardwaj. All rights reserved.</p>
</footer>
</body>
</html>
- Uses semantic elements (<header>, <section>, <footer>) to structure content.
- Organizes biography, achievements, and additional info using headings, text, and lists.
Styling with CSS
Applies CSS to control layout, styling, and responsiveness, enhancing visual appearance and user experience.
file: style.css
=/* General styling */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
color: #333;
}
/* Header styling */
header {
background-color: #006400;
color: #fff;
text-align: center;
padding: 20px;
}
h1 {
font-size: 36px;
margin: 0;
}
/* Content styling */
.content {
padding: 20px;
max-width: 900px;
margin: 0 auto;
}
/* Biography section styling */
.biography {
background-color: #ffffff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.biography h2 {
font-size: 24px;
margin-bottom: 10px;
}
/* Achievements section styling */
.achievements {
background-color: #ffffff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.achievements h2 {
font-size: 24px;
margin-bottom: 10px;
}
.achievements ul {
list-style-type: disc;
padding-left: 20px;
}
.achievements li {
margin-bottom: 10px;
}
/* Footer styling */
footer {
text-align: center;
padding: 10px;
background-color: #006400;
color: #fff;
position: fixed;
bottom: 0;
width: 100%;
}
- Styles body and header with background, color, and typography to enhance readability and visual focus.
- Applies padding, box-shadow for card layout, and a fixed footer for consistent visibility during scroll.