xxxxxxxxxx1
<!--Main Navigation-->2
<header class="" style="margin-top: 58px">3
<!-- Navbar-->4
<nav5
class="navbar navbar-expand-lg fixed-top navbar-light bg-white shadow-5"6
>7
<div class="container-fluid justify-content-between">8
<!-- Left elements -->9
<div class="d-flex">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/18.jpg"96
class="rounded-circle"97
height="22"98
alt=""99
loading="lazy"100
/>101
<strong class="d-none d-sm-block ml-1">Anna</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
<!-- Section: White background -->235
<section class="bg-white shadow-2 mb-4">236
<div class="container">237
<!-- Section: Images -->238
<section class="mb-5">239
<div240
class="bg-image rounded-bottom shadow-1-strong"241
style="242
background-image: url('https://mdbootstrap.com/img/new/slides/297.jpg');243
height: 400px;244
"245
></div>246
247
<div class="d-flex justify-content-center">248
<img249
src="https://mdbootstrap.com/img/new/avatars/18.jpg"250
class="rounded-circle shadow-3-strong position-absolute"251
alt=""252
style="width: 168px; margin-top: -140px"253
/>254
</div>255
</section>256
<!-- Section: Images -->257
258
<!-- Section: User data -->259
<section class="text-center border-bottom">260
<div class="row d-flex justify-content-center">261
<div class="col-lg-6">262
<h2><strong>Anna Doe</strong></h2>263
264
<p class="text-muted">265
Lorem ipsum dolor sit, amet consectetur adipisicing elit.266
Veritatis officia optio nihil, accusamus corrupti praesentium.267
</p>268
</div>269
</div>270
</section>271
<!-- Section: User data -->272
273
<!-- Section: Buttons -->274
<section275
class="d-flex justify-content-between align-items-center py-3"276
>277
<!-- Left -->278
<div>279
<button280
type="button"281
class="btn btn-link btn-lg bg-light px-3"282
data-ripple-color="dark"283
>284
Posts285
</button>286
<button287
type="button"288
class="btn btn-link btn-lg text-reset px-3"289
data-ripple-color="dark"290
>291
About292
</button>293
<button294
type="button"295
class="btn btn-link btn-lg text-reset px-3"296
data-ripple-color="dark"297
>298
Friends <small class="text-muted">1456</small>299
</button>300
<button301
type="button"302
class="btn btn-link btn-lg text-reset px-3"303
data-ripple-color="dark"304
>305
Photos306
</button>307
308
<div class="dropdown d-inline-block">309
<button310
class="btn btn-link btn-lg text-reset dropdown-toggle px-3"311
data-ripple-color="dark"312
type="button"313
id="dropdownMenuButton"314
data-toggle="dropdown"315
aria-expanded="false"316
>317
More318
</button>319
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">320
<li><a class="dropdown-item" href="#">Videos</a></li>321
<li><a class="dropdown-item" href="#">Sports</a></li>322
<li><a class="dropdown-item" href="#">Music</a></li>323
<li><a class="dropdown-item" href="#">Groups</a></li>324
</ul>325
</div>326
</div>327
<!-- Left -->328
329
<!-- Right -->330
<div class="d-none d-lg-block">331
<button332
type="button"333
class="btn btn-light bg-light px-3 mr-2 border-bottom"334
data-ripple-color="dark"335
>336
<i class="fas fa-edit mr-2"></i>Edit profile337
</button>338
<button339
type="button"340
class="btn btn-light bg-light px-3 mr-2"341
data-ripple-color="dark"342
>343
<i class="fas fa-eye"></i>344
</button>345
<button346
type="button"347
class="btn btn-light bg-light px-3 mr-2"348
data-ripple-color="dark"349
>350
<i class="fas fa-search"></i>351
</button>352
<button353
type="button"354
class="btn btn-light bg-light px-3 mr-2"355
data-ripple-color="dark"356
>357
<i class="fas fa-ellipsis-h"></i>358
</button>359
</div>360
<!-- Right -->361
</section>362
<!-- Section: Buttons -->363
</div>364
</section>365
<!-- Section: White background -->366
367
<!-- Section: Grey background -->368
<section>369
<div class="container">370
<div class="row">371
<div class="col-md-5 mb-4 mb-md-0">372
<!-- Section: Intro -->373
<section class="mb-4">374
<div class="card">375
<div class="card-body">376
<h5 class="card-title mt-1 mb-4"><strong>Intro</strong></h5>377
378
<ul class="list-unstyled text-muted">379
<li><i class="fas fa-briefcase fa-fw mr-3 mb-3"></i>Co-founder at <a class="text-reset font-weight-bold" href="">Material Design for Bootstrap</a></li>380
<li><i class="fas fa-graduation-cap fa-fw mr-3 mb-3"></i>Studied at <a class="text-reset font-weight-bold" href="">Harvard University</a></li>381
<li><i class="fas fa-home fa-fw mr-3 mb-3"></i>Lives in <a class="text-reset font-weight-bold" href="">New York, US</a></li>382
<li><i class="fas fa-rss fa-fw mr-3 mb-3"></i>Followed by <a class="text-reset font-weight-bold" href="">9254 people</a></li>383
<li><i class="fas fa-globe fa-fw mr-3 mb-3"></i><a class="text-reset font-weight-bold" href="">mdbootstrap.com</a></li>384
</ul>385
386
<button387
type="button"388
class="btn btn-light bg-light btn-block mb-4"389
data-ripple-color="dark"390
>391
Edit details392
</button>393
<button394
type="button"395
class="btn btn-light bg-light btn-block mb-4"396
data-ripple-color="dark"397
>398
Add Hobbies399
</button>400
401
<div class="lightbox mb-3">402
<div class="row gx-2">403
<div class="col-4 mb-2">404
<img405
src="https://mdbootstrap.com/img/new/standard/city/031.jpg"406
data-img="https://mdbootstrap.com/img/new/fluid/city/031.jpg"407
alt="Lightbox image"408
class="w-100 rounded shadow-1-strong"409
/>410
</div>411
<div class="col-4 mb-2">412
<img413
src="https://mdbootstrap.com/img/new/standard/city/032.jpg"414
data-img="https://mdbootstrap.com/img/new/fluid/city/032.jpg"415
alt="Lightbox image"416
class="w-100 rounded shadow-1-strong"417
/>418
</div>419
<div class="col-4 mb-2">420
<img421
src="https://mdbootstrap.com/img/new/standard/city/033.jpg"422
data-img="https://mdbootstrap.com/img/new/fluid/city/033.jpg"423
alt="Lightbox image"424
class="w-100 rounded shadow-1-strong"425
/>426
</div>427
<div class="col-4 mb-2">428
<img429
src="https://mdbootstrap.com/img/new/standard/city/034.jpg"430
data-img="https://mdbootstrap.com/img/new/fluid/city/034.jpg"431
alt="Lightbox image"432
class="w-100 rounded shadow-1-strong"433
/>434
</div>435
<div class="col-4 mb-2">436
<img437
src="https://mdbootstrap.com/img/new/standard/city/035.jpg"438
data-img="https://mdbootstrap.com/img/new/fluid/city/035.jpg"439
alt="Lightbox image"440
class="w-100 rounded shadow-1-strong"441
/>442
</div>443
<div class="col-4 mb-2">444
<img445
src="https://mdbootstrap.com/img/new/standard/city/037.jpg"446
data-img="https://mdbootstrap.com/img/new/fluid/city/037.jpg"447
alt="Lightbox image"448
class="w-100 rounded shadow-1-strong"449
/>450
</div>451
</div>452
</div>453
454
<button455
type="button"456
class="btn btn-light bg-light btn-block mb-2"457
data-ripple-color="dark"458
>459
Edit featured460
</button>461
</div>462
</div>463
</section>464
<!-- Section: Intro -->465
466
<!-- Section: Photos -->467
<section class="mb-4">468
<div class="card">469
<div class="card-body">470
<a href="" class="text-reset d-inline-block"471
><h5 class="card-title mt-1 mb-4">472
<strong>Photos</strong>473
</h5></a474
>475
476
<a477
class="btn btn-link btn-lg py-1 px-3 float-right d-inline-block"478
href="#"479
role="button"480
>See All Photos</a481
>482
483
<div class="lightbox mb-3">484
<div class="row gx-2">485
<div class="col-4 mb-2">486
<img487
src="https://mdbootstrap.com/img/new/standard/city/051.jpg"488
data-img="https://mdbootstrap.com/img/new/fluid/city/051.jpg"489
alt="Lightbox image"490
class="w-100 rounded shadow-1-strong"491
/>492
</div>493
<div class="col-4 mb-2">494
<img495
src="https://mdbootstrap.com/img/new/standard/city/052.jpg"496
data-img="https://mdbootstrap.com/img/new/fluid/city/052.jpg"497
alt="Lightbox image"498
class="w-100 rounded shadow-1-strong"499
/>500
</div>501
<div class="col-4 mb-2">502
<img503
src="https://mdbootstrap.com/img/new/standard/city/053.jpg"504
data-img="https://mdbootstrap.com/img/new/fluid/city/053.jpg"505
alt="Lightbox image"506
class="w-100 rounded shadow-1-strong"507
/>508
</div>509
<div class="col-4 mb-2">510
<img511
src="https://mdbootstrap.com/img/new/standard/city/054.jpg"512
data-img="https://mdbootstrap.com/img/new/fluid/city/054.jpg"513
alt="Lightbox image"514
class="w-100 rounded shadow-1-strong"515
/>516
</div>517
<div class="col-4 mb-2">518
<img519
src="https://mdbootstrap.com/img/new/standard/city/055.jpg"520
data-img="https://mdbootstrap.com/img/new/fluid/city/055.jpg"521
alt="Lightbox image"522
class="w-100 rounded shadow-1-strong"523
/>524
</div>525
<div class="col-4 mb-2">526
<img527
src="https://mdbootstrap.com/img/new/standard/city/057.jpg"528
data-img="https://mdbootstrap.com/img/new/fluid/city/057.jpg"529
alt="Lightbox image"530
class="w-100 rounded shadow-1-strong"531
/>532
</div>533
<div class="col-4 mb-2">534
<img535
src="https://mdbootstrap.com/img/new/standard/city/058.jpg"536
data-img="https://mdbootstrap.com/img/new/fluid/city/058.jpg"537
alt="Lightbox image"538
class="w-100 rounded shadow-1-strong"539
/>540
</div>541
<div class="col-4 mb-2">542
<img543
src="https://mdbootstrap.com/img/new/standard/city/059.jpg"544
data-img="https://mdbootstrap.com/img/new/fluid/city/059.jpg"545
alt="Lightbox image"546
class="w-100 rounded shadow-1-strong"547
/>548
</div>549
<div class="col-4 mb-2">550
<img551
src="https://mdbootstrap.com/img/new/standard/city/060.jpg"552
data-img="https://mdbootstrap.com/img/new/fluid/city/060.jpg"553
alt="Lightbox image"554
class="w-100 rounded shadow-1-strong"555
/>556
</div>557
</div>558
</div>559
</div>560
</div>561
</section>562
<!-- Section: Photos -->563
564
<!-- Section: Friends -->565
<section class="">566
<div class="card">567
<div class="card-body">568
<a href="" class="text-reset d-inline-block"569
><h5 class="card-title mt-1 mb-4">570
<strong>Friends</strong>571
<small class="text-muted">1456</small>572
</h5></a573
>574
575
<a576
class="btn btn-link btn-lg py-1 px-3 float-right d-inline-block"577
href="#"578
role="button"579
>See All Friends</a580
>581
582
<div class="row text-center">583
<div class="col-4 mb-2">584
<a href="" class="text-reset">585
<img586
src="https://mdbootstrap.com/img/new/avatars/2.jpg"587
class="w-100 rounded shadow-1-strong mb-1"588
alt=""589
/>590
591
<p><small>Noah Clayton</small></p>592
</a>593
</div>594
595
<div class="col-4 mb-2">596
<a href="" class="text-reset">597
<img598
src="https://mdbootstrap.com/img/new/avatars/3.jpg"599
class="w-100 rounded shadow-1-strong mb-1"600
alt=""601
/>602
603
<p><small>Eoin Rankin</small></p>604
</a>605
</div>606
607
<div class="col-4 mb-2">608
<a href="" class="text-reset">609
<img610
src="https://mdbootstrap.com/img/new/avatars/12.jpg"611
class="w-100 rounded shadow-1-strong mb-1"612
alt=""613
/>614
615
<p><small>Janelle Donaldson</small></p>616
</a>617
</div>618
619
<div class="col-4 mb-2">620
<a href="" class="text-reset">621
<img622
src="https://mdbootstrap.com/img/new/avatars/5.jpg"623
class="w-100 rounded shadow-1-strong mb-1"624
alt=""625
/>626
627
<p><small>Maggie Martins</small></p>628
</a>629
</div>630
631
<div class="col-4 mb-2">632
<a href="" class="text-reset">633
<img634
src="https://mdbootstrap.com/img/new/avatars/14.jpg"635
class="w-100 rounded shadow-1-strong mb-1"636
alt=""637
/>638
639
<p><small>Deborah Berry</small></p>640
</a>641
</div>642
643
<div class="col-4 mb-2">644
<a href="" class="text-reset">645
<img646
src="https://mdbootstrap.com/img/new/avatars/15.jpg"647
class="w-100 rounded shadow-1-strong mb-1"648
alt=""649
/>650
651
<p><small>Fraya Foreman</small></p>652
</a>653
</div>654
655
<div class="col-4 mb-2">656
<a href="" class="text-reset">657
<img658
src="https://mdbootstrap.com/img/new/avatars/16.jpg"659
class="w-100 rounded shadow-1-strong mb-1"660
alt=""661
/>662
663
<p><small>Laura Rawlings</small></p>664
</a>665
</div>666
667
<div class="col-4 mb-2">668
<a href="" class="text-reset">669
<img670
src="https://mdbootstrap.com/img/new/avatars/17.jpg"671
class="w-100 rounded shadow-1-strong mb-1"672
alt=""673
/>674
675
<p><small>Liyana Bartlett</small></p>676
</a>677
</div>678
679
<div class="col-4 mb-2">680
<a href="" class="text-reset">681
<img682
src="https://mdbootstrap.com/img/new/avatars/19.jpg"683
class="w-100 rounded shadow-1-strong mb-1"684
alt=""685
/>686
687
<p><small>Nellie Bright</small></p>688
</a>689
</div>690
</div>691
</div>692
</div>693
</section>694
<!-- Section: Friends -->695
</div>696
697
<div class="col-md-7 mb-4 mb-md-0">698
<!--Section: Create post-->699
<section class="mb-4">700
<!-- Card -->701
<div class="card">702
<div class="card-body">703
<div class="d-flex py-2">704
<a href="">705
<img706
src="https://mdbootstrap.com/img/new/avatars/18.jpg"707
class="border rounded-circle mr-2"708
alt=""709
style="height: 40px"710
/>711
</a>712
713
<button714
type="button"715
class="btn btn-light btn-block btn-rounded bg-light"716
data-ripple-color="dark"717
data-toggle="modal"718
data-target="#modalPost"719
>720
What's on your mind?721
</button>722
</div>723
<hr />724
<div class="d-flex justify-content-between">725
<button726
type="button"727
class="btn btn-link btn-lg"728
data-ripple-color="dark"729
>730
<i class="fas fa-video mr-2"></i>Live731
</button>732
<button733
type="button"734
class="btn btn-link btn-lg"735
data-ripple-color="dark"736
>737
<i class="fas fa-photo-video mr-2"></i>Photo/video738
</button>739
<button740
type="button"741
class="btn btn-link btn-lg"742
data-ripple-color="dark"743
>744
<i class="fas fa-smile mr-2"></i>Mood745
</button>746
</div>747
</div>748
</div>749
750
<!-- Card -->751
752
<!-- modalPost-->753
<div754
class="modal fade"755
id="modalPost"756
tabindex="-1"757
aria-labelledby="modalPostLabel"758
aria-hidden="true"759
>760
<div class="modal-dialog modal-dialog-centered">761
<div class="modal-content">762
<div class="modal-header">763
<h5 class="modal-title" id="modalPostLabel">764
Create post765
</h5>766
<button767
type="button"768
class="btn-close"769
data-dismiss="modal"770
aria-label="Close"771
></button>772
</div>773
<div class="modal-body">774
<!-- Message input -->775
<div class="form-outline mb-4">776
<textarea777
class="form-control"778
id="form4Example3"779
rows="4"780
></textarea>781
<label class="form-label" for="form4Example3"782
>Message</label783
>784
</div>785
786
<div class="d-flex justify-content-between">787
<strong>Add to the post</strong>788
789
<div>790
<button type="button" class="btn btn-link p-2 m-0">791
<i class="fas fa-video fa-lg"></i>792
</button>793
<button type="button" class="btn btn-link p-2 m-0">794
<i class="fas fa-photo-video fa-lg"></i>795
</button>796
<button type="button" class="btn btn-link p-2 m-0">797
<i class="fas fa-user-tag fa-lg"></i>798
</button>799
<button type="button" class="btn btn-link p-2 m-0">800
<i class="fas fa-map-marker-alt fa-lg"></i>801
</button>802
<button type="button" class="btn btn-link p-2 m-0">803
<i class="fas fa-grin-tongue-wink fa-lg"></i>804
</button>805
</div>806
</div>807
</div>808
<div class="modal-footer">809
<button type="button" class="btn btn-primary btn-block">810
Post811
</button>812
</div>813
</div>814
</div>815
</div>816
<!-- modalPost-->817
</section>818
<!--Section: Create post-->819
820
<!--Section: Newsfeed-->821
<section>822
<div class="card">823
<div class="card-body">824
<!-- Data -->825
<div class="d-flex mb-3">826
<a href="">827
<img828
src="https://mdbootstrap.com/img/new/avatars/18.jpg"829
class="border rounded-circle mr-2"830
alt=""831
style="height: 40px"832
/>833
</a>834
<div>835
<a href="" class="text-dark mb-0">836
<strong>Anna Doe</strong>837
</a>838
<a839
href=""840
class="text-muted d-block"841
style="margin-top: -6px"842
>843
<small>10h</small>844
</a>845
</div>846
</div>847
<!-- Description -->848
<div>849
<p>850
Lorem ipsum, dolor sit amet consectetur adipisicing851
elit. Atque ex non impedit corporis sunt nisi nam fuga852
dolor est, saepe vitae delectus fugit, accusantium qui853
nulla aut adipisci provident praesentium?854
</p>855
</div>856
</div>857
<!-- Media -->858
<div859
class="bg-image hover-overlay ripple rounded-0"860
data-ripple-color="light"861
>862
<img863
src="https://mdbootstrap.com/img/new/standard/people/077.jpg"864
class="w-100"865
/>866
<a href="#!">867
<div868
class="mask"869
style="background-color: rgba(251, 251, 251, 0.2)"870
></div>871
</a>872
</div>873
<!-- Media -->874
<!-- Interactions -->875
<div class="card-body">876
<!-- Reactions -->877
<div class="d-flex justify-content-between mb-3">878
<div>879
<a href="">880
<i class="fas fa-thumbs-up text-primary"></i>881
<i class="fas fa-heart text-danger"></i>882
<span>124</span>883
</a>884
</div>885
<div>886
<a href="" class="text-muted"> 8 comments </a>887
</div>888
</div>889
<!-- Reactions -->890
891
<!-- Buttons -->892
<div893
class="d-flex justify-content-between text-center border-top border-bottom mb-4"894
>895
<button896
type="button"897
class="btn btn-link btn-lg"898
data-ripple-color="dark"899
>900
<i class="fas fa-thumbs-up mr-2"></i>Like901
</button>902
<button903
type="button"904
class="btn btn-link btn-lg"905
data-ripple-color="dark"906
>907
<i class="fas fa-comment-alt mr-2"></i>Comment908
</button>909
<button910
type="button"911
class="btn btn-link btn-lg"912
data-ripple-color="dark"913
>914
<i class="fas fa-share mr-2"></i>Share915
</button>916
</div>917
<!-- Buttons -->918
919
<!-- Comments -->920
921
<!-- Input -->922
<div class="d-flex mb-3">923
<a href="">924
<img925
src="https://mdbootstrap.com/img/new/avatars/18.jpg"926
class="border rounded-circle mr-2"927
alt=""928
style="height: 40px"929
/>930
</a>931
<div class="form-outline w-100">932
<textarea933
class="form-control"934
id="textAreaExample"935
rows="2"936
></textarea>937
<label class="form-label" for="textAreaExample"938
>Write a comment</label939
>940
</div>941
</div>942
<!-- Input -->943
944
<!-- Answers -->945
946
<!-- Single answer -->947
<div class="d-flex mb-3">948
<a href="">949
<img950
src="https://mdbootstrap.com/img/new/avatars/8.jpg"951
class="border rounded-circle mr-2"952
alt=""953
style="height: 40px"954
/>955
</a>956
<div>957
<div class="bg-light rounded-lg px-3 py-1">958
<a href="" class="text-dark mb-0">959
<strong>Malcolm Dosh</strong>960
</a>961
<a href="" class="text-muted d-block">962
<small963
>Lorem ipsum dolor sit amet consectetur,964
adipisicing elit. Natus, aspernatur!</small965
>966
</a>967
</div>968
<a href="" class="text-muted small ml-3 mr-2"969
><strong>Like</strong></a970
>971
<a href="" class="text-muted small mr-2"972
><strong>Reply</strong></a973
>974
</div>975
</div>976
977
<!-- Single answer -->978
<div class="d-flex mb-3">979
<a href="">980
<img981
src="https://mdbootstrap.com/img/new/avatars/5.jpg"982
class="border rounded-circle mr-2"983
alt=""984
style="height: 40px"985
/>986
</a>987
<div>988
<div class="bg-light rounded-lg px-3 py-1">989
<a href="" class="text-dark mb-0">990
<strong>Rhia Wallis</strong>991
</a>992
<a href="" class="text-muted d-block">993
<small994
>Et tempora ad natus autem enim a distinctio995
quaerat asperiores necessitatibus commodi dolorum996
nam perferendis labore delectus, aliquid placeat997
quia nisi magnam.</small998
>999
</a>1000
</div>1001
<a href="" class="text-muted small ml-3 mr-2"1002
><strong>Like</strong></a1003
>1004
<a href="" class="text-muted small mr-2"1005
><strong>Reply</strong></a1006
>1007
</div>1008
</div>1009
1010
<!-- Single answer -->1011
<div class="d-flex mb-3">1012
<a href="">1013
<img1014
src="https://mdbootstrap.com/img/new/avatars/6.jpg"1015
class="border rounded-circle mr-2"1016
alt=""1017
style="height: 40px"1018
/>1019
</a>1020
<div>1021
<div class="bg-light rounded-lg px-3 py-1">1022
<a href="" class="text-dark mb-0">1023
<strong>Marcie Mcgee</strong>1024
</a>1025
<a href="" class="text-muted d-block">1026
<small>1027
Officia asperiores autem sit rerum architecto a1028
deserunt doloribus obcaecati, velit ab at, ad1029
delectus sapiente! Voluptatibus quaerat suscipit1030
in nostrum necessitatibus illum nemo quo beatae1031
obcaecati quidem optio fugit ipsam distinctio,1032
illo repellendus porro sequi alias perferendis ea1033
soluta maiores nisi eligendi? Mollitia debitis1034
quam ex, voluptates cupiditate magnam1035
fugiat.</small1036
>1037
</a>1038
</div>1039
<a href="" class="text-muted small ml-3 mr-2"1040
><strong>Like</strong></a1041
>1042
<a href="" class="text-muted small mr-2"1043
><strong>Reply</strong></a1044
>1045
</div>1046
</div>1047
1048
<!-- Single answer -->1049
<div class="d-flex mb-3">1050
<a href="">1051
<img1052
src="https://mdbootstrap.com/img/new/avatars/10.jpg"1053
class="border rounded-circle mr-2"1054
alt=""1055
style="height: 40px"1056
/>1057
</a>1058
<div>1059
<div class="bg-light rounded-lg px-3 py-1">1060
<a href="" class="text-dark mb-0">1061
<strong>Hollie James</strong>1062
</a>1063
<a href="" class="text-muted d-block">1064
<small1065
>Voluptatibus quaerat suscipit in nostrum1066
necessitatibus</small1067
>1068
</a>1069
</div>1070
<a href="" class="text-muted small ml-3 mr-2"1071
><strong>Like</strong></a1072
>1073
<a href="" class="text-muted small mr-2"1074
><strong>Reply</strong></a1075
>1076
</div>1077
</div>1078
1079
<!-- Answers -->1080
1081
<!-- Comments -->1082
</div>1083
<!-- Interactions -->1084
</div>1085
</section>1086
<!--Section: Newsfeed-->1087
</div>1088
</div>1089
</div>1090
</section>1091
<!-- Section: Grey background -->1092
</main>1093
<!--Main layout-->1094
1095
<!--Footer-->1096
<footer></footer>1097
<!--Footer-->xxxxxxxxxx1
body {2
background-color: #f0f2f5;3
}4
5
.bg-light {6
background-color: #f0f2f5 !important;7
}8
.container {9
max-width: 1140px;10
}1
1
Console errors: 0