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:

Preview of proeject

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.

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%;
}

Final Page After Adding CSS

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.

Build a Survey Form using HTML and CSS

imsushant12

Improve

Article Tags :

Design a Tribute Page using HTML and CSS

Setting Up the Project for Your Webpage

Project Preview:

Building the HTML Structure for your Webpage

Styling with CSS

Similar Reads

Thank You!

What kind of Experience do you want to share?