-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
478 lines (410 loc) · 38.2 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<title>PopUp Kottans</title>
</head>
<body>
<div class="container">
<header class="header">
<nav class="nav">
<ul class="nav-list">
<li class="nav__item"><a href="#" class="nav-list__link">
<span>Mail</span>
</a>
</li>
<li class="nav__item">
<a href="#" class="nav-list__link">
<span>Images</span>
</a>
</li>
<li class="nav__item nav__item-popup-button ">
<input type="checkbox" name="popup__checkbox" class="popup__checkbox-check"
id="popup__checkbox">
<label for="popup__checkbox" class="popup__checkbox-label ">
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="some" viewBox="0 0 512 512 ">
<path d="M104 160a56 56 0 1 1 56-56a56.06 56.06 0 0 1-56 56z" />
<path d="M256 160a56 56 0 1 1 56-56a56.06 56.06 0 0 1-56 56z" />
<path d="M408 160a56 56 0 1 1 56-56a56.06 56.06 0 0 1-56 56z" />
<path d="M104 312a56 56 0 1 1 56-56a56.06 56.06 0 0 1-56 56z" />
<path d="M256 312a56 56 0 1 1 56-56a56.06 56.06 0 0 1-56 56z" />
<path d="M408 312a56 56 0 1 1 56-56a56.06 56.06 0 0 1-56 56z" />
<path d="M104 464a56 56 0 1 1 56-56a56.06 56.06 0 0 1-56 56z" />
<path d="M256 464a56 56 0 1 1 56-56a56.06 56.06 0 0 1-56 56z" />
<path d="M408 464a56 56 0 1 1 56-56a56.06 56.06 0 0 1-56 56z" />
</symbol>
</svg>
<svg class="popup__button-svg popup__button" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#some">
</use>
</svg>
</label>
<div class="popup__hide-pannel1">
<ul class="popup__items-list1">
<li class="popup__item">
<a href="#">
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="calendar" viewBox="0 0 512 512 ">
<path
d="M480 128a64 64 0 0 0-64-64h-16V48.45c0-8.61-6.62-16-15.23-16.43A16 16 0 0 0 368 48v16H144V48.45c0-8.61-6.62-16-15.23-16.43A16 16 0 0 0 112 48v16H96a64 64 0 0 0-64 64v12a4 4 0 0 0 4 4h440a4 4 0 0 0 4-4z" />
<path
d="M32 416a64 64 0 0 0 64 64h320a64 64 0 0 0 64-64V179a3 3 0 0 0-3-3H35a3 3 0 0 0-3 3zm344-208a24 24 0 1 1-24 24a24 24 0 0 1 24-24zm0 80a24 24 0 1 1-24 24a24 24 0 0 1 24-24zm-80-80a24 24 0 1 1-24 24a24 24 0 0 1 24-24zm0 80a24 24 0 1 1-24 24a24 24 0 0 1 24-24zm0 80a24 24 0 1 1-24 24a24 24 0 0 1 24-24zm-80-80a24 24 0 1 1-24 24a24 24 0 0 1 24-24zm0 80a24 24 0 1 1-24 24a24 24 0 0 1 24-24zm-80-80a24 24 0 1 1-24 24a24 24 0 0 1 24-24zm0 80a24 24 0 1 1-24 24a24 24 0 0 1 24-24z" />
</symbol>
</svg>
<svg class="popup__item-icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#calendar">
</use>
</svg>
</a>
<span>Calendar</span>
</li>
<li class="popup__item">
<a href="#">
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="mail" viewBox="0 0 512 512 ">
<path
d="M424 80H88a56.06 56.06 0 0 0-56 56v240a56.06 56.06 0 0 0 56 56h336a56.06 56.06 0 0 0 56-56V136a56.06 56.06 0 0 0-56-56zm-14.18 92.63l-144 112a16 16 0 0 1-19.64 0l-144-112a16 16 0 1 1 19.64-25.26L256 251.73l134.18-104.36a16 16 0 0 1 19.64 25.26z" />
</symbol>
</svg>
<svg class="popup__item-icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#mail">
</use>
</svg>
</a>
<span> Mail </span>
</li>
<li class="popup__item"><a href="#">
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="news" viewBox="0 0 512 512 ">
<path
d="M439.91 112h-23.82a.09.09 0 0 0-.09.09V416a32 32 0 0 0 32 32a32 32 0 0 0 32-32V152.09A40.09 40.09 0 0 0 439.91 112z" />
<path
d="M384 416V72a40 40 0 0 0-40-40H72a40 40 0 0 0-40 40v352a56 56 0 0 0 56 56h342.85a1.14 1.14 0 0 0 1.15-1.15a1.14 1.14 0 0 0-.85-1.1A64.11 64.11 0 0 1 384 416zM96 128a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v64a16 16 0 0 1-16 16h-64a16 16 0 0 1-16-16zm208 272H112.45c-8.61 0-16-6.62-16.43-15.23A16 16 0 0 1 112 368h191.55c8.61 0 16 6.62 16.43 15.23A16 16 0 0 1 304 400zm0-64H112.45c-8.61 0-16-6.62-16.43-15.23A16 16 0 0 1 112 304h191.55c8.61 0 16 6.62 16.43 15.23A16 16 0 0 1 304 336zm0-64H112.45c-8.61 0-16-6.62-16.43-15.23A16 16 0 0 1 112 240h191.55c8.61 0 16 6.62 16.43 15.23A16 16 0 0 1 304 272zm0-64h-63.55c-8.61 0-16-6.62-16.43-15.23A16 16 0 0 1 240 176h63.55c8.61 0 16 6.62 16.43 15.23A16 16 0 0 1 304 208zm0-64h-63.55c-8.61 0-16-6.62-16.43-15.23A16 16 0 0 1 240 112h63.55c8.61 0 16 6.62 16.43 15.23A16 16 0 0 1 304 144z" />
</symbol>
</svg>
<svg class="popup__item-icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#news">
</use>
</svg>
</a>
<span>News</span>
</li>
<li class="popup__item">
<a href="#">
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="maps" viewBox="0 0 512 512 ">
<path
d="M414.39 97.74A224 224 0 1 0 97.61 414.52A224 224 0 1 0 414.39 97.74zM64 256.13a191.63 191.63 0 0 1 6.7-50.31c7.34 15.8 18 29.45 25.25 45.66c9.37 20.84 34.53 15.06 45.64 33.32c9.86 16.21-.67 36.71 6.71 53.67c5.36 12.31 18 15 26.72 24c8.91 9.08 8.72 21.52 10.08 33.36a305.36 305.36 0 0 0 7.45 41.27c0 .1 0 .21.08.31C117.8 411.13 64 339.8 64 256.13zm192 192a193.12 193.12 0 0 1-32-2.68c.11-2.71.16-5.24.43-7c2.43-15.9 10.39-31.45 21.13-43.35c10.61-11.74 25.15-19.68 34.11-33c8.78-13 11.41-30.5 7.79-45.69c-5.33-22.44-35.82-29.93-52.26-42.1c-9.45-7-17.86-17.82-30.27-18.7c-5.72-.4-10.51.83-16.18-.63c-5.2-1.35-9.28-4.15-14.82-3.42c-10.35 1.36-16.88 12.42-28 10.92c-10.55-1.41-21.42-13.76-23.82-23.81c-3.08-12.92 7.14-17.11 18.09-18.26c4.57-.48 9.7-1 14.09.68c5.78 2.14 8.51 7.8 13.7 10.66c9.73 5.34 11.7-3.19 10.21-11.83c-2.23-12.94-4.83-18.21 6.71-27.12c8-6.14 14.84-10.58 13.56-21.61c-.76-6.48-4.31-9.41-1-15.86c2.51-4.91 9.4-9.34 13.89-12.27c11.59-7.56 49.65-7 34.1-28.16c-4.57-6.21-13-17.31-21-18.83c-10-1.89-14.44 9.27-21.41 14.19c-7.2 5.09-21.22 10.87-28.43 3c-9.7-10.59 6.43-14.06 10-21.46c1.65-3.45 0-8.24-2.78-12.75q5.41-2.28 11-4.23a15.6 15.6 0 0 0 8 3c6.69.44 13-3.18 18.84 1.38c6.48 5 11.15 11.32 19.75 12.88c8.32 1.51 17.13-3.34 19.19-11.86c1.25-5.18 0-10.65-1.2-16a190.83 190.83 0 0 1 105 32.21c-2-.76-4.39-.67-7.34.7c-6.07 2.82-14.67 10-15.38 17.12c-.81 8.08 11.11 9.22 16.77 9.22c8.5 0 17.11-3.8 14.37-13.62c-1.19-4.26-2.81-8.69-5.42-11.37a193.27 193.27 0 0 1 18 14.14c-.09.09-.18.17-.27.27c-5.76 6-12.45 10.75-16.39 18.05c-2.78 5.14-5.91 7.58-11.54 8.91c-3.1.73-6.64 1-9.24 3.08c-7.24 5.7-3.12 19.4 3.74 23.51c8.67 5.19 21.53 2.75 28.07-4.66c5.11-5.8 8.12-15.87 17.31-15.86a15.4 15.4 0 0 1 10.82 4.41c3.8 3.94 3.05 7.62 3.86 12.54c1.43 8.74 9.14 4 13.83-.41a192.12 192.12 0 0 1 9.24 18.77c-5.16 7.43-9.26 15.53-21.67 6.87c-7.43-5.19-12-12.72-21.33-15.06c-8.15-2-16.5.08-24.55 1.47c-9.15 1.59-20 2.29-26.94 9.22c-6.71 6.68-10.26 15.62-17.4 22.33c-13.81 13-19.64 27.19-10.7 45.57c8.6 17.67 26.59 27.26 46 26c19.07-1.27 38.88-12.33 38.33 15.38c-.2 9.81 1.85 16.6 4.86 25.71c2.79 8.4 2.6 16.54 3.24 25.21a158 158 0 0 0 4.74 30.07A191.75 191.75 0 0 1 256 448.13z" />
</symbol>
</svg>
<svg class="popup__item-icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#maps">
</use>
</svg>
</a>
<span>Maps</span>
</li>
<li class="popup__item"><a href="#">
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="files" viewBox="0 0 512 512 ">
<path
d="M408 96H252.11a23.89 23.89 0 0 1-13.31-4L211 73.41A55.77 55.77 0 0 0 179.89 64H104a56.06 56.06 0 0 0-56 56v24h416c0-30.88-25.12-48-56-48z" />
<path
d="M423.75 448H88.25a56 56 0 0 1-55.93-55.15L16.18 228.11v-.28A48 48 0 0 1 64 176h384.1a48 48 0 0 1 47.8 51.83v.28l-16.22 164.74A56 56 0 0 1 423.75 448zm56.15-221.45z" />
</symbol>
</svg>
<svg class="popup__item-icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#files">
</use>
</svg>
</a>
<span>Files</span>
</li>
<li class="popup__item">
<a href="#">
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="contacts" viewBox="0 0 512 512 ">
<path
d="M336 256c-20.56 0-40.44-9.18-56-25.84c-15.13-16.25-24.37-37.92-26-61c-1.74-24.62 5.77-47.26 21.14-63.76S312 80 336 80c23.83 0 45.38 9.06 60.7 25.52c15.47 16.62 23 39.22 21.26 63.63c-1.67 23.11-10.9 44.77-26 61C376.44 246.82 356.57 256 336 256zm66-88z" />
<path
d="M467.83 432H204.18a27.71 27.71 0 0 1-22-10.67a30.22 30.22 0 0 1-5.26-25.79c8.42-33.81 29.28-61.85 60.32-81.08C264.79 297.4 299.86 288 336 288c36.85 0 71 9 98.71 26.05c31.11 19.13 52 47.33 60.38 81.55a30.27 30.27 0 0 1-5.32 25.78A27.68 27.68 0 0 1 467.83 432z" />
<path
d="M147 260c-35.19 0-66.13-32.72-69-72.93c-1.42-20.6 5-39.65 18-53.62c12.86-13.83 31-21.45 51-21.45s38 7.66 50.93 21.57c13.1 14.08 19.5 33.09 18 53.52c-2.87 40.2-33.8 72.91-68.93 72.91z" />
<path
d="M212.66 291.45c-17.59-8.6-40.42-12.9-65.65-12.9c-29.46 0-58.07 7.68-80.57 21.62c-25.51 15.83-42.67 38.88-49.6 66.71a27.39 27.39 0 0 0 4.79 23.36A25.32 25.32 0 0 0 41.72 400h111a8 8 0 0 0 7.87-6.57c.11-.63.25-1.26.41-1.88c8.48-34.06 28.35-62.84 57.71-83.82a8 8 0 0 0-.63-13.39c-1.57-.92-3.37-1.89-5.42-2.89z" />
</symbol>
</svg>
<svg class="popup__item-icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#contacts">
</use>
</svg>
</a>
<span>Contacts</span>
</li>
<li class="popup__item">
<a href="#">
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="translate" viewBox="0 0 512 512 ">
<path
d="M478.33 433.6l-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362L368 281.65L401.17 362z" />
<path
d="M267.84 342.92a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73c39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36c-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93c.92 1.19 1.83 2.35 2.74 3.51c-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59c22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z" />
</symbol>
</svg>
<svg class="popup__item-icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#translate">
</use>
</svg>
</a>
<span>Translate</span>
</li>
<li class="popup__item"><a href="#">
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="video" viewBox="0 0 512 512 ">
<path
d="M508.64 148.79c0-45-33.1-81.2-74-81.2C379.24 65 322.74 64 265 64h-18c-57.6 0-114.2 1-169.6 3.6C36.6 67.6 3.5 104 3.5 149C1 184.59-.06 220.19 0 255.79q-.15 53.4 3.4 106.9c0 45 33.1 81.5 73.9 81.5c58.2 2.7 117.9 3.9 178.6 3.8q91.2.3 178.6-3.8c40.9 0 74-36.5 74-81.5c2.4-35.7 3.5-71.3 3.4-107q.34-53.4-3.26-106.9zM207 353.89v-196.5l145 98.2z" />
</symbol>
</svg>
<svg class="popup__item-icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#video">
</use>
</svg>
</a>
<span>Video</span>
</li>
<li class="popup__item"><a href="#">
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="search" viewBox="0 0 512 512 ">
<path
d="M456.69 421.39L362.6 327.3a173.81 173.81 0 0 0 34.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 0 0 327.3 362.6l94.09 94.09a25 25 0 0 0 35.3-35.3zM97.92 222.72a124.8 124.8 0 1 1 124.8 124.8a124.95 124.95 0 0 1-124.8-124.8z" />
</symbol>
</svg>
<svg class="popup__item-icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#search">
</use>
</svg>
</a>
<span>Search</span>
</li>
<li class="popup__item"><a href="#">
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="photos" viewBox="0 0 512 512 ">
<path
d="M450.29 112H142c-34 0-62 27.51-62 61.33v245.34c0 33.82 28 61.33 62 61.33h308c34 0 62-26.18 62-60V173.33c0-33.82-27.68-61.33-61.71-61.33zm-77.15 61.34a46 46 0 1 1-46.28 46a46.19 46.19 0 0 1 46.28-46.01zm-231.55 276c-17 0-29.86-13.75-29.86-30.66v-64.83l90.46-80.79a46.54 46.54 0 0 1 63.44 1.83L328.27 337l-113 112.33zM480 418.67a30.67 30.67 0 0 1-30.71 30.66H259L376.08 333a46.24 46.24 0 0 1 59.44-.16L480 370.59z" />
<path
d="M384 32H64A64 64 0 0 0 0 96v256a64.11 64.11 0 0 0 48 62V152a72 72 0 0 1 72-72h326a64.11 64.11 0 0 0-62-48z" />
</symbol>
</svg>
<svg class="popup__item-icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#photos">
</use>
</svg>
</a>
<span>Photos</span>
</li>
<li class="popup__item">
<a href="#">
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="apps" viewBox="0 0 512 512 ">
<path
d="M483.13 245.38C461.92 149.49 430 98.31 382.65 84.33A107.13 107.13 0 0 0 352 80c-13.71 0-25.65 3.34-38.28 6.88C298.5 91.15 281.21 96 256 96s-42.51-4.84-57.76-9.11C185.6 83.34 173.67 80 160 80a115.74 115.74 0 0 0-31.73 4.32c-47.1 13.92-79 65.08-100.52 161C4.61 348.54 16 413.71 59.69 428.83a56.62 56.62 0 0 0 18.64 3.22c29.93 0 53.93-24.93 70.33-45.34c18.53-23.1 40.22-34.82 107.34-34.82c59.95 0 84.76 8.13 106.19 34.82c13.47 16.78 26.2 28.52 38.9 35.91c16.89 9.82 33.77 12 50.16 6.37c25.82-8.81 40.62-32.1 44-69.24c2.57-28.48-1.39-65.89-12.12-114.37zM208 240h-32v32a16 16 0 0 1-32 0v-32h-32a16 16 0 0 1 0-32h32v-32a16 16 0 0 1 32 0v32h32a16 16 0 0 1 0 32zm84 4a20 20 0 1 1 20-20a20 20 0 0 1-20 20zm44 44a20 20 0 1 1 20-19.95A20 20 0 0 1 336 288zm0-88a20 20 0 1 1 20-20a20 20 0 0 1-20 20zm44 44a20 20 0 1 1 20-20a20 20 0 0 1-20 20z" />
</symbol>
</svg>
<svg class="popup__item-icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#apps">
</use>
</svg>
</a>
<span>Apps</span>
</li>
<li class="popup__item">
<a href="#">
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="document" viewBox="0 0 512 512 ">
<path
d="M428 224H288a48 48 0 0 1-48-48V36a4 4 0 0 0-4-4h-92a64 64 0 0 0-64 64v320a64 64 0 0 0 64 64h224a64 64 0 0 0 64-64V228a4 4 0 0 0-4-4zm-92 160H176a16 16 0 0 1 0-32h160a16 16 0 0 1 0 32zm0-80H176a16 16 0 0 1 0-32h160a16 16 0 0 1 0 32z" />
<path
d="M419.22 188.59L275.41 44.78a2 2 0 0 0-3.41 1.41V176a16 16 0 0 0 16 16h129.81a2 2 0 0 0 1.41-3.41z" />
</symbol>
</svg>
<svg class="popup__item-icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#document">
</use>
</svg>
</a>
<span>Document</span>
</li>
<li class="popup__item-more-button nav__button--focus">
<input type="checkbox" name="popup__checkbox2" class="popup__checkbox2-check"
id="popup__checkbox2">
<label for="popup__checkbox2" class="popup__checkbox2-label"><span
class="hidden">More button</span>
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="more1" viewBox="0 0 24 24 ">
<g>
<circle cx="12" cy="12" r="2" />
<circle cx="19" cy="12" r="2" />
<circle cx="5" cy="12" r="2" />
</g>
</symbol>
</svg>
<svg class="popup__item-icon popup__item-icon--more-button "
xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#more1">
</use>
</svg>
</label>
<div class="popup__hide-pannel2">
<ul class="popup__items-list2">
<li class="popup__item">
<a href="#">
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="chat" viewBox="0 0 512 512 ">
<path
d="M60.44 389.17c0 .07 0 .2-.08.38c.03-.12.05-.25.08-.38z" />
<path
d="M439.9 405.6a26.77 26.77 0 0 1-9.59-2l-56.78-20.13l-.42-.17a9.88 9.88 0 0 0-3.91-.76a10.32 10.32 0 0 0-3.62.66c-1.38.52-13.81 5.19-26.85 8.77c-7.07 1.94-31.68 8.27-51.43 8.27c-50.48 0-97.68-19.4-132.89-54.63A183.38 183.38 0 0 1 100.3 215.1a175.9 175.9 0 0 1 4.06-37.58c8.79-40.62 32.07-77.57 65.55-104A194.76 194.76 0 0 1 290.3 32c52.21 0 100.86 20 137 56.18c34.16 34.27 52.88 79.33 52.73 126.87a177.86 177.86 0 0 1-30.3 99.15l-.19.28l-.74 1c-.17.23-.34.45-.5.68l-.15.27a21.63 21.63 0 0 0-1.08 2.09l15.74 55.94a26.42 26.42 0 0 1 1.12 7.11a24 24 0 0 1-24.03 24.03z" />
<path
d="M299.87 425.39a15.74 15.74 0 0 0-10.29-8.1c-5.78-1.53-12.52-1.27-17.67-1.65a201.78 201.78 0 0 1-128.82-58.75A199.21 199.21 0 0 1 86.4 244.16C85 234.42 85 232 85 232a16 16 0 0 0-28-10.58s-7.88 8.58-11.6 17.19a162.09 162.09 0 0 0 11 150.06C59 393 59 395 58.42 399.5c-2.73 14.11-7.51 39-10 51.91a24 24 0 0 0 8 22.92l.46.39A24.34 24.34 0 0 0 72 480a23.42 23.42 0 0 0 9-1.79l53.51-20.65a8.05 8.05 0 0 1 5.72 0c21.07 7.84 43 12 63.78 12a176 176 0 0 0 74.91-16.66c5.46-2.56 14-5.34 19-11.12a15 15 0 0 0 1.95-16.39z" />
</symbol>
</svg>
<svg class="popup__item-icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#chat">
</use>
</svg>
</a>
<span>Chats</span>
</li>
<li class="popup__item">
<a href="#">
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="classroom" viewBox="0 0 512 512 ">
<path
d="M432 64H272V48a16 16 0 0 0-32 0v16H80a48.05 48.05 0 0 0-48 48v208a48.05 48.05 0 0 0 48 48h42.79l-26.17 91.6a16 16 0 1 0 30.76 8.8L156.07 368H240v48a16 16 0 0 0 32 0v-48h83.93l28.69 100.4a16 16 0 1 0 30.76-8.8L389.21 368H432a48.05 48.05 0 0 0 48-48V112a48.05 48.05 0 0 0-48-48zm16 256a16 16 0 0 1-16 16H80a16 16 0 0 1-16-16V112a16 16 0 0 1 16-16h352a16 16 0 0 1 16 16z" />
</symbol>
</svg>
<svg class="popup__item-icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#classroom">
</use>
</svg>
</a>
<span>Classroom</span>
</li>
<li class="popup__item"><a href="#">
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="collections" viewBox="0 0 512 512 ">
<path
d="M400 0H176a64.11 64.11 0 0 0-62 48h228a74 74 0 0 1 74 74v304.89l22 17.6a16 16 0 0 0 19.34.5a16.41 16.41 0 0 0 6.66-13.42V64a64 64 0 0 0-64-64z" />
<path
d="M320 80H112a64 64 0 0 0-64 64v351.62A16.36 16.36 0 0 0 54.6 509a16 16 0 0 0 19.71-.71L216 388.92l141.69 119.32a16 16 0 0 0 19.6.79a16.4 16.4 0 0 0 6.71-13.44V144a64 64 0 0 0-64-64z" />
</symbol>
</svg>
<svg class="popup__item-icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#collections">
</use>
</svg>
</a>
<span>Collections</span>
</li>
<li class="popup__item"><a href="#">
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="saturnus" viewBox="0 0 512 512 ">
<path
d="M96.85 286.62a8 8 0 0 0-12.53 8.25C102.07 373.28 172.3 432 256 432a175.31 175.31 0 0 0 52.41-8a8 8 0 0 0 .79-15a1120 1120 0 0 1-109.48-55.61a1126.24 1126.24 0 0 1-102.87-66.77z" />
<path
d="M492.72 339.51c-4.19-5.58-9.11-11.44-14.7-17.53a15.83 15.83 0 0 0-26.56 5.13c0 .16-.11.31-.17.47a15.75 15.75 0 0 0 3.15 16.06c22.74 25 26.42 38.51 25.48 41.36c-2 2.23-17.05 6.89-58.15-3.53q-8.83-2.24-19.32-5.46q-6.76-2.08-13.79-4.49a176.76 176.76 0 0 0 19.54-27.25c.17-.29.35-.58.52-.88A175.39 175.39 0 0 0 432 256a178.87 178.87 0 0 0-1-19c-9.57-88.17-84.4-157-175-157a175.37 175.37 0 0 0-106.4 35.89a177.4 177.4 0 0 0-45.83 51.84c-.16.29-.34.58-.51.87a175.48 175.48 0 0 0-13.83 30.52q-5.59-4.87-10.79-9.67c-5.39-5-10.17-9.63-14.42-14c-29.57-30.26-33.09-45.61-32.16-48.45c2-2.23 15.54-5.87 48.62 1.31A15.82 15.82 0 0 0 96.22 123l.36-.44a15.74 15.74 0 0 0-8.67-25.43A237.38 237.38 0 0 0 64.13 93c-30.72-3.53-50.83 2.52-59.78 18c-3.24 5.58-6.35 15.09-2.72 28.6C7 159.66 26.14 184 53.23 209.5c8.63 8.13 18.06 16.37 28.12 24.64c7.32 6 15 12.06 22.9 18.08q7.91 6 16.15 12T137.1 276c25.41 17.61 52.26 34.52 78.59 49.69q14.34 8.26 28.64 16t28.37 14.81c21.9 11 43.35 20.92 63.86 29.43q13.19 5.48 25.81 10.16c11.89 4.42 23.37 8.31 34.31 11.59l1.1.33c25.73 7.66 47.42 11.69 64.48 12H464c21.64 0 36.3-6.38 43.58-19c9.09-15.62 4.08-36.32-14.86-61.5z" />
</symbol>
</svg>
<svg class="popup__item-icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#saturnus">
</use>
</svg>
</a>
<span>Saturn</span>
</li>
<li class="popup__item"><a href="#">
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="blogs" viewBox="0 0 512 512 ">
<path
d="M202.24 74C166.11 56.75 115.61 48.3 48 48a31.36 31.36 0 0 0-17.92 5.33A32 32 0 0 0 16 79.9V366c0 19.34 13.76 33.93 32 33.93c71.07 0 142.36 6.64 185.06 47a4.11 4.11 0 0 0 6.94-3V106.82a15.89 15.89 0 0 0-5.46-12A143 143 0 0 0 202.24 74z" />
<path
d="M481.92 53.3A31.33 31.33 0 0 0 464 48c-67.61.3-118.11 8.71-154.24 26a143.31 143.31 0 0 0-32.31 20.78a15.93 15.93 0 0 0-5.45 12v337.13a3.93 3.93 0 0 0 6.68 2.81c25.67-25.5 70.72-46.82 185.36-46.81a32 32 0 0 0 32-32v-288a32 32 0 0 0-14.12-26.61z" />
</symbol>
</svg>
<svg class="popup__item-icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#blogs">
</use>
</svg>
</a>
<span>Blogs</span></li>
<li class="popup__item"><a href="#">
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="promo" viewBox="0 0 512 512 ">
<path
d="M48 176v.66a17.38 17.38 0 0 1-4.2 11.23v.05C38.4 194.32 32 205.74 32 224c0 16.55 5.3 28.23 11.68 35.91A19 19 0 0 1 48 272a32 32 0 0 0 32 32h8a8 8 0 0 0 8-8V152a8 8 0 0 0-8-8h-8a32 32 0 0 0-32 32z" />
<path
d="M452.18 186.55l-.93-.17a4 4 0 0 1-3.25-3.93V62c0-12.64-8.39-24-20.89-28.32c-11.92-4.11-24.34-.76-31.68 8.53a431.18 431.18 0 0 1-51.31 51.69c-23.63 20-46.24 34.25-67 42.31a8 8 0 0 0-5.15 7.47V299a16 16 0 0 0 9.69 14.69c19.34 8.29 40.24 21.83 62 40.28a433.74 433.74 0 0 1 51.68 52.16a26.22 26.22 0 0 0 21.1 9.87a33.07 33.07 0 0 0 10.44-1.74C439.71 410 448 399.05 448 386.4V265.53a4 4 0 0 1 3.33-3.94l.85-.14C461.8 258.84 480 247.67 480 224s-18.2-34.84-27.82-37.45z" />
<path
d="M240 320V152a8 8 0 0 0-8-8h-96a8 8 0 0 0-8 8v304a24 24 0 0 0 24 24h52.45a32.66 32.66 0 0 0 25.93-12.45a31.65 31.65 0 0 0 5.21-29.05c-1.62-5.18-3.63-11-5.77-17.19c-7.91-22.9-18.34-37.07-21.12-69.32A32 32 0 0 0 240 320z" />
</symbol>
</svg>
<svg class="popup__item-icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#promo">
</use>
</svg></a>
<span>Promo</span>
</li>
<li class="popup__item popup__item-last">
<a href="https://github.com/kottans/frontend" target="_blank"
class="popup__item-last-link">
<span>Even more from Kottans</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="nav__item ">
<a href="#" class="nav__button--focus">
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="bell" viewBox="0 0 512 512 ">
<path
d="M440.08 341.31c-1.66-2-3.29-4-4.89-5.93c-22-26.61-35.31-42.67-35.31-118c0-39-9.33-71-27.72-95c-13.56-17.73-31.89-31.18-56.05-41.12a3 3 0 0 1-.82-.67C306.6 51.49 282.82 32 256 32s-50.59 19.49-59.28 48.56a3.13 3.13 0 0 1-.81.65c-56.38 23.21-83.78 67.74-83.78 136.14c0 75.36-13.29 91.42-35.31 118c-1.6 1.93-3.23 3.89-4.89 5.93a35.16 35.16 0 0 0-4.65 37.62c6.17 13 19.32 21.07 34.33 21.07H410.5c14.94 0 28-8.06 34.19-21a35.17 35.17 0 0 0-4.61-37.66z" />
<path
d="M256 480a80.06 80.06 0 0 0 70.44-42.13a4 4 0 0 0-3.54-5.87H189.12a4 4 0 0 0-3.55 5.87A80.06 80.06 0 0 0 256 480z" />
</symbol>
</svg>
<svg class="popup__button-svg " xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#bell">
</use>
</svg>
</a>
</li>
<li class="nav__item">
<a href="#" class="nav__item-user-pic--link-border">
<img src="https://picsum.photos/1000/700" alt="User Avatar" class="nav__item-user-pic ">
</a>
</li>
</ul>
</nav>
</header>
<div class="content-container">
<div class="dobble-container"></div>
</div>
<footer class="footer">
<div class="athor">
<a href="https://github.com/Roophee" class="author__link nav-list__link" target="_blank">
<span>Author</span>
</a>
</div>
</footer>
</div>
</body>
</html>