├── img
    ├── add.PNG
    ├── home.png
    ├── icon.png
    ├── like.PNG
    ├── new.png
    ├── save.PNG
    ├── send.PNG
    ├── comment.PNG
    ├── explore.PNG
    ├── option.PNG
    ├── profile.png
    ├── search.png
    ├── smile.PNG
    ├── wall1.jpg
    ├── wall2.png
    ├── wall3.jpg
    ├── wall4.jpg
    ├── wall5.jpg
    ├── wall6.jpg
    ├── instagram.png
    ├── messenger.PNG
    ├── profile1.jpg
    ├── profile2.jpg
    ├── profile3.jpg
    ├── profile4.jpg
    ├── profile5.jpg
    ├── profile6.jpg
    ├── profile7.jpg
    ├── profile8.jpg
    └── profile9.jpg
├── style.css
└── index.html


/img/add.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/add.PNG


--------------------------------------------------------------------------------
/img/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/home.png


--------------------------------------------------------------------------------
/img/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/icon.png


--------------------------------------------------------------------------------
/img/like.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/like.PNG


--------------------------------------------------------------------------------
/img/new.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/new.png


--------------------------------------------------------------------------------
/img/save.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/save.PNG


--------------------------------------------------------------------------------
/img/send.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/send.PNG


--------------------------------------------------------------------------------
/img/comment.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/comment.PNG


--------------------------------------------------------------------------------
/img/explore.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/explore.PNG


--------------------------------------------------------------------------------
/img/option.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/option.PNG


--------------------------------------------------------------------------------
/img/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/profile.png


--------------------------------------------------------------------------------
/img/search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/search.png


--------------------------------------------------------------------------------
/img/smile.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/smile.PNG


--------------------------------------------------------------------------------
/img/wall1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/wall1.jpg


--------------------------------------------------------------------------------
/img/wall2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/wall2.png


--------------------------------------------------------------------------------
/img/wall3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/wall3.jpg


--------------------------------------------------------------------------------
/img/wall4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/wall4.jpg


--------------------------------------------------------------------------------
/img/wall5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/wall5.jpg


--------------------------------------------------------------------------------
/img/wall6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/wall6.jpg


--------------------------------------------------------------------------------
/img/instagram.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/instagram.png


--------------------------------------------------------------------------------
/img/messenger.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/messenger.PNG


--------------------------------------------------------------------------------
/img/profile1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/profile1.jpg


--------------------------------------------------------------------------------
/img/profile2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/profile2.jpg


--------------------------------------------------------------------------------
/img/profile3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/profile3.jpg


--------------------------------------------------------------------------------
/img/profile4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/profile4.jpg


--------------------------------------------------------------------------------
/img/profile5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/profile5.jpg


--------------------------------------------------------------------------------
/img/profile6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/profile6.jpg


--------------------------------------------------------------------------------
/img/profile7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/profile7.jpg


--------------------------------------------------------------------------------
/img/profile8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/profile8.jpg


--------------------------------------------------------------------------------
/img/profile9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salnish/instagramclone/HEAD/img/profile9.jpg


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | body{
  2 |     margin: 0;
  3 |     
  4 | }
  5 | .header{
  6 |     position: fixed;
  7 |     width: 100%;
  8 |     height: 60px;
  9 |     background: #ffff;
 10 |     border-bottom: 1px solid #afadad;
 11 | }
 12 | .logo{
 13 |     width: 20%;
 14 |     padding-left: 156px;
 15 |     padding-top: 17px;
 16 |     float: left;
 17 | }
 18 | .inst{
 19 |     height: 29px;
 20 |     width: 103px;
 21 |     margin: 0;
 22 | }
 23 | 
 24 | .center{
 25 |     float: left;
 26 |     width: 20%;
 27 |     padding-top: 9px;
 28 |     padding-left: 75px;
 29 | }
 30 | .option{
 31 |     float: left;
 32 |     width: 20%;
 33 |     height: 45px;
 34 |     padding-left: 90px;
 35 | 
 36 | }
 37 | .search{
 38 |     height: 36px;
 39 |     
 40 | }
 41 | .txt{
 42 |     height: 100%;
 43 |     width: 100%;
 44 |     border-radius: 14px;
 45 |     color: rgba(var(--i1d,38,38,38),1);
 46 |     border: 0;
 47 |     padding: 3px 16px;
 48 |     background: rgba(var(--bb2,239,239,239),1);
 49 |     font-size: 16px;
 50 | }
 51 | .ser{
 52 |     cursor: pointer;
 53 |     height: 22px;
 54 |     width: 22px;
 55 | }
 56 | 
 57 | .icon-table{
 58 |     border-spacing: 21px;
 59 | 
 60 | }
 61 | .scroll{
 62 |     float: left;
 63 |     margin-right: 28px;
 64 |     max-width: 614px;
 65 |     width: 100%;
 66 | }
 67 | .story{
 68 |     border: 1px solid rgba(var(--b6a,219,219,219),1);
 69 |     border-radius: 3px;
 70 |     margin-bottom: 24px;
 71 |     margin-top: 0;
 72 |     padding: 16px 0;
 73 | }
 74 | .main{
 75 |     float: left;
 76 |     margin-left: 12%;
 77 |     padding-top: 91px;
 78 |     width: 614px;
 79 | }
 80 | .round-img{
 81 |     border-radius: 50%;
 82 | }
 83 | .storyImg{
 84 |     width: 50px;
 85 |     height: 50px;
 86 |     padding: 1px;
 87 |     border:solid hotpink;
 88 |     cursor: pointer;
 89 | }
 90 | .storyT{
 91 |     border-spacing: 18px;
 92 | }
 93 | .final{
 94 |     float: left;
 95 |     position: fixed;
 96 |     min-width: 300px;
 97 |     width: 100%;
 98 |     height: 100%;
 99 |     margin-left: 767px;
100 |     margin-top: 62px;
101 |     background: #ffff;
102 |     padding-left: 20px;
103 | 
104 | }
105 | .content{
106 |     border: 1px solid rgba(var(--b6a,219,219,219),1);
107 |     border-radius: 3px;
108 |     width: 100%;
109 |     height: fit-content;
110 |     background:#ffff;
111 |     margin-bottom: 20px;
112 | }
113 | .content-header{
114 |     width: 100%;
115 |     height: 45px;
116 | }
117 | .profile{
118 |     float: left;
119 |     width: 7%;
120 |     height: 89%;
121 |     background:#ffff;
122 |     padding-left: 5px;
123 |     padding-top: 5px
124 | }
125 | 
126 | .media{
127 |     width: 100%;
128 |     min-height: 500px;
129 |     max-height: fit-content;
130 |     display: flex; 
131 |     align-items: center;
132 |     background:black;
133 | }
134 | .media-content{
135 |     max-width: 614px;
136 |     min-width: 594;
137 |     min-height: 300px;
138 |     max-height: fit-content;
139 |     width: 100%;
140 |     height: 100%;
141 | }
142 | .profile-img{
143 |     width: 32px;
144 |     height: 32px;
145 |     padding: 1px;
146 |     border:solid hotpink;
147 |     cursor: pointer;
148 | }
149 | .profile-name{
150 |     float: left;
151 |     width: 70%;
152 |     height: 45px;
153 |     background:#ffff;
154 | }
155 | .con-option{
156 |     float: left;
157 |     width: 7%;
158 |     height: 70%;
159 |     padding-top: 14px;
160 |     padding-left: 93px;
161 | }
162 | .pro-text{
163 |     margin-top: 16px;
164 |     margin-bottom: 16px;
165 | }
166 | .op-icon{
167 |     width: 25px;
168 |     height: 15px;
169 |     cursor: pointer;
170 | }
171 | .controls{
172 |     width: 100%;
173 |     height: 50px;
174 |     display: flex; 
175 |     align-items: center;
176 | }
177 | .control-icons{
178 |     height: 20px;
179 |     width: 20px;
180 |     padding-left: 20px;
181 |     cursor: pointer;
182 | }
183 | .r-icon{
184 |     height: 23px;
185 |     width: 23px;
186 |     padding-left: 457px;
187 |     cursor: pointer;
188 | }
189 | .likes{
190 |     width: 100%;
191 |     height:fit-content;
192 |     margin-left: 15px;
193 | }
194 | .txtl{
195 |     margin-top: 2px;
196 |     margin-bottom: 2px;
197 |     cursor: pointer;
198 | }
199 | .txtl1{
200 |     color: gray;
201 |     font-size: small;
202 | }
203 | .comment-box{
204 |     width: 100%;
205 |     height:40px;
206 |     display: flex;
207 |     align-items: center;
208 |     border-top:  1px solid rgba(var(--b6a,219,219,219),1);
209 | }
210 | .cmt{
211 |     background: 0;
212 |     height: 100%;
213 |     width: 80%;
214 |     padding-left: 20px;
215 |     border: 0;
216 |     font-size: 16px;
217 | }
218 | .post{
219 |     color: rgba(0, 255, 255, 0.836);
220 |     padding-left: 20px;
221 |     font-family: Arial, Helvetica, sans-serif;
222 |     cursor: pointer;
223 |     
224 | }
225 | .profile-card{
226 |     width: 80%;
227 |     height: fit-content;
228 |     display: flex;
229 |     align-items: baseline;
230 |     padding-top: 55px;
231 | }
232 | .card-img{
233 |     width: 55px;
234 |     height: 55px;
235 |     cursor: pointer;
236 | }
237 | .swt{
238 |     color: #0095f6;
239 |     padding-left: 160px;
240 | }
241 | .name{
242 |     padding-left:10px ;
243 | }
244 | .s-title{
245 |     width: 80%;
246 |     height: fit-content;
247 | }
248 | .c-title{
249 |     color: #afadad;
250 |     font-family: Arial, Helvetica, sans-serif;
251 | }
252 | .see{
253 |     padding-left: 130px;
254 | }
255 | .seee{
256 |     font-family: Arial, Helvetica, sans-serif;
257 |     font-size: 12px;
258 | }
259 | .s-people{
260 |     width: 80%;
261 |     height: fit-content;
262 | }
263 | .p-img{
264 |     width: 35px;
265 |     height: 35px;
266 |     cursor: pointer;
267 | }
268 | .flw{
269 |     color: #0095f6;
270 |     padding-left: 160px;
271 |     font-size: 14px;
272 |     font-family: Arial, Helvetica, sans-serif;
273 | }
274 | .st{
275 |     margin: 0;
276 | }
277 | .about{
278 |     width: 80%;
279 |     height: fit-content;
280 |     margin-top: 20px;
281 | }
282 | .under{
283 |     text-decoration: none;
284 |     color:#c7c7c7;
285 |     font-size: 14px;
286 |     font-family: Arial, Helvetica, sans-serif;
287 | }
288 | .copy{
289 |     width: 80%;
290 |     height: fit-content;
291 |     margin-top: 20px;
292 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Instagram</title>
  8 |     <link rel="stylesheet" href="style.css">
  9 | 
 10 | </head>
 11 | <body>
 12 |     <div class="container">
 13 |         <div class="header">
 14 |             <div class="logo">
 15 |                 <a href="index.html"><img class="inst" src="img/instagram.png" alt=""></a>
 16 | 
 17 |             </div>
 18 |             <div class="center">
 19 |                 <div class="search">
 20 |                     <input class="txt" type="text"placeholder="   search">
 21 |                    
 22 |                 </div>
 23 |                 
 24 |             </div>
 25 |             <div class="option">
 26 |                 <table class="icon-table">
 27 |                     <tr>
 28 |                         <th><img class="ser" src="img/home.png" alt=""></th>
 29 |                         <th><img class="ser" src="img/messenger.PNG" alt=""></th>
 30 |                         <th><img class="ser" src="img/add.PNG" alt=""></th>
 31 |                         <th><img class="ser" src="img/explore.png" alt=""></th>
 32 |                         <th><img class="ser" src="img/like.PNG" alt=""></th>
 33 |                         <th><img class="ser" src="img/profile.png" alt=""></th>
 34 |                     </tr>
 35 |                 </table>
 36 | 
 37 |             </div>
 38 |         </div>
 39 |         <div class="main">
 40 |             <div class="scroll">
 41 |                 <div class="story">
 42 |                     <table class="storyT">
 43 |                         <tr>
 44 |                             <th><img class="storyImg round-img" src="img/profile1.jpg" alt=""></th>
 45 |                             <th><img class="storyImg round-img" src="img/profile2.jpg" alt=""></th>
 46 |                             <th><img class="storyImg round-img" src="img/profile3.jpg" alt=""></th>
 47 |                             <th><img class="storyImg round-img" src="img/profile4.jpg" alt=""></th>
 48 |                             <th><img class="storyImg round-img" src="img/profile5.jpg" alt=""></th>
 49 |                             <th><img class="storyImg round-img" src="img/profile6.jpg" alt=""></th>
 50 |                             <th><img class="storyImg round-img" src="img/profile7.jpg" alt=""></th>
 51 |                             <th><img class="storyImg round-img" src="img/profile8.jpg" alt=""></th>
 52 | 
 53 |                         </tr>
 54 | 
 55 |                     </table>
 56 |                 </div>
 57 |                 <div class="content">
 58 |                     <div class="content-header">
 59 |                         <div class="profile">
 60 |                             <img class="profile-img round-img" src="img/profile1.jpg" alt="">
 61 |                         </div>
 62 |                         
 63 |                         <div class="profile-name">
 64 |                             <h4 class="pro-text">karma</h4>
 65 |                         </div>
 66 |                         <div class="con-option">
 67 |                             <img class="op-icon" src="img/option.PNG" alt="">
 68 |                         </div>
 69 |                     </div>
 70 |                     <div class="media">
 71 |                         <img class="media-content" src="img/wall6.jpg" alt="">
 72 |                     </div>
 73 |                     <div class="controls">
 74 |                         <img class="control-icons"  src="img/like.PNG" alt="">
 75 |                         <img class="control-icons"  src="img/comment.PNG" alt="">
 76 |                         <img class="control-icons" src="img/send.PNG" alt="">
 77 |                         <img class="r-icon" src="img/save.PNG" alt="">
 78 |                     </div>
 79 |                     <div class="likes">
 80 |                         <p class="txtl">232 Likes </p>
 81 |                         <p class="txtl" >Karma <span class="txtl1">Discription</span></p>
 82 |                         <p class="txtl1 ">2 hours ago</p>
 83 |                     </div>
 84 |                     <div class="comment-box">
 85 |                         <img class="control-icons" src="img/smile.PNG" alt="">
 86 |                         <input class="cmt" type="text"placeholder="add a comment...">
 87 |                         <span class="post">post</span>
 88 |                     </div>
 89 |                 </div>
 90 |                 <div class="content">
 91 |                     <div class="content-header">
 92 |                         <div class="profile">
 93 |                             <img class="profile-img round-img" src="img/profile2.jpg" alt="">
 94 |                         </div>
 95 |                         
 96 |                         <div class="profile-name">
 97 |                             <h4 class="pro-text">HunTer_h</h4>
 98 |                         </div>
 99 |                         <div class="con-option">
100 |                             <img class="op-icon" src="img/option.PNG" alt="">
101 |                         </div>
102 |                     </div>
103 |                     <div class="media">
104 |                         <img class="media-content" src="img/wall1.jpg" alt="">
105 |                     </div>
106 |                     <div class="controls">
107 |                         <img class="control-icons"  src="img/like.PNG" alt="">
108 |                         <img class="control-icons"  src="img/comment.PNG" alt="">
109 |                         <img class="control-icons" src="img/send.PNG" alt="">
110 |                         <img class="r-icon" src="img/save.PNG" alt="">
111 |                     </div>
112 |                     <div class="likes">
113 |                         <p class="txtl">345 Likes </p>
114 |                         <p class="txtl" >HunTer_h <span class="txtl1">hunt your dreams</span></p>
115 |                         <p class="txtl1 ">2 hours ago</p>
116 |                     </div>
117 |                     <div class="comment-box">
118 |                         <img class="control-icons" src="img/smile.PNG" alt="">
119 |                         <input class="cmt" type="search"placeholder="add a comment...">
120 |                         <span class="post">post</span>
121 |                     </div>
122 |                 </div>
123 |                 <div class="content">
124 |                     <div class="content-header">
125 |                         <div class="profile">
126 |                             <img class="profile-img round-img" src="img/profile7.jpg" alt="">
127 |                         </div>
128 |                         
129 |                         <div class="profile-name">
130 |                             <h4 class="pro-text">marq</h4>
131 |                         </div>
132 |                         <div class="con-option">
133 |                             <img class="op-icon" src="img/option.PNG" alt="">
134 |                         </div>
135 |                     </div>
136 |                     <div class="media">
137 |                         <img class="media-content" src="img/wall2.png" alt="">
138 |                     </div>
139 |                     <div class="controls">
140 |                         <img class="control-icons"  src="img/like.PNG" alt="">
141 |                         <img class="control-icons"  src="img/comment.PNG" alt="">
142 |                         <img class="control-icons" src="img/send.PNG" alt="">
143 |                         <img class="r-icon" src="img/save.PNG" alt="">
144 |                     </div>
145 |                     <div class="likes">
146 |                         <p class="txtl">552 Likes </p>
147 |                         <p class="txtl" >marq <span class="txtl1">just pic</span></p>
148 |                         <p class="txtl1 ">5 hours ago</p>
149 |                     </div>
150 |                     <div class="comment-box">
151 |                         <img class="control-icons" src="img/smile.PNG" alt="">
152 |                         <input class="cmt" type="search"placeholder="add a comment...">
153 |                         <span class="post">post</span>
154 |                     </div>
155 |                 </div>
156 |                 <div class="content">
157 |                     <div class="content-header">
158 |                         <div class="profile">
159 |                             <img class="profile-img round-img" src="img/profile9.jpg" alt="">
160 |                         </div>
161 |                         
162 |                         <div class="profile-name">
163 |                             <h4 class="pro-text">damu</h4>
164 |                         </div>
165 |                         <div class="con-option">
166 |                             <img class="op-icon" src="img/option.PNG" alt="">
167 |                         </div>
168 |                     </div>
169 |                     <div class="media">
170 |                         <img class="media-content" src="img/wall3.jpg" alt="">
171 |                     </div>
172 |                     <div class="controls">
173 |                         <img class="control-icons"  src="img/like.PNG" alt="">
174 |                         <img class="control-icons"  src="img/comment.PNG" alt="">
175 |                         <img class="control-icons" src="img/send.PNG" alt="">
176 |                         <img class="r-icon" src="img/save.PNG" alt="">
177 |                     </div>
178 |                     <div class="likes">
179 |                         <p class="txtl">2352 Likes </p>
180 |                         <p class="txtl" >damu <span class="txtl1">live long</span></p>
181 |                         <p class="txtl1 ">7 hours ago</p>
182 |                     </div>
183 |                     <div class="comment-box">
184 |                         <img class="control-icons" src="img/smile.PNG" alt="">
185 |                         <input class="cmt" type="search"placeholder="add a comment...">
186 |                         <span class="post">post</span>
187 |                     </div>
188 |                 </div>
189 |                 <div class="content">
190 |                     <div class="content-header">
191 |                         <div class="profile">
192 |                             <img class="profile-img round-img" src="img/profile7.jpg" alt="">
193 |                         </div>
194 |                         
195 |                         <div class="profile-name">
196 |                             <h4 class="pro-text">valley_y</h4>
197 |                         </div>
198 |                         <div class="con-option">
199 |                             <img class="op-icon" src="img/option.PNG" alt="">
200 |                         </div>
201 |                     </div>
202 |                     <div class="media">
203 |                         <img class="media-content" src="img/wall4.jpg" alt="">
204 |                     </div>
205 |                     <div class="controls">
206 |                         <img class="control-icons"  src="img/like.PNG" alt="">
207 |                         <img class="control-icons"  src="img/comment.PNG" alt="">
208 |                         <img class="control-icons" src="img/send.PNG" alt="">
209 |                         <img class="r-icon" src="img/save.PNG" alt="">
210 |                     </div>
211 |                     <div class="likes">
212 |                         <p class="txtl">132 Likes </p>
213 |                         <p class="txtl" >valley_y <span class="txtl1">value the life</span></p>
214 |                         <p class="txtl1 ">1 hours ago</p>
215 |                     </div>
216 |                     <div class="comment-box">
217 |                         <img class="control-icons" src="img/smile.PNG" alt="">
218 |                         <input class="cmt" type="search"placeholder="add a comment...">
219 |                         <span class="post">post</span>
220 |                     </div>
221 |                 </div>
222 |                 <div class="content">
223 |                     <div class="content-header">
224 |                         <div class="profile">
225 |                             <img class="profile-img round-img" src="img/profile6.jpg" alt="">
226 |                         </div>
227 |                         
228 |                         <div class="profile-name">
229 |                             <h4 class="pro-text">joker</h4>
230 |                         </div>
231 |                         <div class="con-option">
232 |                             <img class="op-icon" src="img/option.PNG" alt="">
233 |                         </div>
234 |                     </div>
235 |                     <div class="media">
236 |                         <img class="media-content" src="img/wall5.jpg" alt="">
237 |                     </div>
238 |                     <div class="controls">
239 |                         <img class="control-icons"  src="img/like.PNG" alt="">
240 |                         <img class="control-icons"  src="img/comment.PNG" alt="">
241 |                         <img class="control-icons" src="img/send.PNG" alt="">
242 |                         <img class="r-icon" src="img/save.PNG" alt="">
243 |                     </div>
244 |                     <div class="likes">
245 |                         <p class="txtl">652 Likes </p>
246 |                         <p class="txtl" >joker <span class="txtl1">why so serious</span></p>
247 |                         <p class="txtl1 ">6 hours ago</p>
248 |                     </div>
249 |                     <div class="comment-box">
250 |                         <img class="control-icons" src="img/smile.PNG" alt="">
251 |                         <input class="cmt" type="search"placeholder="add a comment...">
252 |                         <span class="post">post</span>
253 |                     </div>
254 |                 </div>
255 | 
256 |             </div>
257 |             
258 | 
259 |         </div>
260 |         <div class="final">
261 |             <div class="profile-card">
262 |                 <table >
263 |                     <tr>
264 |                         <th><img class="card-img round-img" src="img/profile.png" alt=""></th>
265 |                         <th><p class="name">Salniz_sk <br><span class="txtl1">bykzz</span></p></th>
266 |                         <th><p class="swt">switch</p></th>
267 |                     </tr>
268 |                 </table>
269 |             </div>
270 |             <div class="s-title">
271 |                 <table>
272 |                     <tr>
273 |                         <th><p class="c-title">Suggestions For You</p></th>
274 |                         <th class="see"><p class="seee">See All</p></th>
275 |                     </tr>
276 |                 </table>
277 |             </div>
278 |             <div class="s-people">
279 |                 <table>
280 |                     <tr>
281 |                         <td><img class="round-img p-img st" src="img/profile2.jpg" alt=""></td>
282 |                         <td><p class="name st">Tom <br><span class="txtl1">Follows You</span></p></td>
283 |                         <td><p class="flw st">Follow</p></td>
284 |                     </tr>
285 |                     <tr>
286 |                         <td><img class="round-img p-img st" src="img/profile5.jpg" alt=""></td>
287 |                         <td><p class="name st">jerry <br><span class="txtl1">New To Instagram</span></p></td>
288 |                         <td><p class="flw st">Follow</p></td>
289 |                     </tr>
290 |                     <tr>
291 |                         <td><img class="round-img p-img st" src="img/profile8.jpg" alt=""></td>
292 |                         <td><p class="name st">Killer <br><span class="txtl1">Follows You</span></p></td>
293 |                         <td><p class="flw st">Follow</p></td>
294 |                     </tr>
295 |                     <tr>
296 |                         <td><img class="round-img p-img st" src="img/profile9.jpg" alt=""></td>
297 |                         <td><p class="name st">SuKu <br><span class="txtl1">Follows You</span></p></td>
298 |                         <td><p class="flw st">Follow</p></td>
299 |                     </tr>
300 |                     <tr>
301 |                         <td><img class="round-img p-img st" src="img/profile3.jpg" alt=""></td>
302 |                         <td><p class="name st">Mr_Bean <br><span class="txtl1">Follows You</span></p></td>
303 |                         <td><p class="flw st">Follow</p></td>
304 |                     </tr>
305 |                 </table>
306 |             </div>
307 |             <div class="about">
308 |                 <a class="under" href="">About</a>
309 |                 <a class="under" href="">.help</a>
310 |                 <a class="under" href="">.Press</a>
311 |                 <a class="under" href="">.API</a>
312 |                 <a class="under" href="">.Jobs</a>
313 |                 <a class="under" href="">.Privacy</a>
314 |                 <a class="under" href="">.Terms.</a><br>
315 |                 <a class="under" href="">Location</a>
316 |                 <a class="under" href="">.Top Accounts</a>
317 |                 <a class="under" href="">Hashtags</a>
318 |                 <a class="under" href="">.language</a>
319 |                
320 | 
321 |             </div>
322 |             <div class="copy">
323 |                 <a class="under" href="">© 2022 Instagram from Meta</a>
324 | 
325 |             </div>
326 |         
327 |         </div>
328 | 
329 |     </div>
330 |     
331 | </body>
332 | </html>


--------------------------------------------------------------------------------