Posts
Lesson 14 of 16 in Coddy's Instagram Page Clone | Front-End Project course.
There's the final thing left to do, add the 3 posts, arrange them and we've finished the Instagram Profile Page Clone
Challenge
Easy- Inside the
feeddiv add 3 separateimgs one after another - Give each of them the class
post - Use the links below to enter the
srcto the images
Post 1
https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FgSLCVGPMnzw5dtzxx8rE%2Finjected_t0?alt=media&token=898bd40a-1611-4e8c-836f-e55f3aac2aecPost 2
https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FgSLCVGPMnzw5dtzxx8rE%2Finjected_t1?alt=media&token=ed9a6d5b-9c97-4296-844a-356010ffde59Post 3
https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FgSLCVGPMnzw5dtzxx8rE%2Finjected_t2?alt=media&token=0e2d1d14-7c25-40e9-8813-cd507c7973b8Try 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>