-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
397 lines (397 loc) · 43.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
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Distance</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="header-block">
<button class="m-menu">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</button>
<div class="search">
<input type="text" class="search-input" placeholder="Search">
</div>
<div class="navigation"></div>
<div class="user">
<img src="img/avatar.jpeg" alt="avatar" class="user-avatar">
<span class="user-name">Vladimir</span>
</div>
<nav class="navigation-panel">
<a href="#" class="navigation-link">Home</a>
<a href="#" class="navigation-link">Create</a>
</nav>
<div class="icons-panel">
<a href="#" class="icon-link">
<svg width="20" height="20" class="header-icon">
<use xlink:href="img/icons.svg#users"></use>
</svg>
</a>
<a href="#" class="icon-link">
<svg width="22" height="22" class="header-icon">
<use xlink:href="img/icons.svg#chat"></use>
</svg>
</a>
<a href="#" class="icon-link">
<span class="notification">8</span>
<svg width="16" height="22" class="header-icon">
<use xlink:href="img/icons.svg#bell"></use>
</svg>
</a>
<a href="#" class="icon-link">
<svg width="22" height="22" class="header-icon">
<use xlink:href="img/icons.svg#info"></use>
</svg>
</a>
</div>
</div>
</header>
<div class="container">
<div class="menu-sidebar">
<div class="user">
<img src="img/avatar.jpeg" alt="avatar" class="user-avatar">
<span class="user-name">Vladimir Glinskikh</span>
</div>
<!-- /.user -->
<nav class="nav-group">
<a href="#" class="nav-link active">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.625 2.625H3.375C2.96016 2.625 2.625 2.96016 2.625 3.375V20.625C2.625 21.0398 2.96016 21.375 3.375 21.375H20.625C21.0398 21.375 21.375 21.0398 21.375 20.625V3.375C21.375 2.96016 21.0398 2.625 20.625 2.625ZM19.6875 19.6875H4.3125V4.3125H19.6875V19.6875Z"
fill="#1890FF"/>
<path d="M4.3125 19.6875H19.6875V4.3125H4.3125V19.6875ZM11.3438 8.0625C11.3438 7.95937 11.4281 7.875 11.5312 7.875H15.8438C15.9469 7.875 16.0312 7.95937 16.0312 8.0625V9.1875C16.0312 9.29063 15.9469 9.375 15.8438 9.375H11.5312C11.4281 9.375 11.3438 9.29063 11.3438 9.1875V8.0625ZM11.3438 11.4375C11.3438 11.3344 11.4281 11.25 11.5312 11.25H15.8438C15.9469 11.25 16.0312 11.3344 16.0312 11.4375V12.5625C16.0312 12.6656 15.9469 12.75 15.8438 12.75H11.5312C11.4281 12.75 11.3438 12.6656 11.3438 12.5625V11.4375ZM11.3438 14.8125C11.3438 14.7094 11.4281 14.625 11.5312 14.625H15.8438C15.9469 14.625 16.0312 14.7094 16.0312 14.8125V15.9375C16.0312 16.0406 15.9469 16.125 15.8438 16.125H11.5312C11.4281 16.125 11.3438 16.0406 11.3438 15.9375V14.8125ZM8.90625 7.6875C9.42422 7.6875 9.84375 8.10703 9.84375 8.625C9.84375 9.14297 9.42422 9.5625 8.90625 9.5625C8.38828 9.5625 7.96875 9.14297 7.96875 8.625C7.96875 8.10703 8.38828 7.6875 8.90625 7.6875ZM8.90625 11.0625C9.42422 11.0625 9.84375 11.482 9.84375 12C9.84375 12.518 9.42422 12.9375 8.90625 12.9375C8.38828 12.9375 7.96875 12.518 7.96875 12C7.96875 11.482 8.38828 11.0625 8.90625 11.0625ZM8.90625 14.4375C9.42422 14.4375 9.84375 14.857 9.84375 15.375C9.84375 15.893 9.42422 16.3125 8.90625 16.3125C8.38828 16.3125 7.96875 15.893 7.96875 15.375C7.96875 14.857 8.38828 14.4375 8.90625 14.4375Z"
fill="#E6F7FF"/>
<path d="M7.96875 15.375C7.96875 15.6236 8.06752 15.8621 8.24334 16.0379C8.41915 16.2137 8.65761 16.3125 8.90625 16.3125C9.15489 16.3125 9.39335 16.2137 9.56916 16.0379C9.74498 15.8621 9.84375 15.6236 9.84375 15.375C9.84375 15.1264 9.74498 14.8879 9.56916 14.7121C9.39335 14.5363 9.15489 14.4375 8.90625 14.4375C8.65761 14.4375 8.41915 14.5363 8.24334 14.7121C8.06752 14.8879 7.96875 15.1264 7.96875 15.375ZM7.96875 12C7.96875 12.2486 8.06752 12.4871 8.24334 12.6629C8.41915 12.8387 8.65761 12.9375 8.90625 12.9375C9.15489 12.9375 9.39335 12.8387 9.56916 12.6629C9.74498 12.4871 9.84375 12.2486 9.84375 12C9.84375 11.7514 9.74498 11.5129 9.56916 11.3371C9.39335 11.1613 9.15489 11.0625 8.90625 11.0625C8.65761 11.0625 8.41915 11.1613 8.24334 11.3371C8.06752 11.5129 7.96875 11.7514 7.96875 12ZM7.96875 8.625C7.96875 8.87364 8.06752 9.1121 8.24334 9.28791C8.41915 9.46373 8.65761 9.5625 8.90625 9.5625C9.15489 9.5625 9.39335 9.46373 9.56916 9.28791C9.74498 9.1121 9.84375 8.87364 9.84375 8.625C9.84375 8.37636 9.74498 8.1379 9.56916 7.96209C9.39335 7.78627 9.15489 7.6875 8.90625 7.6875C8.65761 7.6875 8.41915 7.78627 8.24334 7.96209C8.06752 8.1379 7.96875 8.37636 7.96875 8.625ZM11.5312 16.125H15.8438C15.9469 16.125 16.0312 16.0406 16.0312 15.9375V14.8125C16.0312 14.7094 15.9469 14.625 15.8438 14.625H11.5312C11.4281 14.625 11.3438 14.7094 11.3438 14.8125V15.9375C11.3438 16.0406 11.4281 16.125 11.5312 16.125ZM11.5312 12.75H15.8438C15.9469 12.75 16.0312 12.6656 16.0312 12.5625V11.4375C16.0312 11.3344 15.9469 11.25 15.8438 11.25H11.5312C11.4281 11.25 11.3438 11.3344 11.3438 11.4375V12.5625C11.3438 12.6656 11.4281 12.75 11.5312 12.75ZM11.5312 9.375H15.8438C15.9469 9.375 16.0312 9.29062 16.0312 9.1875V8.0625C16.0312 7.95937 15.9469 7.875 15.8438 7.875H11.5312C11.4281 7.875 11.3438 7.95937 11.3438 8.0625V9.1875C11.3438 9.29062 11.4281 9.375 11.5312 9.375Z"
fill="#1890FF"/>
</svg>
<span class="nav-text">News Feed</span>
</a>
<a href="#" class="nav-link">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.1719 5.83371C17.3735 5.03264 16.426 4.39565 15.3828 3.95871C14.3129 3.50917 13.1637 3.27885 12.0031 3.28136H11.9633C9.62659 3.29074 7.43987 4.2048 5.80393 5.85714C4.16565 7.50949 3.27268 9.70324 3.28206 12.04C3.28909 13.4532 3.64065 14.8571 4.30159 16.097L4.40706 16.2939V19.5939H7.70706L7.90393 19.6993C9.14377 20.3603 10.5477 20.7118 11.961 20.7189H12.0008C14.3211 20.7189 16.5008 19.8235 18.1438 18.197C19.7938 16.561 20.7102 14.3743 20.7242 12.04C20.7289 10.854 20.5016 9.70558 20.0469 8.62277C19.6097 7.57975 18.9727 6.63229 18.1719 5.83371ZM7.31331 13.1251C7.01891 13.1191 6.73861 12.9979 6.53253 12.7876C6.32646 12.5773 6.21104 12.2946 6.21104 12.0001C6.21104 11.7057 6.32646 11.4229 6.53253 11.2126C6.73861 11.0023 7.01891 10.8811 7.31331 10.8751C7.6077 10.8811 7.88801 11.0023 8.09408 11.2126C8.30015 11.4229 8.41558 11.7057 8.41558 12.0001C8.41558 12.2946 8.30015 12.5773 8.09408 12.7876C7.88801 12.9979 7.6077 13.1191 7.31331 13.1251ZM12.0008 13.1251C11.7064 13.1191 11.4261 12.9979 11.22 12.7876C11.014 12.5773 10.8985 12.2946 10.8985 12.0001C10.8985 11.7057 11.014 11.4229 11.22 11.2126C11.4261 11.0023 11.7064 10.8811 12.0008 10.8751C12.2952 10.8811 12.5755 11.0023 12.7816 11.2126C12.9877 11.4229 13.1031 11.7057 13.1031 12.0001C13.1031 12.2946 12.9877 12.5773 12.7816 12.7876C12.5755 12.9979 12.2952 13.1191 12.0008 13.1251ZM16.6883 13.1251C16.3939 13.1191 16.1136 12.9979 15.9075 12.7876C15.7015 12.5773 15.586 12.2946 15.586 12.0001C15.586 11.7057 15.7015 11.4229 15.9075 11.2126C16.1136 11.0023 16.3939 10.8811 16.6883 10.8751C16.9827 10.8811 17.263 11.0023 17.4691 11.2126C17.6752 11.4229 17.7906 11.7057 17.7906 12.0001C17.7906 12.2946 17.6752 12.5773 17.4691 12.7876C17.263 12.9979 16.9827 13.1191 16.6883 13.1251Z"
fill="#E6F7FF"/>
<path d="M15.5625 12C15.5625 12.2984 15.681 12.5845 15.892 12.7955C16.103 13.0065 16.3891 13.125 16.6875 13.125C16.9859 13.125 17.272 13.0065 17.483 12.7955C17.694 12.5845 17.8125 12.2984 17.8125 12C17.8125 11.7016 17.694 11.4155 17.483 11.2045C17.272 10.9935 16.9859 10.875 16.6875 10.875C16.3891 10.875 16.103 10.9935 15.892 11.2045C15.681 11.4155 15.5625 11.7016 15.5625 12ZM6.1875 12C6.1875 12.2984 6.30603 12.5845 6.517 12.7955C6.72798 13.0065 7.01413 13.125 7.3125 13.125C7.61087 13.125 7.89702 13.0065 8.108 12.7955C8.31897 12.5845 8.4375 12.2984 8.4375 12C8.4375 11.7016 8.31897 11.4155 8.108 11.2045C7.89702 10.9935 7.61087 10.875 7.3125 10.875C7.01413 10.875 6.72798 10.9935 6.517 11.2045C6.30603 11.4155 6.1875 11.7016 6.1875 12Z"
fill="#1890FF"/>
<path d="M21.6846 7.93125C21.1549 6.67266 20.3955 5.54297 19.4275 4.57266C18.4663 3.60796 17.3253 2.84114 16.0689 2.31563C14.7799 1.77422 13.4111 1.5 12.0002 1.5H11.9533C10.533 1.50703 9.15723 1.78828 7.86348 2.34141C6.61791 2.87232 5.48753 3.64049 4.53535 4.60312C3.57676 5.57109 2.82441 6.69609 2.3041 7.95C1.76504 9.24844 1.49316 10.6289 1.50019 12.0492C1.50815 13.6769 1.89322 15.2806 2.62519 16.7344V20.2969C2.62519 20.5828 2.73878 20.857 2.94097 21.0592C3.14316 21.2614 3.41738 21.375 3.70332 21.375H7.26816C8.72198 22.107 10.3257 22.492 11.9533 22.5H12.0025C13.4064 22.5 14.7682 22.2281 16.0502 21.6961C17.3002 21.1768 18.437 20.419 19.3971 19.4648C20.365 18.5063 21.1268 17.3859 21.6588 16.1367C22.2119 14.843 22.4932 13.4672 22.5002 12.0469C22.5072 10.6195 22.2307 9.23438 21.6846 7.93125ZM18.1432 18.1969C16.5002 19.8234 14.3205 20.7188 12.0002 20.7188H11.9604C10.5471 20.7117 9.14316 20.3602 7.90332 19.6992L7.70644 19.5938H4.40644V16.2938L4.30098 16.0969C3.64004 14.857 3.28848 13.4531 3.28144 12.0398C3.27207 9.70312 4.16504 7.50937 5.80332 5.85703C7.43926 4.20469 9.62598 3.29062 11.9627 3.28125H12.0025C13.1744 3.28125 14.3111 3.50859 15.3822 3.95859C16.4275 4.39687 17.365 5.02734 18.1713 5.83359C18.9752 6.6375 19.608 7.57734 20.0463 8.62266C20.501 9.70547 20.7283 10.8539 20.7236 12.0398C20.7096 14.3742 19.7932 16.5609 18.1432 18.1969Z"
fill="#1890FF"/>
<path d="M10.875 12C10.875 12.2984 10.9935 12.5845 11.2045 12.7955C11.4155 13.0065 11.7016 13.125 12 13.125C12.2984 13.125 12.5845 13.0065 12.7955 12.7955C13.0065 12.5845 13.125 12.2984 13.125 12C13.125 11.7016 13.0065 11.4155 12.7955 11.2045C12.5845 10.9935 12.2984 10.875 12 10.875C11.7016 10.875 11.4155 10.9935 11.2045 11.2045C10.9935 11.4155 10.875 11.7016 10.875 12Z"
fill="#1890FF"/>
</svg>
<span class="nav-text">Messages</span>
</a>
<a href="#" class="nav-link">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.6758 8.0625H4.32422C4.31719 8.0625 4.3125 8.06719 4.3125 8.07422V10.2117C4.3125 11.6133 5.46094 12.75 6.87422 12.75C7.82812 12.75 8.66016 12.2344 9.10312 11.468C9.17109 11.3484 9.3 11.2734 9.43828 11.2734C9.57656 11.2734 9.70312 11.3484 9.77344 11.468C10.2141 12.2344 11.0461 12.75 12 12.75C12.9563 12.75 13.7906 12.232 14.2289 11.4633C14.2969 11.3461 14.4211 11.2734 14.5547 11.2734H14.5687C14.7047 11.2734 14.8266 11.3461 14.8945 11.4633C15.3352 12.232 16.1695 12.75 17.1258 12.75C18.5391 12.75 19.6875 11.6133 19.6875 10.2117V8.07422C19.6875 8.06719 19.6828 8.0625 19.6758 8.0625Z"
fill="#E6F7FF"/>
<path d="M20.6723 6.37734V3.375C20.6723 2.96016 20.3371 2.625 19.9223 2.625H4.07851C3.66366 2.625 3.32851 2.96016 3.32851 3.375V6.37734C2.9371 6.40078 2.62538 6.72656 2.62538 7.125V10.2117C2.62388 10.779 2.73875 11.3406 2.96288 11.8617C3.06366 12.1008 3.18788 12.3258 3.32851 12.5391V20.625C3.32851 21.0375 3.66366 21.375 4.07851 21.375H19.9223C20.3371 21.375 20.6723 21.0398 20.6723 20.625V12.5391C20.8151 12.3252 20.9375 12.0985 21.0379 11.8617C21.2605 11.3391 21.3754 10.7836 21.3754 10.2117V7.125C21.3754 6.72656 21.0637 6.40078 20.6723 6.37734ZM5.01601 4.3125H18.9848V6.375H5.01601V4.3125ZM13.5004 19.6898H10.5004V17.25H13.5004V19.6898ZM18.9941 19.6898H15.0004V16.5C15.0004 16.0852 14.6652 15.75 14.2504 15.75H9.75038C9.33554 15.75 9.00038 16.0852 9.00038 16.5V19.6898H5.01601V14.0133C5.08397 14.0461 5.15429 14.0789 5.22694 14.107C5.7496 14.3273 6.30507 14.4375 6.87694 14.4375C7.44882 14.4375 8.00194 14.3273 8.52694 14.107C8.85038 13.9711 9.15507 13.7977 9.43397 13.5891C9.43866 13.5867 9.44335 13.5867 9.44804 13.5891C9.72781 13.7985 10.0325 13.9725 10.3551 14.107C10.8777 14.3273 11.4332 14.4375 12.0051 14.4375C12.5769 14.4375 13.1301 14.3273 13.6551 14.107C13.9785 13.9711 14.2832 13.7977 14.5621 13.5891C14.5668 13.5867 14.5715 13.5867 14.5762 13.5891C14.8559 13.7985 15.1606 13.9725 15.4832 14.107C16.0058 14.3273 16.5613 14.4375 17.1332 14.4375C17.7051 14.4375 18.2582 14.3273 18.7832 14.107C18.8535 14.0766 18.9238 14.0461 18.9941 14.0133V19.6898ZM19.6879 10.2117C19.6879 11.6133 18.5394 12.75 17.1262 12.75C16.1699 12.75 15.3355 12.232 14.8949 11.4633C14.8269 11.3461 14.7051 11.2734 14.5691 11.2734H14.5551C14.4215 11.2734 14.2973 11.3461 14.2293 11.4633C14.0044 11.8554 13.6798 12.1811 13.2883 12.4071C12.8968 12.6331 12.4524 12.7514 12.0004 12.75C11.0465 12.75 10.2144 12.2344 9.77382 11.468C9.70351 11.3484 9.57694 11.2734 9.43866 11.2734C9.30038 11.2734 9.17147 11.3484 9.10351 11.468C8.87734 11.8586 8.55224 12.1828 8.16096 12.4079C7.76967 12.6329 7.326 12.7509 6.8746 12.75C5.46132 12.75 4.31288 11.6133 4.31288 10.2117V8.07422C4.31288 8.06719 4.31757 8.0625 4.3246 8.0625H19.6762C19.6832 8.0625 19.6879 8.06719 19.6879 8.07422V10.2117Z"
fill="#1890FF"/>
</svg>
<span class="nav-text">Marketplace</span>
</a>
</nav>
<nav class="nav-group">
<h3 class="nav-title">Shortcuts</h3>
<a href="#" class="nav-link">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 11.25C7.5 12.4008 7.94766 13.4836 8.76328 14.2992C9.57656 15.1148 10.6617 15.5625 11.8125 15.5625H12.1875C13.3383 15.5625 14.4211 15.1148 15.2367 14.2992C16.0523 13.4859 16.5 12.4008 16.5 11.25V4.3125H7.5V11.25ZM4.3125 8.25C4.3125 9.21094 4.94297 10.0266 5.8125 10.3031C4.94297 10.0242 4.3125 9.20859 4.3125 8.25ZM12.8438 17.2148C15.5859 16.9172 17.775 14.7703 18.1359 12.0469C17.7727 14.7703 15.5859 16.9148 12.8438 17.2148ZM5.86406 12.0469C6.225 14.7703 8.41406 16.9172 11.1562 17.2148C8.41406 16.9148 6.22734 14.7703 5.86406 12.0469Z"
fill="#E6F7FF"/>
<path d="M20.3438 3.75H18.1875V2.8125C18.1875 2.70937 18.1031 2.625 18 2.625H6C5.89687 2.625 5.8125 2.70937 5.8125 2.8125V3.75H3.65625C3.38275 3.75 3.12044 3.85865 2.92705 4.05205C2.73365 4.24544 2.625 4.50775 2.625 4.78125V8.25C2.625 10.1648 4.03125 11.7563 5.86406 12.0469C6.22734 14.7703 8.41406 16.9148 11.1562 17.2148V19.6805H6.5625C6.14766 19.6805 5.8125 20.0156 5.8125 20.4305V21.1875C5.8125 21.2906 5.89687 21.375 6 21.375H18C18.1031 21.375 18.1875 21.2906 18.1875 21.1875V20.4305C18.1875 20.0156 17.8523 19.6805 17.4375 19.6805H12.8438V17.2148C15.5859 16.9148 17.7727 14.7703 18.1359 12.0469C19.9688 11.7563 21.375 10.1648 21.375 8.25V4.78125C21.375 4.50775 21.2663 4.24544 21.073 4.05205C20.8796 3.85865 20.6173 3.75 20.3438 3.75ZM5.8125 10.3031C5.37714 10.1641 4.99723 9.89025 4.72762 9.52122C4.45801 9.15219 4.31264 8.70703 4.3125 8.25V5.4375H5.8125V10.3031ZM16.5 11.25C16.5 12.4008 16.0523 13.4859 15.2367 14.2992C14.4211 15.1148 13.3383 15.5625 12.1875 15.5625H11.8125C10.6617 15.5625 9.57656 15.1148 8.76328 14.2992C7.94766 13.4836 7.5 12.4008 7.5 11.25V4.3125H16.5V11.25ZM19.6875 8.25C19.6875 9.21094 19.057 10.0266 18.1875 10.3031V5.4375H19.6875V8.25Z"
fill="#1890FF"/>
</svg>
<span class="nav-text">Product Design</span>
</a>
<a href="#" class="nav-link">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 11.25C7.5 12.4008 7.94766 13.4836 8.76328 14.2992C9.57656 15.1148 10.6617 15.5625 11.8125 15.5625H12.1875C13.3383 15.5625 14.4211 15.1148 15.2367 14.2992C16.0523 13.4859 16.5 12.4008 16.5 11.25V4.3125H7.5V11.25ZM4.3125 8.25C4.3125 9.21094 4.94297 10.0266 5.8125 10.3031C4.94297 10.0242 4.3125 9.20859 4.3125 8.25ZM12.8438 17.2148C15.5859 16.9172 17.775 14.7703 18.1359 12.0469C17.7727 14.7703 15.5859 16.9148 12.8438 17.2148ZM5.86406 12.0469C6.225 14.7703 8.41406 16.9172 11.1562 17.2148C8.41406 16.9148 6.22734 14.7703 5.86406 12.0469Z"
fill="#E6F7FF"/>
<path d="M20.3438 3.75H18.1875V2.8125C18.1875 2.70937 18.1031 2.625 18 2.625H6C5.89687 2.625 5.8125 2.70937 5.8125 2.8125V3.75H3.65625C3.38275 3.75 3.12044 3.85865 2.92705 4.05205C2.73365 4.24544 2.625 4.50775 2.625 4.78125V8.25C2.625 10.1648 4.03125 11.7563 5.86406 12.0469C6.22734 14.7703 8.41406 16.9148 11.1562 17.2148V19.6805H6.5625C6.14766 19.6805 5.8125 20.0156 5.8125 20.4305V21.1875C5.8125 21.2906 5.89687 21.375 6 21.375H18C18.1031 21.375 18.1875 21.2906 18.1875 21.1875V20.4305C18.1875 20.0156 17.8523 19.6805 17.4375 19.6805H12.8438V17.2148C15.5859 16.9148 17.7727 14.7703 18.1359 12.0469C19.9688 11.7563 21.375 10.1648 21.375 8.25V4.78125C21.375 4.50775 21.2663 4.24544 21.073 4.05205C20.8796 3.85865 20.6173 3.75 20.3438 3.75ZM5.8125 10.3031C5.37714 10.1641 4.99723 9.89025 4.72762 9.52122C4.45801 9.15219 4.31264 8.70703 4.3125 8.25V5.4375H5.8125V10.3031ZM16.5 11.25C16.5 12.4008 16.0523 13.4859 15.2367 14.2992C14.4211 15.1148 13.3383 15.5625 12.1875 15.5625H11.8125C10.6617 15.5625 9.57656 15.1148 8.76328 14.2992C7.94766 13.4836 7.5 12.4008 7.5 11.25V4.3125H16.5V11.25ZM19.6875 8.25C19.6875 9.21094 19.057 10.0266 18.1875 10.3031V5.4375H19.6875V8.25Z"
fill="#1890FF"/>
</svg>
<span class="nav-text">UX & UI</span>
</a>
<a href="#" class="nav-link">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 11.25C7.5 12.4008 7.94766 13.4836 8.76328 14.2992C9.57656 15.1148 10.6617 15.5625 11.8125 15.5625H12.1875C13.3383 15.5625 14.4211 15.1148 15.2367 14.2992C16.0523 13.4859 16.5 12.4008 16.5 11.25V4.3125H7.5V11.25ZM4.3125 8.25C4.3125 9.21094 4.94297 10.0266 5.8125 10.3031C4.94297 10.0242 4.3125 9.20859 4.3125 8.25ZM12.8438 17.2148C15.5859 16.9172 17.775 14.7703 18.1359 12.0469C17.7727 14.7703 15.5859 16.9148 12.8438 17.2148ZM5.86406 12.0469C6.225 14.7703 8.41406 16.9172 11.1562 17.2148C8.41406 16.9148 6.22734 14.7703 5.86406 12.0469Z"
fill="#E6F7FF"/>
<path d="M20.3438 3.75H18.1875V2.8125C18.1875 2.70937 18.1031 2.625 18 2.625H6C5.89687 2.625 5.8125 2.70937 5.8125 2.8125V3.75H3.65625C3.38275 3.75 3.12044 3.85865 2.92705 4.05205C2.73365 4.24544 2.625 4.50775 2.625 4.78125V8.25C2.625 10.1648 4.03125 11.7563 5.86406 12.0469C6.22734 14.7703 8.41406 16.9148 11.1562 17.2148V19.6805H6.5625C6.14766 19.6805 5.8125 20.0156 5.8125 20.4305V21.1875C5.8125 21.2906 5.89687 21.375 6 21.375H18C18.1031 21.375 18.1875 21.2906 18.1875 21.1875V20.4305C18.1875 20.0156 17.8523 19.6805 17.4375 19.6805H12.8438V17.2148C15.5859 16.9148 17.7727 14.7703 18.1359 12.0469C19.9688 11.7563 21.375 10.1648 21.375 8.25V4.78125C21.375 4.50775 21.2663 4.24544 21.073 4.05205C20.8796 3.85865 20.6173 3.75 20.3438 3.75ZM5.8125 10.3031C5.37714 10.1641 4.99723 9.89025 4.72762 9.52122C4.45801 9.15219 4.31264 8.70703 4.3125 8.25V5.4375H5.8125V10.3031ZM16.5 11.25C16.5 12.4008 16.0523 13.4859 15.2367 14.2992C14.4211 15.1148 13.3383 15.5625 12.1875 15.5625H11.8125C10.6617 15.5625 9.57656 15.1148 8.76328 14.2992C7.94766 13.4836 7.5 12.4008 7.5 11.25V4.3125H16.5V11.25ZM19.6875 8.25C19.6875 9.21094 19.057 10.0266 18.1875 10.3031V5.4375H19.6875V8.25Z"
fill="#1890FF"/>
</svg>
<span class="nav-text">Figma</span>
</a>
<a href="#" class="nav-link">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 11.25C7.5 12.4008 7.94766 13.4836 8.76328 14.2992C9.57656 15.1148 10.6617 15.5625 11.8125 15.5625H12.1875C13.3383 15.5625 14.4211 15.1148 15.2367 14.2992C16.0523 13.4859 16.5 12.4008 16.5 11.25V4.3125H7.5V11.25ZM4.3125 8.25C4.3125 9.21094 4.94297 10.0266 5.8125 10.3031C4.94297 10.0242 4.3125 9.20859 4.3125 8.25ZM12.8438 17.2148C15.5859 16.9172 17.775 14.7703 18.1359 12.0469C17.7727 14.7703 15.5859 16.9148 12.8438 17.2148ZM5.86406 12.0469C6.225 14.7703 8.41406 16.9172 11.1562 17.2148C8.41406 16.9148 6.22734 14.7703 5.86406 12.0469Z"
fill="#E6F7FF"/>
<path d="M20.3438 3.75H18.1875V2.8125C18.1875 2.70937 18.1031 2.625 18 2.625H6C5.89687 2.625 5.8125 2.70937 5.8125 2.8125V3.75H3.65625C3.38275 3.75 3.12044 3.85865 2.92705 4.05205C2.73365 4.24544 2.625 4.50775 2.625 4.78125V8.25C2.625 10.1648 4.03125 11.7563 5.86406 12.0469C6.22734 14.7703 8.41406 16.9148 11.1562 17.2148V19.6805H6.5625C6.14766 19.6805 5.8125 20.0156 5.8125 20.4305V21.1875C5.8125 21.2906 5.89687 21.375 6 21.375H18C18.1031 21.375 18.1875 21.2906 18.1875 21.1875V20.4305C18.1875 20.0156 17.8523 19.6805 17.4375 19.6805H12.8438V17.2148C15.5859 16.9148 17.7727 14.7703 18.1359 12.0469C19.9688 11.7563 21.375 10.1648 21.375 8.25V4.78125C21.375 4.50775 21.2663 4.24544 21.073 4.05205C20.8796 3.85865 20.6173 3.75 20.3438 3.75ZM5.8125 10.3031C5.37714 10.1641 4.99723 9.89025 4.72762 9.52122C4.45801 9.15219 4.31264 8.70703 4.3125 8.25V5.4375H5.8125V10.3031ZM16.5 11.25C16.5 12.4008 16.0523 13.4859 15.2367 14.2992C14.4211 15.1148 13.3383 15.5625 12.1875 15.5625H11.8125C10.6617 15.5625 9.57656 15.1148 8.76328 14.2992C7.94766 13.4836 7.5 12.4008 7.5 11.25V4.3125H16.5V11.25ZM19.6875 8.25C19.6875 9.21094 19.057 10.0266 18.1875 10.3031V5.4375H19.6875V8.25Z"
fill="#1890FF"/>
</svg>
<span class="nav-text">Ant Design</span>
</a>
</nav>
<nav class="nav-group">
<h3 class="nav-title">Explore</h3>
<a href="#" class="nav-link">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.3125 5.4375H12.9375V13.3125H4.3125V5.4375Z" fill="#E6F7FF"/>
<path d="M14.625 14.8125C14.625 14.9156 14.5406 15 14.4375 15H11.8125V16.7109H19.6875V8.83594H14.625V14.8125Z"
fill="#E6F7FF"/>
<path d="M20.625 7.14844H14.625V4.5C14.625 4.08516 14.2898 3.75 13.875 3.75H4.3125V2.8125C4.3125 2.70937 4.22812 2.625 4.125 2.625H2.8125C2.70937 2.625 2.625 2.70937 2.625 2.8125V21.1875C2.625 21.2906 2.70937 21.375 2.8125 21.375H4.125C4.22812 21.375 4.3125 21.2906 4.3125 21.1875V15H10.125V17.6484C10.125 18.0633 10.4602 18.3984 10.875 18.3984H20.625C21.0398 18.3984 21.375 18.0633 21.375 17.6484V7.89844C21.375 7.48359 21.0398 7.14844 20.625 7.14844ZM4.3125 13.3125V5.4375H12.9375V13.3125H4.3125ZM19.6875 16.7109H11.8125V15H14.4375C14.5406 15 14.625 14.9156 14.625 14.8125V8.83594H19.6875V16.7109Z"
fill="#1890FF"/>
</svg>
<span class="nav-text">Pages</span>
</a>
<a href="#" class="nav-link">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.3125 14.8125H19.3125V19.3125H16.3125V14.8125ZM4.6875 14.8125H7.6875V19.3125H4.6875V14.8125Z"
fill="#E6F7FF"/>
<path d="M12 3C7.02891 3 3 7.02891 3 12V20.4375C3 20.7492 3.25078 21 3.5625 21H7.875C8.70234 21 9.375 20.3273 9.375 19.5V14.625C9.375 13.7977 8.70234 13.125 7.875 13.125H4.6875V12C4.6875 7.96172 7.96172 4.6875 12 4.6875C16.0383 4.6875 19.3125 7.96172 19.3125 12V13.125H16.125C15.2977 13.125 14.625 13.7977 14.625 14.625V19.5C14.625 20.3273 15.2977 21 16.125 21H20.4375C20.7492 21 21 20.7492 21 20.4375V12C21 7.02891 16.9711 3 12 3ZM7.6875 14.8125V19.3125H4.6875V14.8125H7.6875ZM19.3125 19.3125H16.3125V14.8125H19.3125V19.3125Z"
fill="#1890FF"/>
</svg>
<span class="nav-text">Group</span>
</a>
<a href="#" class="nav-link">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.0031 4.04531L3.33121 12.7102H5.58121V20.3438H9.18824V15C9.18824 14.482 9.60778 14.0625 10.1257 14.0625H13.8757C14.3937 14.0625 14.8132 14.482 14.8132 15V20.3438H18.4203V12.7102H20.6726L12.5445 4.58672L12.0031 4.04531ZM22.1867 13.957C22.0461 14.0977 21.8797 14.2102 21.6992 14.2828C21.8797 14.2078 22.0461 14.0977 22.1867 13.957ZM1.39762 13.1438C1.51481 13.8539 2.13356 14.3977 2.87653 14.3977H2.89762C2.14996 14.3977 1.51715 13.8586 1.39762 13.1438ZM1.37653 12.8977V12.8531V12.8977ZM1.37887 12.8367C1.38121 12.7641 1.39059 12.6938 1.40231 12.6235C1.38824 12.6914 1.38121 12.7641 1.37887 12.8367Z"
fill="#E6F7FF"/>
<path d="M22.2883 11.9531C22.2883 11.9508 22.286 11.9508 22.286 11.9484L22.2438 11.8992C22.2414 11.8969 22.2391 11.8922 22.2344 11.8898C22.218 11.8711 22.1993 11.8523 22.1828 11.8336L13.1266 2.78436L12.5196 2.17733C12.3813 2.03993 12.1942 1.96282 11.9993 1.96282C11.8043 1.96282 11.6173 2.03993 11.4789 2.17733L1.81566 11.8359C1.64109 12.0096 1.51225 12.2238 1.44066 12.4594L1.4266 12.5086L1.41957 12.5344L1.41254 12.5625C1.40785 12.5789 1.40551 12.5953 1.40316 12.6117C1.40316 12.614 1.40316 12.6187 1.40082 12.6211C1.38676 12.6914 1.37972 12.7617 1.37738 12.8344V12.9117C1.37738 12.9234 1.37738 12.9351 1.37972 12.9469C1.37972 12.9586 1.37972 12.968 1.38207 12.9797C1.38207 12.9914 1.38441 13.0031 1.38441 13.0148C1.38441 13.0289 1.38676 13.043 1.3891 13.057C1.3891 13.064 1.39144 13.0711 1.39144 13.0781L1.39847 13.1367V13.139C1.51801 13.8539 2.15316 14.393 2.89847 14.393H3.89457V22.0312H20.1063V14.3976H21.1235C21.325 14.3976 21.5196 14.3578 21.6977 14.2828C21.8758 14.2078 22.0422 14.0976 22.1852 13.957C22.3248 13.8178 22.4355 13.6523 22.5107 13.4701C22.5859 13.2878 22.6243 13.0925 22.6235 12.8953C22.6235 12.5508 22.5063 12.2203 22.2883 11.9531ZM13.3118 20.3437H10.6868V15.5625H13.3118V20.3437ZM18.4188 12.7101V20.3437H14.8118V15C14.8118 14.482 14.3922 14.0625 13.8743 14.0625H10.1243C9.60629 14.0625 9.18676 14.482 9.18676 15V20.3437H5.57972V12.7101H3.32972L12.0016 4.0453L12.543 4.58671L20.6711 12.7101H18.4188Z"
fill="#1890FF"/>
</svg>
<span class="nav-text">Events</span>
</a>
<a href="#" class="nav-link">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.13434 14.5643C5.91403 14.9064 5.7359 15.2744 5.60699 15.6564H7.59449V13.0947C7.01324 13.4744 6.51637 13.9736 6.13434 14.5643ZM16.407 13.0947V15.6564H18.3945C18.2656 15.2744 18.0875 14.9064 17.8671 14.5643C17.4893 13.9771 16.9917 13.4763 16.407 13.0947ZM14.907 7.47207L12.0007 4.02676L9.09449 7.47207V15.6564H14.907V7.47207ZM12.0007 10.5002C11.7064 10.4942 11.426 10.373 11.22 10.1627C11.0139 9.95237 10.8985 9.66965 10.8985 9.37519C10.8985 9.08074 11.0139 8.79802 11.22 8.58769C11.426 8.37737 11.7064 8.2562 12.0007 8.25019C12.2951 8.2562 12.5754 8.37737 12.7815 8.58769C12.9876 8.79802 13.103 9.08074 13.103 9.37519C13.103 9.66965 12.9876 9.95237 12.7815 10.1627C12.5754 10.373 12.2951 10.4942 12.0007 10.5002Z"
fill="#E6F7FF"/>
<path d="M20.25 17.25C20.25 14.6344 18.7172 12.375 16.5 11.3227V7.43672C16.5 7.08281 16.3758 6.74063 16.1461 6.47109L12.5742 2.23594C12.4242 2.05781 12.2109 1.96875 12 1.96875C11.7891 1.96875 11.5758 2.05781 11.4258 2.23594L7.85391 6.47109C7.62578 6.74118 7.50043 7.08318 7.5 7.43672V11.3227C5.28281 12.375 3.75 14.6344 3.75 17.25H7.41797C7.36406 17.4187 7.33594 17.6016 7.33594 17.8078C7.33594 18.3258 7.51406 18.832 7.8375 19.2328C8.1015 19.5606 8.45115 19.8088 8.84766 19.95C9.38906 21.2156 10.6195 22.0312 12 22.0312C12.682 22.0312 13.343 21.8297 13.9078 21.45C14.4609 21.0797 14.8898 20.5617 15.15 19.95C15.5463 19.8097 15.896 19.5623 16.1602 19.2352C16.484 18.8307 16.6609 18.3283 16.6617 17.8102C16.6617 17.6133 16.6359 17.4258 16.5891 17.2523L20.25 17.25ZM7.59375 15.6562H5.60625C5.73516 15.2742 5.91328 14.9063 6.13359 14.5641C6.51563 13.9734 7.0125 13.4742 7.59375 13.0945V15.6562ZM9.09375 11.3227V7.47187L12 4.02656L14.9062 7.47187V15.6562H9.09375V11.3227ZM14.7211 18.3797C14.5992 18.45 14.4586 18.4781 14.3203 18.4594L13.8633 18.4031L13.7977 18.8578C13.6711 19.7461 12.8977 20.4164 12 20.4164C11.1023 20.4164 10.3289 19.7461 10.2023 18.8578L10.1367 18.4008L9.67969 18.4594C9.54074 18.4759 9.40017 18.4472 9.27891 18.3773C9.075 18.2602 8.94844 18.0422 8.94844 17.8055C8.94844 17.557 9.08672 17.3508 9.29062 17.2477H14.7117C14.918 17.3531 15.0539 17.5594 15.0539 17.8055C15.0516 18.0445 14.925 18.2648 14.7211 18.3797ZM16.4062 15.6562V13.0945C16.991 13.4761 17.4886 13.9769 17.8664 14.5641C18.0867 14.9063 18.2648 15.2742 18.3937 15.6562H16.4062Z"
fill="#1890FF"/>
<path d="M10.875 9.375C10.875 9.67337 10.9935 9.95952 11.2045 10.1705C11.4155 10.3815 11.7016 10.5 12 10.5C12.2984 10.5 12.5845 10.3815 12.7955 10.1705C13.0065 9.95952 13.125 9.67337 13.125 9.375C13.125 9.07663 13.0065 8.79048 12.7955 8.5795C12.5845 8.36853 12.2984 8.25 12 8.25C11.7016 8.25 11.4155 8.36853 11.2045 8.5795C10.9935 8.79048 10.875 9.07663 10.875 9.375Z"
fill="#1890FF"/>
</svg>
<span class="nav-text">Games</span>
</a>
</nav>
</div>
<!-- /.menu-sidebar -->
<div class="main-feed">
<div class="create-post">
<div class="create-post-header">
<h4 class="create-post-title">Create post</h4>
</div>
<!-- /.header -->
<div class="create-post-body">
<img src="img/avatar.jpeg" alt="avatar" class="user-avatar">
<div class="create-post-input" contenteditable="true">What's on your mind, Vladimir?</div>
</div>
<!-- /.body -->
<div class="create-post-footer">
<button class="tag">
<svg class="tag-icon" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M21.75 3.75H2.25C1.83516 3.75 1.5 4.08516 1.5 4.5V19.5C1.5 19.9148 1.83516 20.25 2.25 20.25H21.75C22.1648 20.25 22.5 19.9148 22.5 19.5V4.5C22.5 4.08516 22.1648 3.75 21.75 3.75ZM20.8125 18.5625H3.1875V17.6273L6.43359 13.7766L9.95156 17.9484L15.4242 11.4609L20.8125 17.85V18.5625ZM20.8125 15.5203L15.5672 9.3C15.4922 9.21094 15.3562 9.21094 15.2812 9.3L9.95156 15.6188L6.57656 11.618C6.50156 11.5289 6.36562 11.5289 6.29062 11.618L3.1875 15.2977V5.4375H20.8125V15.5203Z"
fill="#1890FF"/>
<path d="M9.95156 17.9484L6.43359 13.7766L3.1875 17.6273V18.5625H20.8125V17.85L15.4242 11.4609L9.95156 17.9484Z"
fill="#E6F7FF"/>
<path d="M3.1875 15.2977L6.29062 11.618C6.36562 11.5289 6.50156 11.5289 6.57656 11.618L9.95156 15.6188L15.2812 9.3C15.3562 9.21094 15.4922 9.21094 15.5672 9.3L20.8125 15.5203V5.4375H3.1875V15.2977ZM7.125 6.5625C7.39585 6.5625 7.66405 6.61585 7.91428 6.7195C8.16452 6.82315 8.39189 6.97507 8.58341 7.16659C8.77493 7.35811 8.92685 7.58548 9.0305 7.83572C9.13415 8.08595 9.1875 8.35415 9.1875 8.625C9.1875 8.89585 9.13415 9.16405 9.0305 9.41428C8.92685 9.66452 8.77493 9.89189 8.58341 10.0834C8.39189 10.2749 8.16452 10.4269 7.91428 10.5305C7.66405 10.6342 7.39585 10.6875 7.125 10.6875C6.57799 10.6875 6.05339 10.4702 5.66659 10.0834C5.2798 9.69661 5.0625 9.17201 5.0625 8.625C5.0625 8.07799 5.2798 7.55339 5.66659 7.16659C6.05339 6.7798 6.57799 6.5625 7.125 6.5625Z"
fill="#E6F7FF"/>
<path d="M6.46875 8.625C6.46875 8.79905 6.53789 8.96597 6.66096 9.08904C6.78403 9.21211 6.95095 9.28125 7.125 9.28125C7.29905 9.28125 7.46597 9.21211 7.58904 9.08904C7.71211 8.96597 7.78125 8.79905 7.78125 8.625C7.78125 8.45095 7.71211 8.28403 7.58904 8.16096C7.46597 8.03789 7.29905 7.96875 7.125 7.96875C6.95095 7.96875 6.78403 8.03789 6.66096 8.16096C6.53789 8.28403 6.46875 8.45095 6.46875 8.625Z"
fill="#E6F7FF"/>
<path d="M7.125 10.6875C7.39585 10.6875 7.66405 10.6342 7.91428 10.5305C8.16452 10.4269 8.39189 10.2749 8.58341 10.0834C8.77493 9.89189 8.92685 9.66452 9.0305 9.41428C9.13415 9.16405 9.1875 8.89585 9.1875 8.625C9.1875 8.35415 9.13415 8.08595 9.0305 7.83572C8.92685 7.58548 8.77493 7.35811 8.58341 7.16659C8.39189 6.97507 8.16452 6.82315 7.91428 6.7195C7.66405 6.61585 7.39585 6.5625 7.125 6.5625C6.57799 6.5625 6.05339 6.7798 5.66659 7.16659C5.2798 7.55339 5.0625 8.07799 5.0625 8.625C5.0625 9.17201 5.2798 9.69661 5.66659 10.0834C6.05339 10.4702 6.57799 10.6875 7.125 10.6875ZM7.125 7.96875C7.48828 7.96875 7.78125 8.26172 7.78125 8.625C7.78125 8.98828 7.48828 9.28125 7.125 9.28125C6.76172 9.28125 6.46875 8.98828 6.46875 8.625C6.46875 8.26172 6.76172 7.96875 7.125 7.96875Z"
fill="#1890FF"/>
</svg>
<span class="button-text">Photo/Video</span>
</button>
<button class="tag">
<svg class="tag-icon" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M15.8976 15.0563C16.4648 14.7516 17.114 14.5781 17.8054 14.5781H17.8077C17.8781 14.5781 17.9109 14.4938 17.8593 14.4469C17.1403 13.8016 16.3189 13.2804 15.4288 12.9047C15.4195 12.9 15.4101 12.8977 15.4007 12.893C16.8562 11.8359 17.8031 10.118 17.8031 8.17969C17.8031 4.96875 15.2062 2.36719 12.0023 2.36719C8.79837 2.36719 6.20384 4.96875 6.20384 8.17969C6.20384 10.118 7.15072 11.8359 8.60853 12.893C8.59915 12.8977 8.58978 12.9 8.58041 12.9047C7.53275 13.3477 6.59291 13.9828 5.78431 14.7938C4.98039 15.5962 4.34036 16.5475 3.89994 17.5945C3.46661 18.6198 3.23274 19.7184 3.21087 20.8312C3.21025 20.8563 3.21464 20.8812 3.22378 20.9044C3.23292 20.9277 3.24663 20.949 3.26411 20.9669C3.28158 20.9848 3.30246 20.999 3.32552 21.0087C3.34858 21.0184 3.37335 21.0234 3.39837 21.0234H4.80228C4.90306 21.0234 4.98744 20.9414 4.98978 20.8406C5.03666 19.0312 5.76087 17.3367 7.04291 16.0523C8.36712 14.7234 10.1296 13.9922 12.0046 13.9922C13.3335 13.9922 14.6085 14.3602 15.7077 15.0492C15.736 15.067 15.7684 15.077 15.8017 15.0782C15.8351 15.0794 15.8681 15.0719 15.8976 15.0563ZM12.0046 12.2109C10.9312 12.2109 9.92103 11.7914 9.15931 11.0297C8.78453 10.6559 8.48742 10.2116 8.28509 9.72248C8.08276 9.23335 7.97921 8.70901 7.98041 8.17969C7.98041 7.10391 8.39994 6.09141 9.15931 5.32969C9.91869 4.56797 10.9288 4.14844 12.0046 4.14844C13.0804 4.14844 14.0882 4.56797 14.8499 5.32969C15.2247 5.70349 15.5218 6.14776 15.7242 6.63689C15.9265 7.12603 16.03 7.65036 16.0288 8.17969C16.0288 9.25547 15.6093 10.268 14.8499 11.0297C14.0882 11.7914 13.0781 12.2109 12.0046 12.2109ZM20.6249 17.7891H18.6562V15.8203C18.6562 15.7172 18.5718 15.6328 18.4687 15.6328H17.1562C17.0531 15.6328 16.9687 15.7172 16.9687 15.8203V17.7891H14.9999C14.8968 17.7891 14.8124 17.8734 14.8124 17.9766V19.2891C14.8124 19.3922 14.8968 19.4766 14.9999 19.4766H16.9687V21.4453C16.9687 21.5484 17.0531 21.6328 17.1562 21.6328H18.4687C18.5718 21.6328 18.6562 21.5484 18.6562 21.4453V19.4766H20.6249C20.7281 19.4766 20.8124 19.3922 20.8124 19.2891V17.9766C20.8124 17.8734 20.7281 17.7891 20.6249 17.7891Z"
fill="#1890FF"/>
</svg>
<span class="button-text">Tag friends</span>
</button>
<button class="tag">
<svg class="tag-icon" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M12 1.5C6.20156 1.5 1.5 6.20156 1.5 12C1.5 17.7984 6.20156 22.5 12 22.5C17.7984 22.5 22.5 17.7984 22.5 12C22.5 6.20156 17.7984 1.5 12 1.5ZM12 20.7188C7.18594 20.7188 3.28125 16.8141 3.28125 12C3.28125 7.18594 7.18594 3.28125 12 3.28125C16.8141 3.28125 20.7188 7.18594 20.7188 12C20.7188 16.8141 16.8141 20.7188 12 20.7188Z"
fill="#1890FF"/>
<path d="M12 3.28125C7.18594 3.28125 3.28125 7.18594 3.28125 12C3.28125 16.8141 7.18594 20.7188 12 20.7188C16.8141 20.7188 20.7188 16.8141 20.7188 12C20.7188 7.18594 16.8141 3.28125 12 3.28125ZM6.75 9.86719C6.75601 9.5728 6.87718 9.29249 7.0875 9.08641C7.29782 8.88034 7.58055 8.76492 7.875 8.76492C8.16945 8.76492 8.45218 8.88034 8.6625 9.08641C8.87282 9.29249 8.99399 9.5728 9 9.86719C8.99399 10.1616 8.87282 10.4419 8.6625 10.648C8.45218 10.854 8.16945 10.9695 7.875 10.9695C7.58055 10.9695 7.29782 10.854 7.0875 10.648C6.87718 10.4419 6.75601 10.1616 6.75 9.86719ZM12 16.2422C9.99609 16.2422 8.35313 14.6648 8.25 12.6891C8.24873 12.6637 8.25264 12.6383 8.26149 12.6144C8.27034 12.5906 8.28395 12.5688 8.30149 12.5504C8.31903 12.532 8.34013 12.5173 8.36351 12.5073C8.3869 12.4973 8.41207 12.4922 8.4375 12.4922H9.56484C9.66328 12.4922 9.74766 12.5672 9.75469 12.6656C9.84375 13.8258 10.8164 14.7422 12 14.7422C13.1836 14.7422 14.1586 13.8258 14.2453 12.6656C14.2523 12.5672 14.3367 12.4922 14.4352 12.4922H15.5625C15.5879 12.4922 15.6131 12.4973 15.6365 12.5073C15.6599 12.5173 15.681 12.532 15.6985 12.5504C15.716 12.5688 15.7297 12.5906 15.7385 12.6144C15.7474 12.6383 15.7513 12.6637 15.75 12.6891C15.6469 14.6648 14.0039 16.2422 12 16.2422ZM16.125 10.9922C15.8306 10.9862 15.5503 10.865 15.3442 10.6547C15.1382 10.4444 15.0227 10.1616 15.0227 9.86719C15.0227 9.57273 15.1382 9.29001 15.3442 9.07969C15.5503 8.86936 15.8306 8.7482 16.125 8.74219C16.4194 8.7482 16.6997 8.86936 16.9058 9.07969C17.1118 9.29001 17.2273 9.57273 17.2273 9.86719C17.2273 10.1616 17.1118 10.4444 16.9058 10.6547C16.6997 10.865 16.4194 10.9862 16.125 10.9922Z"
fill="#E6F7FF"/>
<path d="M6.75 9.86719C6.75 10.1656 6.86853 10.4517 7.0795 10.6627C7.29048 10.8737 7.57663 10.9922 7.875 10.9922C8.17337 10.9922 8.45952 10.8737 8.6705 10.6627C8.88147 10.4517 9 10.1656 9 9.86719C9 9.56882 8.88147 9.28267 8.6705 9.07169C8.45952 8.86071 8.17337 8.74219 7.875 8.74219C7.57663 8.74219 7.29048 8.86071 7.0795 9.07169C6.86853 9.28267 6.75 9.56882 6.75 9.86719ZM15.5625 12.4922H14.4352C14.3367 12.4922 14.2523 12.5672 14.2453 12.6656C14.1586 13.8258 13.1836 14.7422 12 14.7422C10.8164 14.7422 9.84375 13.8258 9.75469 12.6656C9.74766 12.5672 9.66328 12.4922 9.56484 12.4922H8.4375C8.41207 12.4922 8.3869 12.4973 8.36351 12.5073C8.34013 12.5173 8.31903 12.532 8.30149 12.5504C8.28395 12.5688 8.27034 12.5906 8.26149 12.6144C8.25264 12.6383 8.24873 12.6637 8.25 12.6891C8.35312 14.6648 9.99609 16.2422 12 16.2422C14.0039 16.2422 15.6469 14.6648 15.75 12.6891C15.7513 12.6637 15.7474 12.6383 15.7385 12.6144C15.7297 12.5906 15.716 12.5688 15.6985 12.5504C15.681 12.532 15.6599 12.5173 15.6365 12.5073C15.6131 12.4973 15.5879 12.4922 15.5625 12.4922ZM15 9.86719C15 10.1656 15.1185 10.4517 15.3295 10.6627C15.5405 10.8737 15.8266 10.9922 16.125 10.9922C16.4234 10.9922 16.7095 10.8737 16.9205 10.6627C17.1315 10.4517 17.25 10.1656 17.25 9.86719C17.25 9.56882 17.1315 9.28267 16.9205 9.07169C16.7095 8.86071 16.4234 8.74219 16.125 8.74219C15.8266 8.74219 15.5405 8.86071 15.3295 9.07169C15.1185 9.28267 15 9.56882 15 9.86719Z"
fill="#1890FF"/>
</svg>
<span class="button-text">Feeling/Active...</span>
</button>
<!-- <button class="tag">-->
<!-- <svg class="tag-icon" width="24" height="24" viewBox="0 0 24 24" fill="none"-->
<!-- xmlns="http://www.w3.org/2000/svg">-->
<!-- <path d="M4.125 11.9766C4.125 12.1489 4.15895 12.3196 4.22491 12.4788C4.29087 12.6381 4.38755 12.7828 4.50942 12.9046C4.6313 13.0265 4.77599 13.1232 4.93523 13.1892C5.09447 13.2551 5.26514 13.2891 5.4375 13.2891C5.60986 13.2891 5.78053 13.2551 5.93977 13.1892C6.09901 13.1232 6.2437 13.0265 6.36558 12.9046C6.48745 12.7828 6.58413 12.6381 6.65009 12.4788C6.71605 12.3196 6.75 12.1489 6.75 11.9766C6.75 11.8042 6.71605 11.6335 6.65009 11.4743C6.58413 11.3151 6.48745 11.1704 6.36558 11.0485C6.2437 10.9266 6.09901 10.8299 5.93977 10.764C5.78053 10.698 5.60986 10.6641 5.4375 10.6641C5.26514 10.6641 5.09447 10.698 4.93523 10.764C4.77599 10.8299 4.6313 10.9266 4.50942 11.0485C4.38755 11.1704 4.29087 11.3151 4.22491 11.4743C4.15895 11.6335 4.125 11.8042 4.125 11.9766ZM10.6875 11.9766C10.6875 12.3247 10.8258 12.6585 11.0719 12.9046C11.3181 13.1508 11.6519 13.2891 12 13.2891C12.3481 13.2891 12.6819 13.1508 12.9281 12.9046C13.1742 12.6585 13.3125 12.3247 13.3125 11.9766C13.3125 11.6285 13.1742 11.2946 12.9281 11.0485C12.6819 10.8023 12.3481 10.6641 12 10.6641C11.6519 10.6641 11.3181 10.8023 11.0719 11.0485C10.8258 11.2946 10.6875 11.6285 10.6875 11.9766ZM17.25 11.9766C17.25 12.3247 17.3883 12.6585 17.6344 12.9046C17.8806 13.1508 18.2144 13.2891 18.5625 13.2891C18.9106 13.2891 19.2444 13.1508 19.4906 12.9046C19.7367 12.6585 19.875 12.3247 19.875 11.9766C19.875 11.6285 19.7367 11.2946 19.4906 11.0485C19.2444 10.8023 18.9106 10.6641 18.5625 10.6641C18.2144 10.6641 17.8806 10.8023 17.6344 11.0485C17.3883 11.2946 17.25 11.6285 17.25 11.9766Z"-->
<!-- fill="#595959"/>-->
<!-- </svg>-->
<!-- <span class="button-text"></span>-->
<!-- </button>-->
</div>
<!-- /.footer -->
</div>
<!-- /.create-post -->
<div class="post">
<div class="post-header">
<div class="user">
<img class="user-avatar" src="img/avatar.jpeg" alt="avatar"/>
<div class="post-info">
<a href="#" class="post-author">Vladimir Glinskikh</a>
<div class="post-info-time">
<span class="post-time">3 hrs</span>
<svg width="14" height="14" class="setting-icon">
<use xlink:href="img/icons.svg#setting"></use>
</svg>
</div>
</div>
</div>
<button class="post-header-button">
<svg width="24" height="24" class="post-button-icon">
<use xlink:href="img/icons.svg#dots"></use>
</svg>
</button>
</div>
<!-- /.post-header -->
<div class="post-content">
<p class="post-text">
Did you know that all of this was made using only components and
styles from Ant Desing System for Figma? Learn more:
<a href="https://antforfigma.com">https://antforfigma.com</a>
</p>
<img src="img/post-image.jpg" alt="post-image" class="post-image"/>
</div>
<!-- /.post-content -->
<div class="likes">
<svg width="16" height="16" class="likes-icon">
<use xlink:href="img/icons.svg#like-active"></use>
</svg>
<span class="likes-counter">23</span>
</div>
<!-- /.likes -->
<div class="post-footer">
<button class="post-button">
<svg width="24" height="24" class="post-button-icon">
<use xlink:href="img/icons.svg#like"></use>
</svg>
<span class="post-button-text">Like</span>
</button>
<button class="post-button">
<svg width="24" height="24" class="post-button-icon">
<use xlink:href="img/icons.svg#chat"></use>
</svg>
<span class="post-button-text">Comment</span>
</button>
<button class="post-button">
<svg width="24" height="24" class="post-button-icon">
<use xlink:href="img/icons.svg#share"></use>
</svg>
<span class="post-button-text">Share</span>
</button>
</div>
</div>
<div class="post">
<div class="post-header">
<div class="user">
<img class="user-avatar" src="img/figma-avatar.jpg" alt="avatar"/>
<div class="post-info">
<a href="#" class="post-author">Figma</a>
<div class="post-info-time">
<span class="post-time">6 hrs</span>
<svg width="14" height="14" class="setting-icon">
<use xlink:href="img/icons.svg#setting"></use>
</svg>
</div>
</div>
</div>
<button class="post-header-button">
<svg width="24" height="24" class="post-button-icon">
<use xlink:href="img/icons.svg#dots"></use>
</svg>
</button>
</div>
<div class="post-content">
<p class="post-text">
📙 Want to implement type in your design system in Figma?
This guide covers everything you should consider,
from choosing the right typography scale to naming and
organizing your text styles.
</p>
</div>
</div>
<!-- /.post -->
</div>
<!-- /.main-feed -->
<div class="right-sidebar">
<div class="stories">
<div class="stories-header">
<h4 class="stories-title">Stories</h4>
<div class="story-buttons">
<a href="#" class="story-button-link">
<svg width="16" height="16" class="stories-icon">
<use xlink:href="img/icons.svg#clock-circle"></use>
</svg>
<span class="story-button-text">Archive</span>
</a>
<a href="" class="story-button-link">
<span class="story-button-text">Settings</span>
</a>
</div>
<!-- /.story-buttons -->
</div>
<!-- /.story-header -->
<a href="#" class="story-item-add">
<div class="story-image">+</div>
<div class="story-item-text">
<span class="story-title">
Add to your story
</span>
<span class="story-text">
Share a photo or video or write something
</span>
</div>
</a>
<a href="#" class="story-item">
<div class="story-image concuria"></div>
<div class="story-item-text">
<span class="story-title">
Concuria
</span>
<span class="story-text">
4 hours ago
</span>
</div>
</a>
<a href="#" class="story-item">
<div class="story-image figma"></div>
<div class="story-item-text">
<span class="story-title">
Figma
</span>
<span class="story-text">
5 hours ago
</span>
</div>
</a>
<a href="#" class="story-item">
<div class="story-image ant"></div>
<div class="story-item-text">
<span class="story-title">
And Design
</span>
<span class="story-text">
6 hours ago
</span>
</div>
</a>
</div>
</div>
<!-- /.right-sidebar -->
</div>
<script src="js/main.js"></script>
</body>
</html>