Bar Items

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

The section we are starting now is the posts section but it actually consists of 2 parts, the navigation bar, which we will just build visually, we won't add functionality to it, and the posts which will be in a separate div

Challenge

Easy

Inside the posts section create 2 divs one under another with the ids bar and feed
Inside the bar div create 3 separate divs one under another which will represent the items of the menu
Give each of them a class of option, and give only the first top one an id of active as well (since the posts option/item is active when we view the profile)
Inside each div insert an image and a paragraph under the image using all caps and write: POSTS for the first div, REELS for the second, and TAGGED for the third.
The links for the three images are given below

POSTS

https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FNClQd1AbT751LPf6TLg0%2Finjected_t0?alt=media&token=a193c280-2892-48cf-a414-e84172459222

REELS

https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FNClQd1AbT751LPf6TLg0%2Finjected_t1?alt=media&token=aa5b3f29-b2ad-416e-a9cb-930cd8a857f7

TAGGED

https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FNClQd1AbT751LPf6TLg0%2Finjected_t2?alt=media&token=a67f791f-f1f1-475b-9766-38b160bb8ed5

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>
            <hr>
            <section id="posts"></section>
        </div>
    </body>
</html>