-
Notifications
You must be signed in to change notification settings - Fork 0
/
chat-board.html
611 lines (595 loc) · 64.5 KB
/
chat-board.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
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SwipeEX / Chat</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/framework.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/chat-board.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<header class="container_12 d-flex justify-content-between">
<div class="header-left grid_3 d-inline-flex align-items-center">
<button class="media-button header-buttons">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="124px" viewBox="0 0 124 124" xml:space="preserve">
<g>
<path d="M112,6H12C5.4,6,0,11.4,0,18s5.4,12,12,12h100c6.6,0,12-5.4,12-12S118.6,6,112,6z"/>
<path d="M112,50H12C5.4,50,0,55.4,0,62c0,6.6,5.4,12,12,12h100c6.6,0,12-5.4,12-12C124,55.4,118.6,50,112,50z"/>
<path d="M112,94H12c-6.6,0-12,5.4-12,12s5.4,12,12,12h100c6.6,0,12-5.4,12-12S118.6,94,112,94z"/>
</g>
</svg>
</button>
<button class="location-button header-buttons d-inline-flex">
<svg class="location-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 10 100 90" enable-background="new 0 0 100 100" xml:space="preserve">
<path fill="#aaa" d="M50.151,94.62l7.46-12.454c0.32-0.072,0.645-0.134,0.963-0.217c11.699-3.041,20.857-12.199,23.9-23.899 c0.082-0.318,0.145-0.642,0.217-0.962L95.15,49.62l-12.459-7.468c-0.072-0.32-0.135-0.644-0.217-0.962 c-3.043-11.698-12.199-20.855-23.896-23.898c-0.318-0.083-0.643-0.145-0.963-0.218L50.151,4.62l-7.464,12.454 c-0.321,0.073-0.645,0.135-0.963,0.218c-11.697,3.043-20.854,12.2-23.896,23.898c-0.083,0.318-0.145,0.642-0.218,0.962L5.151,49.62 l12.459,7.468c0.073,0.32,0.135,0.644,0.218,0.962c3.043,11.7,12.201,20.858,23.901,23.899c0.317,0.083,0.641,0.145,0.961,0.217 L50.151,94.62z M19.763,57.546c-1.342-5.154-1.342-10.697,0-15.852c2.86-10.998,11.469-19.606,22.465-22.467 c2.578-0.67,5.244-1.01,7.923-1.01c2.679,0,5.345,0.34,7.923,1.01c10.996,2.86,19.605,11.469,22.465,22.467 c0.67,2.577,1.01,5.244,1.01,7.926s-0.34,5.349-1.01,7.926c-2.861,11-11.471,19.609-22.469,22.468 c-2.574,0.669-5.238,1.009-7.919,1.009c-2.68,0-5.345-0.34-7.919-1.009C31.233,77.155,22.624,68.546,19.763,57.546z"/>
<path fill="#aaa" d="M70.951,49.62c0-11.468-9.33-20.798-20.8-20.798c-11.47,0-20.801,9.33-20.801,20.798 s9.331,20.798,20.801,20.798C61.621,70.418,70.951,61.088,70.951,49.62z M31.35,49.62c0-10.365,8.435-18.798,18.801-18.798 c10.367,0,18.8,8.433,18.8,18.798s-8.434,18.798-18.8,18.798C39.785,68.418,31.35,59.985,31.35,49.62z"/>
<polygon fill="#aaa" points="49.698,49.657 38.048,52.474 57.838,58.015 52.297,38.226 "/>
</svg>
</button>
<span class="location-label">Location: </span>
<span class="location-var">London</span>
</div>
<div class="header-mid grid_5 d-flex justify-content-center">
<a class="header-brand" href="index.html">
<h1 class="header-purple">Swip</h1><h1 class="header-orange">ex</h1>
</a>
</div>
<div class="header-right grid_3 d-inline-flex align-items-center justify-content-end">
<div class="hr-buttons d-inline-flex">
<button class="messages-button d-inline-flex header-buttons">
<svg viewBox="-21 -47 682.66669 682" xmlns="http://www.w3.org/2000/svg">
<path d="m552.011719-1.332031h-464.023438c-48.515625 0-87.988281 39.464843-87.988281 87.988281v283.972656c0 48.414063 39.300781 87.816406 87.675781 87.988282v128.863281l185.191407-128.863281h279.144531c48.515625 0 87.988281-39.472657 87.988281-87.988282v-283.972656c0-48.523438-39.472656-87.988281-87.988281-87.988281zm50.488281 371.960937c0 27.835938-22.648438 50.488282-50.488281 50.488282h-290.910157l-135.925781 94.585937v-94.585937h-37.1875c-27.839843 0-50.488281-22.652344-50.488281-50.488282v-283.972656c0-27.84375 22.648438-50.488281 50.488281-50.488281h464.023438c27.839843 0 50.488281 22.644531 50.488281 50.488281zm0 0"/>
<path d="m171.292969 131.171875h297.414062v37.5h-297.414062zm0 0"/>
<path d="m171.292969 211.171875h297.414062v37.5h-297.414062zm0 0"/><path d="m171.292969 291.171875h297.414062v37.5h-297.414062zm0 0"/>
</svg>
</button>
<button class="notifications-button d-inline-flex header-buttons">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="510px" height="510px" viewBox="0 0 500 600" xml:space="preserve">
<g>
<g id="notifications-none">
<path d="M255,510c28.05,0,51-22.95,51-51H204C204,487.05,226.95,510,255,510z M420.75,357V216.75
c0-79.05-53.55-142.8-127.5-160.65V38.25C293.25,17.85,275.4,0,255,0c-20.4,0-38.25,17.85-38.25,38.25V56.1
c-73.95,17.85-127.5,81.6-127.5,160.65V357l-51,51v25.5h433.5V408L420.75,357z M369.75,382.5h-229.5V216.75
C140.25,153,191.25,102,255,102s114.75,51,114.75,114.75V382.5z"/>
</g>
</g>
</svg>
</button>
</div>
<div class="profile d-inline-flex">
<button class="profile-button d-inline-flex header-buttons">
<svg viewBox="0 0 510 510" xmlns="http://www.w3.org/2000/svg">
<path d="m240 0c-132.546875 0-240 107.453125-240 240s107.453125 240 240 240c7.230469 0 14.433594-.324219 21.601562-.96875 6.664063-.597656 13.269532-1.511719 19.824219-2.65625l2.519531-.445312c121.863282-22.742188 206.359376-134.550782 194.960938-257.996094-11.398438-123.445313-114.9375-217.8945315-238.90625-217.933594zm-19.28125 463.152344h-.566406c-6.222656-.550782-12.398438-1.382813-18.519532-2.449219-.351562-.0625-.703124-.101563-1.046874-.167969-5.984376-1.070312-11.90625-2.398437-17.769532-3.949218l-1.417968-.363282c-5.71875-1.550781-11.375-3.351562-16.949219-5.351562-.578125-.207032-1.160157-.390625-1.738281-.605469-5.464844-2.007813-10.832032-4.257813-16.117188-6.691406-.65625-.292969-1.3125-.574219-1.96875-.886719-5.183594-2.398438-10.265625-5.101562-15.25-7.945312-.703125-.398438-1.414062-.796876-2.117188-1.191407-4.90625-2.863281-9.699218-5.933593-14.402343-9.175781-.710938-.496094-1.429688-.976562-2.136719-1.472656-4.621094-3.277344-9.125-6.757813-13.511719-10.398438l-1.207031-1.054687v-67.449219c.058594-48.578125 39.421875-87.941406 88-88h112c48.578125.058594 87.941406 39.421875 88 88v67.457031l-1.0625.886719c-4.472656 3.734375-9.0625 7.265625-13.777344 10.601562-.625.4375-1.257812.855469-1.878906 1.285157-4.757812 3.304687-9.632812 6.414062-14.625 9.335937-.625.363282-1.265625.707032-1.886719 1.066406-5.058593 2.878907-10.203125 5.597657-15.449219 8.046876-.601562.28125-1.207031.542968-1.816406.800781-5.328125 2.457031-10.742187 4.71875-16.246094 6.742187-.546874.203125-1.097656.378906-1.601562.570313-5.601562 2.007812-11.28125 3.824219-17.03125 5.382812l-1.378906.34375c-5.871094 1.550781-11.796875 2.886719-17.789063 3.960938-.34375.0625-.6875.105469-1.03125.160156-6.128906 1.070313-12.3125 1.902344-18.539062 2.457031h-.566407c-6.398437.550782-12.800781.847656-19.28125.847656-6.480468 0-12.933593-.242187-19.320312-.792968zm179.28125-66.527344v-52.625c-.066406-57.410156-46.589844-103.933594-104-104h-112c-57.410156.066406-103.933594 46.589844-104 104v52.617188c-86.164062-87.941407-85.203125-228.9375 2.148438-315.699219 87.351562-86.757813 228.351562-86.757813 315.703124 0 87.351563 86.761719 88.3125 227.757812 2.148438 315.699219zm0 0"/>
<path d="m240 64c-44.183594 0-80 35.816406-80 80s35.816406 80 80 80 80-35.816406 80-80c-.046875-44.164062-35.835938-79.953125-80-80zm0 144c-35.347656 0-64-28.652344-64-64s28.652344-64 64-64 64 28.652344 64 64c-.039062 35.328125-28.671875 63.960938-64 64zm0 0"/>
</svg>
</button>
</div>
</div>
</header>
<main class="container_12 d-flex justify-content-between">
<aside class="grid_3 aside-left d-flex flex-column">
<div class="left-header d-flex flex-column justify-content-between">
<div class="ml-profile d-flex al-upper">
<div class="pp">
<img src="images/1.png" alt="#">
</div>
<div class="p-info d-flex flex-column flex-nowrap flex-fill">
<span class="name mt-auto mb-auto">Name Surname</span>
<span class="status mt-auto mb-auto">Status: <span>Without Premium</span></span>
</div>
<div class="d-flex ml-auto justify-content-end">
<svg class="mt-auto mb-auto" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 54 54" xml:space="preserve">
<g>
<path d="M51.22,21h-5.052c-0.812,0-1.481-0.447-1.792-1.197s-0.153-1.54,0.42-2.114l3.572-3.571
c0.525-0.525,0.814-1.224,0.814-1.966c0-0.743-0.289-1.441-0.814-1.967l-4.553-4.553c-1.05-1.05-2.881-1.052-3.933,0l-3.571,3.571
c-0.574,0.573-1.366,0.733-2.114,0.421C33.447,9.313,33,8.644,33,7.832V2.78C33,1.247,31.753,0,30.22,0H23.78
C22.247,0,21,1.247,21,2.78v5.052c0,0.812-0.447,1.481-1.197,1.792c-0.748,0.313-1.54,0.152-2.114-0.421l-3.571-3.571
c-1.052-1.052-2.883-1.05-3.933,0l-4.553,4.553c-0.525,0.525-0.814,1.224-0.814,1.967c0,0.742,0.289,1.44,0.814,1.966l3.572,3.571
c0.573,0.574,0.73,1.364,0.42,2.114S8.644,21,7.832,21H2.78C1.247,21,0,22.247,0,23.78v6.439C0,31.753,1.247,33,2.78,33h5.052
c0.812,0,1.481,0.447,1.792,1.197s0.153,1.54-0.42,2.114l-3.572,3.571c-0.525,0.525-0.814,1.224-0.814,1.966
c0,0.743,0.289,1.441,0.814,1.967l4.553,4.553c1.051,1.051,2.881,1.053,3.933,0l3.571-3.572c0.574-0.573,1.363-0.731,2.114-0.42
c0.75,0.311,1.197,0.98,1.197,1.792v5.052c0,1.533,1.247,2.78,2.78,2.78h6.439c1.533,0,2.78-1.247,2.78-2.78v-5.052
c0-0.812,0.447-1.481,1.197-1.792c0.751-0.312,1.54-0.153,2.114,0.42l3.571,3.572c1.052,1.052,2.883,1.05,3.933,0l4.553-4.553
c0.525-0.525,0.814-1.224,0.814-1.967c0-0.742-0.289-1.44-0.814-1.966l-3.572-3.571c-0.573-0.574-0.73-1.364-0.42-2.114
S45.356,33,46.168,33h5.052c1.533,0,2.78-1.247,2.78-2.78V23.78C54,22.247,52.753,21,51.22,21z M52,30.22
C52,30.65,51.65,31,51.22,31h-5.052c-1.624,0-3.019,0.932-3.64,2.432c-0.622,1.5-0.295,3.146,0.854,4.294l3.572,3.571
c0.305,0.305,0.305,0.8,0,1.104l-4.553,4.553c-0.304,0.304-0.799,0.306-1.104,0l-3.571-3.572c-1.149-1.149-2.794-1.474-4.294-0.854
c-1.5,0.621-2.432,2.016-2.432,3.64v5.052C31,51.65,30.65,52,30.22,52H23.78C23.35,52,23,51.65,23,51.22v-5.052
c0-1.624-0.932-3.019-2.432-3.64c-0.503-0.209-1.021-0.311-1.533-0.311c-1.014,0-1.997,0.4-2.761,1.164l-3.571,3.572
c-0.306,0.306-0.801,0.304-1.104,0l-4.553-4.553c-0.305-0.305-0.305-0.8,0-1.104l3.572-3.571c1.148-1.148,1.476-2.794,0.854-4.294
C10.851,31.932,9.456,31,7.832,31H2.78C2.35,31,2,30.65,2,30.22V23.78C2,23.35,2.35,23,2.78,23h5.052
c1.624,0,3.019-0.932,3.64-2.432c0.622-1.5,0.295-3.146-0.854-4.294l-3.572-3.571c-0.305-0.305-0.305-0.8,0-1.104l4.553-4.553
c0.304-0.305,0.799-0.305,1.104,0l3.571,3.571c1.147,1.147,2.792,1.476,4.294,0.854C22.068,10.851,23,9.456,23,7.832V2.78
C23,2.35,23.35,2,23.78,2h6.439C30.65,2,31,2.35,31,2.78v5.052c0,1.624,0.932,3.019,2.432,3.64
c1.502,0.622,3.146,0.294,4.294-0.854l3.571-3.571c0.306-0.305,0.801-0.305,1.104,0l4.553,4.553c0.305,0.305,0.305,0.8,0,1.104
l-3.572,3.571c-1.148,1.148-1.476,2.794-0.854,4.294c0.621,1.5,2.016,2.432,3.64,2.432h5.052C51.65,23,52,23.35,52,23.78V30.22z"/>
<path d="M27,18c-4.963,0-9,4.037-9,9s4.037,9,9,9s9-4.037,9-9S31.963,18,27,18z M27,34c-3.859,0-7-3.141-7-7s3.141-7,7-7
s7,3.141,7,7S30.859,34,27,34z"/>
</g>
</svg>
</div>
</div>
<div class="d-flex al-lower justify-content-between">
<div class="like-div d-flex justify-content-between align-items-center">
<svg class="like-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 51.997 51.997" xml:space="preserve">
<g>
<path d="M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905
c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478
c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014
C52.216,18.553,51.97,16.611,51.911,16.242z M49.521,21.261c-0.984,4.172-3.265,7.973-6.59,10.985L25.855,47.481L9.072,32.25
c-3.331-3.018-5.611-6.818-6.596-10.99c-0.708-2.997-0.417-4.69-0.416-4.701l0.015-0.101C2.725,9.139,7.806,3.826,14.158,3.826
c4.687,0,8.813,2.88,10.771,7.515l0.921,2.183l0.921-2.183c1.927-4.564,6.271-7.514,11.069-7.514
c6.351,0,11.433,5.313,12.096,12.727C49.938,16.57,50.229,18.264,49.521,21.261z"/>
<path d="M15.999,7.904c-5.514,0-10,4.486-10,10c0,0.553,0.447,1,1,1s1-0.447,1-1c0-4.411,3.589-8,8-8c0.553,0,1-0.447,1-1
S16.551,7.904,15.999,7.904z"/>
</g>
</svg>
<span class="like-count">257</span>
</div>
<div class="premium-div d-flex flex-fill justify-content-center">
<button class="premium-button">
<img src="images/confirm.png" alt="">
<span>Get Premium</span>
</button>
</div>
</div>
</div>
<div class="left-section d-flex flex-column">
<ul class="oc-ul d-flex flex-column justify-content-between">
<li class="al-lis">
<div class="like-div d-flex justify-content-between align-items-center">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 54 54" xml:space="preserve">
<circle cx="7" cy="47" r="7"/>
<circle cx="27" cy="47" r="7"/>
<circle cx="47" cy="47" r="7"/>
<circle cx="7" cy="27" r="7"/>
<circle cx="27" cy="27" r="7"/>
<circle cx="47" cy="27" r="7"/>
<circle cx="7" cy="7" r="7"/>
<circle cx="27" cy="7" r="7"/>
<circle cx="47" cy="7" r="7"/>
</svg>
<span class="like-count d-flex flex-fill">begin encounters</span>
<div class="additional-1 d-flex justify-content-center"> </div>
</div>
</li>
<li class="al-lis">
<div class="like-div d-flex justify-content-between align-items-center">
<svg viewBox="0 0 511 511.99945" xmlns="http://www.w3.org/2000/svg">
<path d="m485.988281 347.5c-1.132812 0-2.285156-.09375-3.4375-.296875-10.886719-1.886719-18.175781-12.238281-16.289062-23.121094 3.882812-22.40625 5.972656-45.3125 6.210937-68.082031-.832031-80.363281-24.265625-158.191406-67.765625-225.097656-6.023437-9.257813-3.394531-21.648438 5.863281-27.667969 9.261719-6.019531 21.648438-3.394531 27.671876 5.867187 47.6875 73.34375 73.355468 158.652344 74.230468 246.699219v.398438c-.25 24.988281-2.535156 50.125-6.800781 74.71875-1.6875 9.726562-10.136719 16.582031-19.683594 16.582031zm-47.746093 155.398438c15.46875-23.789063 28.785156-49.167969 39.585937-75.429688 4.203125-10.214844-.675781-21.902344-10.890625-26.101562-10.214844-4.203126-21.902344.671874-26.101562 10.886718-9.855469 23.96875-22.011719 47.128906-36.128907 68.839844-6.023437 9.261719-3.394531 21.648438 5.863281 27.671875 3.367188 2.1875 7.144532 3.234375 10.882813 3.234375 6.542969 0 12.957031-3.207031 16.789063-9.101562zm-97.171876-52.125c38.601563-57.613282 59.492188-124.875 60.410157-194.511719.003906-.175781.003906-.351563 0-.527344-.917969-69.636719-21.808594-136.898437-60.410157-194.507813-6.148437-9.175781-18.574218-11.632812-27.746093-5.484374-9.179688 6.148437-11.632813 18.570312-5.484375 27.746093 34.230468 51.089844 52.777344 110.734375 53.640625 172.511719-.863281 61.773438-19.410157 121.417969-53.640625 172.507812-6.148438 9.175782-3.691406 21.597657 5.484375 27.746094 3.417969 2.292969 7.285156 3.386719 11.113281 3.386719 6.445312 0 12.773438-3.109375 16.632812-8.867187zm-88.074218-83.46875c10.464844-3 18.984375-10.894532 22.789062-21.109376 11.019532-29.589843 16.304688-60.066406 15.707032-90.589843-.957032-48.707031-16.503907-96.011719-44.957032-136.796875-6.320312-9.054688-18.789062-11.277344-27.847656-4.957032-9.058594 6.320313-11.277344 18.789063-4.957031 27.847657 23.910156 34.269531 36.96875 73.929687 37.769531 114.691406.453125 23.035156-3.136719 46.105469-10.671875 68.691406l-183.457031-141.054687c-7.988282-6.144532-18.480469-7.941406-28.066406-4.816406-9.566407 3.125-16.960938 10.75-19.78125 20.40625-4.117188 14.082031-9.023438 36.511718-9.023438 63.378906 0 47.339844 27.066406 89.640625 28.214844 91.417968 6 9.253907 18.34375 11.882813 27.609375 5.910157 9.269531-5.976563 11.9375-18.347657 5.980469-27.628907-.214844-.339843-21.804688-34.398437-21.804688-69.699218 0-14.757813 1.792969-27.878906 3.988281-38.417969l178.109375 136.941406c6.117188 4.699219 13.378906 7.144531 20.820313 7.144531 3.1875 0 6.40625-.445312 9.578125-1.359374zm0 0"/>
</svg>
<span class="like-count d-flex flex-fill">people nearby</span>
<div class="additional d-flex justify-content-center"> </div>
</div>
</li>
<li class="al-lis">
<div class="like-div d-flex justify-content-between align-items-center">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-5 0 70 70" xml:space="preserve">
<g>
<path d="M36.537,28.156l-11-7c-0.308-0.195-0.698-0.208-1.019-0.033C24.199,21.299,24,21.635,24,22v14
c0,0.365,0.199,0.701,0.519,0.877C24.669,36.959,24.834,37,25,37c0.187,0,0.374-0.053,0.537-0.156l11-7
C36.825,29.66,37,29.342,37,29S36.825,28.34,36.537,28.156z M26,34.179V23.821L34.137,29L26,34.179z"/>
<path d="M57,6H47H11H1C0.448,6,0,6.447,0,7v11v11v11v11c0,0.553,0.448,1,1,1h10h36h10c0.552,0,1-0.447,1-1V40V29V18V7
C58,6.447,57.552,6,57,6z M10,28H2v-9h8V28z M2,30h8v9H2V30z M12,40V29V18V8h34v10v11v11v10H12V40z M56,28h-8v-9h8V28z M48,30h8v9
h-8V30z M56,8v9h-8V8H56z M2,8h8v9H2V8z M2,50v-9h8v9H2z M56,50h-8v-9h8V50z"/>
</g>
</svg>
<span class="like-count d-flex flex-fill">live channels</span>
<div class="additional-1 d-flex justify-content-center"> 35 </div>
</div>
</li>
<li class="al-lis">
<div class="like-div d-flex justify-content-between align-items-center">
<svg viewBox="0 -26 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m256 100c-5.519531 0-10 4.480469-10 10s4.480469 10 10 10 10-4.480469 10-10-4.480469-10-10-10zm0 0"/>
<path d="m90 280c5.519531 0 10-4.480469 10-10s-4.480469-10-10-10-10 4.480469-10 10 4.480469 10 10 10zm0 0"/>
<path d="m336 0c-90.027344 0-163.917969 62.070312-169.632812 140.253906-85.738282 4.300782-166.367188 66.125-166.367188 149.746094 0 34.945312 13.828125 68.804688 39 95.632812 4.980469 20.53125-1.066406 42.292969-16.070312 57.296876-2.859376 2.859374-3.714844 7.160156-2.167969 10.898437 1.546875 3.734375 5.191406 6.171875 9.238281 6.171875 28.519531 0 56.003906-11.183594 76.425781-30.890625 19.894531 6.78125 45.851563 10.890625 69.574219 10.890625 90.015625 0 163.898438-62.054688 169.628906-140.222656 20.9375-.929688 42.714844-4.796875 59.945313-10.667969 20.421875 19.707031 47.90625 30.890625 76.425781 30.890625 4.046875 0 7.691406-2.4375 9.238281-6.171875 1.546875-3.738281.691407-8.039063-2.167969-10.898437-15.003906-15.003907-21.050781-36.765626-16.070312-57.296876 25.171875-26.828124 39-60.6875 39-95.632812 0-86.886719-86.839844-150-176-150zm-160 420c-23.601562 0-50.496094-4.632812-68.511719-11.800781-3.859375-1.539063-8.269531-.527344-11.078125 2.539062-12.074218 13.199219-27.773437 22.402344-44.878906 26.632813 9.425781-18.058594 11.832031-39.347656 6.097656-59.519532-.453125-1.589843-1.292968-3.042968-2.445312-4.226562-22.6875-23.367188-35.183594-53.066406-35.183594-83.625 0-70.46875 71.4375-130 156-130 79.851562 0 150 55.527344 150 130 0 71.683594-67.289062 130-150 130zm280.816406-186.375c-1.152344 1.1875-1.992187 2.640625-2.445312 4.226562-5.734375 20.171876-3.328125 41.460938 6.097656 59.519532-17.105469-4.226563-32.804688-13.433594-44.878906-26.632813-2.808594-3.0625-7.21875-4.078125-11.078125-2.539062-15.613281 6.210937-37.886719 10.511719-58.914063 11.550781-2.921875-37.816406-21.785156-73.359375-54.035156-99.75h130.4375c5.523438 0 10-4.476562 10-10s-4.476562-10-10-10h-161.160156c-22.699219-11.554688-48.1875-18.292969-74.421875-19.707031 5.746093-67.164063 70.640625-120.292969 149.582031-120.292969 84.5625 0 156 59.53125 156 130 0 30.558594-12.496094 60.257812-35.183594 83.625zm0 0"/>
<path d="m256 260h-126c-5.523438 0-10 4.476562-10 10s4.476562 10 10 10h126c5.523438 0 10-4.476562 10-10s-4.476562-10-10-10zm0 0"/>
<path d="m256 320h-166c-5.523438 0-10 4.476562-10 10s4.476562 10 10 10h166c5.523438 0 10-4.476562 10-10s-4.476562-10-10-10zm0 0"/>
<path d="m422 100h-126c-5.523438 0-10 4.476562-10 10s4.476562 10 10 10h126c5.523438 0 10-4.476562 10-10s-4.476562-10-10-10zm0 0"/>
</svg>
<span class="like-count d-flex flex-fill">messages</span>
<div class="additional-2 d-flex justify-content-center"> 35 </div>
</div>
</li>
<li class="al-lis">
<div class="like-div d-flex justify-content-between align-items-center">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 49.94 49.94" xml:space="preserve">
<path d="M48.856,22.731c0.983-0.958,1.33-2.364,0.906-3.671c-0.425-1.307-1.532-2.24-2.892-2.438l-12.092-1.757
c-0.515-0.075-0.96-0.398-1.19-0.865L28.182,3.043c-0.607-1.231-1.839-1.996-3.212-1.996c-1.372,0-2.604,0.765-3.211,1.996
L16.352,14c-0.23,0.467-0.676,0.79-1.191,0.865L3.069,16.623C1.71,16.82,0.603,17.753,0.178,19.06
c-0.424,1.307-0.077,2.713,0.906,3.671l8.749,8.528c0.373,0.364,0.544,0.888,0.456,1.4L8.224,44.702
c-0.232,1.353,0.313,2.694,1.424,3.502c1.11,0.809,2.555,0.914,3.772,0.273l10.814-5.686c0.461-0.242,1.011-0.242,1.472,0
l10.815,5.686c0.528,0.278,1.1,0.415,1.669,0.415c0.739,0,1.475-0.231,2.103-0.688c1.111-0.808,1.656-2.149,1.424-3.502
L39.651,32.66c-0.088-0.513,0.083-1.036,0.456-1.4L48.856,22.731z M37.681,32.998l2.065,12.042c0.104,0.606-0.131,1.185-0.629,1.547
c-0.499,0.361-1.12,0.405-1.665,0.121l-10.815-5.687c-0.521-0.273-1.095-0.411-1.667-0.411s-1.145,0.138-1.667,0.412l-10.813,5.686
c-0.547,0.284-1.168,0.24-1.666-0.121c-0.498-0.362-0.732-0.94-0.629-1.547l2.065-12.042c0.199-1.162-0.186-2.348-1.03-3.17
L2.48,21.299c-0.441-0.43-0.591-1.036-0.4-1.621c0.19-0.586,0.667-0.988,1.276-1.077l12.091-1.757
c1.167-0.169,2.176-0.901,2.697-1.959l5.407-10.957c0.272-0.552,0.803-0.881,1.418-0.881c0.616,0,1.146,0.329,1.419,0.881
l5.407,10.957c0.521,1.058,1.529,1.79,2.696,1.959l12.092,1.757c0.609,0.089,1.086,0.491,1.276,1.077
c0.19,0.585,0.041,1.191-0.4,1.621l-8.749,8.528C37.866,30.65,37.481,31.835,37.681,32.998z"/>
</svg>
<span class="like-count d-flex flex-fill">featured peoples</span>
<div class="additional d-flex justify-content-center"> </div>
</div>
</li>
<li class="al-lis">
<div class="like-div d-flex justify-content-between align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-48 0 512 512">
<g id="surface1">
<path d="M 194.351562 249.359375 L 171.742188 295.175781 L 121.179688 302.523438 C 115.527344 303.34375 110.832031 307.300781 109.070312 312.730469 C 107.304688 318.160156 108.777344 324.121094 112.863281 328.109375 L 149.449219 363.769531 L 140.8125 414.128906 C 139.847656 419.757812 142.160156 425.445312 146.78125 428.800781 C 151.398438 432.15625 157.523438 432.601562 162.578125 429.945312 L 207.800781 406.167969 L 253.023438 429.945312 C 255.21875 431.097656 257.617188 431.667969 260.003906 431.667969 C 260.019531 431.667969 260.03125 431.667969 260.046875 431.667969 C 268.320312 431.65625 275.023438 424.945312 275.023438 416.667969 C 275.023438 415.515625 274.894531 414.394531 274.648438 413.316406 L 266.152344 363.769531 L 302.738281 328.109375 C 306.828125 324.121094 308.300781 318.160156 306.535156 312.730469 C 304.769531 307.300781 300.074219 303.34375 294.425781 302.523438 L 243.863281 295.179688 L 221.253906 249.359375 C 218.726562 244.242188 213.511719 241 207.804688 241 C 202.09375 241 196.878906 244.242188 194.351562 249.359375 Z M 220.453125 315.527344 C 222.636719 319.953125 226.863281 323.023438 231.746094 323.730469 L 260.035156 327.839844 L 239.566406 347.792969 C 236.03125 351.238281 234.417969 356.203125 235.25 361.070312 L 240.085938 389.246094 L 214.785156 375.941406 C 210.414062 373.648438 205.191406 373.644531 200.824219 375.941406 L 175.519531 389.246094 L 180.355469 361.070312 C 181.1875 356.203125 179.574219 351.238281 176.039062 347.792969 L 155.570312 327.839844 L 183.859375 323.730469 C 188.746094 323.023438 192.96875 319.953125 195.152344 315.527344 L 207.804688 289.894531 Z M 220.453125 315.527344 " />
<path d="M 360.433594 80.335938 L 297.035156 80.335938 C 300.925781 72.78125 303.136719 64.230469 303.136719 55.167969 C 303.136719 24.746094 278.386719 0 247.96875 0 C 232.148438 0 217.871094 6.703125 207.800781 17.410156 C 197.734375 6.703125 183.457031 0 167.636719 0 C 137.214844 0 112.46875 24.746094 112.46875 55.167969 C 112.46875 64.230469 114.679688 72.78125 118.570312 80.335938 L 55.167969 80.335938 C 24.746094 80.335938 0 105.082031 0 135.5 L 0 175.664062 C 0 183.949219 6.714844 190.664062 15 190.664062 L 16.066406 190.664062 L 16.066406 456.832031 C 16.066406 487.253906 40.8125 512 71.234375 512 L 344.367188 512 C 374.785156 512 399.535156 487.253906 399.535156 456.832031 L 399.535156 190.664062 L 400.601562 190.664062 C 408.886719 190.664062 415.601562 183.949219 415.601562 175.664062 L 415.601562 135.5 C 415.601562 105.082031 390.855469 80.335938 360.433594 80.335938 Z M 385.601562 135.5 L 385.601562 160.664062 L 222.800781 160.664062 L 222.800781 110.335938 L 360.433594 110.335938 C 374.3125 110.335938 385.601562 121.625 385.601562 135.5 Z M 247.96875 30 C 261.84375 30 273.136719 41.289062 273.136719 55.167969 C 273.136719 69.046875 261.84375 80.335938 247.96875 80.335938 L 222.800781 80.335938 L 222.800781 55.167969 C 222.800781 41.289062 234.089844 30 247.96875 30 Z M 142.46875 55.167969 C 142.46875 41.289062 153.757812 30 167.636719 30 C 181.511719 30 192.800781 41.289062 192.800781 55.167969 L 192.800781 80.335938 L 167.636719 80.335938 C 153.757812 80.335938 142.46875 69.046875 142.46875 55.167969 Z M 30 135.5 C 30 121.625 41.289062 110.335938 55.167969 110.335938 L 192.800781 110.335938 L 192.800781 160.664062 L 30 160.664062 Z M 369.535156 456.832031 C 369.535156 470.710938 358.242188 482 344.367188 482 L 71.234375 482 C 57.359375 482 46.066406 470.710938 46.066406 456.832031 L 46.066406 190.664062 L 369.535156 190.664062 Z M 369.535156 456.832031 "/>
</g>
</svg>
<span class="like-count d-flex flex-fill">gifts</span>
<div class="additional-2 d-flex justify-content-center"> 35 </div>
</div>
</li>
<li class="al-lis">
<div class="like-div d-flex justify-content-between align-items-center">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-5 2 600 600" xml:space="preserve">
<g>
<g>
<path d="M488.399,492h-21.933V173.536c0-14.823-12.06-26.882-26.882-26.882H390.56c-14.823,0-26.882,12.06-26.882,26.882V492
h-55.692V317.825c0-14.823-12.059-26.882-26.882-26.882H232.08c-14.823,0-26.882,12.06-26.882,26.882V492h-55.692v-90.204
c0-14.823-12.06-26.882-26.882-26.882H73.599c-14.823,0-26.882,12.06-26.882,26.882V492H23.601c-5.523,0-10,4.477-10,10
s4.477,10,10,10h464.798c5.523,0,10-4.477,10-10S493.922,492,488.399,492z M129.504,492H66.716v-90.204
c0-3.795,3.087-6.882,6.882-6.882h49.024c3.795,0,6.882,3.087,6.882,6.882V492z M287.985,492h-62.788V317.825
c0-3.795,3.087-6.882,6.882-6.882h49.024c3.794,0,6.882,3.087,6.882,6.882V492z M446.466,492h-62.788V173.536
c0-3.795,3.087-6.882,6.882-6.882h49.024c3.795,0,6.882,3.087,6.882,6.882V492z"/>
</g>
</g>
<g>
<g>
<path d="M466.442,10.516c0.14-2.729-0.82-5.504-2.904-7.588c-2.084-2.084-4.859-3.045-7.588-2.904
C455.789,0.017,455.63,0,455.466,0h-60.5c-5.523,0-10,4.477-10,10s4.477,10,10,10h37.357l-98.857,98.858l-37.28-37.28
c-1.875-1.875-4.419-2.929-7.071-2.929c-2.652,0-5.196,1.054-7.071,2.929l-179.769,179.77c-3.905,3.905-3.905,10.237,0,14.143
c1.953,1.951,4.512,2.927,7.071,2.927s5.119-0.976,7.071-2.929L289.115,102.79l37.28,37.28c3.905,3.905,10.237,3.905,14.143,0
L446.466,34.143v33.81c0,5.523,4.477,10,10,10s10-4.477,10-10V11C466.466,10.837,466.449,10.678,466.442,10.516z"/>
</g>
</g>
<g>
<g>
<circle cx="75.64" cy="303.31" r="10"/>
</g>
</g>
</svg>
<span class="like-count d-flex flex-fill">rating of popularity</span>
<div class="additional d-flex justify-content-center"> </div>
</div>
</li>
<li class="al-lis">
<div class="like-div d-flex justify-content-between align-items-center">
<svg viewBox="-20 -20 600 600" xmlns="http://www.w3.org/2000/svg">
<path d="m437.5 42.730469h-33.75v-30.3125c0-6.90625-5.59375-12.5000002-12.5-12.5000002s-12.5 5.5937502-12.5 12.5000002v30.3125h-257.5v-30.3125c0-6.90625-5.59375-12.5000002-12.5-12.5000002s-12.5 5.5937502-12.5 12.5000002v30.3125h-33.75c-34.460938 0-62.5 28.425781-62.5 62.890625v324.921875c.0625 34.40625 28.011719 62.25 62.421875 62.1875h375.078125c34.410156.105469 62.390625-27.703125 62.5-62.109375v-325c0-34.464844-28.039062-62.890625-62.5-62.890625zm37.5 387.8125c-.046875 20.585937-16.777344 37.234375-37.363281 37.1875h-375.136719c-20.585938.121093-37.375-16.464844-37.5-37.050781v-325.058594c0-20.679688 16.820312-37.890625 37.5-37.890625h33.75v43.867187c0 6.902344 5.59375 12.5 12.5 12.5s12.5-5.597656 12.5-12.5v-43.867187h257.5v43.867187c0 6.902344 5.59375 12.5 12.5 12.5s12.5-5.597656 12.5-12.5v-43.867187h33.75c20.679688 0 37.5 17.210937 37.5 37.890625zm0 0"/>
<path d="m384.339844 280.230469h-268.679688c-6.90625 0-12.5 5.59375-12.5 12.5 0 6.902343 5.59375 12.5 12.5 12.5h268.679688c6.90625 0 12.5-5.597657 12.5-12.5 0-6.90625-5.59375-12.5-12.5-12.5zm0 0"/>
<path d="m384.339844 370.230469h-268.679688c-6.90625 0-12.5 5.59375-12.5 12.5 0 6.902343 5.59375 12.5 12.5 12.5h268.679688c6.90625 0 12.5-5.597657 12.5-12.5 0-6.90625-5.59375-12.5-12.5-12.5zm0 0"/>
<path d="m115.660156 216.480469h145.535156c6.90625 0 12.5-5.597657 12.5-12.5 0-6.90625-5.59375-12.5-12.5-12.5h-145.535156c-6.90625 0-12.5 5.59375-12.5 12.5 0 6.902343 5.59375 12.5 12.5 12.5zm0 0"/>
</svg>
<span class="like-count d-flex flex-fill">daily tasks</span>
<div class="additional d-flex justify-content-center"> </div>
</div>
</li>
</ul>
</div>
</aside>
<div class="grid_8 container_12 main-section d-flex flex-column align-items-center">
<div class="chat-container d-flex grid_12 justify-content-between">
<div class="inbox grid_12 d-flex flex-column">
<div class="inbox-header d-flex justify-content-between">
<a class="chat-board-link" href="chat-detail.html"></a>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 56.966 56.966" xml:space="preserve">
<path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23
s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92
c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17
s-17-7.626-17-17S14.61,6,23.984,6z"/>
</svg>
<input class="search-bar d-flex" type="text" name="search-input" placeholder="Search by users">
<svg class="write-svg" viewBox="0 -1 401.52289 401" xmlns="http://www.w3.org/2000/svg">
<path d="m370.589844 250.972656c-5.523438 0-10 4.476563-10 10v88.789063c-.019532 16.5625-13.4375 29.984375-30 30h-280.589844c-16.5625-.015625-29.980469-13.4375-30-30v-260.589844c.019531-16.558594 13.4375-29.980469 30-30h88.789062c5.523438 0 10-4.476563 10-10 0-5.519531-4.476562-10-10-10h-88.789062c-27.601562.03125-49.96875 22.398437-50 50v260.59375c.03125 27.601563 22.398438 49.96875 50 50h280.589844c27.601562-.03125 49.96875-22.398437 50-50v-88.792969c0-5.523437-4.476563-10-10-10zm0 0"/>
<path d="m376.628906 13.441406c-17.574218-17.574218-46.066406-17.574218-63.640625 0l-178.40625 178.40625c-1.222656 1.222656-2.105469 2.738282-2.566406 4.402344l-23.460937 84.699219c-.964844 3.472656.015624 7.191406 2.5625 9.742187 2.550781 2.546875 6.269531 3.527344 9.742187 2.566406l84.699219-23.464843c1.664062-.460938 3.179687-1.34375 4.402344-2.566407l178.402343-178.410156c17.546875-17.585937 17.546875-46.054687 0-63.640625zm-220.257812 184.90625 146.011718-146.015625 47.089844 47.089844-146.015625 146.015625zm-9.40625 18.875 37.621094 37.625-52.039063 14.417969zm227.257812-142.546875-10.605468 10.605469-47.09375-47.09375 10.609374-10.605469c9.761719-9.761719 25.589844-9.761719 35.351563 0l11.738281 11.734375c9.746094 9.773438 9.746094 25.589844 0 35.359375zm0 0"/>
</svg>
</div>
<div class="inbox-main d-flex flex-column">
<div class="ib-message d-flex">
<div class="pp">
<img src="images/1.png" alt="#">
</div>
<div class="p-info d-flex flex-column flex-nowrap flex-fill">
<span class="name mt-auto mb-auto">Name Surname</span>
<span class="status mt-auto mb-auto"> Message xyz </span>
</div>
</div>
<div class="ib-message d-flex">
<div class="pp">
<img src="images/1.png" alt="#">
</div>
<div class="p-info d-flex flex-column flex-nowrap flex-fill">
<span class="name mt-auto mb-auto">Name Surname</span>
<span class="status mt-auto mb-auto"> Message xyz </span>
</div>
</div>
<div class="ib-message d-flex">
<div class="pp">
<img src="images/1.png" alt="#">
</div>
<div class="p-info d-flex flex-column flex-nowrap flex-fill">
<span class="name mt-auto mb-auto">Name Surname</span>
<span class="status mt-auto mb-auto"> Message xyz </span>
</div>
</div>
<div class="ib-message d-flex">
<div class="pp">
<img src="images/1.png" alt="#">
</div>
<div class="p-info d-flex flex-column flex-nowrap flex-fill">
<span class="name mt-auto mb-auto">Name Surname</span>
<span class="status mt-auto mb-auto"> Message xyz </span>
</div>
</div>
<div class="ib-message d-flex">
<div class="pp">
<img src="images/1.png" alt="#">
</div>
<div class="p-info d-flex flex-column flex-nowrap flex-fill">
<span class="name mt-auto mb-auto">Name Surname</span>
<span class="status mt-auto mb-auto"> Message xyz </span>
</div>
</div>
<div class="ib-message d-flex">
<div class="pp">
<img src="images/1.png" alt="#">
</div>
<div class="p-info d-flex flex-column flex-nowrap flex-fill">
<span class="name mt-auto mb-auto">Name Surname</span>
<span class="status mt-auto mb-auto"> Message xyz </span>
</div>
</div>
<div class="ib-message d-flex">
<div class="pp">
<img src="images/1.png" alt="#">
</div>
<div class="p-info d-flex flex-column flex-nowrap flex-fill">
<span class="name mt-auto mb-auto">Name Surname</span>
<span class="status mt-auto mb-auto"> Message xyz </span>
</div>
</div>
<div class="ib-message d-flex">
<div class="pp">
<img src="images/1.png" alt="#">
</div>
<div class="p-info d-flex flex-column flex-nowrap flex-fill">
<span class="name mt-auto mb-auto">Name Surname</span>
<span class="status mt-auto mb-auto"> Message xyz </span>
</div>
</div>
<div class="ib-message d-flex">
<div class="pp">
<img src="images/1.png" alt="#">
</div>
<div class="p-info d-flex flex-column flex-nowrap flex-fill">
<span class="name mt-auto mb-auto">Name Surname</span>
<span class="status mt-auto mb-auto"> Message xyz </span>
</div>
</div>
<div class="ib-message d-flex">
<div class="pp">
<img src="images/1.png" alt="#">
</div>
<div class="p-info d-flex flex-column flex-nowrap flex-fill">
<span class="name mt-auto mb-auto">Name Surname</span>
<span class="status mt-auto mb-auto"> Message xyz </span>
</div>
</div>
<div class="ib-message d-flex">
<div class="pp">
<img src="images/1.png" alt="#">
</div>
<div class="p-info d-flex flex-column flex-nowrap flex-fill">
<span class="name mt-auto mb-auto">Name Surname</span>
<span class="status mt-auto mb-auto"> Message xyz </span>
</div>
</div>
<div class="ib-message d-flex">
<div class="pp">
<img src="images/1.png" alt="#">
</div>
<div class="p-info d-flex flex-column flex-nowrap flex-fill">
<span class="name mt-auto mb-auto">Name Surname</span>
<span class="status mt-auto mb-auto"> Message xyz </span>
</div>
</div>
<div class="ib-message d-flex">
<div class="pp">
<img src="images/1.png" alt="#">
</div>
<div class="p-info d-flex flex-column flex-nowrap flex-fill">
<span class="name mt-auto mb-auto">Name Surname</span>
<span class="status mt-auto mb-auto"> Message xyz </span>
</div>
</div>
<div class="ib-message d-flex">
<div class="pp">
<img src="images/1.png" alt="#">
</div>
<div class="p-info d-flex flex-column flex-nowrap flex-fill">
<span class="name mt-auto mb-auto">Name Surname</span>
<span class="status mt-auto mb-auto"> Message xyz </span>
</div>
</div>
<div class="ib-message d-flex">
<div class="pp">
<img src="images/1.png" alt="#">
</div>
<div class="p-info d-flex flex-column flex-nowrap flex-fill">
<span class="name mt-auto mb-auto">Name Surname</span>
<span class="status mt-auto mb-auto"> Message xyz </span>
</div>
</div>
<div class="ib-message d-flex">
<div class="pp">
<img src="images/1.png" alt="#">
</div>
<div class="p-info d-flex flex-column flex-nowrap flex-fill">
<span class="name mt-auto mb-auto">Name Surname</span>
<span class="status mt-auto mb-auto"> Message xyz </span>
</div>
</div>
<div class="ib-message d-flex">
<div class="pp">
<img src="images/1.png" alt="#">
</div>
<div class="p-info d-flex flex-column flex-nowrap flex-fill">
<span class="name mt-auto mb-auto">Name Surname</span>
<span class="status mt-auto mb-auto"> Message xyz </span>
</div>
</div>
</div>
<div class="inbox-footer d-flex justify-content-between flex-fill">
<svg viewBox="0 0 511 511.99945" xmlns="http://www.w3.org/2000/svg">
<path d="m485.988281 347.5c-1.132812 0-2.285156-.09375-3.4375-.296875-10.886719-1.886719-18.175781-12.238281-16.289062-23.121094 3.882812-22.40625 5.972656-45.3125 6.210937-68.082031-.832031-80.363281-24.265625-158.191406-67.765625-225.097656-6.023437-9.257813-3.394531-21.648438 5.863281-27.667969 9.261719-6.019531 21.648438-3.394531 27.671876 5.867187 47.6875 73.34375 73.355468 158.652344 74.230468 246.699219v.398438c-.25 24.988281-2.535156 50.125-6.800781 74.71875-1.6875 9.726562-10.136719 16.582031-19.683594 16.582031zm-47.746093 155.398438c15.46875-23.789063 28.785156-49.167969 39.585937-75.429688 4.203125-10.214844-.675781-21.902344-10.890625-26.101562-10.214844-4.203126-21.902344.671874-26.101562 10.886718-9.855469 23.96875-22.011719 47.128906-36.128907 68.839844-6.023437 9.261719-3.394531 21.648438 5.863281 27.671875 3.367188 2.1875 7.144532 3.234375 10.882813 3.234375 6.542969 0 12.957031-3.207031 16.789063-9.101562zm-97.171876-52.125c38.601563-57.613282 59.492188-124.875 60.410157-194.511719.003906-.175781.003906-.351563 0-.527344-.917969-69.636719-21.808594-136.898437-60.410157-194.507813-6.148437-9.175781-18.574218-11.632812-27.746093-5.484374-9.179688 6.148437-11.632813 18.570312-5.484375 27.746093 34.230468 51.089844 52.777344 110.734375 53.640625 172.511719-.863281 61.773438-19.410157 121.417969-53.640625 172.507812-6.148438 9.175782-3.691406 21.597657 5.484375 27.746094 3.417969 2.292969 7.285156 3.386719 11.113281 3.386719 6.445312 0 12.773438-3.109375 16.632812-8.867187zm-88.074218-83.46875c10.464844-3 18.984375-10.894532 22.789062-21.109376 11.019532-29.589843 16.304688-60.066406 15.707032-90.589843-.957032-48.707031-16.503907-96.011719-44.957032-136.796875-6.320312-9.054688-18.789062-11.277344-27.847656-4.957032-9.058594 6.320313-11.277344 18.789063-4.957031 27.847657 23.910156 34.269531 36.96875 73.929687 37.769531 114.691406.453125 23.035156-3.136719 46.105469-10.671875 68.691406l-183.457031-141.054687c-7.988282-6.144532-18.480469-7.941406-28.066406-4.816406-9.566407 3.125-16.960938 10.75-19.78125 20.40625-4.117188 14.082031-9.023438 36.511718-9.023438 63.378906 0 47.339844 27.066406 89.640625 28.214844 91.417968 6 9.253907 18.34375 11.882813 27.609375 5.910157 9.269531-5.976563 11.9375-18.347657 5.980469-27.628907-.214844-.339843-21.804688-34.398437-21.804688-69.699218 0-14.757813 1.792969-27.878906 3.988281-38.417969l178.109375 136.941406c6.117188 4.699219 13.378906 7.144531 20.820313 7.144531 3.1875 0 6.40625-.445312 9.578125-1.359374zm0 0"/>
</svg>
<svg class="message-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" xml:space="preserve">
<g>
<g>
<path d="M511.609,197.601c-0.001-0.77-0.173-1.933-0.472-2.603c-0.787-2.854-2.536-5.461-5.154-7.281l-73.292-50.948V82.153
c0-7.24-5.872-13.112-13.112-13.112H335.26l-71.743-49.878c-4.484-3.121-10.437-3.134-14.935-0.026l-72.206,49.904H92.426
c-7.242,0-13.112,5.872-13.112,13.112v53.973L5.666,187.027c-3.623,2.504-5.583,6.507-5.645,10.6
C0.017,197.704,0,197.777,0,197.857l0.391,284.235c0.005,3.477,1.391,6.81,3.852,9.266c2.458,2.451,5.788,3.827,9.26,3.827
c0.007,0,0.012,0,0.018,0l485.385-0.667c7.24-0.01,13.104-5.889,13.094-13.13L511.609,197.601z M432.69,168.708l41.898,29.118
l-41.898,29.128V168.708z M256.015,45.884l33.31,23.156h-66.812L256.015,45.884z M105.538,95.265h300.928v149.921L305.43,315.428
l-41.194-31.954c-0.064-0.05-0.119-0.081-0.181-0.126c-4.604-3.454-11.116-3.581-15.894,0.126l-41.493,32.185l-101.13-69.893
V95.265z M79.314,168.003v59.64l-43.146-29.819L79.314,168.003z M26.258,222.867l158.669,109.655L26.578,455.346L26.258,222.867z
M51.875,468.909l204.324-158.484l203.591,157.923L51.875,468.909z M327.144,332.271l158.276-110.036l0.32,233.059
L327.144,332.271z"/>
</g>
</g>
<g>
<g>
<path d="M344.77,147.713H167.234c-7.24,0-13.112,5.872-13.112,13.112s5.872,13.112,13.112,13.112H344.77
c7.242,0,13.112-5.872,13.112-13.112S352.012,147.713,344.77,147.713z"/>
</g>
</g>
<g>
<g>
<path d="M344.77,215.895H167.234c-7.24,0-13.112,5.872-13.112,13.112c0,7.24,5.872,13.112,13.112,13.112H344.77
c7.242,0,13.112-5.872,13.112-13.112C357.882,221.767,352.012,215.895,344.77,215.895z"/>
</g>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="431.972px" height="431.972px" viewBox="0 0 431.972 431.972" xml:space="preserve">
<g>
<path d="M393.146,14.279c-3.713-5.333-8.713-9.233-14.989-11.707c-3.997-1.711-8.186-2.568-12.565-2.568V0H66.378
c-4.377,0-8.562,0.857-12.56,2.568c-6.28,2.472-11.278,6.377-14.989,11.707c-3.71,5.33-5.568,11.228-5.568,17.701v368.019
c0,6.475,1.858,12.371,5.568,17.706c3.711,5.329,8.709,9.233,14.989,11.704c3.994,1.711,8.183,2.566,12.56,2.566
c8.949,0,16.844-3.142,23.698-9.418l125.91-121.062l125.91,121.065c6.663,6.081,14.562,9.127,23.695,9.127
c4.76,0,8.948-0.756,12.565-2.279c6.276-2.471,11.276-6.375,14.989-11.711c3.71-5.328,5.564-11.225,5.564-17.699V31.98
C398.71,25.507,396.852,19.609,393.146,14.279z M362.166,391.139L241.397,275.224l-25.411-24.264l-25.409,24.264L69.809,391.139
V36.549h292.357V391.139L362.166,391.139z"/>
</g>
</svg>
</div>
</div>
</div>
</div>
<div class="personal-container pc-media-2 ml-auto mr-auto">
<div class="personal-1 d-flex justify-content-between align-items-center">
<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" xml:space="preserve">
<g>
<g>
<path d="M310,190c-5.52,0-10,4.48-10,10s4.48,10,10,10c5.52,0,10-4.48,10-10S315.52,190,310,190z"/>
</g>
</g>
<g>
<g>
<path d="M500.281,443.719l-133.48-133.48C388.546,277.485,400,239.555,400,200C400,89.72,310.28,0,200,0S0,89.72,0,200
s89.72,200,200,200c39.556,0,77.486-11.455,110.239-33.198l36.895,36.895c0.005,0.005,0.01,0.01,0.016,0.016l96.568,96.568
C451.276,507.838,461.319,512,472,512c10.681,0,20.724-4.162,28.278-11.716C507.837,492.731,512,482.687,512,472
S507.837,451.269,500.281,443.719z M305.536,345.727c0,0.001-0.001,0.001-0.002,0.002C274.667,368.149,238.175,380,200,380
c-99.252,0-180-80.748-180-180S100.748,20,200,20s180,80.748,180,180c0,38.175-11.851,74.667-34.272,105.535
C334.511,320.988,320.989,334.511,305.536,345.727z M326.516,354.793c10.35-8.467,19.811-17.928,28.277-28.277l28.371,28.371
c-8.628,10.183-18.094,19.65-28.277,28.277L326.516,354.793z M486.139,486.139c-3.78,3.78-8.801,5.861-14.139,5.861
s-10.359-2.081-14.139-5.861l-88.795-88.795c10.127-8.691,19.587-18.15,28.277-28.277l88.798,88.798
C489.919,461.639,492,466.658,492,472C492,477.342,489.919,482.361,486.139,486.139z"/>
</g>
</g>
<g>
<g>
<path d="M200,40c-88.225,0-160,71.775-160,160s71.775,160,160,160s160-71.775,160-160S288.225,40,200,40z M200,340
c-77.196,0-140-62.804-140-140S122.804,60,200,60s140,62.804,140,140S277.196,340,200,340z"/>
</g>
</g>
<g>
<g>
<path d="M312.065,157.073c-8.611-22.412-23.604-41.574-43.36-55.413C248.479,87.49,224.721,80,200,80c-5.522,0-10,4.478-10,10
c0,5.522,4.478,10,10,10c41.099,0,78.631,25.818,93.396,64.247c1.528,3.976,5.317,6.416,9.337,6.416
c1.192,0,2.405-0.215,3.584-0.668C311.472,168.014,314.046,162.229,312.065,157.073z"/>
</g>
</g>
</svg>
</div>
<div>
<svg viewBox="0 0 511 511.99945" xmlns="http://www.w3.org/2000/svg">
<path d="m485.988281 347.5c-1.132812 0-2.285156-.09375-3.4375-.296875-10.886719-1.886719-18.175781-12.238281-16.289062-23.121094 3.882812-22.40625 5.972656-45.3125 6.210937-68.082031-.832031-80.363281-24.265625-158.191406-67.765625-225.097656-6.023437-9.257813-3.394531-21.648438 5.863281-27.667969 9.261719-6.019531 21.648438-3.394531 27.671876 5.867187 47.6875 73.34375 73.355468 158.652344 74.230468 246.699219v.398438c-.25 24.988281-2.535156 50.125-6.800781 74.71875-1.6875 9.726562-10.136719 16.582031-19.683594 16.582031zm-47.746093 155.398438c15.46875-23.789063 28.785156-49.167969 39.585937-75.429688 4.203125-10.214844-.675781-21.902344-10.890625-26.101562-10.214844-4.203126-21.902344.671874-26.101562 10.886718-9.855469 23.96875-22.011719 47.128906-36.128907 68.839844-6.023437 9.261719-3.394531 21.648438 5.863281 27.671875 3.367188 2.1875 7.144532 3.234375 10.882813 3.234375 6.542969 0 12.957031-3.207031 16.789063-9.101562zm-97.171876-52.125c38.601563-57.613282 59.492188-124.875 60.410157-194.511719.003906-.175781.003906-.351563 0-.527344-.917969-69.636719-21.808594-136.898437-60.410157-194.507813-6.148437-9.175781-18.574218-11.632812-27.746093-5.484374-9.179688 6.148437-11.632813 18.570312-5.484375 27.746093 34.230468 51.089844 52.777344 110.734375 53.640625 172.511719-.863281 61.773438-19.410157 121.417969-53.640625 172.507812-6.148438 9.175782-3.691406 21.597657 5.484375 27.746094 3.417969 2.292969 7.285156 3.386719 11.113281 3.386719 6.445312 0 12.773438-3.109375 16.632812-8.867187zm-88.074218-83.46875c10.464844-3 18.984375-10.894532 22.789062-21.109376 11.019532-29.589843 16.304688-60.066406 15.707032-90.589843-.957032-48.707031-16.503907-96.011719-44.957032-136.796875-6.320312-9.054688-18.789062-11.277344-27.847656-4.957032-9.058594 6.320313-11.277344 18.789063-4.957031 27.847657 23.910156 34.269531 36.96875 73.929687 37.769531 114.691406.453125 23.035156-3.136719 46.105469-10.671875 68.691406l-183.457031-141.054687c-7.988282-6.144532-18.480469-7.941406-28.066406-4.816406-9.566407 3.125-16.960938 10.75-19.78125 20.40625-4.117188 14.082031-9.023438 36.511718-9.023438 63.378906 0 47.339844 27.066406 89.640625 28.214844 91.417968 6 9.253907 18.34375 11.882813 27.609375 5.910157 9.269531-5.976563 11.9375-18.347657 5.980469-27.628907-.214844-.339843-21.804688-34.398437-21.804688-69.699218 0-14.757813 1.792969-27.878906 3.988281-38.417969l178.109375 136.941406c6.117188 4.699219 13.378906 7.144531 20.820313 7.144531 3.1875 0 6.40625-.445312 9.578125-1.359374zm0 0"/>
</svg>
</div>
<div class="special-mobile">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="5 5 44 44">
<g>
<circle r="6" cy="27" cx="27"/>
<circle r="4" cy="15" cx="27"/>
<circle r="4" cy="15" cx="39"/>
<circle r="4" cy="15" cx="15"/>
<circle r="4" cy="27" cx="15"/>
<circle r="4" cy="39" cx="15"/>
<circle r="4" cy="39" cx="27"/>
<circle r="4" cy="27" cx="39"/>
<circle r="4" cy="39" cx="39"/>
<circle r="2" cy="9" cx="9"/>
<circle r="2" cy="9" cx="21"/>
<circle r="2" cy="9" cx="45"/>
<circle r="2" cy="9" cx="33"/>
<circle r="2" cy="21" cx="9"/>
<circle r="2" cy="33" cx="9"/>
<circle r="2" cy="45" cx="9"/>
<circle r="2" cy="45" cx="21"/>
<circle r="2" cy="45" cx="33"/>
<circle r="2" cy="45" cx="45"/>
<circle r="2" cy="21" cx="45"/>
<circle r="2" cy="33" cx="45"/>
</g>
</svg>
</div>
<div>
<svg viewBox="-21 -47 682.66669 682" xmlns="http://www.w3.org/2000/svg">
<path d="m552.011719-1.332031h-464.023438c-48.515625 0-87.988281 39.464843-87.988281 87.988281v283.972656c0 48.414063 39.300781 87.816406 87.675781 87.988282v128.863281l185.191407-128.863281h279.144531c48.515625 0 87.988281-39.472657 87.988281-87.988282v-283.972656c0-48.523438-39.472656-87.988281-87.988281-87.988281zm50.488281 371.960937c0 27.835938-22.648438 50.488282-50.488281 50.488282h-290.910157l-135.925781 94.585937v-94.585937h-37.1875c-27.839843 0-50.488281-22.652344-50.488281-50.488282v-283.972656c0-27.84375 22.648438-50.488281 50.488281-50.488281h464.023438c27.839843 0 50.488281 22.644531 50.488281 50.488281zm0 0"/>
<path d="m171.292969 131.171875h297.414062v37.5h-297.414062zm0 0"/>
<path d="m171.292969 211.171875h297.414062v37.5h-297.414062zm0 0"/><path d="m171.292969 291.171875h297.414062v37.5h-297.414062zm0 0"/>
</svg>
</div>
<div>
<svg viewBox="0 -8 480.09118 480" xmlns="http://www.w3.org/2000/svg">
<path d="m368 224.089844c-24.320312.035156-47.964844 7.988281-67.359375 22.664062-21.542969-25.714844-50.953125-43.621094-83.6875-50.953125 42.101563-22.460937 63.511719-70.695312 51.9375-116.988281-11.578125-46.292969-53.175781-78.765625-100.894531-78.765625s-89.316406 32.472656-100.894532 78.765625c-11.574218 46.292969 9.835938 94.527344 51.9375 116.988281-69.472656 15.511719-118.917968 77.105469-119.039062 148.289063v120h336v-20.695313c42.085938 12.585938 87.640625-.589843 116.511719-33.699219 28.867187-33.109374 35.714843-80.039062 17.511719-120.015624-18.203126-39.980469-58.097657-65.625-102.023438-65.589844zm-288-120c0-48.601563 39.398438-88 88-88s88 39.398437 88 88c0 48.601562-39.398438 88-88 88-48.578125-.058594-87.941406-39.421875-88-88zm240 344h-304v-104c.082031-75.074219 60.925781-135.914063 136-136h32c40.464844-.191406 78.863281 17.847656 104.550781 49.113281-.550781.558594-1.03125 1.175781-1.597656 1.75-1.167969 1.226563-2.28125 2.488281-3.394531 3.761719-1.40625 1.597656-2.773438 3.261718-4.085938 4.960937-1.039062 1.34375-2.039062 2.703125-3.015625 4.085938-1.226562 1.738281-2.402343 3.511719-3.511719 5.3125-.890624 1.433593-1.761718 2.863281-2.585937 4.335937-1.039063 1.863282-2.007813 3.769532-2.945313 5.6875-.726562 1.488282-1.453124 2.96875-2.117187 4.488282-.863281 2.007812-1.601563 4.046874-2.402344 6.097656-.558593 1.511718-1.132812 3.007812-1.597656 4.542968-.695313 2.175782-1.25 4.390626-1.808594 6.609376-.375 1.46875-.800781 2.917968-1.105469 4.40625-.519531 2.480468-.871093 5-1.222656 7.519531-.175781 1.273437-.433594 2.519531-.566406 3.800781-.394531 3.828125-.59375 7.675781-.59375 11.527344 0 2.773437.105469 5.535156.3125 8.28125.0625.910156.199219 1.800781.289062 2.710937.175782 1.816407.34375 3.640625.605469 5.433594.160157 1.070313.386719 2.117187.578125 3.199219.277344 1.597656.550782 3.199218.902344 4.800781.25 1.109375.558594 2.199219.839844 3.304687.382812 1.503907.753906 3.015626 1.191406 4.503907.335938 1.117187.738281 2.214843 1.105469 3.324219.472656 1.425781.945312 2.859374 1.472656 4.265624.421875 1.113282.894531 2.191407 1.351563 3.28125.566406 1.375 1.136718 2.75 1.757812 4.09375.496094 1.074219 1.042969 2.121094 1.601562 3.203126.664063 1.308593 1.320313 2.628906 2.03125 3.917968.585938 1.039063 1.199219 2.054688 1.808594 3.082032.753906 1.253906 1.503906 2.511718 2.304688 3.742187.648437.992187 1.335937 1.96875 2.015625 2.945313.800781 1.207031 1.679687 2.398437 2.566406 3.566406.722656.953125 1.464844 1.871094 2.21875 2.800781.917969 1.136719 1.855469 2.273437 2.824219 3.375.789062.898437 1.589844 1.777344 2.398437 2.648437 1.007813 1.070313 2.023438 2.128907 3.070313 3.199219.859375.800781 1.722656 1.65625 2.601562 2.472657 1.089844 1.007812 2.183594 1.992187 3.3125 2.953124.910156.800782 1.839844 1.542969 2.785156 2.296876 1.152344.925781 2.328126 1.820312 3.519532 2.703124.980468.722657 1.976562 1.4375 2.984375 2.136719 1.214843.796875 2.453125 1.597657 3.703125 2.398438 1.054687.664062 2.113281 1.3125 3.199218 1.945312 1.273438.742188 2.558594 1.445313 3.863282 2.144531 1.128906.597657 2.257812 1.199219 3.410156 1.765626.472656.234374.917969.496093 1.398438.71875zm48-16c-53.019531 0-96-42.980469-96-96 0-53.019532 42.980469-96 96-96s96 42.980468 96 96c.046875 25.476562-10.050781 49.921875-28.066406 67.933594-18.011719 18.015624-42.457032 28.113281-67.933594 28.066406zm0 0"/>
<path d="m392 312.089844v-48h-48v48h-48v48h48v48h48v-48h48v-48zm32 32h-48v48h-16v-48h-48v-16h48v-48h16v48h48zm0 0"/>
</svg>
</div>
</div>
</div>
</main>
</body>
</html>