7,372 reads

How To Design a Tribute Page with Basic HTML5 & CSS3

by Himanshu SinghFebruary 16th, 2021

Too Long; Didn't Read

How To Design a Tribute Page with Basic HTML5 & CSS3: "A Great Martial Artist" The Tribute page was built with HTML5 and CSS3 step by step. We will discuss its HTML part and then we will go on the CSS part. We start with the basic structure of an HTML page. Then, we will start filling its head element and its body element with the code for which is: "viewport" The code for this page is based on a responsive web design viewport.

Companies Mentioned

Coin Mentioned

featured image - How To Design a Tribute Page with Basic HTML5 & CSS3

Before we start discussing design, code stuff, and how I built the Tribute page, you should definitely check how it will look, after completion:

Live: check
Complete Code: check

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

tag to give a responsive web design viewport, the code for which is:

<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

tag in head, which looks like:

<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

tag with id main:

<main id="main">
</main>

Now, we will give a heading to our page with

h1

tag and with id title. We will also give a little text below heading in a paragraph

tag. All these will go in

main

tag:

<h1 id="title">Bruce Lee</h1>
<p>A Great Martial Artist</p>

Now, we will give life to our page by adding a

figure

tag in our HTML. We will also give a figure caption:

<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

break

tag. And then will start giving a short bio about whom we are making the tribute page for, this all will go in a

section

tag with id tribute-info.

<br>
<section id="tribute-info">
</section>

It's time to fill our section, 🔥.

In this section, we will first give a heading using

h2

tag. Then give a

blockquote

tag, which will, in this example, contain a quote by Bruce Lee. Then a little information about him. Next, add a quote again in

blockquote

tag at the end.

<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

section

tag, we will give an

anchor

tag to the Bruce Lee site. So that if anyone is interested to know more about him, you can refer this:

<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

tag will look something like this :

<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

tag, which contains our image and for doing this we will use its id:


#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

image

tag. To make it responsive we set its width to 100% and height, to auto. To make it attractive, we give a box-shadow to it, a little padding and a margin, set to auto.

img {
    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 🙂 !

L O A D I N G
. . . comments & more!

About Author

Himanshu Singh@hsnice

🌐💻 Web Developer | 🔎 hsnice16 | Himanshu Singh(on youtube)

Read my stories About @hsnice

TOPICS

programming #programming #web-development #web-design #html5 #css3 #coding-skills #html-css #html-fundamentals #web-monetization

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave

Terminal

Lite

Join HackerNoon

Latest technology trends. Customized Experience. Curated Stories. Publish Your Ideas