xxxxxxxxxx1
<!--Main Navigation-->2
<header class="mb-7">3
<!-- Jumbotron -->4
<div class="p-3 text-center bg-white border-bottom">5
<div class="container">6
<div class="row">7
<div class="col-md-4 d-flex justify-content-center justify-content-md-start mb-3 mb-md-0">8
<a href="#!" class="ms-md-2">9
<img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" height="35" />10
</a>11
</div>12
13
<div class="col-md-4">14
<form class="d-flex input-group w-auto my-auto mb-3 mb-md-0">15
<input autocomplete="off" type="search" class="form-control rounded" placeholder="Search" />16
<span class="input-group-text border-0 d-none d-lg-flex"><i class="fas fa-search"></i></span>17
</form>18
</div>19
20
<div class="col-md-4 d-flex justify-content-center justify-content-md-end align-items-center">21
<div class="d-flex">22
<!-- Cart -->23
<a class="text-reset me-3" href="#">24
<span><i class="fas fa-shopping-cart"></i></span>25
<span class="badge rounded-pill badge-notification bg-danger">1</span>26
</a>27
28
<!-- Notification -->29
<div class="dropdown">30
<a class="text-reset me-3 dropdown-toggle hidden-arrow" href="#" id="navbarDropdownMenuLink"31
role="button" data-mdb-toggle="dropdown" aria-expanded="false">32
<i class="fas fa-bell"></i>33
</a>34
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">35
<li><a class="dropdown-item" href="#">Some news</a></li>36
<li><a class="dropdown-item" href="#">Another news</a></li>37
<li>38
<a class="dropdown-item" href="#">Something else here</a>39
</li>40
</ul>41
</div>42
43
<!-- Languages -->44
<div class="dropdown">45
<a class="text-reset dropdown-toggle me-3 hidden-arrow" href="#" id="navbarDropdown" role="button"46
data-mdb-toggle="dropdown" aria-expanded="false">47
<i class="united kingdom flag m-0"></i>48
</a>49
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">50
<li>51
<a class="dropdown-item" href="#"><i class="united kingdom flag"></i>English52
<i class="fa fa-check text-success ms-2"></i></a>53
</li>54
<li>55
<hr class="dropdown-divider" />56
</li>57
<li>58
<a class="dropdown-item" href="#"><i class="poland flag"></i>Polski</a>59
</li>60
<li>61
<a class="dropdown-item" href="#"><i class="china flag"></i>中文</a>62
</li>63
<li>64
<a class="dropdown-item" href="#"><i class="japan flag"></i>日本語</a>65
</li>66
<li>67
<a class="dropdown-item" href="#"><i class="germany flag"></i>Deutsch</a>68
</li>69
<li>70
<a class="dropdown-item" href="#"><i class="france flag"></i>Français</a>71
</li>72
<li>73
<a class="dropdown-item" href="#"><i class="spain flag"></i>Español</a>74
</li>75
<li>76
<a class="dropdown-item" href="#"><i class="russia flag"></i>Русский</a>77
</li>78
<li>79
<a class="dropdown-item" href="#"><i class="portugal flag"></i>Português</a>80
</li>81
</ul>82
</div>83
84
<!-- User -->85
<div class="dropdown">86
<a class="text-reset dropdown-toggle d-flex align-items-center hidden-arrow" href="#"87
id="navbarDropdownMenuLink" role="button" data-mdb-toggle="dropdown" aria-expanded="false">88
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg" class="rounded-circle" height="22"89
alt="" loading="lazy" />90
</a>91
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">92
<li><a class="dropdown-item" href="#">My profile</a></li>93
<li><a class="dropdown-item" href="#">Settings</a></li>94
<li><a class="dropdown-item" href="#">Logout</a></li>95
</ul>96
</div>97
</div>98
</div>99
</div>100
</div>101
</div>102
<!-- Jumbotron -->103
104
<!-- Navbar -->105
<nav class="navbar navbar-expand-lg navbar-light bg-white">106
<!-- Container wrapper -->107
<div class="container justify-content-center justify-content-md-between">108
<!-- Left links -->109
<ul class="navbar-nav flex-row">110
<li class="nav-item me-2 me-lg-0">111
<a id="toggle-sidenav" class="nav-link" href="#" role="button" data-mdb-toggle="sidenav" data-mdb-target="#sidenav-1"112
class="btn shadow-0 p-0 me-3" aria-controls="#sidenav-1" aria-haspopup="true">113
<i class="fas fa-bars me-1"></i>114
<span>Categories</span>115
</a>116
</li>117
<li class="nav-item me-2 me-lg-0 d-none d-md-inline-block">118
<a class="nav-link" href="#">Bestsellers</a>119
</li>120
<li class="nav-item me-2 me-lg-0 d-none d-md-inline-block">121
<a class="nav-link" href="#">Inspirations</a>122
</li>123
<li class="nav-item me-2 me-lg-0 d-none d-md-inline-block">124
<a class="nav-link" href="#">Blog</a>125
</li>126
<li class="nav-item me-2 me-lg-0 d-none d-md-inline-block">127
<a class="nav-link" href="#">Contact</a>128
</li>129
</ul>130
<!-- Left links -->131
132
<button class="btn btn-outline-primary" data-mdb-ripple-color="dark" type="button">133
Download app<i class="fas fa-download ms-2"></i>134
</button>135
</div>136
<!-- Container wrapper -->137
</nav>138
<!-- Navbar -->139
140
<!-- Sidenav -->141
<div id="sidenav-1" class="sidenav" role="navigation" data-mdb-hidden="true" data-mdb-accordion="true">142
<ul class="sidenav-menu">143
<li class="sidenav-item">144
<a class="sidenav-link" ><i class="fas fa-layer-group pe-3"></i><span>Categories</span></a>145
<ul class="sidenav-collapse show">146
<li class="sidenav-item">147
<a class="sidenav-link">Dresses</a>148
</li>149
<li class="sidenav-item">150
<a class="sidenav-link">Shirts</a>151
</li>152
<li class="sidenav-item">153
<a class="sidenav-link">Jeans</a>154
</li>155
<li class="sidenav-item">156
<a class="sidenav-link">Shoes</a>157
</li>158
<li class="sidenav-item">159
<a class="sidenav-link">Accessories</a>160
</li>161
<li class="sidenav-item">162
<a class="sidenav-link">Jewelry</a>163
</li>164
</ul>165
</li>166
<li class="sidenav-item">167
<a class="sidenav-link"><i class="fas fa-gem pe-3"></i><span>Brands</span></a>168
<ul class="sidenav-collapse">169
<li class="sidenav-item">170
<a class="sidenav-link">Brand 1</a>171
</li>172
<li class="sidenav-item">173
<a class="sidenav-link">Brand 2</a>174
</li>175
<li class="sidenav-item">176
<a class="sidenav-link">Brand 3</a>177
</li>178
<li class="sidenav-item">179
<a class="sidenav-link">Brand 4</a>180
</li>181
</ul>182
</li>183
<li class="sidenav-item">184
<a class="sidenav-link"><i class="fas fa-gift pe-3"></i><span>Discounts</span></a>185
<ul class="sidenav-collapse">186
<li class="sidenav-item">187
<a class="sidenav-link">-70%</a>188
</li>189
<li class="sidenav-item">190
<a class="sidenav-link">-50%</a>191
</li>192
<li class="sidenav-item">193
<a class="sidenav-link">Any</a>194
</li>195
</ul>196
</li>197
<li class="sidenav-item">198
<a class="sidenav-link"><i class="fas fa-fire-alt pe-3"></i><span>Popular</span></a>199
<ul class="sidenav-collapse">200
<li class="sidenav-item">201
<a class="sidenav-link">Jewelry</a>202
</li>203
<li class="sidenav-item">204
<a class="sidenav-link">Snickers</a>205
</li>206
</ul>207
</li>208
<li class="sidenav-item">209
<a class="sidenav-link"><i class="fab fa-hotjar pe-3"></i><span>Today's bestseller</span></a>210
<div class="card mx-3">211
<div class="bg-image hover-zoom ripple" data-mdb-ripple-color="light">212
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/shoes%20(3).jpg"213
class="w-100" />214
<a href="#!">215
<div class="mask">216
<div class="d-flex justify-content-start align-items-end h-100">217
<h5><span class="badge bg-danger ms-2">-10%</span></h5>218
</div>219
</div>220
<div class="hover-overlay">221
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>222
</div>223
</a>224
</div>225
<div class="card-body">226
<a href="" class="text-reset">227
<p class="mb-2">Pink snickers</p>228
</a>229
<p class="mb-0">230
<s>$61.99</s><strong class="ms-2 text-danger">$50.99</strong>231
</p>232
</div>233
</div>234
</li>235
</ul>236
</div>237
<!-- Sidenav -->238
239
<!-- Jumbotron -->240
<div class="p-5 text-center bg-light">241
<!-- Breadcrumb -->242
<nav class="d-flex justify-content-center">243
<h6 class="mb-0">244
<a href="" class="text-reset">Home</a>245
<span>/</span>246
<a href="" class="text-reset">Shop</a>247
<span>/</span>248
<a href="" class="text-reset"><u>Shirts</u></a>249
</h6>250
</nav>251
<!-- Breadcrumb -->252
</div>253
<!-- Jumbotron -->254
</header>255
<!--Main Navigation-->256
257
<!--Main layout-->258
<main class="mb-6">259
<div class="container">260
<!-- Section: Product details -->261
<section class="mb-9">262
<div class="row gx-lg-5">263
<div class="col-md-6 mb-4 mb-md-0">264
<!-- Gallery -->265
<div266
class="ecommerce-gallery vertical"267
data-mdb-zoom-effect="true"268
data-mdb-auto-height="true"269
>270
<div class="row gx-2 gx-lg-3">271
<div class="col-2 col-lg-3">272
<div273
class="multi-carousel vertical"274
data-mdb-breakpoint="false"275
data-mdb-items="4"276
style="height: 500px"277
>278
<div class="multi-carousel-inner">279
<div class="multi-carousel-item active mb-2">280
<img281
src="https://mdbootstrap.com/img/new/ecommerce/vertical/068.jpg"282
data-mdb-img="https://mdbootstrap.com/img/new/ecommerce/vertical/068.jpg"283
alt="Gallery image 1"284
class="active w-100 rounded"285
/>286
</div>287
<div class="multi-carousel-item mb-2">288
<img289
src="https://mdbootstrap.com/img/new/ecommerce/vertical/009.jpg"290
data-mdb-img="https://mdbootstrap.com/img/new/ecommerce/vertical/009.jpg"291
alt="Gallery image 2"292
class="w-100 rounded"293
/>294
</div>295
<div class="multi-carousel-item mb-2">296
<img297
src="https://mdbootstrap.com/img/new/ecommerce/vertical/086.jpg"298
data-mdb-img="https://mdbootstrap.com/img/new/ecommerce/vertical/086.jpg"299
alt="Gallery image 3"300
class="w-100 rounded"301
/>302
</div>303
<div class="multi-carousel-item mb-2">304
<img305
src="https://mdbootstrap.com/img/new/ecommerce/vertical/087.jpg"306
data-mdb-img="https://mdbootstrap.com/img/new/ecommerce/vertical/087.jpg"307
alt="Gallery image 4"308
class="w-100 rounded"309
/>310
</div>311
</div>312
<button313
class="carousel-control-prev"314
tabindex="0"315
type="button"316
data-mdb-slide="prev"317
>318
<span319
class="carousel-control-prev-icon"320
aria-hidden="true"321
></span>322
</button>323
<button324
class="carousel-control-next"325
tabindex="0"326
type="button"327
data-mdb-slide="next"328
>329
<span330
class="carousel-control-next-icon"331
aria-hidden="true"332
></span>333
</button>334
</div>335
</div>336
<div class="col-10 col-lg-9">337
<div class="lightbox">338
<img339
src="https://mdbootstrap.com/img/Photos/Slides/1.jpg"340
alt="Gallery image 1"341
class="342
ecommerce-gallery-main-img343
active344
w-100345
rounded-4346
"347
/>348
</div>349
</div>350
</div>351
</div>352
<!-- Gallery -->353
</div>354
355
<div class="col-md-6 mb-4 mb-md-0">356
<!-- Details -->357
<div>358
<h1 class="fw-bold mb-3 h5">Sophisticated dress</h1>359
<a href="" class="text-muted mb-3"360
><p class="mb-2 text-uppercase small">Dresses</p></a361
>362
363
<div class="d-flex text-primary">364
<ul365
class="rating mb-3 me-2"366
data-mdb-toggle="rating"367
data-mdb-readonly="true"368
data-mdb-value="4"369
>370
<li>371
<i372
class="far fa-star fa-sm text-primary ps-0"373
title="Bad"374
></i>375
</li>376
<li>377
<i378
class="far fa-star fa-sm text-primary"379
title="Poor"380
></i>381
</li>382
<li>383
<i class="far fa-star fa-sm text-primary" title="OK"></i>384
</li>385
<li>386
<i387
class="far fa-star fa-sm text-primary"388
title="Good"389
></i>390
</li>391
<li>392
<i393
class="far fa-star fa-sm text-primary"394
title="Excellent"395
></i>396
</li>397
</ul>398
<a href=""><strong class="me-2">4/5</strong>(2 reviews)</a>399
</div>400
401
<h5 class="mb-3">402
<s class="text-muted me-2 small align-middle">$119</s403
><span class="align-middle">$101</span>404
</h5>405
406
<p class="text-muted">407
Lorem ipsum dolor sit amet consectetur adipisicing elit.408
Ratione accusantium harum repellendus illo mollitia similique409
atque vitae repudiandae animi dolor? Rem eveniet saepe410
deserunt aliquam. Enim incidunt quas voluptatibus perferendis.411
</p>412
413
<div class="table-responsive">414
<table class="table table-sm table-borderless mb-0">415
<tbody>416
<tr>417
<th class="ps-0 w-25" scope="row">418
<strong>Model</strong>419
</th>420
<td>Shirt 5407X</td>421
</tr>422
<tr>423
<th class="ps-0 w-25" scope="row">424
<strong>Material</strong>425
</th>426
<td>Cotton 80%</td>427
</tr>428
<tr>429
<th class="ps-0 w-25" scope="row">430
<strong>Delivery</strong>431
</th>432
<td>USA, Europe</td>433
</tr>434
</tbody>435
</table>436
</div>437
438
<hr class="my-5" />439
440
<form action="">441
<div class="row">442
<!-- Quantity -->443
<div class="col-md-6 mb-4">444
<div class="form-outline">445
<input446
type="number"447
id="typeNumber"448
class="form-control"449
value="1"450
min="1"451
/>452
<label class="form-label" for="typeNumber"453
>Quantity</label454
>455
</div>456
</div>457
<!-- Size -->458
<div class="col-md-6 mb-4">459
<select class="select">460
<option value="1">XS</option>461
<option value="2">S</option>462
<option value="3">M</option>463
<option value="4">L</option>464
<option value="5">XL</option>465
</select>466
<label class="form-label select-label">Size</label>467
</div>468
469
<!-- Colors -->470
<div class="col-md-6 mb-4">471
<div class="">472
<input473
type="radio"474
class="btn-check"475
name="options"476
id="color-primary"477
autocomplete="off"478
checked479
/>480
<label481
class="482
btn btn-primary btn-floating483
me-2484
mb-2485
shadow-0486
"487
for="color-primary"488
></label>489
490
<input491
type="radio"492
class="btn-check"493
name="options"494
id="color-danger"495
autocomplete="off"496
/>497
<label498
class="btn btn-danger btn-floating me-2 mb-2 shadow-0"499
for="color-danger"500
></label>501
502
<input503
type="radio"504
class="btn-check"505
name="options"506
id="color-secondary"507
autocomplete="off"508
/>509
<label510
class="511
btn btn-secondary btn-floating512
me-2513
mb-2514
shadow-0515
"516
for="color-secondary"517
></label>518
519
<input520
type="radio"521
class="btn-check"522
name="options"523
id="color-success"524
autocomplete="off"525
/>526
<label527
class="528
btn btn-success btn-floating529
me-2530
mb-2531
shadow-0532
"533
for="color-success"534
></label>535
536
<input537
type="radio"538
class="btn-check"539
name="options"540
id="color-warning"541
autocomplete="off"542
/>543
<label544
class="545
btn btn-warning btn-floating546
me-2547
mb-2548
shadow-0549
"550
for="color-warning"551
></label>552
553
<input554
type="radio"555
class="btn-check"556
name="options"557
id="color-info"558
autocomplete="off"559
/>560
<label561
class="btn btn-info btn-floating me-2 mb-2 shadow-0"562
for="color-info"563
></label>564
</div>565
</div>566
</div>567
568
<button569
type="button"570
class="btn btn-primary btn-rounded me-2"571
>572
<i class="fas fa-cart-plus me-2"></i>Add to cart573
</button>574
<button575
href="#!"576
type="button"577
class="btn btn-danger btn-floating"578
data-mdb-toggle="tooltip"579
title="Add to wishlist"580
>581
<i class="fas fa-heart"></i>582
</button>583
</form>584
</div>585
<!-- Details -->586
</div>587
</div>588
</section>589
<!-- Section: Product details -->590
591
<!-- Section: Reviews -->592
<section class="text-center">593
<p class="my-4"><strong>2 reviews for <em>Sophisticated dress</em></strong></p>594
595
<div class="row">596
<div class="col-md-7 mb-4">597
<!-- Single review -->598
<div class="shadow-4 p-4 rounded-5 mb-5">599
<img600
class="shadow-1-strong rounded-circle mb-3"601
style="width: 40px"602
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg"603
alt="Sample"604
/>605
<p class="mb-3 fw-bold">Alan Turing</p>606
607
<ul608
class="rating mb-3 d-flex justify-content-center"609
data-mdb-toggle="rating"610
data-mdb-readonly="true"611
data-mdb-value="3"612
>613
<li>614
<i class="far fa-star fa-sm text-primary"></i>615
</li>616
<li>617
<i class="far fa-star fa-sm text-primary"></i>618
</li>619
<li>620
<i class="far fa-star fa-sm text-primary"></i>621
</li>622
<li>623
<i class="far fa-star fa-sm text-primary"></i>624
</li>625
<li>626
<i class="far fa-star fa-sm text-primary"></i>627
</li>628
</ul>629
630
<p class="mb-0">631
<i class="fas fa-quote-left pe-2"></i>Lorem ipsum dolor, sit632
amet consectetur adipisicing elit. Molestias nemo ea sequi633
repudiandae tempora porro harum fugit explicabo, corporis634
neque veniam, mollitia, similique nobis architecto quibusdam635
temporibus! Saepe, accusantium natus.636
</p>637
</div>638
<!-- Single review -->639
640
<!-- Single review -->641
<div class="shadow-4 p-4 rounded-5 mb-5">642
<img643
class="shadow-1-strong rounded-circle mb-3"644
style="width: 40px"645
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(4).jpg"646
alt="Sample"647
/>648
<p class="mb-3 fw-bold">Veronica Smith</p>649
650
<ul651
class="rating mb-3 d-flex justify-content-center"652
data-mdb-toggle="rating"653
data-mdb-readonly="true"654
data-mdb-value="3"655
>656
<li>657
<i class="far fa-star fa-sm text-primary"></i>658
</li>659
<li>660
<i class="far fa-star fa-sm text-primary"></i>661
</li>662
<li>663
<i class="far fa-star fa-sm text-primary"></i>664
</li>665
<li>666
<i class="far fa-star fa-sm text-primary"></i>667
</li>668
<li>669
<i class="far fa-star fa-sm text-primary"></i>670
</li>671
</ul>672
673
<p class="mb-0">674
<i class="fas fa-quote-left pe-2"></i>Lorem ipsum dolor sit675
amet consectetur adipisicing elit. Autem nisi iusto, ducimus676
voluptatum iste aliquid iure architecto dicta nulla, delectus677
molestiae explicabo voluptas rem laudantium distinctio678
quibusdam tempore deleniti. Saepe architecto porro doloremque679
nulla sint officia dolorem ex. Assumenda labore consectetur,680
nemo non cum modi? Fugiat vel quibusdam et voluptates?681
</p>682
</div>683
<!-- Single review -->684
</div>685
686
<div class="col-md-5 mb-4">687
<form>688
<p>Rate this product</p>689
690
<ul691
class="rating d-flex justify-content-center mb-4"692
data-mdb-toggle="rating"693
data-mdb-value="3"694
>695
<li>696
<i class="far fa-star fa-sm text-primary" title="Bad"></i>697
</li>698
<li>699
<i class="far fa-star fa-sm text-primary" title="Poor"></i>700
</li>701
<li>702
<i class="far fa-star fa-sm text-primary" title="OK"></i>703
</li>704
<li>705
<i class="far fa-star fa-sm text-primary" title="Good"></i>706
</li>707
<li>708
<i709
class="far fa-star fa-sm text-primary"710
title="Excellent"711
></i>712
</li>713
</ul>714
715
<!-- Name input -->716
<div class="form-outline mb-4">717
<input type="text" id="form5Example1" class="form-control" />718
<label class="form-label" for="form5Example1">Name</label>719
</div>720
721
<!-- Email input -->722
<div class="form-outline mb-4">723
<input type="email" id="form5Example2" class="form-control" />724
<label class="form-label" for="form5Example2"725
>Email address</label726
>727
</div>728
729
<!-- Textarea -->730
<div class="form-outline mb-4">731
<textarea732
class="form-control"733
id="textAreaExample"734
rows="4"735
></textarea>736
<label class="form-label" for="textAreaExample"737
>Your review</label738
>739
</div>740
741
<!-- Submit button -->742
<button type="submit" class="btn btn-primary mb-4">743
Submit744
</button>745
</form>746
</div>747
</div>748
</section>749
<!-- Section: Reviews -->750
</div>751
</main>752
<!--Main layout-->753
754
<!-- Footer -->755
<footer756
class="text-center text-lg-start text-muted"757
style="background-color: hsl(213, 44%, 97%)"758
>759
<!-- Section: Social media -->760
<section761
class="762
d-flex763
justify-content-center justify-content-lg-between764
p-4765
border-bottom766
container767
"768
>769
<!-- Left -->770
<div class="me-5 d-none d-lg-block">771
<span>Get connected with us on social networks:</span>772
</div>773
<!-- Left -->774
775
<!-- Right -->776
<div>777
<a href="" class="me-4 text-reset">778
<i class="fab fa-facebook-f"></i>779
</a>780
<a href="" class="me-4 text-reset">781
<i class="fab fa-twitter"></i>782
</a>783
<a href="" class="me-4 text-reset">784
<i class="fab fa-google"></i>785
</a>786
<a href="" class="me-4 text-reset">787
<i class="fab fa-instagram"></i>788
</a>789
<a href="" class="me-4 text-reset">790
<i class="fab fa-linkedin"></i>791
</a>792
<a href="" class="me-4 text-reset">793
<i class="fab fa-github"></i>794
</a>795
</div>796
<!-- Right -->797
</section>798
<!-- Section: Social media -->799
800
<!-- Section: Links -->801
<section class="">802
<div class="container text-center text-md-start mt-5">803
<!-- Grid row -->804
<div class="row mt-3">805
<!-- Grid column -->806
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">807
<!-- Content -->808
<h6 class="text-uppercase fw-bold mb-4">809
<i class="fas fa-gem me-3"></i>Company name810
</h6>811
<p>812
Here you can use rows and columns to organize your footer813
content. Lorem ipsum dolor sit amet, consectetur adipisicing814
elit.815
</p>816
</div>817
<!-- Grid column -->818
819
<!-- Grid column -->820
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">821
<!-- Links -->822
<h6 class="text-uppercase fw-bold mb-4">Products</h6>823
<p>824
<a href="#!" class="text-reset">Dresses</a>825
</p>826
<p>827
<a href="#!" class="text-reset">Skirts</a>828
</p>829
<p>830
<a href="#!" class="text-reset">Jeans</a>831
</p>832
<p>833
<a href="#!" class="text-reset">Accessories</a>834
</p>835
</div>836
<!-- Grid column -->837
838
<!-- Grid column -->839
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">840
<!-- Links -->841
<h6 class="text-uppercase fw-bold mb-4">Useful links</h6>842
<p>843
<a href="#!" class="text-reset">Pricing</a>844
</p>845
<p>846
<a href="#!" class="text-reset">Settings</a>847
</p>848
<p>849
<a href="#!" class="text-reset">Orders</a>850
</p>851
<p>852
<a href="#!" class="text-reset">Help</a>853
</p>854
</div>855
<!-- Grid column -->856
857
<!-- Grid column -->858
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">859
<!-- Links -->860
<h6 class="text-uppercase fw-bold mb-4">Contact</h6>861
<p><i class="fas fa-home me-3"></i> New York, NY 10012, US</p>862
<p>863
<i class="fas fa-envelope me-3"></i>864
info@example.com865
</p>866
<p><i class="fas fa-phone me-3"></i> + 01 234 567 88</p>867
<p><i class="fas fa-print me-3"></i> + 01 234 567 89</p>868
</div>869
<!-- Grid column -->870
</div>871
<!-- Grid row -->872
</div>873
</section>874
<!-- Section: Links -->875
876
<!-- Copyright -->877
<div878
class="text-center p-4"879
style="background-color: hsla(0, 0%, 17%, 0.04)"880
>881
© 2021 Copyright:882
<a class="text-reset fw-bold" href="https://mdbootstrap.com/"883
>MDBootstrap.com</a884
>885
</div>886
<!-- Copyright -->887
</footer>888
<!-- Footer -->1
1
xxxxxxxxxx1
const sidenav = mdb.Sidenav.getInstance(document.querySelector('#sidenav-1'));2
document.querySelector('#toggle-sidenav').addEventListener('click', ()=>{3
sidenav.show()4
}) Console errors: 0