xxxxxxxxxx1
<!--Main Navigation-->2
<header class="mb-4 fixed-top">3
<!-- Jumbotron -->4
<div class="p-3 text-center bg-white border-bottom">5
<div class="container-fluid">6
<div class="row">7
<!-- Right elements -->8
<div9
class="col-md-5 d-flex justify-content-center justify-content-md-start align-items-center d-none d-lg-flex"10
>11
<a class="text-reset mr-3" href="#">12
<i class="fas fa-th-large"></i>13
</a>14
<a class="text-reset mr-3" href="#">15
<i class="fas fa-home"></i>16
</a>17
<a class="text-reset mr-3" href="#">18
<i class="fas fa-columns mr-1"></i>19
<span class="d-none d-xl-inline-block">Boards</span>20
</a>21
22
<form class="d-flex input-group w-auto my-auto mb-3 mb-md-0">23
<input24
autocomplete="off"25
type="search"26
class="form-control rounded"27
placeholder="Search"28
/>29
<span class="input-group-text border-0 d-none d-lg-flex"30
><i class="fas fa-search"></i31
></span>32
</form>33
</div>34
<!-- Right elements -->35
36
<!-- Center elements -->37
<div class="col-md-2 d-none d-lg-block">38
<a href="#!" class="ml-md-2">39
<img40
src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png"41
height="35"42
/>43
</a>44
</div>45
<!-- Center elements -->46
47
<!-- Right elements -->48
<div49
class="col-lg-5 d-flex justify-content-center justify-content-md-end align-items-center"50
>51
<a class="text-reset mr-3" href="#">52
<i class="fas fa-plus"></i>53
</a>54
<a class="text-reset mr-3" href="#">55
<i class="fas fa-info-circle"></i>56
</a>57
58
<!-- Notification -->59
<div class="dropdown">60
<a61
class="text-reset mr-3 dropdown-toggle hidden-arrow"62
href="#"63
id="navbarDropdownMenuLink"64
role="button"65
data-toggle="dropdown"66
aria-expanded="false"67
>68
<i class="fas fa-bell"></i>69
</a>70
<ul71
class="dropdown-menu dropdown-menu-right"72
aria-labelledby="navbarDropdownMenuLink"73
>74
<li><a class="dropdown-item" href="#">Some news</a></li>75
<li><a class="dropdown-item" href="#">Another news</a></li>76
<li>77
<a class="dropdown-item" href="#">Something else here</a>78
</li>79
</ul>80
</div>81
82
<!-- User -->83
<div class="dropdown">84
<a85
class="text-reset dropdown-toggle d-flex align-items-center hidden-arrow"86
href="#"87
id="navbarDropdownMenuLink"88
role="button"89
data-toggle="dropdown"90
aria-expanded="false"91
>92
<img93
src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg"94
class="rounded-circle"95
height="22"96
alt=""97
loading="lazy"98
/>99
</a>100
<ul101
class="dropdown-menu dropdown-menu-right"102
aria-labelledby="navbarDropdownMenuLink"103
>104
<li><a class="dropdown-item" href="#">My profile</a></li>105
<li><a class="dropdown-item" href="#">Settings</a></li>106
<li><a class="dropdown-item" href="#">Logout</a></li>107
</ul>108
</div>109
</div>110
<!-- Right elements -->111
</div>112
</div>113
</div>114
<!-- Jumbotron -->115
116
<!-- Navbar -->117
<nav118
class="navbar navbar-expand-lg navbar-light bg-white d-none d-lg-block"119
>120
<!-- Container wrapper -->121
<div122
class="container-fluid justify-content-center justify-content-md-between"123
>124
<!-- Left elements -->125
<div class="d-flex align-items-center">126
<button127
class="btn btn-outline-primary mr-1"128
data-ripple-color="dark"129
type="button"130
>131
<i class="fas fa-clipboard-list mr-1"></i>Board132
</button>133
134
<button135
class="btn btn-link mr-1"136
data-ripple-color="dark"137
type="button"138
>139
MDB board140
</button>141
142
<button143
class="btn btn-outline-primary mr-1 px-2"144
data-ripple-color="dark"145
type="button"146
>147
<i class="fas fa-star"></i>148
</button>149
150
<button151
class="btn btn-outline-primary mr-1"152
data-ripple-color="dark"153
type="button"154
>155
<i class="fas fa-users mr-2"></i>Team156
</button>157
158
<a href="">159
<img160
src="https://mdbootstrap.com/img/new/avatars/1.jpg"161
class="border rounded-circle"162
alt=""163
style="height: 30px"164
/>165
</a>166
167
<a href="">168
<img169
src="https://mdbootstrap.com/img/new/avatars/2.jpg"170
class="border rounded-circle"171
alt=""172
style="height: 30px"173
/>174
</a>175
176
<a href="">177
<img178
src="https://mdbootstrap.com/img/new/avatars/3.jpg"179
class="border rounded-circle"180
alt=""181
style="height: 30px"182
/>183
</a>184
185
<a href="">186
<img187
src="https://mdbootstrap.com/img/new/avatars/4.jpg"188
class="border rounded-circle"189
alt=""190
style="height: 30px"191
/>192
</a>193
194
<a href="">195
<img196
src="https://mdbootstrap.com/img/new/avatars/5.jpg"197
class="border rounded-circle"198
alt=""199
style="height: 30px"200
/>201
</a>202
<button203
type="button"204
class="btn btn-outline-primary btn-floating btn mr-1"205
style="height: 30px; width: 30px"206
>207
+2208
</button>209
210
<button211
class="btn btn-outline-primary mr-1"212
data-ripple-color="dark"213
type="button"214
>215
<i class="fas fa-user-plus mr-2"></i>Invite216
</button>217
</div>218
<!-- Left elements -->219
220
<!-- Right elements -->221
<div>222
<button223
class="btn btn-outline-primary"224
data-ripple-color="dark"225
type="button"226
>227
<i class="fas fa-concierge-bell mr-1"></i>Tips228
</button>229
<button230
class="btn btn-outline-primary"231
data-ripple-color="dark"232
type="button"233
>234
<i class="fas fa-bars mr-2"></i>Show menu235
</button>236
</div>237
<!-- Right elements -->238
</div>239
<!-- Container wrapper -->240
</nav>241
<!-- Navbar -->242
</header>243
<!--Main Navigation-->244
245
<!--Main layout-->246
<main247
id="intro"248
class="bg-image"249
style="250
background-image: url(https://mdbootstrap.com/img/new/fluid/city/018.jpg);251
height: 100vh;252
"253
>254
<div class="mask" style="background-color: rgba(0, 0, 0, 0.7)">255
<!--Section: Lists-->256
<section257
class="d-flex align-items-start h-100"258
data-perfect-scrollbar="true"259
style="position: relative"260
data-sortable="sortable"261
>262
<!-- List -->263
<div class="card shadow-1-strong m-3 p-2 pb-0">264
<!-- List name -->265
<div266
class="card-header d-flex justify-content-between pl-1 pr-0 pb-3 border-0"267
>268
<p class="mb-0"><strong>Backlog</strong></p>269
<button270
type="button"271
class="btn btn-link text-reset m-0 py-0 px-2"272
data-ripple-color="dark"273
>274
<i class="fas fa-ellipsis-h"></i>275
</button>276
</div>277
<!-- List name -->278
279
<!-- Sortable items -->280
<div data-sortable="sortable">281
<!-- Card -->282
<div283
class="sortable-item card-body rounded bg-white shadow-2 mb-2"284
>285
Item 1286
</div>287
<!-- Card -->288
<!-- Card -->289
<div290
class="sortable-item card-body rounded bg-white shadow-2 mb-2"291
>292
Item 2293
</div>294
<!-- Card -->295
<!-- Card -->296
<div297
class="sortable-item card-body rounded bg-white shadow-2 mb-2"298
>299
Item 3300
</div>301
<!-- Card -->302
<!-- Card -->303
<div304
class="sortable-item card-body rounded bg-white shadow-2 mb-2"305
>306
Item 4307
</div>308
<!-- Card -->309
<!-- Card -->310
<div311
class="sortable-item card-body rounded bg-white shadow-2 mb-2"312
>313
Item 5314
</div>315
<!-- Card -->316
<!-- Card -->317
<div318
class="sortable-item card-body rounded bg-white shadow-2 mb-2"319
>320
Item 6321
</div>322
<!-- Card -->323
</div>324
<!-- Sortable items -->325
326
<!-- List button -->327
<div class="card-footer border-0 pt-0">328
<button329
type="button"330
class="btn btn-link btn-block text-reset"331
data-ripple-color="dark"332
>333
<i class="fas fa-plus mr-2"></i>Add another card334
</button>335
</div>336
<!-- List button -->337
</div>338
<!-- List -->339
340
<!-- List -->341
<div class="card shadow-1-strong m-3 p-2 pb-0 ml-0">342
<!-- List name -->343
<div344
class="card-header d-flex justify-content-between pl-1 pr-0 pb-3 border-0"345
>346
<p class="mb-0"><strong>Low priority</strong></p>347
<button348
type="button"349
class="btn btn-link text-reset m-0 py-0 px-2"350
data-ripple-color="dark"351
>352
<i class="fas fa-ellipsis-h"></i>353
</button>354
</div>355
<!-- List name -->356
357
<!-- Sortable items -->358
<div data-sortable="sortable">359
<!-- Card -->360
<div361
class="sortable-item card-body rounded bg-white shadow-2 mb-2"362
>363
Item 1364
</div>365
<!-- Card -->366
<!-- Card -->367
<div368
class="sortable-item card-body rounded bg-white shadow-2 mb-2"369
>370
Item 2371
</div>372
<!-- Card -->373
<!-- Card -->374
<div375
class="sortable-item card-body rounded bg-white shadow-2 mb-2"376
>377
Item 3378
</div>379
<!-- Card -->380
</div>381
<!-- Sortable items -->382
383
<!-- List button -->384
<div class="card-footer border-0 pt-0">385
<button386
type="button"387
class="btn btn-link btn-block text-reset"388
data-ripple-color="dark"389
>390
<i class="fas fa-plus mr-2"></i>Add another card391
</button>392
</div>393
<!-- List button -->394
</div>395
<!-- List -->396
397
<!-- List -->398
<div class="card shadow-1-strong m-3 p-2 pb-0 ml-0">399
<!-- List name -->400
<div401
class="card-header d-flex justify-content-between pl-1 pr-0 pb-3 border-0"402
>403
<p class="mb-0"><strong>High priority</strong></p>404
<button405
type="button"406
class="btn btn-link text-reset m-0 py-0 px-2"407
data-ripple-color="dark"408
>409
<i class="fas fa-ellipsis-h"></i>410
</button>411
</div>412
<!-- List name -->413
414
<!-- Sortable items -->415
<div data-sortable="sortable">416
<!-- Card -->417
<div418
class="sortable-item card-body rounded bg-white shadow-2 mb-2"419
>420
Item 1421
</div>422
<!-- Card -->423
<!-- Card -->424
<div425
class="sortable-item card-body rounded bg-white shadow-2 mb-2"426
>427
Item 2428
</div>429
<!-- Card -->430
</div>431
<!-- Sortable items -->432
433
<!-- List button -->434
<div class="card-footer border-0 pt-0">435
<button436
type="button"437
class="btn btn-link btn-block text-reset"438
data-ripple-color="dark"439
>440
<i class="fas fa-plus mr-2"></i>Add another card441
</button>442
</div>443
<!-- List button -->444
</div>445
<!-- List -->446
447
<!-- List -->448
<div class="card shadow-1-strong m-3 p-2 pb-0 ml-0">449
<!-- List name -->450
<div451
class="card-header d-flex justify-content-between pl-1 pr-0 pb-3 border-0"452
>453
<p class="mb-0"><strong>To do</strong></p>454
<button455
type="button"456
class="btn btn-link text-reset m-0 py-0 px-2"457
data-ripple-color="dark"458
>459
<i class="fas fa-ellipsis-h"></i>460
</button>461
</div>462
<!-- List name -->463
464
<!-- Sortable items -->465
<div data-sortable="sortable">466
<!-- Card -->467
<div468
class="sortable-item card-body rounded bg-white shadow-2 mb-2"469
>470
Item 1471
</div>472
<!-- Card -->473
<!-- Card -->474
<div475
class="sortable-item card-body rounded bg-white shadow-2 mb-2"476
>477
Item 2478
</div>479
<!-- Card -->480
<!-- Card -->481
<div482
class="sortable-item card-body rounded bg-white shadow-2 mb-2"483
>484
Item 3485
</div>486
<!-- Card -->487
<!-- Card -->488
<div489
class="sortable-item card-body rounded bg-white shadow-2 mb-2"490
>491
Item 4492
</div>493
<!-- Card -->494
</div>495
<!-- Sortable items -->496
497
<!-- List button -->498
<div class="card-footer border-0 pt-0">499
<button500
type="button"501
class="btn btn-link btn-block text-reset"502
data-ripple-color="dark"503
>504
<i class="fas fa-plus mr-2"></i>Add another card505
</button>506
</div>507
<!-- List button -->508
</div>509
<!-- List -->510
511
<!-- List -->512
<div class="card shadow-1-strong m-3 p-2 pb-0 ml-0">513
<!-- List name -->514
<div515
class="card-header d-flex justify-content-between pl-1 pr-0 pb-3 border-0"516
>517
<p class="mb-0"><strong>In progress</strong></p>518
<button519
type="button"520
class="btn btn-link text-reset m-0 py-0 px-2"521
data-ripple-color="dark"522
>523
<i class="fas fa-ellipsis-h"></i>524
</button>525
</div>526
<!-- List name -->527
528
<!-- Sortable items -->529
<div data-sortable="sortable">530
<!-- Card -->531
<div532
class="sortable-item card-body rounded bg-white shadow-2 mb-2"533
>534
Item 1535
</div>536
<!-- Card -->537
<!-- Card -->538
<div539
class="sortable-item card-body rounded bg-white shadow-2 mb-2"540
>541
Item 2542
</div>543
<!-- Card -->544
<!-- Card -->545
<div546
class="sortable-item card-body rounded bg-white shadow-2 mb-2"547
>548
Item 3549
</div>550
<!-- Card -->551
<!-- Card -->552
<div553
class="sortable-item card-body rounded bg-white shadow-2 mb-2"554
>555
Item 4556
</div>557
<!-- Card -->558
<!-- Card -->559
<div560
class="sortable-item card-body rounded bg-white shadow-2 mb-2"561
>562
Item 5563
</div>564
<!-- Card -->565
</div>566
<!-- Sortable items -->567
568
<!-- List button -->569
<div class="card-footer border-0 pt-0">570
<button571
type="button"572
class="btn btn-link btn-block text-reset"573
data-ripple-color="dark"574
>575
<i class="fas fa-plus mr-2"></i>Add another card576
</button>577
</div>578
<!-- List button -->579
</div>580
<!-- List -->581
582
<!-- List -->583
<div class="card shadow-1-strong m-3 p-2 pb-0 ml-0">584
<!-- List name -->585
<div586
class="card-header d-flex justify-content-between pl-1 pr-0 pb-3 border-0"587
>588
<p class="mb-0"><strong>Tests</strong></p>589
<button590
type="button"591
class="btn btn-link text-reset m-0 py-0 px-2"592
data-ripple-color="dark"593
>594
<i class="fas fa-ellipsis-h"></i>595
</button>596
</div>597
<!-- List name -->598
599
<!-- Sortable items -->600
<div data-sortable="sortable">601
<!-- Card -->602
<div603
class="sortable-item card-body rounded bg-white shadow-2 mb-2"604
>605
Item 1606
</div>607
<!-- Card -->608
</div>609
<!-- Sortable items -->610
611
<!-- List button -->612
<div class="card-footer border-0 pt-0">613
<button614
type="button"615
class="btn btn-link btn-block text-reset"616
data-ripple-color="dark"617
>618
<i class="fas fa-plus mr-2"></i>Add another card619
</button>620
</div>621
<!-- List button -->622
</div>623
<!-- List -->624
625
<!-- List -->626
<div class="card shadow-1-strong m-3 p-2 pb-0 ml-0">627
<!-- List name -->628
<div629
class="card-header d-flex justify-content-between pl-1 pr-0 pb-3 border-0"630
>631
<p class="mb-0"><strong>Done</strong></p>632
<button633
type="button"634
class="btn btn-link text-reset m-0 py-0 px-2"635
data-ripple-color="dark"636
>637
<i class="fas fa-ellipsis-h"></i>638
</button>639
</div>640
<!-- List name -->641
642
<!-- Sortable items -->643
<div data-sortable="sortable">644
<!-- Card -->645
<div646
class="sortable-item card-body rounded bg-white shadow-2 mb-2"647
>648
Item 1649
</div>650
<!-- Card -->651
<!-- Card -->652
<div653
class="sortable-item card-body rounded bg-white shadow-2 mb-2"654
>655
Item 2656
</div>657
<!-- Card -->658
<!-- Card -->659
<div660
class="sortable-item card-body rounded bg-white shadow-2 mb-2"661
>662
Item 3663
</div>664
<!-- Card -->665
</div>666
<!-- Sortable items -->667
668
<!-- List button -->669
<div class="card-footer border-0 pt-0">670
<button671
type="button"672
class="btn btn-link btn-block text-reset"673
data-ripple-color="dark"674
>675
<i class="fas fa-plus mr-2"></i>Add another card676
</button>677
</div>678
<!-- List button -->679
</div>680
<!-- List -->681
682
<!-- List -->683
<div class="card shadow-1-strong m-3 p-2 pb-0 ml-0">684
<!-- List name -->685
<div686
class="card-header d-flex justify-content-between pl-1 pr-0 pb-3 border-0"687
>688
<p class="mb-0"><strong>Ideas</strong></p>689
<button690
type="button"691
class="btn btn-link text-reset m-0 py-0 px-2"692
data-ripple-color="dark"693
>694
<i class="fas fa-ellipsis-h"></i>695
</button>696
</div>697
<!-- List name -->698
699
<!-- Sortable items -->700
<div data-sortable="sortable">701
<!-- Card -->702
<div703
class="sortable-item card-body rounded bg-white shadow-2 mb-2"704
>705
Item 1706
</div>707
<!-- Card -->708
<!-- Card -->709
<div710
class="sortable-item card-body rounded bg-white shadow-2 mb-2"711
>712
Item 2713
</div>714
<!-- Card -->715
<!-- Card -->716
<div717
class="sortable-item card-body rounded bg-white shadow-2 mb-2"718
>719
Item 3720
</div>721
<!-- Card -->722
</div>723
<!-- Sortable items -->724
725
<!-- List button -->726
<div class="card-footer border-0 pt-0">727
<button728
type="button"729
class="btn btn-link btn-block text-reset"730
data-ripple-color="dark"731
>732
<i class="fas fa-plus mr-2"></i>Add another card733
</button>734
</div>735
<!-- List button -->736
</div>737
<!-- List -->738
739
<!-- List -->740
<div class="card shadow-1-strong m-3 p-2 pb-0 ml-0">741
<!-- List name -->742
<div743
class="card-header d-flex justify-content-between pl-1 pr-0 pb-3 border-0"744
>745
<p class="mb-0"><strong>Random list</strong></p>746
<button747
type="button"748
class="btn btn-link text-reset m-0 py-0 px-2"749
data-ripple-color="dark"750
>751
<i class="fas fa-ellipsis-h"></i>752
</button>753
</div>754
<!-- List name -->755
756
<!-- Sortable items -->757
<div data-sortable="sortable">758
<!-- Card -->759
<div760
class="sortable-item card-body rounded bg-white shadow-2 mb-2"761
>762
Item 1763
</div>764
<!-- Card -->765
<!-- Card -->766
<div767
class="sortable-item card-body rounded bg-white shadow-2 mb-2"768
>769
Item 2770
</div>771
<!-- Card -->772
<!-- Card -->773
<div774
class="sortable-item card-body rounded bg-white shadow-2 mb-2"775
>776
Item 3777
</div>778
<!-- Card -->779
</div>780
<!-- Sortable items -->781
782
<!-- List button -->783
<div class="card-footer border-0 pt-0">784
<button785
type="button"786
class="btn btn-link btn-block text-reset"787
data-ripple-color="dark"788
>789
<i class="fas fa-plus mr-2"></i>Add another card790
</button>791
</div>792
<!-- List button -->793
</div>794
<!-- List -->795
796
<!-- List -->797
<div class="card shadow-1-strong m-3 p-2 pb-0 ml-0">798
<!-- List name -->799
<div800
class="card-header d-flex justify-content-between pl-1 pr-0 pb-3 border-0"801
>802
<p class="mb-0"><strong>Random list</strong></p>803
<button804
type="button"805
class="btn btn-link text-reset m-0 py-0 px-2"806
data-ripple-color="dark"807
>808
<i class="fas fa-ellipsis-h"></i>809
</button>810
</div>811
<!-- List name -->812
813
<!-- Sortable items -->814
<div data-sortable="sortable">815
<!-- Card -->816
<div817
class="sortable-item card-body rounded bg-white shadow-2 mb-2"818
>819
Item 1820
</div>821
<!-- Card -->822
<!-- Card -->823
<div824
class="sortable-item card-body rounded bg-white shadow-2 mb-2"825
>826
Item 2827
</div>828
<!-- Card -->829
<!-- Card -->830
<div831
class="sortable-item card-body rounded bg-white shadow-2 mb-2"832
>833
Item 3834
</div>835
<!-- Card -->836
</div>837
<!-- Sortable items -->838
839
<!-- List button -->840
<div class="card-footer border-0 pt-0">841
<button842
type="button"843
class="btn btn-link btn-block text-reset"844
data-ripple-color="dark"845
>846
<i class="fas fa-plus mr-2"></i>Add another card847
</button>848
</div>849
<!-- List button -->850
</div>851
<!-- List -->852
</section>853
<!--Section: Lists-->854
</div>855
</main>856
<!--Main layout-->xxxxxxxxxx1
body,2
main {3
height: 100%;4
}5
.mask {6
padding-top: 58px;7
}8
@media (min-width: 992px) {9
.mask {10
padding-top: 121.27px;11
}12
}13
14
.card {15
min-width: 272px;16
max-width: 272px;17
height: auto;18
background-color: #ebecf0;19
}20
.shadow-2 {21
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1) !important;22
}23
.sortable-item {24
cursor: grab;25
transition: background-color 0.2s ease-in !important;26
}27
.sortable-item:hover {28
background-color: rgba(0, 0, 0, 0.01) !important;29
}1
1
Console errors: 0