-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
356 lines (353 loc) · 34.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="description" content="Game Over Sidte" />
<meta name="keywords" content="Twitter Clone , تويتر" />
<meta name="author" content="BASMA HAWASH" />
<link rel="shortcut icon" href="./images/twitter-color-svgrepo-com.svg" type="image/x-icon">
<link rel="stylesheet" href="dist/output.css">
<title>Twitter</title>
</head>
<body class="bg-white dark:bg-dim-900">
<!-- ========> Countainer <======== -->
<main class="lg:container flex h-screen mx-auto xl:max-w-[1200px]">
<!-- ========> Left Side <======== -->
<section class="flex flex-col w-20 h-full lg:w-1/5 xl:pr-4">
<!-- logo -->
<a href="" class="my-2 link-active">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="45" height="45" viewBox="0 0 48 48">
<path fill="#03A9F4" d="M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429"></path>
</svg>
</a>
<!-- navBar -->
<nav class="mt-5">
<ul>
<li>
<a href="" class="mb-6 link-active">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0 0 50 50">
<path fill="#03A9F4" d="M 25 1.0507812 C 24.7825 1.0507812 24.565859 1.1197656 24.380859 1.2597656 L 1.3808594 19.210938 C 0.95085938 19.550938 0.8709375 20.179141 1.2109375 20.619141 C 1.5509375 21.049141 2.1791406 21.129062 2.6191406 20.789062 L 4 19.710938 L 4 46 C 4 46.55 4.45 47 5 47 L 19 47 L 19 29 L 31 29 L 31 47 L 45 47 C 45.55 47 46 46.55 46 46 L 46 19.710938 L 47.380859 20.789062 C 47.570859 20.929063 47.78 21 48 21 C 48.3 21 48.589063 20.869141 48.789062 20.619141 C 49.129063 20.179141 49.049141 19.550938 48.619141 19.210938 L 25.619141 1.2597656 C 25.434141 1.1197656 25.2175 1.0507812 25 1.0507812 z M 35 5 L 35 6.0507812 L 41 10.730469 L 41 5 L 35 5 z"></path>
</svg>
<span class="icon">home</span>
</a>
</li>
<li>
<a href="" class="link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path fill="#03A9F4" stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5" />
</svg>
<span class="icon">explore</span>
</a>
</li>
<li>
<a href="" class="link">
<svg fill="currentColor" viewBox="0 0 24 24" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21.697 16.468c-.02-.016-2.14-1.64-2.103-6.03.02-2.532-.812-4.782-2.347-6.335C15.872 2.71 14.01 1.94 12.005 1.93h-.013c-2.004.01-3.866.78-5.242 2.174-1.534 1.553-2.368 3.802-2.346 6.334.037 4.33-2.02 5.967-2.102 6.03-.26.193-.366.53-.265.838.102.308.39.515.712.515h4.92c.102 2.31 1.997 4.16 4.33 4.16s4.226-1.85 4.327-4.16h4.922c.322 0 .61-.206.71-.514.103-.307-.003-.645-.263-.838zM12 20.478c-1.505 0-2.73-1.177-2.828-2.658h5.656c-.1 1.48-1.323 2.66-2.828 2.66zM4.38 16.32c.74-1.132 1.548-3.028 1.524-5.896-.018-2.16.644-3.982 1.913-5.267C8.91 4.05 10.397 3.437 12 3.43c1.603.008 3.087.62 4.18 1.728 1.27 1.285 1.933 3.106 1.915 5.267-.024 2.868.785 4.765 1.525 5.896H4.38z">
</path>
</svg>
<span class="icon">notifictions</span>
</a>
</li>
<li>
<a href="" class="link">
<svg fill="currentColor" viewBox="0 0 24 24" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19.25 3.018H4.75C3.233 3.018 2 4.252 2 5.77v12.495c0 1.518 1.233 2.753 2.75 2.753h14.5c1.517 0 2.75-1.235 2.75-2.753V5.77c0-1.518-1.233-2.752-2.75-2.752zm-14.5 1.5h14.5c.69 0 1.25.56 1.25 1.25v.714l-8.05 5.367c-.273.18-.626.182-.9-.002L3.5 6.482v-.714c0-.69.56-1.25 1.25-1.25zm14.5 14.998H4.75c-.69 0-1.25-.56-1.25-1.25V8.24l7.24 4.83c.383.256.822.384 1.26.384.44 0 .877-.128 1.26-.383l7.24-4.83v10.022c0 .69-.56 1.25-1.25 1.25z">
</path>
</svg>
<span class="icon">massages</span>
</a>
</li>
<li>
<a href="" class="link">
<svg fill="currentColor" viewBox="0 0 24 24" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19.9 23.5c-.157 0-.312-.05-.442-.144L12 17.928l-7.458 5.43c-.228.164-.53.19-.782.06-.25-.127-.41-.385-.41-.667V5.6c0-1.24 1.01-2.25 2.25-2.25h12.798c1.24 0 2.25 1.01 2.25 2.25v17.15c0 .282-.158.54-.41.668-.106.055-.223.082-.34.082zM12 16.25c.155 0 .31.048.44.144l6.71 4.883V5.6c0-.412-.337-.75-.75-.75H5.6c-.413 0-.75.338-.75.75v15.677l6.71-4.883c.13-.096.285-.144.44-.144z">
</path>
</svg>
<span class="icon">bookmarks</span>
</a>
</li>
<li>
<a href="" class="link">
<svg fill="currentColor" viewBox="0 0 24 24" class="w-6 h-6">
<g>
<path
d="M19.75 22H4.25C3.01 22 2 20.99 2 19.75V4.25C2 3.01 3.01 2 4.25 2h15.5C20.99 2 22 3.01 22 4.25v15.5c0 1.24-1.01 2.25-2.25 2.25zM4.25 3.5c-.414 0-.75.337-.75.75v15.5c0 .413.336.75.75.75h15.5c.414 0 .75-.337.75-.75V4.25c0-.413-.336-.75-.75-.75H4.25z">
</path>
<path
d="M17 8.64H7c-.414 0-.75-.337-.75-.75s.336-.75.75-.75h10c.414 0 .75.335.75.75s-.336.75-.75.75zm0 4.11H7c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h10c.414 0 .75.336.75.75s-.336.75-.75.75zm-5 4.11H7c-.414 0-.75-.335-.75-.75s.336-.75.75-.75h5c.414 0 .75.337.75.75s-.336.75-.75.75z">
</path>
</g>
</svg>
<span class="icon">list</span>
</a>
</li>
<li>
<a href="" class="link">
<svg fill="currentColor" width="20px" height="20px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 472.615 472.615" xml:space="preserve" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <circle cx="236.308" cy="117.504" r="111.537"></circle> </g> </g> <g> <g> <path d="M369,246.306c-1.759-1.195-5.297-3.493-5.297-3.493c-28.511,39.583-74.993,65.402-127.395,65.402 c-52.407,0-98.894-25.825-127.404-65.416c0,0-2.974,1.947-4.451,2.942C41.444,288.182,0,360.187,0,441.87v24.779h472.615V441.87 C472.615,360.549,431.538,288.822,369,246.306z"></path> </g> </g> </g></svg>
<span class="icon">profile</span>
</a>
</li>
<li>
<a href="" class="link">
<svg fill="currentColor" width="30px" height="30px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="17.5" cy="12" r="1.5"></circle> <circle cx="12" cy="12" r="1.5"></circle> <circle cx="6.5" cy="12" r="1.5"></circle> </g></svg>
<span class="icon">more</span>
</a>
</li>
</ul>
</nav>
<!-- button -->
<button>
<a href="" class="flex items-center justify-center mx-auto font-bold text-white capitalize rounded-full w-11 h-11 lg:w-auto bg-dim-100">
<svg fill="currentColor" viewBox="0 0 24 24" class="block w-6 h-6 lg:hidden">
<path
d="M8.8 7.2H5.6V3.9c0-.4-.3-.8-.8-.8s-.7.4-.7.8v3.3H.8c-.4 0-.8.3-.8.8s.3.8.8.8h3.3v3.3c0 .4.3.8.8.8s.8-.3.8-.8V8.7H9c.4 0 .8-.3.8-.8s-.5-.7-1-.7zm15-4.9v-.1h-.1c-.1 0-9.2 1.2-14.4 11.7-3.8 7.6-3.6 9.9-3.3 9.9.3.1 3.4-6.5 6.7-9.2 5.2-1.1 6.6-3.6 6.6-3.6s-1.5.2-2.1.2c-.8 0-1.4-.2-1.7-.3 1.3-1.2 2.4-1.5 3.5-1.7.9-.2 1.8-.4 3-1.2 2.2-1.6 1.9-5.5 1.8-5.7z">
</path>
</svg>
<span class="icon lg:ml-0">tweet</span>
</a>
</button>
<!-- user -->
<div class="flex gap-5 p-2 mx-auto mt-auto rounded-full cursor-pointer w-14 lg:w-full">
<img class="w-10 h-10 rounded-full" src="images/rapunzel.jpeg" alt="profile photo">
<div class="flex-col hidden lg:flex">
<h4 class="text-sm font-bold text-gray-800 dark:text-white">Basma</h4>
<p class="text-sm text-gray-400">@BaSma972</p>
</div>
<svg viewBox="0 0 24 24" fill="#ffffff" class="w-4 h-4 mt-3 mr-2">
<g>
<path
d="M20.207 8.147c-.39-.39-1.023-.39-1.414 0L12 14.94 5.207 8.147c-.39-.39-1.023-.39-1.414 0-.39.39-.39 1.023 0 1.414l7.5 7.5c.195.196.45.294.707.294s.512-.098.707-.293l7.5-7.5c.39-.39.39-1.022 0-1.413z">
</path>
</g>
</svg>
</div>
</section>
<!-- ========> Home(Middle) <======== -->
<section class="w-full h-screen mx-2 overflow-y-auto lg:w-1/2">
<!-- Sticky Header -->
<div class="sticky top-0 flex items-start justify-between px-4 py-3 bg-white border-b-2 border-gray-200 border-x-2 dark:border-gray-700 dark:bg-dim-900">
<h4 class="font-bold text-gray-800 capitalize dark:text-gray-100">home</h4>
<!-- toggle darkmode -->
<div class="flex gap-3">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer" checked id="toggle">
<div class="relative w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-dim-100"></div>
</label>
<svg viewBox="0 0 24 24" class="w-5 h-5 text-blue-400" fill="currentColor">
<g>
<path
d="M22.772 10.506l-5.618-2.192-2.16-6.5c-.102-.307-.39-.514-.712-.514s-.61.207-.712.513l-2.16 6.5-5.62 2.192c-.287.112-.477.39-.477.7s.19.585.478.698l5.62 2.192 2.16 6.5c.102.306.39.513.712.513s.61-.207.712-.513l2.16-6.5 5.62-2.192c.287-.112.477-.39.477-.7s-.19-.585-.478-.697zm-6.49 2.32c-.208.08-.37.25-.44.46l-1.56 4.695-1.56-4.693c-.07-.21-.23-.38-.438-.462l-4.155-1.62 4.154-1.622c.208-.08.37-.25.44-.462l1.56-4.693 1.56 4.694c.07.212.23.382.438.463l4.155 1.62-4.155 1.622zM6.663 3.812h-1.88V2.05c0-.414-.337-.75-.75-.75s-.75.336-.75.75v1.762H1.5c-.414 0-.75.336-.75.75s.336.75.75.75h1.782v1.762c0 .414.336.75.75.75s.75-.336.75-.75V5.312h1.88c.415 0 .75-.336.75-.75s-.335-.75-.75-.75zm2.535 15.622h-1.1v-1.016c0-.414-.335-.75-.75-.75s-.75.336-.75.75v1.016H5.57c-.414 0-.75.336-.75.75s.336.75.75.75H6.6v1.016c0 .414.335.75.75.75s.75-.336.75-.75v-1.016h1.098c.414 0 .75-.336.75-.75s-.336-.75-.75-.75z">
</path>
</g>
</svg>
</div>
</div>
<!-- Tweet Box -->
<div class="border border-gray-200 dark:border-dim-200">
<div class="flex p-4">
<img class="w-10 h-10 rounded-full" src="images/rapunzel.jpeg" alt="profile photo">
<textarea id="postText" class="w-full h-16 p-2 text-gray-900 bg-transparent resize-none dark:text-white focus:outline-none" placeholder="What's happening" name="" id=""></textarea>
</div>
<div class="flex items-center justify-between w-full px-4">
<ul class="flex gap-2">
<li>
<a href="" class="p-2 rounded-full text-dim-100">
<svg viewBox="0 0 24 24" class="w-5 h-5" fill="currentColor">
<g>
<path
d="M19.75 2H4.25C3.01 2 2 3.01 2 4.25v15.5C2 20.99 3.01 22 4.25 22h15.5c1.24 0 2.25-1.01 2.25-2.25V4.25C22 3.01 20.99 2 19.75 2zM4.25 3.5h15.5c.413 0 .75.337.75.75v9.676l-3.858-3.858c-.14-.14-.33-.22-.53-.22h-.003c-.2 0-.393.08-.532.224l-4.317 4.384-1.813-1.806c-.14-.14-.33-.22-.53-.22-.193-.03-.395.08-.535.227L3.5 17.642V4.25c0-.413.337-.75.75-.75zm-.744 16.28l5.418-5.534 6.282 6.254H4.25c-.402 0-.727-.322-.744-.72zm16.244.72h-2.42l-5.007-4.987 3.792-3.85 4.385 4.384v3.703c0 .413-.337.75-.75.75z">
</path>
<circle cx="8.868" cy="8.309" r="1.542"></circle>
</g>
</svg>
</a>
</li>
<li>
<a href="" class="p-2 rounded-full text-dim-100">
<svg viewBox="0 0 24 24" class="w-5 h-5" fill="currentColor">
<g>
<path
d="M19 10.5V8.8h-4.4v6.4h1.7v-2h2v-1.7h-2v-1H19zm-7.3-1.7h1.7v6.4h-1.7V8.8zm-3.6 1.6c.4 0 .9.2 1.2.5l1.2-1C9.9 9.2 9 8.8 8.1 8.8c-1.8 0-3.2 1.4-3.2 3.2s1.4 3.2 3.2 3.2c1 0 1.8-.4 2.4-1.1v-2.5H7.7v1.2h1.2v.6c-.2.1-.5.2-.8.2-.9 0-1.6-.7-1.6-1.6 0-.8.7-1.6 1.6-1.6z">
</path>
<path
d="M20.5 2.02h-17c-1.24 0-2.25 1.007-2.25 2.247v15.507c0 1.238 1.01 2.246 2.25 2.246h17c1.24 0 2.25-1.008 2.25-2.246V4.267c0-1.24-1.01-2.247-2.25-2.247zm.75 17.754c0 .41-.336.746-.75.746h-17c-.414 0-.75-.336-.75-.746V4.267c0-.412.336-.747.75-.747h17c.414 0 .75.335.75.747v15.507z">
</path>
</g>
</svg>
</a>
</li>
<li>
<a href="" class="p-2 rounded-full text-dim-100">
<svg viewBox="0 0 24 24" class="w-5 h-5" fill="currentColor">
<g>
<path
d="M20.222 9.16h-1.334c.015-.09.028-.182.028-.277V6.57c0-.98-.797-1.777-1.778-1.777H3.5V3.358c0-.414-.336-.75-.75-.75s-.75.336-.75.75V20.83c0 .415.336.75.75.75s.75-.335.75-.75v-1.434h10.556c.98 0 1.778-.797 1.778-1.777v-2.313c0-.095-.014-.187-.028-.278h4.417c.98 0 1.778-.798 1.778-1.778v-2.31c0-.983-.797-1.78-1.778-1.78zM17.14 6.293c.152 0 .277.124.277.277v2.31c0 .154-.125.28-.278.28H3.5V6.29h13.64zm-2.807 9.014v2.312c0 .153-.125.277-.278.277H3.5v-2.868h10.556c.153 0 .277.126.277.28zM20.5 13.25c0 .153-.125.277-.278.277H3.5V10.66h16.722c.153 0 .278.124.278.277v2.313z">
</path>
</g>
</svg>
</a>
</li>
<li>
<a href="" class="p-2 rounded-full text-dim-100">
<svg viewBox="0 0 24 24" class="w-5 h-5" fill="currentColor">
<g>
<path
d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z">
</path>
<path
d="M12 17.115c-1.892 0-3.633-.95-4.656-2.544-.224-.348-.123-.81.226-1.035.348-.226.812-.124 1.036.226.747 1.162 2.016 1.855 3.395 1.855s2.648-.693 3.396-1.854c.224-.35.688-.45 1.036-.225.35.224.45.688.226 1.036-1.025 1.594-2.766 2.545-4.658 2.545z">
</path>
<circle cx="14.738" cy="9.458" r="1.478"></circle>
<circle cx="9.262" cy="9.458" r="1.478"></circle>
</g>
</svg>
</a>
</li>
</ul>
<!-- button -->
<button id="postButton">
<a href="" class="flex items-center px-3 py-1 mx-auto font-bold text-white capitalize rounded-full bg-dim-100">
<span>tweet</span>
</a>
</button>
</div>
</div>
<!-- tweet new post -->
<div id="posts">
<!-- add posts -->
</div>
<div class="pb-4 border border-gray-200 cursor-pointer dark:border-dim-200">
<div class="flex p-4 pb-0">
<img class="rounded-full h-9 w-9" src="images/rapunzel.jpeg" alt="profile photo">
<p class="flex items-center flex-shrink-0 ml-2 font-medium text-gray-800 dark:text-white">
Basma
<span class="ml-1 text-sm leading-5 text-gray-500">@BaSma972 . July 10</span>
</p>
</div>
<div class="pl-8 pr-4 xl:pl-16">
<p class="w-auto font-medium text-gray-800 dark:text-white">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Distinctio expedita repellat tempora nobis ipsum. Et aspernatur tempore sunt praesentium nihil, ad quisquam, reprehenderit enim atque nemo qui eaque, impedit commodi!</p>
<a href="" class="text-dim-50">#mistakes</a>
<img class="w-full my-3 mr-2 border border-gray-600 rounded-xl" src="images/tweet1.jpg" alt="">
<div class="border-x-0 tweets">
<ul class="flex items-center justify-between w-full py-1 md:gap-5 md:justify-normal ">
<li class="post-icon">
<span class="mr-1 font-sm">12.5k</span>
<p class="text-gray-400 caption-top font-sm">retweets</p>
</li>
<li class="post-icon">
<span class="mr-1 font-sm">45k</span>
<p class="text-gray-400 caption-top font-sm">quotes</p>
</li>
<li class="post-icon">
<span class="mr-1 font-sm">90k</span>
<p class="text-gray-400 caption-top font-sm">likes</p>
</li>
</ul>
</div>
<ul class="flex items-center justify-between w-full pt-3 ps-3 md:gap-24 md:justify-normal">
<li class="post-icon hover:text-blue-400 dark:hover:text-blue-400">
<svg class="mr-2 text-lg" width="20px" height="20px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" fill="currentColor" transform="matrix(-1, 0, 0, 1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>comment-1</title> <desc>Created with Sketch Beta.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="Icon-Set" sketch:type="MSLayerGroup" transform="translate(-100.000000, -255.000000)" fill="currentColor"> <path d="M116,281 C114.832,281 113.704,280.864 112.62,280.633 L107.912,283.463 L107.975,278.824 C104.366,276.654 102,273.066 102,269 C102,262.373 108.268,257 116,257 C123.732,257 130,262.373 130,269 C130,275.628 123.732,281 116,281 L116,281 Z M116,255 C107.164,255 100,261.269 100,269 C100,273.419 102.345,277.354 106,279.919 L106,287 L113.009,282.747 C113.979,282.907 114.977,283 116,283 C124.836,283 132,276.732 132,269 C132,261.269 124.836,255 116,255 L116,255 Z" id="comment-1" sketch:type="MSShapeGroup"> </path> </g> </g> </g></svg>
</li>
<li class="post-icon hover:text-green-400 dark:hover:text-green-400">
<svg class="mr-2 text-lg" width="25px" height="25px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M10 7.343C10.4142 7.343 10.75 7.00721 10.75 6.593C10.75 6.17879 10.4142 5.843 10 5.843V7.343ZM9.808 6.593L9.79453 7.343H9.808V6.593ZM5 11.227L4.25013 11.2128C4.25004 11.2176 4.25 11.2223 4.25 11.227H5ZM5 12.772L4.24987 12.772L4.25013 12.786L5 12.772ZM9.808 17.407V16.6569L9.79453 16.6571L9.808 17.407ZM11.988 18.157C12.4022 18.157 12.738 17.8212 12.738 17.407C12.738 16.9928 12.4022 16.657 11.988 16.657V18.157ZM10.8752 15.2787C10.5784 14.9897 10.1036 14.996 9.81465 15.2928C9.52569 15.5896 9.53201 16.0644 9.82878 16.3533L10.8752 15.2787ZM11.4638 17.9453C11.7606 18.2343 12.2354 18.228 12.5243 17.9312C12.8133 17.6344 12.807 17.1596 12.5102 16.8707L11.4638 17.9453ZM12.5102 17.9453C12.807 17.6564 12.8133 17.1816 12.5243 16.8848C12.2354 16.588 11.7606 16.5817 11.4638 16.8707L12.5102 17.9453ZM9.82878 18.4627C9.53201 18.7516 9.52569 19.2264 9.81465 19.5232C10.1036 19.82 10.5784 19.8263 10.8752 19.5373L9.82878 18.4627ZM14 16.657C13.5858 16.657 13.25 16.9928 13.25 17.407C13.25 17.8212 13.5858 18.157 14 18.157V16.657ZM14.192 17.407L14.2055 16.657H14.192V17.407ZM19 12.773L19.7499 12.7872C19.75 12.7824 19.75 12.7777 19.75 12.773H19ZM19 11.228H19.7501L19.7499 11.214L19 11.228ZM14.192 6.593V7.34312L14.2055 7.34288L14.192 6.593ZM12.013 5.843C11.5988 5.843 11.263 6.17879 11.263 6.593C11.263 7.00721 11.5988 7.343 12.013 7.343V5.843ZM13.1248 8.72135C13.4216 9.01031 13.8964 9.00399 14.1853 8.70722C14.4743 8.41045 14.468 7.93562 14.1712 7.64665L13.1248 8.72135ZM12.5362 6.05465C12.2394 5.76569 11.7646 5.77201 11.4757 6.06878C11.1867 6.36555 11.193 6.84038 11.4898 7.12935L12.5362 6.05465ZM11.4898 6.05465C11.193 6.34362 11.1867 6.81845 11.4757 7.11522C11.7646 7.41199 12.2394 7.41831 12.5362 7.12935L11.4898 6.05465ZM14.1712 5.53735C14.468 5.24838 14.4743 4.77355 14.1853 4.47678C13.8964 4.18001 13.4216 4.17369 13.1248 4.46265L14.1712 5.53735ZM10 5.843H9.808V7.343H10V5.843ZM9.82147 5.84312C6.80074 5.78886 4.30721 8.19215 4.25013 11.2128L5.74987 11.2412C5.7913 9.04822 7.60155 7.30349 9.79453 7.34288L9.82147 5.84312ZM4.25 11.227V12.772H5.75V11.227H4.25ZM4.25013 12.786C4.30657 15.8071 6.80029 18.2111 9.82147 18.1569L9.79453 16.6571C7.60123 16.6965 5.79084 14.9513 5.74987 12.758L4.25013 12.786ZM9.808 18.157H11.988V16.657H9.808V18.157ZM9.82878 16.3533L11.4638 17.9453L12.5102 16.8707L10.8752 15.2787L9.82878 16.3533ZM11.4638 16.8707L9.82878 18.4627L10.8752 19.5373L12.5102 17.9453L11.4638 16.8707ZM14 18.157H14.192V16.657H14V18.157ZM14.1785 18.1569C17.1993 18.2111 19.6928 15.8078 19.7499 12.7872L18.2501 12.7588C18.2087 14.9518 16.3985 16.6965 14.2055 16.6571L14.1785 18.1569ZM19.75 12.773V11.228H18.25V12.773H19.75ZM19.7499 11.214C19.6934 8.19286 17.1997 5.78886 14.1785 5.84312L14.2055 7.34288C16.3988 7.30349 18.2092 9.04873 18.2501 11.242L19.7499 11.214ZM14.192 5.843H12.013V7.343H14.192V5.843ZM14.1712 7.64665L12.5362 6.05465L11.4898 7.12935L13.1248 8.72135L14.1712 7.64665ZM12.5362 7.12935L14.1712 5.53735L13.1248 4.46265L11.4898 6.05465L12.5362 7.12935Z" fill="currentColor"></path> </g></svg>
</li>
<li class="post-icon hover:text-red-600 dark:hover:text-red-600">
<svg class="mr-2 text-lg" fill="currentColor" width="20px" height="20px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M20.5,4.609A5.811,5.811,0,0,0,16,2.5a5.75,5.75,0,0,0-4,1.455A5.75,5.75,0,0,0,8,2.5,5.811,5.811,0,0,0,3.5,4.609c-.953,1.156-1.95,3.249-1.289,6.66,1.055,5.447,8.966,9.917,9.3,10.1a1,1,0,0,0,.974,0c.336-.187,8.247-4.657,9.3-10.1C22.45,7.858,21.453,5.765,20.5,4.609Zm-.674,6.28C19.08,14.74,13.658,18.322,12,19.34c-2.336-1.41-7.142-4.95-7.821-8.451-.513-2.646.189-4.183.869-5.007A3.819,3.819,0,0,1,8,4.5a3.493,3.493,0,0,1,3.115,1.469,1.005,1.005,0,0,0,1.76.011A3.489,3.489,0,0,1,16,4.5a3.819,3.819,0,0,1,2.959,1.382C19.637,6.706,20.339,8.243,19.826,10.889Z"></path></g></svg>
</li>
<li class="post-icon hover:text-blue-400 dark:hover:text-blue-400">
<svg class="mr-2 text-lg font-extrabold" fill="currentColor" width="20px" height="25px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g id="Export"> <g> <path d="M5.552,20.968a2.577,2.577,0,0,1-2.5-2.73c-.012-2.153,0-4.306,0-6.459a.5.5,0,0,1,1,0c0,2.2-.032,4.4,0,6.6.016,1.107.848,1.589,1.838,1.589H18.353A1.546,1.546,0,0,0,19.825,19a3.023,3.023,0,0,0,.1-1.061V11.779h0a.5.5,0,0,1,1,0c0,2.224.085,4.465,0,6.687a2.567,2.567,0,0,1-2.67,2.5Z"></path> <path d="M12.337,3.176a.455.455,0,0,0-.311-.138c-.015,0-.028,0-.043-.006s-.027,0-.041.006a.457.457,0,0,0-.312.138L7.961,6.845a.5.5,0,0,0,.707.707l2.816-2.815V15.479a.5.5,0,0,0,1,0V4.737L15.3,7.552a.5.5,0,0,0,.707-.707Z"></path> </g> </g> </g></svg>
</li>
</ul>
</div>
</div>
<!-- spinner -->
<div class="p-4 border-gray-200 dark:border-gray-700 border-x-2 ">
<svg class="w-8 h-8 mx-auto animate-spin-fast">
<circle cx="16" cy="16" fill="none" r="14" stroke-width="4" style="stroke: rgb(29, 161, 242); opacity: 0.2">
</circle>
<circle cx="16" cy="16" fill="none" r="14" stroke-width="4" style="
stroke: rgb(29, 161, 242);
stroke-dasharray: 80;
stroke-dashoffset: 60;">
</circle>
</svg>
</div>
</section>
<!-- ========> Right Side <======== -->
<section class="hidden w-[30%] lg:block ">
<!-- Search -->
<div class="relative">
<div class="absolute inset-y-0 flex items-center pointer-events-none start-0 ps-3">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
</svg>
</div>
<input type="search" id="default-search" class="block w-full p-2 mt-2 text-sm text-gray-900 border border-gray-300 rounded-full outline-dim-100 ps-10 bg-gray-50 focus:ring-dim-100 focus:border-dim-100 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-dim-100 dark:focus:border-dim-100" placeholder="Search Twetter" required />
</div>
<!-- Hashtag -->
<div class="m-2 bg-gray-50 dark:bg-dim-700 rounded-2xl">
<h3 class="p-3 font-bold text-gray-900 border-b gray-200 border- dark:border-dim-200 dark:text-white">What's happening</h3>
<div class="p-3 border-b border-gray-200 dark:border-dim-200">
<h4 class="font-bold text-gray-800 dark:text-white">#Frontend</h4>
<p class="text-sm text-gray-400">19.3K Tweets</p>
</div>
<div class="p-3 border-b border-gray-200 dark:border-dim-200">
<h4 class="font-bold text-gray-800 dark:text-white">#ASP.NET</h4>
<p class="text-sm text-gray-400">10.7K Tweets</p>
</div>
<div class="p-3 border-b border-gray-200 dark:border-dim-200">
<h4 class="font-bold text-gray-800 dark:text-white">#Islam</h4>
<p class="text-sm text-gray-400">7K Tweets</p>
</div>
<div class="p-3 capitalize cursor-pointer text-dim-100">
show more
</div>
</div>
<!-- who to follow -->
<div class="m-3 bg-gray-50 dark:bg-dim-700 rounded-2xl">
<h3 class="p-3 font-bold text-gray-900 border-b gray-200 border- dark:border-dim-200 dark:text-white">Who to follow</h3>
<div class="flex items-center justify-between p-3 border-b border-gray-200 dark:border-dim-200">
<div class="flex">
<img class="w-10 h-10 rounded-full" src="images/rapunzel.jpeg" alt="profile photo">
<div class="ml-2 text-sm">
<h5 class="font-bold text-gray-900 dark:text-white">Basma</h5>
<p class="text-gray-400">@BaSma972</p>
</div>
</div>
<button type="button" class="px-3 py-1 mb-2 text-sm font-medium border rounded-full bg-transparentparent text-dim-100 me-2 dark:bg-transparent border-dim-100">Follow</button>
</div>
<div class="flex items-center justify-between p-3 border-b border-gray-200 dark:border-dim-200">
<div class="flex">
<img class="w-10 h-10 rounded-full" src="images/tweet1.jpg" alt="profile photo">
<div class="ml-2 text-sm">
<h5 class="font-bold text-gray-900 dark:text-white">Asmaa</h5>
<p class="text-gray-400">@Asmaa24</p>
</div>
</div>
<button type="button" class="px-3 py-1 mb-2 text-sm font-medium border rounded-full bg-transparentparent text-dim-100 me-2 dark:bg-transparent border-dim-100">Follow</button>
</div>
<!-- loading follow -->
<div class="p-3 border-b border-gray-200 dark:border-dim-200">
<div class="flex gap-3 animate-pulse">
<div class="w-12 h-12 bg-gray-400 rounded-full"></div>
<div class="flex-1 py-1 space-y-2">
<div class="w-5/6 h-3 bg-gray-400 rounded"></div>
<div class="w-3/4 h-3 bg-gray-400 rounded"></div>
<div class="w-4/6 h-3 bg-gray-400 rounded"></div>
</div>
</div>
</div>
<div class="p-3 capitalize cursor-pointer text-dim-100">
show more
</div>
</div>
</section>
</main>
<script src="js/main.js"></script>
</body>
</html>