Profile Picture

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

The next thing we need to do is add the profile picture on the left and create the structure of our profile details on the right. We add images with the <img> tag.

Challenge

Easy

1. Inside the div with id left add an <img> tag using the link below, or if you want use your own image uploaded online

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

2. Inside the div with id right insert 3 divs one after another with the following ids: userTop, infoMid, and bioBot

3. Style #left with a width of 90%, display of flex, and both justify-content and align-items of center, to center the profile picture

4. And finally, style #left img with a width of 30% as well to take up 30% of the left side, and give it a border-radius of 50% to get a circular shape

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