-
Notifications
You must be signed in to change notification settings - Fork 61
/
typography.html
698 lines (690 loc) · 38.8 KB
/
typography.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
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="assets/images/favicon.svg" type="image/x-icon" />
<title>Typography | PlainAdmin Demo</title>
<!-- ========== All CSS files linkup ========= -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/css/lineicons.css" />
<link rel="stylesheet" href="assets/css/materialdesignicons.min.css" />
<link rel="stylesheet" href="assets/css/fullcalendar.css" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<!-- ======== Preloader =========== -->
<div id="preloader">
<div class="spinner"></div>
</div>
<!-- ======== Preloader =========== -->
<!-- ======== sidebar-nav start =========== -->
<aside class="sidebar-nav-wrapper">
<div class="navbar-logo">
<a href="index.html">
<img src="assets/images/logo/logo.svg" alt="logo" />
</a>
</div>
<nav class="sidebar-nav">
<ul>
<li class="nav-item nav-item-has-children">
<a
href="#0"
class="collapsed"
data-bs-toggle="collapse"
data-bs-target="#ddmenu_1"
aria-controls="ddmenu_1"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.74999 18.3333C12.2376 18.3333 15.1364 15.8128 15.7244 12.4941C15.8448 11.8143 15.2737 11.25 14.5833 11.25H9.99999C9.30966 11.25 8.74999 10.6903 8.74999 10V5.41666C8.74999 4.7263 8.18563 4.15512 7.50586 4.27556C4.18711 4.86357 1.66666 7.76243 1.66666 11.25C1.66666 15.162 4.83797 18.3333 8.74999 18.3333Z" />
<path
d="M17.0833 10C17.7737 10 18.3432 9.43708 18.2408 8.75433C17.7005 5.14918 14.8508 2.29947 11.2457 1.75912C10.5629 1.6568 10 2.2263 10 2.91665V9.16666C10 9.62691 10.3731 10 10.8333 10H17.0833Z" />
</svg>
</span>
<span class="text">Dashboard</span>
</a>
<ul id="ddmenu_1" class="collapse dropdown-nav">
<li>
<a href="index.html"> eCommerce </a>
</li>
</ul>
</li>
<li class="nav-item nav-item-has-children">
<a
href="#0"
class="collapsed"
data-bs-toggle="collapse"
data-bs-target="#ddmenu_2"
aria-controls="ddmenu_2"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11.8097 1.66667C11.8315 1.66667 11.8533 1.6671 11.875 1.66796V4.16667C11.875 5.43232 12.901 6.45834 14.1667 6.45834H16.6654C16.6663 6.48007 16.6667 6.50186 16.6667 6.5237V16.6667C16.6667 17.5872 15.9205 18.3333 15 18.3333H5.00001C4.07954 18.3333 3.33334 17.5872 3.33334 16.6667V3.33334C3.33334 2.41286 4.07954 1.66667 5.00001 1.66667H11.8097ZM6.66668 7.70834C6.3215 7.70834 6.04168 7.98816 6.04168 8.33334C6.04168 8.67851 6.3215 8.95834 6.66668 8.95834H10C10.3452 8.95834 10.625 8.67851 10.625 8.33334C10.625 7.98816 10.3452 7.70834 10 7.70834H6.66668ZM6.04168 11.6667C6.04168 12.0118 6.3215 12.2917 6.66668 12.2917H13.3333C13.6785 12.2917 13.9583 12.0118 13.9583 11.6667C13.9583 11.3215 13.6785 11.0417 13.3333 11.0417H6.66668C6.3215 11.0417 6.04168 11.3215 6.04168 11.6667ZM6.66668 14.375C6.3215 14.375 6.04168 14.6548 6.04168 15C6.04168 15.3452 6.3215 15.625 6.66668 15.625H13.3333C13.6785 15.625 13.9583 15.3452 13.9583 15C13.9583 14.6548 13.6785 14.375 13.3333 14.375H6.66668Z" />
<path
d="M13.125 2.29167L16.0417 5.20834H14.1667C13.5913 5.20834 13.125 4.74197 13.125 4.16667V2.29167Z" />
</svg>
</span>
<span class="text">Pages</span>
</a>
<ul id="ddmenu_2" class="collapse dropdown-nav">
<li>
<a href="settings.html"> Settings </a>
</li>
<li>
<a href="blank-page.html"> Blank Page </a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="invoice.html">
<span class="icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M3.33334 3.35442C3.33334 2.4223 4.07954 1.66666 5.00001 1.66666H15C15.9205 1.66666 16.6667 2.4223 16.6667 3.35442V16.8565C16.6667 17.5519 15.8827 17.9489 15.3333 17.5317L13.8333 16.3924C13.537 16.1673 13.1297 16.1673 12.8333 16.3924L10.5 18.1646C10.2037 18.3896 9.79634 18.3896 9.50001 18.1646L7.16668 16.3924C6.87038 16.1673 6.46298 16.1673 6.16668 16.3924L4.66668 17.5317C4.11731 17.9489 3.33334 17.5519 3.33334 16.8565V3.35442ZM4.79168 5.04218C4.79168 5.39173 5.0715 5.6751 5.41668 5.6751H10C10.3452 5.6751 10.625 5.39173 10.625 5.04218C10.625 4.69264 10.3452 4.40927 10 4.40927H5.41668C5.0715 4.40927 4.79168 4.69264 4.79168 5.04218ZM5.41668 7.7848C5.0715 7.7848 4.79168 8.06817 4.79168 8.41774C4.79168 8.76724 5.0715 9.05066 5.41668 9.05066H10C10.3452 9.05066 10.625 8.76724 10.625 8.41774C10.625 8.06817 10.3452 7.7848 10 7.7848H5.41668ZM4.79168 11.7932C4.79168 12.1428 5.0715 12.4262 5.41668 12.4262H10C10.3452 12.4262 10.625 12.1428 10.625 11.7932C10.625 11.4437 10.3452 11.1603 10 11.1603H5.41668C5.0715 11.1603 4.79168 11.4437 4.79168 11.7932ZM13.3333 4.40927C12.9882 4.40927 12.7083 4.69264 12.7083 5.04218C12.7083 5.39173 12.9882 5.6751 13.3333 5.6751H14.5833C14.9285 5.6751 15.2083 5.39173 15.2083 5.04218C15.2083 4.69264 14.9285 4.40927 14.5833 4.40927H13.3333ZM12.7083 8.41774C12.7083 8.76724 12.9882 9.05066 13.3333 9.05066H14.5833C14.9285 9.05066 15.2083 8.76724 15.2083 8.41774C15.2083 8.06817 14.9285 7.7848 14.5833 7.7848H13.3333C12.9882 7.7848 12.7083 8.06817 12.7083 8.41774ZM13.3333 11.1603C12.9882 11.1603 12.7083 11.4437 12.7083 11.7932C12.7083 12.1428 12.9882 12.4262 13.3333 12.4262H14.5833C14.9285 12.4262 15.2083 12.1428 15.2083 11.7932C15.2083 11.4437 14.9285 11.1603 14.5833 11.1603H13.3333Z" />
</svg>
</span>
<span class="text">Invoice</span>
</a>
</li>
<li class="nav-item nav-item-has-children">
<a
href="#0"
class="collapsed"
data-bs-toggle="collapse"
data-bs-target="#ddmenu_3"
aria-controls="ddmenu_3"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M14.9211 10.1294C15.1652 9.88534 15.1652 9.48967 14.9211 9.24559L10.7544 5.0789C10.5103 4.83482 10.1147 4.83482 9.87057 5.0789C9.62649 5.32297 9.62649 5.71871 9.87057 5.96278L12.9702 9.06251H1.97916C1.63398 9.06251 1.35416 9.34234 1.35416 9.68751C1.35416 10.0327 1.63398 10.3125 1.97916 10.3125H12.9702L9.87057 13.4123C9.62649 13.6563 9.62649 14.052 9.87057 14.2961C10.1147 14.5402 10.5103 14.5402 10.7544 14.2961L14.9211 10.1294Z" />
<path
d="M11.6383 15.18L15.805 11.0133C16.5373 10.2811 16.5373 9.09391 15.805 8.36166L11.6383 4.195C11.2722 3.82888 10.7923 3.64582 10.3125 3.64582V3.02082C10.3125 2.10035 11.0587 1.35416 11.9792 1.35416H16.9792C17.8997 1.35416 18.6458 2.10035 18.6458 3.02082V16.3542C18.6458 17.2747 17.8997 18.0208 16.9792 18.0208H11.9792C11.0587 18.0208 10.3125 17.2747 10.3125 16.3542V15.7292C10.7923 15.7292 11.2722 15.5461 11.6383 15.18Z" />
</svg>
</span>
<span class="text">Auth</span>
</a>
<ul id="ddmenu_3" class="collapse dropdown-nav">
<li>
<a href="signin.html"> Sign In </a>
</li>
<li>
<a href="signup.html"> Sign Up </a>
</li>
</ul>
</li>
<span class="divider"><hr /></span>
<li class="nav-item nav-item-has-children">
<a
href="#0"
class=""
data-bs-toggle="collapse"
data-bs-target="#ddmenu_4"
aria-controls="ddmenu_4"
aria-expanded="true"
aria-label="Toggle navigation"
>
<span class="icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M1.66666 5.41669C1.66666 3.34562 3.34559 1.66669 5.41666 1.66669C7.48772 1.66669 9.16666 3.34562 9.16666 5.41669C9.16666 7.48775 7.48772 9.16669 5.41666 9.16669C3.34559 9.16669 1.66666 7.48775 1.66666 5.41669Z" />
<path
d="M1.66666 14.5834C1.66666 12.5123 3.34559 10.8334 5.41666 10.8334C7.48772 10.8334 9.16666 12.5123 9.16666 14.5834C9.16666 16.6545 7.48772 18.3334 5.41666 18.3334C3.34559 18.3334 1.66666 16.6545 1.66666 14.5834Z" />
<path
d="M10.8333 5.41669C10.8333 3.34562 12.5123 1.66669 14.5833 1.66669C16.6544 1.66669 18.3333 3.34562 18.3333 5.41669C18.3333 7.48775 16.6544 9.16669 14.5833 9.16669C12.5123 9.16669 10.8333 7.48775 10.8333 5.41669Z" />
<path
d="M10.8333 14.5834C10.8333 12.5123 12.5123 10.8334 14.5833 10.8334C16.6544 10.8334 18.3333 12.5123 18.3333 14.5834C18.3333 16.6545 16.6544 18.3334 14.5833 18.3334C12.5123 18.3334 10.8333 16.6545 10.8333 14.5834Z" />
</svg>
</span>
<span class="text">UI Elements </span>
</a>
<ul id="ddmenu_4" class="collapsed show dropdown-nav">
<li>
<a href="alerts.html"> Alerts </a>
</li>
<li>
<a href="buttons.html"> Buttons </a>
</li>
<li>
<a href="cards.html"> Cards </a>
</li>
<li>
<a href="typography.html" class="active"> Typography </a>
</li>
</ul>
</li>
<li class="nav-item nav-item-has-children">
<a
href="#0"
class="collapsed"
data-bs-toggle="collapse"
data-bs-target="#ddmenu_55"
aria-controls="ddmenu_55"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.48663 1.1466C5.77383 0.955131 6.16188 1.03274 6.35335 1.31994L6.87852 2.10769C7.20508 2.59755 7.20508 3.23571 6.87852 3.72556L6.35335 4.51331C6.16188 4.80052 5.77383 4.87813 5.48663 4.68666C5.19943 4.49519 5.12182 4.10715 5.31328 3.81994L5.83845 3.03219C5.88511 2.96221 5.88511 2.87105 5.83845 2.80106L5.31328 2.01331C5.12182 1.72611 5.19943 1.33806 5.48663 1.1466Z" />
<path
d="M2.49999 5.83331C2.03976 5.83331 1.66666 6.2064 1.66666 6.66665V10.8333C1.66666 13.5948 3.90523 15.8333 6.66666 15.8333H9.99999C12.1856 15.8333 14.0436 14.431 14.7235 12.4772C14.8134 12.4922 14.9058 12.5 15 12.5H16.6667C17.5872 12.5 18.3333 11.7538 18.3333 10.8333V8.33331C18.3333 7.41284 17.5872 6.66665 16.6667 6.66665H15C15 6.2064 14.6269 5.83331 14.1667 5.83331H2.49999ZM14.9829 11.2496C14.9942 11.1123 15 10.9735 15 10.8333V7.91665H16.6667C16.8967 7.91665 17.0833 8.10319 17.0833 8.33331V10.8333C17.0833 11.0634 16.8967 11.25 16.6667 11.25H15L14.9898 11.2498L14.9829 11.2496Z" />
<path
d="M8.85332 1.31994C8.6619 1.03274 8.27383 0.955131 7.98663 1.1466C7.69943 1.33806 7.62182 1.72611 7.81328 2.01331L8.33848 2.80106C8.38507 2.87105 8.38507 2.96221 8.33848 3.03219L7.81328 3.81994C7.62182 4.10715 7.69943 4.49519 7.98663 4.68666C8.27383 4.87813 8.6619 4.80052 8.85332 4.51331L9.37848 3.72556C9.70507 3.23571 9.70507 2.59755 9.37848 2.10769L8.85332 1.31994Z" />
<path
d="M10.4867 1.1466C10.7738 0.955131 11.1619 1.03274 11.3533 1.31994L11.8785 2.10769C12.2051 2.59755 12.2051 3.23571 11.8785 3.72556L11.3533 4.51331C11.1619 4.80052 10.7738 4.87813 10.4867 4.68666C10.1994 4.49519 10.1218 4.10715 10.3133 3.81994L10.8385 3.03219C10.8851 2.96221 10.8851 2.87105 10.8385 2.80106L10.3133 2.01331C10.1218 1.72611 10.1994 1.33806 10.4867 1.1466Z" />
<path
d="M2.49999 16.6667C2.03976 16.6667 1.66666 17.0398 1.66666 17.5C1.66666 17.9602 2.03976 18.3334 2.49999 18.3334H14.1667C14.6269 18.3334 15 17.9602 15 17.5C15 17.0398 14.6269 16.6667 14.1667 16.6667H2.49999Z" />
</svg>
</span>
<span class="text">Icons</span>
</a>
<ul id="ddmenu_55" class="collapse dropdown-nav">
<li>
<a href="icons.html"> LineIcons </a>
</li>
<li>
<a href="mdi-icons.html"> MDI Icons </a>
</li>
</ul>
</li>
<li class="nav-item nav-item-has-children">
<a
href="#0"
class="collapsed"
data-bs-toggle="collapse"
data-bs-target="#ddmenu_5"
aria-controls="ddmenu_5"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M4.16666 3.33335C4.16666 2.41288 4.91285 1.66669 5.83332 1.66669H14.1667C15.0872 1.66669 15.8333 2.41288 15.8333 3.33335V16.6667C15.8333 17.5872 15.0872 18.3334 14.1667 18.3334H5.83332C4.91285 18.3334 4.16666 17.5872 4.16666 16.6667V3.33335ZM6.04166 5.00002C6.04166 5.3452 6.32148 5.62502 6.66666 5.62502H13.3333C13.6785 5.62502 13.9583 5.3452 13.9583 5.00002C13.9583 4.65485 13.6785 4.37502 13.3333 4.37502H6.66666C6.32148 4.37502 6.04166 4.65485 6.04166 5.00002ZM6.66666 6.87502C6.32148 6.87502 6.04166 7.15485 6.04166 7.50002C6.04166 7.8452 6.32148 8.12502 6.66666 8.12502H13.3333C13.6785 8.12502 13.9583 7.8452 13.9583 7.50002C13.9583 7.15485 13.6785 6.87502 13.3333 6.87502H6.66666ZM6.04166 10C6.04166 10.3452 6.32148 10.625 6.66666 10.625H9.99999C10.3452 10.625 10.625 10.3452 10.625 10C10.625 9.65485 10.3452 9.37502 9.99999 9.37502H6.66666C6.32148 9.37502 6.04166 9.65485 6.04166 10ZM9.99999 16.6667C10.9205 16.6667 11.6667 15.9205 11.6667 15C11.6667 14.0795 10.9205 13.3334 9.99999 13.3334C9.07949 13.3334 8.33332 14.0795 8.33332 15C8.33332 15.9205 9.07949 16.6667 9.99999 16.6667Z" />
</svg>
</span>
<span class="text"> Forms </span>
</a>
<ul id="ddmenu_5" class="collapse dropdown-nav">
<li>
<a href="form-elements.html"> Form Elements </a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="tables.html">
<span class="icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M1.66666 4.16667C1.66666 3.24619 2.41285 2.5 3.33332 2.5H16.6667C17.5872 2.5 18.3333 3.24619 18.3333 4.16667V9.16667C18.3333 10.0872 17.5872 10.8333 16.6667 10.8333H3.33332C2.41285 10.8333 1.66666 10.0872 1.66666 9.16667V4.16667Z" />
<path
d="M1.875 13.75C1.875 13.4048 2.15483 13.125 2.5 13.125H17.5C17.8452 13.125 18.125 13.4048 18.125 13.75C18.125 14.0952 17.8452 14.375 17.5 14.375H2.5C2.15483 14.375 1.875 14.0952 1.875 13.75Z" />
<path
d="M2.5 16.875C2.15483 16.875 1.875 17.1548 1.875 17.5C1.875 17.8452 2.15483 18.125 2.5 18.125H17.5C17.8452 18.125 18.125 17.8452 18.125 17.5C18.125 17.1548 17.8452 16.875 17.5 16.875H2.5Z" />
</svg>
</span>
<span class="text">Tables</span>
</a>
</li>
<span class="divider"><hr /></span>
<li class="nav-item">
<a href="notification.html">
<span class="icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.8333 2.50008C10.8333 2.03984 10.4602 1.66675 9.99999 1.66675C9.53975 1.66675 9.16666 2.03984 9.16666 2.50008C9.16666 2.96032 9.53975 3.33341 9.99999 3.33341C10.4602 3.33341 10.8333 2.96032 10.8333 2.50008Z" />
<path
d="M17.5 5.41673C17.5 7.02756 16.1942 8.33339 14.5833 8.33339C12.9725 8.33339 11.6667 7.02756 11.6667 5.41673C11.6667 3.80589 12.9725 2.50006 14.5833 2.50006C16.1942 2.50006 17.5 3.80589 17.5 5.41673Z" />
<path
d="M11.4272 2.69637C10.9734 2.56848 10.4947 2.50006 10 2.50006C7.10054 2.50006 4.75003 4.85057 4.75003 7.75006V9.20873C4.75003 9.72814 4.62082 10.2393 4.37404 10.6963L3.36705 12.5611C2.89938 13.4272 3.26806 14.5081 4.16749 14.9078C7.88074 16.5581 12.1193 16.5581 15.8326 14.9078C16.732 14.5081 17.1007 13.4272 16.633 12.5611L15.626 10.6963C15.43 10.3333 15.3081 9.93606 15.2663 9.52773C15.0441 9.56431 14.8159 9.58339 14.5833 9.58339C12.2822 9.58339 10.4167 7.71791 10.4167 5.41673C10.4167 4.37705 10.7975 3.42631 11.4272 2.69637Z" />
<path
d="M7.48901 17.1925C8.10004 17.8918 8.99841 18.3335 10 18.3335C11.0016 18.3335 11.9 17.8918 12.511 17.1925C10.8482 17.4634 9.15183 17.4634 7.48901 17.1925Z" />
</svg>
</span>
<span class="text">Notifications</span>
</a>
</li>
</ul>
</nav>
<div class="promo-box">
<div class="promo-icon">
<img class="mx-auto" src="./assets/images/logo/logo-icon-big.svg" alt="Logo">
</div>
<h3>Upgrade to PRO</h3>
<p>Improve your development process and start doing more with PlainAdmin PRO!</p>
<a href="https://plainadmin.com/pro" target="_blank" rel="nofollow" class="main-btn primary-btn btn-hover">
Upgrade to PRO
</a>
</div>
</aside>
<div class="overlay"></div>
<!-- ======== sidebar-nav end =========== -->
<!-- ======== main-wrapper start =========== -->
<main class="main-wrapper">
<!-- ========== header start ========== -->
<header class="header">
<div class="container-fluid">
<div class="row">
<div class="col-lg-5 col-md-5 col-6">
<div class="header-left d-flex align-items-center">
<div class="menu-toggle-btn mr-15">
<button id="menu-toggle" class="main-btn primary-btn btn-hover">
<i class="lni lni-chevron-left me-2"></i> Menu
</button>
</div>
<div class="header-search d-none d-md-flex">
<form action="#">
<input type="text" placeholder="Search..." />
<button><i class="lni lni-search-alt"></i></button>
</form>
</div>
</div>
</div>
<div class="col-lg-7 col-md-7 col-6">
<div class="header-right">
<!-- notification start -->
<div class="notification-box ml-15 d-none d-md-flex">
<button class="dropdown-toggle" type="button" id="notification" data-bs-toggle="dropdown"
aria-expanded="false">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11 20.1667C9.88317 20.1667 8.88718 19.63 8.23901 18.7917H13.761C13.113 19.63 12.1169 20.1667 11 20.1667Z"
fill="" />
<path
d="M10.1157 2.74999C10.1157 2.24374 10.5117 1.83333 11 1.83333C11.4883 1.83333 11.8842 2.24374 11.8842 2.74999V2.82604C14.3932 3.26245 16.3051 5.52474 16.3051 8.24999V14.287C16.3051 14.5301 16.3982 14.7633 16.564 14.9352L18.2029 16.6342C18.4814 16.9229 18.2842 17.4167 17.8903 17.4167H4.10961C3.71574 17.4167 3.5185 16.9229 3.797 16.6342L5.43589 14.9352C5.6017 14.7633 5.69485 14.5301 5.69485 14.287V8.24999C5.69485 5.52474 7.60672 3.26245 10.1157 2.82604V2.74999Z"
fill="" />
</svg>
<span></span>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="notification">
<li>
<a href="#0">
<div class="image">
<img src="assets/images/lead/lead-6.png" alt="" />
</div>
<div class="content">
<h6>
John Doe
<span class="text-regular">
comment on a product.
</span>
</h6>
<p>
Lorem ipsum dolor sit amet, consect etur adipiscing
elit Vivamus tortor.
</p>
<span>10 mins ago</span>
</div>
</a>
</li>
<li>
<a href="#0">
<div class="image">
<img src="assets/images/lead/lead-1.png" alt="" />
</div>
<div class="content">
<h6>
Jonathon
<span class="text-regular">
like on a product.
</span>
</h6>
<p>
Lorem ipsum dolor sit amet, consect etur adipiscing
elit Vivamus tortor.
</p>
<span>10 mins ago</span>
</div>
</a>
</li>
</ul>
</div>
<!-- notification end -->
<!-- message start -->
<div class="header-message-box ml-15 d-none d-md-flex">
<button class="dropdown-toggle" type="button" id="message" data-bs-toggle="dropdown"
aria-expanded="false">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M7.74866 5.97421C7.91444 5.96367 8.08162 5.95833 8.25005 5.95833C12.5532 5.95833 16.0417 9.4468 16.0417 13.75C16.0417 13.9184 16.0364 14.0856 16.0259 14.2514C16.3246 14.138 16.6127 14.003 16.8883 13.8482L19.2306 14.629C19.7858 14.8141 20.3141 14.2858 20.129 13.7306L19.3482 11.3882C19.8694 10.4604 20.1667 9.38996 20.1667 8.25C20.1667 4.70617 17.2939 1.83333 13.75 1.83333C11.0077 1.83333 8.66702 3.55376 7.74866 5.97421Z"
fill="" />
<path
d="M14.6667 13.75C14.6667 17.2938 11.7939 20.1667 8.25004 20.1667C7.11011 20.1667 6.03962 19.8694 5.11182 19.3482L2.76946 20.129C2.21421 20.3141 1.68597 19.7858 1.87105 19.2306L2.65184 16.8882C2.13062 15.9604 1.83338 14.89 1.83338 13.75C1.83338 10.2062 4.70622 7.33333 8.25004 7.33333C11.7939 7.33333 14.6667 10.2062 14.6667 13.75ZM5.95838 13.75C5.95838 13.2437 5.54797 12.8333 5.04171 12.8333C4.53545 12.8333 4.12504 13.2437 4.12504 13.75C4.12504 14.2563 4.53545 14.6667 5.04171 14.6667C5.54797 14.6667 5.95838 14.2563 5.95838 13.75ZM9.16671 13.75C9.16671 13.2437 8.7563 12.8333 8.25004 12.8333C7.74379 12.8333 7.33338 13.2437 7.33338 13.75C7.33338 14.2563 7.74379 14.6667 8.25004 14.6667C8.7563 14.6667 9.16671 14.2563 9.16671 13.75ZM11.4584 14.6667C11.9647 14.6667 12.375 14.2563 12.375 13.75C12.375 13.2437 11.9647 12.8333 11.4584 12.8333C10.9521 12.8333 10.5417 13.2437 10.5417 13.75C10.5417 14.2563 10.9521 14.6667 11.4584 14.6667Z"
fill="" />
</svg>
<span></span>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="message">
<li>
<a href="#0">
<div class="image">
<img src="assets/images/lead/lead-5.png" alt="" />
</div>
<div class="content">
<h6>Jacob Jones</h6>
<p>Hey!I can across your profile and ...</p>
<span>10 mins ago</span>
</div>
</a>
</li>
<li>
<a href="#0">
<div class="image">
<img src="assets/images/lead/lead-3.png" alt="" />
</div>
<div class="content">
<h6>John Doe</h6>
<p>Would you mind please checking out</p>
<span>12 mins ago</span>
</div>
</a>
</li>
<li>
<a href="#0">
<div class="image">
<img src="assets/images/lead/lead-2.png" alt="" />
</div>
<div class="content">
<h6>Anee Lee</h6>
<p>Hey! are you available for freelance?</p>
<span>1h ago</span>
</div>
</a>
</li>
</ul>
</div>
<!-- message end -->
<!-- profile start -->
<div class="profile-box ml-15">
<button class="dropdown-toggle bg-transparent border-0" type="button" id="profile"
data-bs-toggle="dropdown" aria-expanded="false">
<div class="profile-info">
<div class="info">
<div class="image">
<img src="assets/images/profile/profile-image.png" alt="" />
</div>
<div>
<h6 class="fw-500">Adam Joe</h6>
<p>Admin</p>
</div>
</div>
</div>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="profile">
<li>
<div class="author-info flex items-center !p-1">
<div class="image">
<img src="assets/images/profile/profile-image.png" alt="image">
</div>
<div class="content">
<h4 class="text-sm">Adam Joe</h4>
<a class="text-black/40 dark:text-white/40 hover:text-black dark:hover:text-white text-xs"
href="#">[email protected]</a>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<a href="#0">
<i class="lni lni-user"></i> View Profile
</a>
</li>
<li>
<a href="#0">
<i class="lni lni-alarm"></i> Notifications
</a>
</li>
<li>
<a href="#0"> <i class="lni lni-inbox"></i> Messages </a>
</li>
<li>
<a href="#0"> <i class="lni lni-cog"></i> Settings </a>
</li>
<li class="divider"></li>
<li>
<a href="#0"> <i class="lni lni-exit"></i> Sign Out </a>
</li>
</ul>
</div>
<!-- profile end -->
</div>
</div>
</div>
</div>
</header>
<!-- ========== header end ========== -->
<!-- typography start -->
<section class="section">
<div class="container-fluid">
<!-- ========== title-wrapper start ========== -->
<div class="title-wrapper pt-30">
<div class="row align-items-center">
<div class="col-md-6">
<div class="title">
<h2>Typography</h2>
</div>
</div>
<!-- end col -->
<div class="col-md-6">
<div class="breadcrumb-wrapper">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#0">Dashboard</a>
</li>
<li class="breadcrumb-item">
<a href="#0">UI Components</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
Typography
</li>
</ol>
</nav>
</div>
</div>
<!-- end col -->
</div>
<!-- end row -->
</div>
<!-- ========== title-wrapper end ========== -->
<!-- ========== typography-cards start ========== -->
<div class="row">
<div class="col-lg-6">
<div class="card-style mb-30">
<h5 class="text-medium mb-10">Heading</h5>
<p class="text-sm mb-30">
All HTML headings, <h1></h1> through <h6></h6>,
are available.
</p>
<div class="heading-one mb-30">
<h1 class="mb-10">Heading 1- Bold</h1>
<p class="text-sm">
Font- size 24 line-height 29 letter-spacing _0.0 px
</p>
</div>
<div class="heading-two mb-30">
<h2 class="mb-10">Heading 2- Semi-bold</h2>
<p class="text-sm">
Font- size 24 line-height 29 letter-spacing _0.0 px
</p>
</div>
<div class="heading-three mb-30">
<h3 class="mb-10">Heading 3- Medium</h3>
<p class="text-sm">
Font- size 24 line-height 29 letter-spacing _0.0 px
</p>
</div>
<div class="heading-four mb-30">
<h4 class="mb-10">Heading 4- Semi-bold</h4>
<p class="text-sm">
Font- size 20 line-height 24 letter-spacing _0.0 px
</p>
</div>
<div class="heading-five mb-30">
<h5 class="mb-10">Heading 5-Bold</h5>
<p class="text-sm">
Font- size 16 line-height 19 letter-spacing _0.0 px
</p>
</div>
<div class="heading-six">
<h6 class="mb-10">Heading 6- Semi-bold</h6>
<p class="text-sm">
Font- size 16 line-height 19 letter-spacing _0.0 px
</p>
</div>
</div>
<!-- end card -->
<div class="card-style mb-30">
<h1 class="mb-30">Title Text</h1>
<p>
<span class="text-success text-medium"> Paragraph text</span>
sit amet, consectetur adipiscing elit. Orci pellentesque amet
quam massa in aliquet pulvinar tincidunt. Enim sit elit
scelerisque vel aliquam vel quam a tincidunt. Nunc diam at sed
fames integer turpis libero. Id nunc quisque sed ut nec
phasellus turpis enim elit. Turpis lobortis pellentesque ac
massa risus faucibus tempus ut neque. Faucibus orci faucibus
malesuada imperdiet vitae.Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Orci pellentesque amet quam massa
in aliquet pulvinar tincidunt. Enim sit elit scelerisque vel
aliquam vel quam a tincidunt. Nunc diam at sed fames integer
turpis libero. Id nunc quisque sed ut nec phasellus turpis
enim elit. Turpis lobortis pellentesque ac massa risus
faucibus tempus ut neque. Faucibus orci faucibus malesuada
imperdiet vitae.
</p>
</div>
<!-- end card -->
</div>
<!-- end col -->
<div class="col-lg-6">
<div class="card-style mb-30">
<h5 class="mb-30 text-medium">Content Text</h5>
<div class="mb-30">
<h5 class="text-medium mb-10">Content 1- Medium</h5>
<p class="text-sm">
Font- size 16 line-height 19 letter-spacing _0.0 px
</p>
</div>
<div class="mb-30">
<h5 class="text-sm text-medium mb-10">Content 1- Medium</h5>
<p class="text-sm">
Font- size 14 line-height 19 letter-spacing _0.0 px
</p>
</div>
<div>
<h5 class="text-sm text-regular mb-10">Content 1- Medium</h5>
<p class="text-sm">
Font- size 14 line-height 19 letter-spacing _0.0 px
</p>
</div>
</div>
<!-- end card -->
<div class="card-style mb-30">
<h5 class="mb-30 text-medium">Button Text</h5>
<div class="mb-30">
<h5 class="text-sm text-medium mb-10">Content 1- Medium</h5>
<p class="text-sm">
Font- size 14 line-height 19 letter-spacing _0.0 px
</p>
</div>
<div>
<h5 class="text-sm text-regular mb-10">Content 1- Medium</h5>
<p class="text-sm">
Font- size 14 line-height 19 letter-spacing _0.0 px
</p>
</div>
</div>
<!-- end card -->
<div class="card-style mb-30">
<h5 class="mb-30 text-medium">Text Color</h5>
<p class="text-medium text-dark mb-30">
This is Dark text You can archive this adding
<mark class="text-dark bg-dark-100"> .text-dark </mark> class
</p>
<p class="text-medium text-gray mb-30">
This is Gray text You can archive this adding
<mark class="text-gray bg-dark-100"> .text-gray </mark> class
</p>
<p class="text-medium text-success mb-30">
This is Success text You can archive this adding
<mark class="text-success bg-success-100">
.text-success
</mark>
class
</p>
<p class="text-medium text-warning mb-30">
This is Warning text You can archive this adding
<mark class="text-warning bg-warning-100">
.text-warning
</mark>
class
</p>
<p class="text-medium text-danger mb-30">
This is Danger text You can archive this adding
<mark class="text-danger bg-danger-100"> .text-danger </mark>
class
</p>
</div>
<!-- end card -->
</div>
<!-- end col -->
</div>
<!-- end row -->
<!-- ========== typography-cards end ============ -->
</div>
<!-- end container -->
</section>
<!-- typography end -->
<!-- ========== footer start =========== -->
<footer class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 order-last order-md-first">
<div class="copyright text-center text-md-start">
<p class="text-sm">
Designed and Developed by
<a href="https://plainadmin.com" rel="nofollow" target="_blank">
PlainAdmin
</a>
</p>
</div>
</div>
<!-- end col-->
<div class="col-md-6">
<div class="terms d-flex justify-content-center justify-content-md-end">
<a href="#0" class="text-sm">Term & Conditions</a>
<a href="#0" class="text-sm ml-15">Privacy & Policy</a>
</div>
</div>
</div>
<!-- end row -->
</div>
<!-- end container -->
</footer>
<!-- ========== footer end =========== -->
</main>
<!-- ======== main-wrapper end =========== -->
<!-- ========= All Javascript files linkup ======== -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/Chart.min.js"></script>
<script src="assets/js/dynamic-pie-chart.js"></script>
<script src="assets/js/moment.min.js"></script>
<script src="assets/js/fullcalendar.js"></script>
<script src="assets/js/jvectormap.min.js"></script>
<script src="assets/js/world-merc.js"></script>
<script src="assets/js/polyfill.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>