Design a Tribute Page using HTML and CSS

Last Updated : 19 Apr, 2025

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 for Your Webpage

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.

Project Preview:

Building the HTML Structure for your Webpage

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

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>

Code Overview:

We Have added a header for the webpage.
A Biography section describing the person you are paying tribute to.
A list of their achievement.
A footer contain additional information.

HTML Struture Output — Simple HTML Tribute Page

Styling with CSS

Now that you’ve set up the HTML structure, it’s time to make your page more attractive. Here’s how you can style it:

file: style.css

C++

=/* 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%;
}

Code Overview :

We have styled the body with a impressive background and text for readability.
The header has different green background with white text focusing on the tribute.
Content Sections like biography image and achievements are given padding and a subtle box shadow to create a card like effect.
The footer is fixed at the bottom , it will ensure that footer is visible even when scrolling.

Note: Designing a tribute webpage using HTML and CSS is a rewarding way to honor a person legacy. In this article you have learn about how to structure HTML and CSS and ensure it looks good on all devices using media queries. You can always increase a page by further adding more content or interactive features, to make it even more engaging.