Horizontal Line

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

Since we're moving on to a whole new section of the profile page, what every web developer does is use a horizontal line or horizontal rule (<hr>) to divide separate sections of the website

Challenge

Easy

Between the two sections, profileInfo and posts add a <hr> tag to create a horizontal line on the profile page
Style the hr element in the CSS and give it a height of 1px
A background of lightgrey
Set its border to none
And give it a width of 80% to make it look more elegant

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">
                        <p><b>Zimbakov Tech</b><br>
                        <span style="color: grey">Tutor / Teacher</span><br>
                        Freelancer, course creator and coding tutor<br>
                        Coding | Courses | Websites | Apps<br>
                        Course Creator at Coddy, Inc</p>
                    </div>                   
                </div>
            </section>
            <section id="posts"></section>
        </div>
    </body>
</html>