CSS - Style | Spacing

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

In this lesson, we will style, arrange, and space the elements we added to the userTop div

Challenge

Easy

Username and Alignment

Style #right and give it a width of 90%
Since the buttons are one under another, we need to give userTop a display of flex, and to have them even vertically we need to set align-items to center, and justify-content to space-around

Buttons

Style the .button class and give a vertical (top & bottom) padding of 0.5em, and a horizontal (left & right) of 1.5em
Give it a vertical margin of 0 and a horizontal one of 0.5em
Give the button a height of 20px.
A default background #EFEFEF or any other color of your choice
To have that elegant round border look we need to give it a border-radius of 8px
Change the font-weight to bold for the letters to look better and be more visible
Finally, set the cursor to pointer so when you hover over the button it looks clickable
1. Style the .button:hover and give it a darker background than the default one like #DFDFDF, so when you hover over the button, it's more responsive

Follow

Style #follow in addition to .button so the Follow button gets some extra styling like a different background and font color. Set the background to #4193EF
Change the color property to white so the font color of the Follow button is white
1. Style the #follow:hover and give it a background darker than the default like #4D9DF7

Similar Accounts

For the similar accounts button to look good we will set the .button img height and width to 20px

Options button

Set the #more width and height to 25px
Give it a margin-left of 10px, to separate it a little from the rest of the buttons

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