CSS - Flex | Style
Lesson 13 of 16 in Coddy's Instagram Page Clone | Front-End Project course.
Now we need to style, space, and arrange the navigation bar itself and the items in it
Challenge
EasyNavigation Bar
- Style
#barwith a display of flex to get the items next to each other on the same row - Give it a justify-content of space-around, so the items are spread around rather than right next to each other on the left side
- Set the margin to auto, so the elements margin changes automatically and it centers in the page
- Finally, give it a width of 75%, so the elements are close to the middle
Menu Items
- Style the
.option imgelement with both the width and height of 20px - Give it a margin-right of 5px as well, so the image is a little apart from the text
- Style the
.optionclass with a display of flex, and align-items of center, so that the image and the text are centered vertically - Give them a font-weight of bold, so the text looks better
- Set the color to grey, so inactive tabs look lighter
- Finally, set the cursor to pointer, so it looks clickable when you hover over it
- Style the
.option:hovertag and give it a color of #AAAAAA
- Style the
Active Item
- Set the
#activetag color to black, so that the posts tab looks selected
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">
<div id="bar">
<div class="option" id="active">
<img src="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" alt="Posts">
<p>POSTS</p>
</div>
<div class="option">
<img src="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" alt="Reels">
<p>REELS</p>
</div>
<div class="option">
<img src="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" alt="Tagged">
<p>TAGGED</p>
</div>
</div>
<div id="feed"></div>
</section>
</div>
</body>
</html>