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 part and then we will go on the part. HTML CSS ✍️ 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 tag to give a responsive web design viewport, the code for which is: 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 tag in head, which looks like: title < >Tribute </ > title 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 = = >
<link = = > rel "preconnect" href "https://fonts.gstatic.com" 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 code. And to do this, we have to add the below code in our head tag : HTML <link = = = > href "style.css" type "text/css" rel "stylesheet" After adding these lines of code our head tag will look like something this: Tribute Page < > head < = = > meta name "viewport" content "width=device-width, initial-scale=1.0" < > title </ > 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 tag with main: main id < = > main id "main" </ > main Now, we will give a heading to our page with tag and with title. We will also give a little text below heading in a paragraph tag. All these will go in tag: h1 id p main Bruce Lee A Great Martial Artist < = > h1 id "title" </ > h1 < > p </ > p Now, we will give life to our page by adding a tag in our We will also give a figure caption: figure HTML. < id= >
     < id= src= alt= >
     < id= >
                        Bruce Lee is reading .
     </figcaption>
</figure> figure "img-div" img "image" "https://images.squarespace-cdn.com/content/v1/574dd66227d4bdb54a2f65e3/1468977344437-IBF5DMKQI6EDNPIAX5AK/ke17ZwdGBToddI8pDm48kC_e_Tco9pG_GOwbl4teWH97gQa3H78H3Y0txjaiv_0fsYoZyPaX83s3Uuzi0xhFqxKZmFhNC1HAcNhxOZt-hwEkvUHDxcPUBRMAXYq4nBdQ8eSOYnNd9sCB8xjAo8q6BvIHRucUU7a1Vci15HXS8HJAL6QEi8r50IJn-gwEf2WamV6ADW2CDlOjCPlTdIvYTQ/image-asset.jpeg?format=1500w" "Bruce Lee while reading a book in a library" figcaption "img-caption" "A Source Book in Chinese Philosophy" 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 tag. And then will start giving a short bio about whom we are making the tribute page for, this all will go in a tag with tribute-info. break section id < > br < = > section id "tribute-info" </ > section It's time to fill our section, 🔥. In this section, we will first give a heading using tag. Then give a tag, which will, in this example, contain a quote by Bruce Lee. Then a little information about him. Next, add a quote again in tag at the end. h2 blockquote blockquote <h2>Short Bio</h2>
<blockquote cite= > </span>
</blockquote>
<p>
                    <strong>Bruce Jun Fan Lee (Lee Siu Loong)</strong> was born San Francisco, 
                    CA his parents were tour Chinese Opera. Ultimately 
                    raised Hong Kong, Bruce Lee was a child actor appearing more than films. 
                    At age , Bruce took up study wing chun gung fu under renowned wing 
                    chun master, Yip Man.
                    <br><br>
                    Bruce left Hong Kong age , came United States made his way Seattle, Washington he worked restaurant a family friend. 
                    He soon enrolled University Washington he pursued a degree philosophy. 
                    Bruce began teach gung fu Seattle soon opened his school, Jun Fan Gung 
                    Fu Institute. Two more schools followed Oakland Los Angeles. Concurrently Bruce 
                    married his wife, Linda had his two children, Brandon Shannon. In mid sixties, 
                    Bruce was discovered doing an exhibition Long Beach Internationals a role Kato tv series The Green Hornet soon followed. During this , Bruce was 
                    also developing his own martial art, 
                    which he ultimately named Jeet Kune Do (translated: way intercepting fist).
                    <br><br>
                    Bruce's art was steeped a philosophical foundation did follow long held martial 
                    traditions. Instead had core ideas simplicity, directness personal 
                    freedom. After The Green Hornet series was canceled, Bruce encountered resistance working Hollywood so headed Hong Kong pursue a film career. In Hong Kong he 
                    made films, which consecutively broke all box office records showcased martial arts an entirely new way. Hollywood took notice soon Bruce was making Hollywood 
                    / Hong Kong coproduction a film called Enter Dragon. Unfortunately, Bruce Lee died this film was released. This film catapulted him international fame. 
                    Today Bruce Lee’s legacy self expression, equality, pioneering innovation continues inspire people all world.
</p>

<blockquote>
                    “Do pray an easy life, pray strength endure a difficult one.”
</blockquote> "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." in 1940 in while on with the in in 20 the of 13 the of at the of 18 to the and to where in the of in the of where in to in and first the in and and and the while at the and as in the time the of the in and not it at its the of and while in and to to 3 and in and the first with the in 1973 before to of and to around the not for for the to the source of all this information is . brucelee.com In the last of our tag, we will give an tag to the Bruce Lee site. So that if anyone is interested to know more about him, you can refer this: section anchor <h3>
   If you have , you should definitely more this incredible martial artist his
   <a = target= href= >Personal Site.</a>
</h3> time then read about on id "tribute-link" "_blank" "https://brucelee.com/bruce-lee" After adding all these, our tag will look something like this : body <body>
        <main = >
            <h1 = >Bruce Lee</h1>
            <p>A Great Martial Artist</p>
                <figure = >
                    <img = src= alt= >
                    <figcaption = >
                        Bruce Lee reading .
                    </figcaption>
                </figure>
            <br>
            <section = >
                <h2>Short Bio</h2>
                <blockquote cite= > </span>
                </blockquote>
                <p>
                    <strong>Bruce Jun Fan Lee (Lee Siu Loong)</strong> was born San Francisco, 
                    CA his parents were tour Chinese Opera. Ultimately 
                    raised Hong Kong, Bruce Lee was a child actor appearing more than films. 
                    At age , Bruce took up study wing chun gung fu under renowned wing 
                    chun master, Yip Man.
                    <br><br>
                    Bruce left Hong Kong age , came United States made his way Seattle, Washington he worked restaurant a family friend. 
                    He soon enrolled University Washington he pursued a degree philosophy. 
                    Bruce began teach gung fu Seattle soon opened his school, Jun Fan Gung 
                    Fu Institute. Two more schools followed Oakland Los Angeles. Concurrently Bruce 
                    married his wife, Linda had his two children, Brandon Shannon. In mid sixties, 
                    Bruce was discovered doing an exhibition Long Beach Internationals a role Kato tv series The Green Hornet soon followed. During this , Bruce was 
                    also developing his own martial art, 
                    which he ultimately named Jeet Kune Do (translated: way intercepting fist).
                    <br><br>
                    Bruce's art was steeped a philosophical foundation did follow long held martial 
                    traditions. Instead had core ideas simplicity, directness personal 
                    freedom. After The Green Hornet series was canceled, Bruce encountered resistance working Hollywood so headed Hong Kong pursue a film career. In Hong Kong he 
                    made films, which consecutively broke all box office records showcased martial arts an entirely new way. Hollywood took notice soon Bruce was making Hollywood 
                    / Hong Kong coproduction a film called Enter Dragon. Unfortunately, Bruce Lee died this film was released. This film catapulted him international fame. 
                    Today Bruce Lee’s legacy self expression, equality, pioneering innovation continues inspire people all world.
                </p>

                <blockquote>
                    “Do pray an easy life, pray strength endure a difficult one.”
                </blockquote>

                <h3>
                    If you have , you should definitely more this incredible martial artist his
                    <a = target= href= >Personal Site.</a>
                </h3>
            </section>
        </main>
    </body> id "main" id "title" id "img-div" id "image" "https://images.squarespace-cdn.com/content/v1/574dd66227d4bdb54a2f65e3/1468977344437-IBF5DMKQI6EDNPIAX5AK/ke17ZwdGBToddI8pDm48kC_e_Tco9pG_GOwbl4teWH97gQa3H78H3Y0txjaiv_0fsYoZyPaX83s3Uuzi0xhFqxKZmFhNC1HAcNhxOZt-hwEkvUHDxcPUBRMAXYq4nBdQ8eSOYnNd9sCB8xjAo8q6BvIHRucUU7a1Vci15HXS8HJAL6QEi8r50IJn-gwEf2WamV6ADW2CDlOjCPlTdIvYTQ/image-asset.jpeg?format=1500w" "Bruce Lee while reading a book in a library" id "img-caption" is "A Source Book in Chinese Philosophy" id "tribute-info" "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." in 1940 in while on with the in in 20 the of 13 the of at the of 18 to the and to where in the of in the of where in to in and first the in and and and the while at the and as in the time the of the in and not it at its the of and while in and to to 3 and in and the first with the in 1973 before to of and to around the not for for the to time then read about on id "tribute-link" "_blank" "https://brucelee.com/bruce-lee" We are done with code for our tribute page, now we will start styling it with CSS 🥤. HTML ✍️   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 tag, which contains our image and for doing this we will use its id: figure { : ; : solid ; : ;
} #img-div background-color #f5f5f0 border 10px #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 tag. To make it responsive we set its to 100% and , to auto. To make it attractive, we give a to it, a little and a , set to auto. image width height box-shadow padding margin { : ; : ; : ; : auto; : auto;
} img box-shadow 5px 10px 8px #a3a375 padding 1% width 100% height margin In the image caption also, we have given some basic styles property: { : ; :Georgia, , Times, serif; :larger; : ;
} #img-caption margin 15px font-family 'Times New Roman' font-size 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 🙂 !

Flow

Google

Target

Connect With Me

Read My Stories

Too Long; Didn't Read

Get free API security automated scan in minutes

How To Design a Tribute Page with Basic HTML5 & CSS3

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

@hsnice

RELATED STORIES