Bio

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

The last thing we have to do to conclude the HTML part of the profileInfo section is to add the Bio/Biography. On Instagram, on top is the full name, below if it's a professional account, it's the role/career, and below that there is the bio

Challenge

Easy

1. Create only one paragraph inside the bioBot div, and you can put the following content inside the paragraph, or use your own text

Zimbakov Tech
Tutor / Teacher
Freelancer, course creator and coding tutor 💻
Coding | Courses | Websites | Apps
Course Creator at Coddy, Inc

2. Use only one  tag, to get a new row at the end use the   (break) tag.

3. Use text to make the name (Zimbakov Tech) bold

4. Finally, use text to change the color of Tutor / Teacher to grey

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">
                    <h2 id="username">zimbakovtech</h2>
                </div>
                <div id="right">
                    <div id="userTop">
                        <div class="button" id="follow">Follow</div>
                        <div class="button">Message</div>
                        <div class="button"><img src="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" alt="Add"></div>
                        <img id="more" src="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" alt="more">
                    </div>
                    <div id="infoMid">
                        <p><b>3</b> posts</p>
                        <p><b>110</b> followers</p>
                        <p><b>35</b> following</p>
                    </div>
                    <div id="bioBot"></div>                    
                </div>
            </section>
            <section id="posts"></section>
        </div>
    </body>
</html>