Hackernoon logoHow To Design a Tribute Page with Basic HTML5 & CSS3 by@hsnice

How To Design a Tribute Page with Basic HTML5 & CSS3

Author profile picture

@hsniceHimanshu Singh

a programmer, learner, Himanshu Singh(on youtube)

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
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
p
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 ๐Ÿ™‚ย !

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.