Name & Buttons

Lesson 6 of 16 in Coddy's Instagram Page Clone | Front-End Project course.

Now we can add the username on the profile and the main buttons, follow, message, similar accounts and options. We will do this inside the userTop div

Challenge

Easy

Add an <h2> element with the id username and a text of zimbakovtech or you can add one of your choice, under the profile image in #left

Next, inside #userTop add 3 divs of class button having the following contents: Follow, Message, and inside the third div add an <img> tag with the link below (add an id of follow to the Follow button)

https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FYGTvUtASn8CI5DiXWvFs%2Finjected_t0?alt=media&token=631ebb8f-3a01-4dec-b525-8a7460661676

Add an <img> tag under the 3 divs with the id more and use the following link as src for the image

https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FYGTvUtASn8CI5DiXWvFs%2Finjected_t1?alt=media&token=351f4b48-6f68-4cd7-83c3-0c7f67bed30b

In the next lesson, we will style everything we just added to the HTML

Try it yourself

<!DOCTYPE html>
<html>
<head>
    <title>Instagram</title>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <div id="background">
            <section id="profileInfo">
                <div id="left">
                    <img alt="Profile Picture" src="https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FB1W4ovz1wpFwKXcrZmzV%2Finjected_t0?alt=media&token=799f5980-a8c4-43a6-82ca-1f8ba57a360f">
                </div>
                <div id="right">
                    <div id="userTop"></div>
                    <div id="infoMid"></div>
                    <div id="bioBot"></div>                    
                </div>
            </section>
            <section id="posts"></section>
        </div>
    </body>
</html>