Before we start discussing design, code stuff, and how I built the Tribute page, you should definitely check how it will look, after completion:
Now, let us start discussing (or understanding) the components of the Tribute page I built with HTML5 & CSS3 step by step 😎. First, we will discuss its HTML part and then we will go on the CSS part.
✍️ HTML5
We will start with the basic structure of an HTML page. Then, we will start filling its head element and its body element.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Head element:
In head tag, we will first add a
meta<meta name="viewport" content="width=device-width, initial-scale=1.0">Next, we will give a title to our web page by adding a
title<title>Tribute Page</title>Now if you have seen the page then, you should definitely check its heading. It is not a normal font. I had used a google font for that, for which I used:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Galdeano&display=swap" rel="stylesheet">This code in the head tag.
Now we should link our style sheet with our HTML code. And to do this, we have to add the below code in our head tag :
<link href="style.css" type="text/css" rel="stylesheet">After adding these lines of code our head tag will look like something this:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tribute Page</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Galdeano&display=swap" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
</head>Body element:
Since there is no any header or footer element in our page, So our whole page will in a
main<main id="main">
</main>Now, we will give a heading to our page with
h1pmain<h1 id="title">Bruce Lee</h1>
<p>A Great Martial Artist</p>Now, we will give life to our page by adding a
figure<figure id="img-div">
<img id="image"
src="https://images.squarespace-cdn.com/content/v1/574dd66227d4bdb54a2f65e3/1468977344437-IBF5DMKQI6EDNPIAX5AK/ke17ZwdGBToddI8pDm48kC_e_Tco9pG_GOwbl4teWH97gQa3H78H3Y0txjaiv_0fsYoZyPaX83s3Uuzi0xhFqxKZmFhNC1HAcNhxOZt-hwEkvUHDxcPUBRMAXYq4nBdQ8eSOYnNd9sCB8xjAo8q6BvIHRucUU7a1Vci15HXS8HJAL6QEi8r50IJn-gwEf2WamV6ADW2CDlOjCPlTdIvYTQ/image-asset.jpeg?format=1500w"
alt="Bruce Lee while reading a book in a library">
<figcaption id="img-caption">
Bruce Lee is reading "A Source Book in Chinese Philosophy".
</figcaption>
</figure>the source for the image is brucelee.com.
Now, first, give a space(or break) between our figure and a short bio by adding a
breaksection<br>
<section id="tribute-info">
</section>It's time to fill our section, 🔥.
In this section, we will first give a heading using
h2blockquoteblockquote<h2>Short Bio</h2>
<blockquote cite="https://brucelee.com/bruce-lee">
"Empty your mind, be formless, shapeless like
water. You put water into a cup, it becomes the
cup. You put water into a bottle, it becomes the
bottle. You put it into a teapot, it becomes the
teapot. Now water can flow or it can crash.
<span>Be water, my friend."</span>
</blockquote>
<p>
<strong>Bruce Jun Fan Lee (Lee Siu Loong)</strong> was born in 1940 in San Francisco,
CA while his parents were on tour with the Chinese Opera. Ultimately
raised in Hong Kong, Bruce Lee was a child actor appearing in more than 20 films.
At the age of 13, Bruce took up the study of wing chun gung fu under renowned wing
chun master, Yip Man.
<br><br>
Bruce left Hong Kong at the age of 18, came to the United States and made his way
to Seattle, Washington where he worked in the restaurant of a family friend.
He soon enrolled in the University of Washington where he pursued a degree in philosophy.
Bruce began to teach gung fu in Seattle and soon opened his first school, the Jun Fan Gung
Fu Institute. Two more schools followed in Oakland and Los Angeles. Concurrently Bruce
married his wife, Linda and had his two children, Brandon and Shannon. In the mid sixties,
Bruce was discovered while doing an exhibition at the Long Beach Internationals and a role
as Kato in the tv series The Green Hornet soon followed. During this time, Bruce was
also developing his own martial art,
which he ultimately named Jeet Kune Do (translated: the way of the intercepting fist).
<br><br>
Bruce's art was steeped in a philosophical foundation and did not follow long held martial
traditions. Instead it had at its core the ideas of simplicity, directness and personal
freedom. After The Green Hornet series was canceled, Bruce encountered resistance while
working in Hollywood and so headed to Hong Kong to pursue a film career. In Hong Kong he
made 3 films, which consecutively broke all box office records and showcased martial arts
in an entirely new way. Hollywood took notice and soon Bruce was making the first Hollywood
/ Hong Kong coproduction with a film called Enter the Dragon. Unfortunately, Bruce Lee died
in 1973 before this film was released. This film catapulted him to international fame.
Today Bruce Lee’s legacy of self expression, equality, and pioneering innovation continues
to inspire people all around the world.
</p>
<blockquote>
“Do not pray for an easy life, pray for the strength to endure a difficult one.”
</blockquote>the source of all this information is brucelee.com.
In the last of our
sectionanchor<h3>
If you have time, then you should definitely read more about this incredible martial artist on his
<a id="tribute-link" target="_blank" href="https://brucelee.com/bruce-lee">Personal Site.</a>
</h3>After adding all these, our
body<body>
<main id="main">
<h1 id="title">Bruce Lee</h1>
<p>A Great Martial Artist</p>
<figure id="img-div">
<img id="image"
src="https://images.squarespace-cdn.com/content/v1/574dd66227d4bdb54a2f65e3/1468977344437-IBF5DMKQI6EDNPIAX5AK/ke17ZwdGBToddI8pDm48kC_e_Tco9pG_GOwbl4teWH97gQa3H78H3Y0txjaiv_0fsYoZyPaX83s3Uuzi0xhFqxKZmFhNC1HAcNhxOZt-hwEkvUHDxcPUBRMAXYq4nBdQ8eSOYnNd9sCB8xjAo8q6BvIHRucUU7a1Vci15HXS8HJAL6QEi8r50IJn-gwEf2WamV6ADW2CDlOjCPlTdIvYTQ/image-asset.jpeg?format=1500w"
alt="Bruce Lee while reading a book in a library">
<figcaption id="img-caption">
Bruce Lee is reading "A Source Book in Chinese Philosophy".
</figcaption>
</figure>
<br>
<section id="tribute-info">
<h2>Short Bio</h2>
<blockquote cite="https://brucelee.com/bruce-lee">
"Empty your mind, be formless, shapeless like
water. You put water into a cup, it becomes the
cup. You put water into a bottle, it becomes the
bottle. You put it into a teapot, it becomes the
teapot. Now water can flow or it can crash.
<span>Be water, my friend."</span>
</blockquote>
<p>
<strong>Bruce Jun Fan Lee (Lee Siu Loong)</strong> was born in 1940 in San Francisco,
CA while his parents were on tour with the Chinese Opera. Ultimately
raised in Hong Kong, Bruce Lee was a child actor appearing in more than 20 films.
At the age of 13, Bruce took up the study of wing chun gung fu under renowned wing
chun master, Yip Man.
<br><br>
Bruce left Hong Kong at the age of 18, came to the United States and made his way
to Seattle, Washington where he worked in the restaurant of a family friend.
He soon enrolled in the University of Washington where he pursued a degree in philosophy.
Bruce began to teach gung fu in Seattle and soon opened his first school, the Jun Fan Gung
Fu Institute. Two more schools followed in Oakland and Los Angeles. Concurrently Bruce
married his wife, Linda and had his two children, Brandon and Shannon. In the mid sixties,
Bruce was discovered while doing an exhibition at the Long Beach Internationals and a role
as Kato in the tv series The Green Hornet soon followed. During this time, Bruce was
also developing his own martial art,
which he ultimately named Jeet Kune Do (translated: the way of the intercepting fist).
<br><br>
Bruce's art was steeped in a philosophical foundation and did not follow long held martial
traditions. Instead it had at its core the ideas of simplicity, directness and personal
freedom. After The Green Hornet series was canceled, Bruce encountered resistance while
working in Hollywood and so headed to Hong Kong to pursue a film career. In Hong Kong he
made 3 films, which consecutively broke all box office records and showcased martial arts
in an entirely new way. Hollywood took notice and soon Bruce was making the first Hollywood
/ Hong Kong coproduction with a film called Enter the Dragon. Unfortunately, Bruce Lee died
in 1973 before this film was released. This film catapulted him to international fame.
Today Bruce Lee’s legacy of self expression, equality, and pioneering innovation continues
to inspire people all around the world.
</p>
<blockquote>
“Do not pray for an easy life, pray for the strength to endure a difficult one.”
</blockquote>
<h3>
If you have time, then you should definitely read more about this incredible martial artist on his
<a id="tribute-link" target="_blank" href="https://brucelee.com/bruce-lee">Personal Site.</a>
</h3>
</section>
</main>
</body>We are done with HTML code for our tribute page, now we will start styling it with CSS 🥤.
✍️ CSS3
In styling, the main thing that we should discuss is image styling. All other components have a basic style, for which you can refer to Complete Code.
We first start styling the
figure
#img-div{
background-color: #f5f5f0;
border:10px solid #ebebe0;
margin-bottom: 10px;
}You can see from the codes, we have just given some basic style. Add a background color and solid border; we also margined it 10px from the bottom.
Now, we style the
imageimg {
box-shadow: 5px 10px 8px #a3a375;
padding: 1%;
width: 100%;
height: auto;
margin: auto;
}In the image caption also, we have given some basic styles property:
#img-caption{
margin:15px;
font-family:Georgia, 'Times New Roman', Times, serif;
font-size:larger;
color: #6b6b47;
}Same as image caption, other components have basic styles which you will find easy to understand.
You've Reached The End!
Congrats 👏, you have reached the end of the article.
In this article, we saw how we can design a tribute page only with basic knowledge of HTML5 & CSS3.
Thank you for reading it till the end 🙂 !
