xxxxxxxxxx1
<!--Main Navigation-->2
<header class="" style="margin-top: 60px">3
<!-- Navbar-->4
<nav5
class="navbar navbar-expand-lg fixed-top navbar-light bg-light shadow-2"6
>7
<div class="container-fluid justify-content-between">8
<!-- Left elements -->9
<div class="d-flex my-2 my-sm-0">10
<!-- Toggler -->11
<button12
data-toggle="sidenav"13
data-target="#sidenav-1"14
class="btn shadow-0 p-0 ml-2 mr-3 d-block d-xl-none"15
aria-controls="#sidenav-1"16
aria-haspopup="true"17
>18
<i class="fas fa-bars fa-lg"></i>19
</button>20
<!-- Brand -->21
<a22
class="navbar-brand mr-2 mb-1 d-flex align-items-center"23
href="#"24
>25
<img26
src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png"27
height="20"28
alt=""29
loading="lazy"30
style="margin-top: 2px"31
/>32
</a>33
34
<!-- Search form -->35
<form class="input-group w-auto my-auto d-none d-sm-flex">36
<input37
autocomplete="off"38
type="search"39
class="form-control rounded"40
placeholder="Search"41
style="min-width: 125px"42
/>43
<span class="input-group-text border-0 d-none d-lg-flex"44
><i class="fas fa-search"></i45
></span>46
</form>47
</div>48
<!-- Left elements -->49
50
<!-- Center elements -->51
<ul class="navbar-nav flex-row d-none d-md-flex">52
<li class="nav-item mr-3 mr-lg-1 active">53
<a class="nav-link" href="#">54
<span><i class="fas fa-home fa-lg"></i></span>55
<span class="badge rounded-pill badge-notification bg-danger"56
>1</span57
>58
</a>59
</li>60
61
<li class="nav-item mr-3 mr-lg-1">62
<a class="nav-link" href="#">63
<span><i class="fas fa-flag fa-lg"></i></span>64
</a>65
</li>66
67
<li class="nav-item mr-3 mr-lg-1">68
<a class="nav-link" href="#">69
<span><i class="fas fa-video fa-lg"></i></span>70
</a>71
</li>72
73
<li class="nav-item mr-3 mr-lg-1">74
<a class="nav-link" href="#">75
<span><i class="fas fa-shopping-bag fa-lg"></i></span>76
</a>77
</li>78
79
<li class="nav-item mr-3 mr-lg-1">80
<a class="nav-link" href="#">81
<span><i class="fas fa-users fa-lg"></i></span>82
<span class="badge rounded-pill badge-notification bg-danger"83
>2</span84
>85
</a>86
</li>87
</ul>88
<!-- Center elements -->89
90
<!-- Right elements -->91
<ul class="navbar-nav flex-row">92
<li class="nav-item mr-3 mr-lg-1">93
<a class="nav-link d-sm-flex align-items-sm-center" href="#">94
<img95
src="https://mdbootstrap.com/img/new/avatars/1.jpg"96
class="rounded-circle"97
height="22"98
alt=""99
loading="lazy"100
/>101
<strong class="d-none d-sm-block ml-1">John</strong>102
</a>103
</li>104
<li class="nav-item mr-3 mr-lg-1">105
<a class="nav-link" href="#">106
<span><i class="fas fa-plus-circle fa-lg"></i></span>107
</a>108
</li>109
<li class="nav-item dropdown mr-3 mr-lg-1">110
<a111
class="nav-link dropdown-toggle hidden-arrow"112
href="#"113
id="navbarDropdownMenuLink"114
role="button"115
data-toggle="dropdown"116
aria-expanded="false"117
>118
<i class="fas fa-comments fa-lg"></i>119
120
<span class="badge rounded-pill badge-notification bg-danger"121
>6</span122
>123
</a>124
<ul125
class="dropdown-menu dropdown-menu-right"126
aria-labelledby="navbarDropdownMenuLink"127
>128
<li><a class="dropdown-item" href="#">Some news</a></li>129
<li><a class="dropdown-item" href="#">Another news</a></li>130
<li>131
<a class="dropdown-item" href="#">Something else here</a>132
</li>133
</ul>134
</li>135
<li class="nav-item dropdown mr-3 mr-lg-1">136
<a137
class="nav-link dropdown-toggle hidden-arrow"138
href="#"139
id="navbarDropdownMenuLink"140
role="button"141
data-toggle="dropdown"142
aria-expanded="false"143
>144
<i class="fas fa-bell fa-lg"></i>145
<span class="badge rounded-pill badge-notification bg-danger"146
>12</span147
>148
</a>149
<ul150
class="dropdown-menu dropdown-menu-right"151
aria-labelledby="navbarDropdownMenuLink"152
>153
<li><a class="dropdown-item" href="#">Some news</a></li>154
<li><a class="dropdown-item" href="#">Another news</a></li>155
<li>156
<a class="dropdown-item" href="#">Something else here</a>157
</li>158
</ul>159
</li>160
<li class="nav-item dropdown mr-3 mr-lg-1">161
<a162
class="nav-link dropdown-toggle hidden-arrow"163
href="#"164
id="navbarDropdownMenuLink"165
role="button"166
data-toggle="dropdown"167
aria-expanded="false"168
>169
<i class="fas fa-chevron-circle-down fa-lg"></i>170
</a>171
<ul172
class="dropdown-menu dropdown-menu-right"173
aria-labelledby="navbarDropdownMenuLink"174
>175
<li><a class="dropdown-item" href="#">Some news</a></li>176
<li><a class="dropdown-item" href="#">Another news</a></li>177
<li>178
<a class="dropdown-item" href="#">Something else here</a>179
</li>180
</ul>181
</li>182
</ul>183
<!-- Right elements -->184
</div>185
</nav>186
<!-- Navbar -->187
188
<!-- Sidenav -->189
<div id="sidenav-1" class="sidenav" role="navigation">190
<form class="input-group w-auto my-auto p-4 pb-2">191
<input192
autocomplete="off"193
type="search"194
class="form-control rounded"195
placeholder="Search"196
style="min-width: 125px"197
/>198
</form>199
<ul class="sidenav-menu">200
<li class="sidenav-item">201
<a class="sidenav-link">202
<i class="fas fa-home fa-fw mr-3"></i><span>Home</span></a203
>204
</li>205
<li class="sidenav-item">206
<a class="sidenav-link">207
<i class="fas fa-flag fa-fw mr-3"></i><span>Pages</span></a208
>209
</li>210
<li class="sidenav-item">211
<a class="sidenav-link">212
<i class="fas fa-video fa-fw mr-3"></i><span>Watch</span></a213
>214
</li>215
<li class="sidenav-item">216
<a class="sidenav-link">217
<i class="fas fa-shopping-bag fa-fw mr-3"></i218
><span>Marketplace</span></a219
>220
</li>221
<li class="sidenav-item">222
<a class="sidenav-link">223
<i class="fas fa-users fa-fw mr-3"></i><span>Groups</span></a224
>225
</li>226
</ul>227
</div>228
<!-- Sidenav -->229
</header>230
<!--Main Navigation-->231
232
<!--Main layout-->233
<main class="mb-5">234
<div class="container-fluid">235
<div class="row justify-content-center justify-content-lg-between">236
<!-- Left column -->237
<div class="col-xl-2 d-none d-xl-block">238
<!--Section: Contacts-->239
<section class="sticky-top" style="top: 80px">240
<div class="list-group list-group-naked mb-3">241
<div class="d-flex justify-content-between">242
<hp class="ml-3 mt-2 mb-4"><strong>Your contacts</strong></hp>243
244
<div>245
<button246
type="button"247
class="btn btn-link btn-sm p-2"248
data-ripple-color="dark"249
>250
<i class="fas fa-cog"></i>251
</button>252
<button253
type="button"254
class="btn btn-link btn-sm p-2"255
data-ripple-color="dark"256
>257
<i class="fas fa-video"></i>258
</button>259
<button260
type="button"261
class="btn btn-link btn-sm p-2"262
data-ripple-color="dark"263
>264
<i class="fas fa-edit"></i>265
</button>266
</div>267
</div>268
269
<a270
href="#"271
class="list-group-item list-group-item-action d-flex align-items-center"272
aria-current="true"273
>274
<img275
src="https://mdbootstrap.com/img/new/avatars/2.jpg"276
class="border rounded-circle mr-2"277
alt=""278
style="height: 40px"279
/>280
<strong>Conah Enriquez</strong>281
</a>282
283
<a284
href="#"285
class="list-group-item list-group-item-action d-flex align-items-center"286
aria-current="true"287
>288
<img289
src="https://mdbootstrap.com/img/new/avatars/3.jpg"290
class="border rounded-circle mr-2"291
alt=""292
style="height: 40px"293
/>294
<strong>Kie Melton</strong>295
</a>296
297
<a298
href="#"299
class="list-group-item list-group-item-action d-flex align-items-center"300
aria-current="true"301
>302
<img303
src="https://mdbootstrap.com/img/new/avatars/4.jpg"304
class="border rounded-circle mr-2"305
alt=""306
style="height: 40px"307
/>308
<strong>Janelle Donaldson</strong>309
</a>310
311
<a312
href="#"313
class="list-group-item list-group-item-action d-flex align-items-center"314
aria-current="true"315
>316
<img317
src="https://mdbootstrap.com/img/new/avatars/5.jpg"318
class="border rounded-circle mr-2"319
alt=""320
style="height: 40px"321
/>322
<strong>Corrie Miles</strong>323
</a>324
325
<a326
href="#"327
class="list-group-item list-group-item-action d-flex align-items-center"328
aria-current="true"329
>330
<img331
src="https://mdbootstrap.com/img/new/avatars/6.jpg"332
class="border rounded-circle mr-2"333
alt=""334
style="height: 40px"335
/>336
<strong>Liliana Parrish</strong>337
</a>338
339
<a340
href="#"341
class="list-group-item list-group-item-action d-flex align-items-center"342
aria-current="true"343
>344
<img345
src="https://mdbootstrap.com/img/new/avatars/7.jpg"346
class="border rounded-circle mr-2"347
alt=""348
style="height: 40px"349
/>350
<strong>Ellie-Mae Berger</strong>351
</a>352
353
<a354
href="#"355
class="list-group-item list-group-item-action d-flex align-items-center"356
aria-current="true"357
>358
<img359
src="https://mdbootstrap.com/img/new/avatars/8.jpg"360
class="border rounded-circle mr-2"361
alt=""362
style="height: 40px"363
/>364
<strong>Toyah Smith</strong>365
</a>366
367
<a368
href="#"369
class="list-group-item list-group-item-action d-flex align-items-center"370
aria-current="true"371
>372
<img373
src="https://mdbootstrap.com/img/new/avatars/9.jpg"374
class="border rounded-circle mr-2"375
alt=""376
style="height: 40px"377
/>378
<strong>Elsa Friedman</strong>379
</a>380
381
<a382
href="#"383
class="list-group-item list-group-item-action d-flex align-items-center"384
aria-current="true"385
>386
<img387
src="https://mdbootstrap.com/img/new/avatars/10.jpg"388
class="border rounded-circle mr-2"389
alt=""390
style="height: 40px"391
/>392
<strong>Kristen Hines</strong>393
</a>394
395
<a396
href="#"397
class="list-group-item list-group-item-action d-flex align-items-center"398
aria-current="true"399
>400
<img401
src="https://mdbootstrap.com/img/new/avatars/11.jpg"402
class="border rounded-circle mr-2"403
alt=""404
style="height: 40px"405
/>406
<strong>Ariah Kaye</strong>407
</a>408
409
<a410
href="#"411
class="list-group-item list-group-item-action d-flex align-items-center"412
aria-current="true"413
>414
<img415
src="https://mdbootstrap.com/img/new/avatars/12.jpg"416
class="border rounded-circle mr-2"417
alt=""418
style="height: 40px"419
/>420
<strong>Bianka Macdonald</strong>421
</a>422
423
<a424
href="#"425
class="list-group-item list-group-item-action d-flex align-items-center"426
aria-current="true"427
>428
<img429
src="https://mdbootstrap.com/img/new/avatars/13.jpg"430
class="border rounded-circle mr-2"431
alt=""432
style="height: 40px"433
/>434
<strong>Naomi Beaumont</strong>435
</a>436
437
<a438
href="#"439
class="list-group-item list-group-item-action d-flex align-items-center"440
aria-current="true"441
>442
<img443
src="https://mdbootstrap.com/img/new/avatars/14.jpg"444
class="border rounded-circle mr-2"445
alt=""446
style="height: 40px"447
/>448
<strong>Kia Wade</strong>449
</a>450
451
<a452
href="#"453
class="list-group-item list-group-item-action d-flex align-items-center"454
aria-current="true"455
>456
<img457
src="https://mdbootstrap.com/img/new/avatars/15.jpg"458
class="border rounded-circle mr-2"459
alt=""460
style="height: 40px"461
/>462
<strong>Emilee Hammond</strong>463
</a>464
465
<a466
href="#"467
class="list-group-item list-group-item-action d-flex align-items-center"468
aria-current="true"469
>470
<img471
src="https://mdbootstrap.com/img/new/avatars/16.jpg"472
class="border rounded-circle mr-2"473
alt=""474
style="height: 40px"475
/>476
<strong>Imani Hahn</strong>477
</a>478
</div>479
</section>480
<!--Section: Contacts-->481
</div>482
<!-- Left column -->483
484
<!-- Center column -->485
<div486
class="col-xl-7 col-lg-8 col-12 mb-4 mb-lg-0 border-left border-right"487
>488
<!--Section: Messages-->489
<section class="inner-content">490
<div class="d-flex mt-3">491
<button492
data-toggle="sidenav"493
data-target="#sidenav-inner"494
class="btn shadow-0 p-0 mr-3 d-block d-lg-none"495
aria-controls="#sidenav-outer"496
aria-haspopup="true"497
>498
<i class="fas fa-bars fa-lg"></i>499
</button>500
501
<img502
src="https://mdbootstrap.com/img/new/avatars/9.jpg"503
class="rounded-circle mr-2"504
style="width: 30px; height: 30px"505
alt=""506
/>507
508
<span>Anna Doe</span>509
</div>510
511
<hr />512
513
<!-- Single message - interlocutor -->514
<div class="d-flex justify-content-start w-100">515
<img516
src="https://mdbootstrap.com/img/new/avatars/9.jpg"517
class="rounded-circle mr-2"518
style="width: 30px; height: 30px"519
alt=""520
/>521
<p522
class="p-3 bg-light rounded-lg shadow-1 shadow-1"523
style="max-width: 533px"524
>525
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde526
praesentium ad, dolores quaerat maxime architecto dolore,527
necessitatibus rem possimus quam ratione sit neque quidem528
officia dolorum nostrum enim dignissimos eum.529
<small class="float-right text-dark mt-4">14:52</small>530
</p>531
</div>532
<!-- Single message - interlocutor -->533
534
<!-- Single message - me -->535
<div class="d-flex justify-content-end ml-auto">536
<p537
class="p-3 bg-primary shadow-1-strong text-white rounded-lg"538
style="max-width: 533px"539
>540
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde541
praesentium ad, dolores quaerat maxime architecto dolore,542
necessitatibus rem possimus quam ratione sit neque quidem543
officia dolorum nostrum enim dignissimos eum.544
<small class="float-right mt-4">14:53</small>545
</p>546
<img547
src="https://mdbootstrap.com/img/new/avatars/1.jpg"548
class="rounded-circle ml-2"549
style="width: 30px; height: 30px"550
alt=""551
/>552
</div>553
<!-- Single message - me -->554
555
<!-- Single message - interlocutor -->556
<div class="d-flex justify-content-start w-100">557
<img558
src="https://mdbootstrap.com/img/new/avatars/9.jpg"559
class="rounded-circle mr-2"560
style="width: 30px; height: 30px"561
alt=""562
/>563
<p564
class="p-3 bg-light rounded-lg shadow-1"565
style="max-width: 533px"566
>567
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde568
praesentium ad, dolores quaerat maxime architecto dolore.569
<small class="float-right text-dark mt-4">14:54</small>570
</p>571
</div>572
<!-- Single message - interlocutor -->573
574
<!-- Single message - me -->575
<div class="d-flex justify-content-end ml-auto">576
<p577
class="p-3 bg-primary shadow-1-strong text-white rounded-lg"578
style="max-width: 533px"579
>580
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea581
illo accusantium quibusdam quidem veniam inventore, libero582
distinctio eaque, qui molestiae architecto aspernatur.583
Praesentium natus maxime suscipit dolorem delectus, doloremque584
reprehenderit numquam distinctio quas repudiandae veritatis585
incidunt quo, consequatur quod laborum laboriosam. Quos586
ducimus, ad veritatis illo minus molestiae omnis pariatur.587
<small class="float-right mt-4">14:55</small>588
</p>589
<img590
src="https://mdbootstrap.com/img/new/avatars/1.jpg"591
class="rounded-circle ml-2"592
style="width: 30px; height: 30px"593
alt=""594
/>595
</div>596
<!-- Single message - me -->597
598
<!-- Single message - interlocutor -->599
<div class="d-flex justify-content-start w-100">600
<img601
src="https://mdbootstrap.com/img/new/avatars/9.jpg"602
class="rounded-circle mr-2"603
style="width: 30px; height: 30px"604
alt=""605
/>606
<p607
class="p-3 bg-light rounded-lg shadow-1"608
style="max-width: 533px"609
>610
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde611
praesentium ad, dolores quaerat maxime architecto dolore,612
necessitatibus rem possimus quam ratione sit neque quidem613
officia dolorum nostrum enim dignissimos eum.614
<small class="float-right text-dark mt-4">14:52</small>615
</p>616
</div>617
<!-- Single message - interlocutor -->618
619
<!-- Single message - me -->620
<div class="d-flex justify-content-end ml-auto">621
<p622
class="p-3 bg-primary shadow-1-strong text-white rounded-lg"623
style="max-width: 533px"624
>625
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde626
praesentium ad, dolores quaerat maxime architecto dolore,627
necessitatibus rem possimus quam ratione sit neque quidem628
officia dolorum nostrum enim dignissimos eum.629
<small class="float-right mt-4">14:53</small>630
</p>631
<img632
src="https://mdbootstrap.com/img/new/avatars/1.jpg"633
class="rounded-circle ml-2"634
style="width: 30px; height: 30px"635
alt=""636
/>637
</div>638
<!-- Single message - me -->639
640
<!-- Single message - interlocutor -->641
<div class="d-flex justify-content-start w-100">642
<img643
src="https://mdbootstrap.com/img/new/avatars/9.jpg"644
class="rounded-circle mr-2"645
style="width: 30px; height: 30px"646
alt=""647
/>648
<p649
class="p-3 bg-light rounded-lg shadow-1"650
style="max-width: 533px"651
>652
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde653
praesentium ad, dolores quaerat maxime architecto dolore.654
<small class="float-right text-dark mt-4">14:54</small>655
</p>656
</div>657
<!-- Single message - interlocutor -->658
659
<!-- Single message - me -->660
<div class="d-flex justify-content-end ml-auto">661
<p662
class="p-3 bg-primary shadow-1-strong text-white rounded-lg"663
style="max-width: 533px"664
>665
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea666
illo accusantium quibusdam quidem veniam inventore, libero667
distinctio eaque, qui molestiae architecto aspernatur.668
Praesentium natus maxime suscipit dolorem delectus, doloremque669
reprehenderit numquam distinctio quas repudiandae veritatis670
incidunt quo, consequatur quod laborum laboriosam. Quos671
ducimus, ad veritatis illo minus molestiae omnis pariatur.672
<small class="float-right mt-4">14:55</small>673
</p>674
<img675
src="https://mdbootstrap.com/img/new/avatars/1.jpg"676
class="rounded-circle ml-2"677
style="width: 30px; height: 30px"678
alt=""679
/>680
</div>681
<!-- Single message - me -->682
</section>683
<!--Section: Messages-->684
685
<!--Section: Message input-->686
<section id="message-input" class="fixed-bottom card bg-light">687
<div class="card-body">688
<form class="d-flex">689
<button type="button" class="btn btn-primary px-3">690
<i class="fas fa-plus-circle"></i>691
</button>692
693
<div class="w-100 mx-2">694
<textarea695
class="form-control"696
id="textAreaExample"697
rows="1"698
placeholder="Type a message"699
></textarea>700
</div>701
702
<button type="button" class="btn btn-primary px-3">703
<i class="fas fa-thumbs-up"></i>704
</button>705
</form>706
</div>707
</section>708
<!--Section: Message input-->709
</div>710
<!-- Center column -->711
712
<!-- Right column -->713
<div class="col-xl-3 col-lg-3 d-none d-lg-block">714
<!--Section: Interlocutor data-->715
<section class="sticky-top" style="top: 80px">716
<!-- Section: Intro -->717
<section class="text-center border-bottom mb-4">718
<img719
src="https://mdbootstrap.com/img/new/avatars/9.jpg"720
class="rounded-circle shadow-1-strong mb-3"721
style="height: 100px"722
alt=""723
/>724
725
<p class="mb-1"><strong>Anna Doe</strong></p>726
727
<p class="text-muted small">Active now</p>728
</section>729
<!-- Section: Intro -->730
731
<!-- Section: Shared photos -->732
<section class="">733
734
<p class="mb-4 text-center"><strong>Shared photos</strong></p>735
736
<div class="lightbox">737
<div class="row gx-2">738
<div class="col-lg-4 mb-2">739
<img740
src="https://mdbootstrap.com/img/new/standard/city/031.jpg"741
data-img="https://mdbootstrap.com/img/new/standard/city/041.jpg"742
alt="Lightbox image"743
class="w-100 rounded shadow-1-strong"744
/>745
</div>746
<div class="col-lg-4 mb-2">747
<img748
src="https://mdbootstrap.com/img/new/standard/city/032.jpg"749
data-img="https://mdbootstrap.com/img/new/standard/city/042.jpg"750
alt="Lightbox image"751
class="w-100 rounded shadow-1-strong"752
/>753
</div>754
<div class="col-lg-4 mb-2">755
<img756
src="https://mdbootstrap.com/img/new/standard/city/033.jpg"757
data-img="https://mdbootstrap.com/img/new/standard/city/043.jpg"758
alt="Lightbox image"759
class="w-100 rounded shadow-1-strong"760
/>761
</div>762
<div class="col-lg-4 mb-2">763
<img764
src="https://mdbootstrap.com/img/new/standard/city/034.jpg"765
data-img="https://mdbootstrap.com/img/new/standard/city/041.jpg"766
alt="Lightbox image"767
class="w-100 rounded shadow-1-strong"768
/>769
</div>770
<div class="col-lg-4 mb-2">771
<img772
src="https://mdbootstrap.com/img/new/standard/city/035.jpg"773
data-img="https://mdbootstrap.com/img/new/standard/city/032.jpg"774
alt="Lightbox image"775
class="w-100 rounded shadow-1-strong"776
/>777
</div>778
<div class="col-lg-4 mb-2">779
<img780
src="https://mdbootstrap.com/img/new/standard/city/036.jpg"781
data-img="https://mdbootstrap.com/img/new/standard/city/043.jpg"782
alt="Lightbox image"783
class="w-100 rounded shadow-1-strong"784
/>785
</div>786
<div class="col-lg-4 mb-2">787
<img788
src="https://mdbootstrap.com/img/new/standard/city/037.jpg"789
data-img="https://mdbootstrap.com/img/new/standard/city/041.jpg"790
alt="Lightbox image"791
class="w-100 rounded shadow-1-strong"792
/>793
</div>794
<div class="col-lg-4 mb-2">795
<img796
src="https://mdbootstrap.com/img/new/standard/city/038.jpg"797
data-img="https://mdbootstrap.com/img/new/standard/city/042.jpg"798
alt="Lightbox image"799
class="w-100 rounded shadow-1-strong"800
/>801
</div>802
<div class="col-lg-4 mb-2">803
<img804
src="https://mdbootstrap.com/img/new/standard/city/039.jpg"805
data-img="https://mdbootstrap.com/img/new/standard/city/043.jpg"806
alt="Lightbox image"807
class="w-100 rounded shadow-1-strong"808
/>809
</div>810
<div class="col-lg-4 mb-2">811
<img812
src="https://mdbootstrap.com/img/new/standard/city/040.jpg"813
data-img="https://mdbootstrap.com/img/new/standard/city/041.jpg"814
alt="Lightbox image"815
class="w-100 rounded shadow-1-strong"816
/>817
</div>818
<div class="col-lg-4 mb-2">819
<img820
src="https://mdbootstrap.com/img/new/standard/city/041.jpg"821
data-img="https://mdbootstrap.com/img/new/standard/city/032.jpg"822
alt="Lightbox image"823
class="w-100 rounded shadow-1-strong"824
/>825
</div>826
<div class="col-lg-4 mb-2">827
<img828
src="https://mdbootstrap.com/img/new/standard/city/042.jpg"829
data-img="https://mdbootstrap.com/img/new/standard/city/043.jpg"830
alt="Lightbox image"831
class="w-100 rounded shadow-1-strong"832
/>833
</div>834
<div class="col-lg-4 mb-2">835
<img836
src="https://mdbootstrap.com/img/new/standard/city/043.jpg"837
data-img="https://mdbootstrap.com/img/new/standard/city/041.jpg"838
alt="Lightbox image"839
class="w-100 rounded shadow-1-strong"840
/>841
</div>842
<div class="col-lg-4 mb-2">843
<img844
src="https://mdbootstrap.com/img/new/standard/city/044.jpg"845
data-img="https://mdbootstrap.com/img/new/standard/city/042.jpg"846
alt="Lightbox image"847
class="w-100 rounded shadow-1-strong"848
/>849
</div>850
<div class="col-lg-4 mb-2">851
<img852
src="https://mdbootstrap.com/img/new/standard/city/043.jpg"853
data-img="https://mdbootstrap.com/img/new/standard/city/043.jpg"854
alt="Lightbox image"855
class="w-100 rounded shadow-1-strong"856
/>857
</div>858
<div class="col-lg-4 mb-2">859
<img860
src="https://mdbootstrap.com/img/new/standard/city/041.jpg"861
data-img="https://mdbootstrap.com/img/new/standard/city/041.jpg"862
alt="Lightbox image"863
class="w-100 rounded shadow-1-strong"864
/>865
</div>866
<div class="col-lg-4 mb-2">867
<img868
src="https://mdbootstrap.com/img/new/standard/city/032.jpg"869
data-img="https://mdbootstrap.com/img/new/standard/city/032.jpg"870
alt="Lightbox image"871
class="w-100 rounded shadow-1-strong"872
/>873
</div>874
<div class="col-lg-4 mb-2">875
<img876
src="https://mdbootstrap.com/img/new/standard/city/043.jpg"877
data-img="https://mdbootstrap.com/img/new/standard/city/043.jpg"878
alt="Lightbox image"879
class="w-100 rounded shadow-1-strong"880
/>881
</div>882
</div>883
</div>884
885
</section>886
<!-- Section: Shared photos -->887
</section>888
<!--Section: Interlocutor data-->889
</div>890
<!-- Right column -->891
</div>892
</div>893
</main>894
<!--Main layout-->895
896
<!--Footer-->897
<footer></footer>898
<!--Footer-->xxxxxxxxxx1
.list-group-naked .list-group-item {2
background-color: transparent;3
border: none;4
}5
.list-group-item-action:focus,6
.list-group-item-action:hover {7
background-color: #eeeeee;8
}1
1
Console errors: 0