A tribute page is a mini html and css project for beginners. It includes basic skills of HTML and CSS.

In this post, you will learn tribute page creation just using HTML and CSS. So first understand what the tribute page is about.

Tribute page using HTML and CSS

What is a tribute page?

A tribute page is a page about that person who we admire in our life or a person who is a role model to us.

In this post, you will learn how to create tribute page for Swami Vivekananda- The Indian Hindu monk and philosopher.

To create a tribute page, include an image of that person and a timeline of the person’s life.

How to create a tribute page using HTML and CSS?

To create a tribute page, first, gather information about the person on whom you want to make a tribute page. Second, Take an image of a person. Third, define structure using HTML and last, apply CSS styles to page.

The HTML structure of the tribute page

HTML tags for structuring:-

<div>:- for setting background color, height, and width.

<h1>:- for giving page title.

<h5>:- for the small caption of the image.

<table>:- for writing timeline in tabular format.

<ul>:- I used an unordered list (<ul>) in a table for some information to describe the main post.

Styling tribute page with CSS

The CSS properties make good looking your page.

CSS properties for designing tribute page:-

Now our first step is to center the div element, I used the margin property for that and set the height to auto and width to 70%.

background color applies to both div and body elements.

box-shadow property adds a shadow to the ".mainpage" class.

so it looks like a page.

To set position center, the title, image, and image caption, margin property has been applied on the heading1 class, img element selector, and h5 element respectively.

The whole text on this web page is in the font family of Georgia, "Times New Roman", Times, serif.

lastly, the table element is styled.

Pseudo-class :nth-child (even) applies violet color to the text of the second column. While Pseudo class :nth-child(odd) makes the blue color text of the first column.

Below is the complete code of HTML and CSS.

Information about swami vivekananda is taken from Wikipedia.

HTML:-

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="tribute.css" />
<title>A tribute page</title>
</head>
<body>
<div class="mainpage">
	<h1 class="heading1">A Tribute to Swami Vivekananda</h1>
	<img src="Swami-Vivekananda-Hd-png-image.png" alt="image of swami vivekananda" title="Swami Vivekananda" />
	<h5>"Swami Vivekananda- The Youth inspiration"</h5>
		<table>
		<caption>Timeline of Swami Vivekananda</caption>
		<tr>
		<td>Born</td>
		<td>Swami Vivekananda born in Culcutta,Bengal India 12 January 1863.</td>
		</tr>
		<tr></tr>
		<td>Original name</td>
		<td>The real name of Swami Vivekananda is Narendranath Dutta.</td>
		<tr>
		<td>Family background</td>
		<td>
		<ul>
		<li>Swami Vivekananda belongs to traditional family. In his family narendranath was ninth children.</li>
		<li>His mother, Bhuneshwari devi was a devout housewife and father Vishwanath Dutta was an attorney at the Culcutta High Court.</li>
		</ul>
		</td>
		</tr>
		<tr>
		<td>Nature of Swami Vivekananda</td>
		<td>Swami Vivekananda was interested in spirituality since a young age. He meditade brfore images of Shiva,Rama,Sita and Mahavir Hanuman.
		As a child Narendra is naughty and restless and later attracted by monks.
		</td>
		</tr>
		<tr>
		<td>Education & Qualification</td>
		<td>
		<ul>
		<li>In 1871, Swami Vivekanananda started his study at age of eight at Ishwar Chandra Vidyasagar's Metropolitan Institution.</li>
		<li>In 1879, Vivekananda was the only student who get first division in the Presidency College entrance examination, Culcutta.</li>
		<li>In 1814,a Bachelore of Arts degree was completed.</li>
		<li>Vivekananda also studied Western philosophy and also learned Sanskrit scriptures and Bengali literature.</li>
		<li>Vivekananda was well known for awesome memory and fast reading.</li>
		</ul>
		</td>
		</tr>
		<tr>
		<td>Guru of Swami Vivekananada</td>
		<td>Ramkrishna Paramhansh is the Gure of Swami Vivekananda, met him in 1881 who become his spiritual focus after his father's death.</td>
		</tr>
		<tr>
		<td> Became Monk</td>
		<td>In December 1886, Narendranath took monastic vows and also took name <strong>"Swami Vivekananda"</strong>.</td>
		</tr>
		<tr>
		<td>Travel diary</td>
		<td>Vivekananda travelled across many countries and in india.
		<ul>
		<li>Swami Vivekananda was travelled in india from 1888 to 1893. He had only few things, a water pot (kamandalu),staff and his books- Bhagavad gita and the limitation of Chirst. </li>
		<li>Vivekananda had started his journey of world from west in 1893 including Japan,China,Canada and en rout to United States.</li>
		<li>During his travelling journey he took lectures and tought yoga.</li>
		</ul>
		</td>
		</tr>
		<tr>
		<td>Skills and Work</td>
		<td>Swami vivekananda was complete artist, having skills of painting,singning,writting and powerful speaker also. Vivekananda wrote many books in Bengali and English languages.</td>
		</tr>
		<tr>
		</tr>
		<td>Demise of Vivekananda</td>
		<td>Vivekananda died on 4th July 1902 at 9:20 p.m. Vivekananda fulfilled his prophecy that 'he would not live 40 years'. Swami Vivekananda died during meditation.( also called mahasamadhi)</td>
		</tr>
		<tr>
		<td>National Youth Day</td>
		<td>12th Januuary ,his birhday is celebrated as National Youth Day. </td>
		</tr>
		</table>
	<p>To know more detail check out <a href="#"><strong>Swami Vivekananda</strong></a> on wikipedia.</p>	
</div>
</body>
</html>

CSS:-

/* CSS Document */
body{
background-color:#666666;
}
.mainpage{
margin-left:200px;
height:auto;
width:70%;
background-color:#660000;
box-shadow:5px 5px 5px #000000;
}
*{
font-family:Georgia, "Times New Roman", Times, serif;
}
h1.heading1,h5{
text-align:center;
color:#FFFFFF;
padding:5px;
}
img{
margin-left:210px;
}
table{
padding:10px;
}
caption{
background-color:#993300;
color:#660000;
padding:7px;
font-weight:bold;
}
td{
background-color:#330000;
padding:5px;
}
table td:nth-child(odd){
color:#0033FF;
font-size:18px;
}
table td:nth-child(even){
color:#9966CC;
}
p{
text-align:center;
padding:10px;
}

The output of the tribute page

Summary

This is a simple example of a tribute page. You can add your CSS styles or change in HTML to differently design this page. Remember one thing, always include the heading and image on top and center positioned and don't forget to give caption to the image.

Header Ads Widget

My codding spot

Tribute page using html & css

What is a tribute page?