xxxxxxxxxx1
<header>2
<!-- Navbar -->3
<nav class="navbar navbar-expand-lg navbar-light bg-light">4
<!-- Container wrapper -->5
<div class="container-fluid">6
<!-- Toggle button -->7
<button8
class="navbar-toggler"9
type="button"10
data-toggle="collapse"11
data-target="#navbarCenteredExample"12
aria-controls="navbarCenteredExample"13
aria-expanded="false"14
aria-label="Toggle navigation"15
>16
<i class="fas fa-bars"></i>17
</button>18
19
<!-- Collapsible wrapper -->20
<div21
class="collapse navbar-collapse justify-content-center"22
id="navbarCenteredExample"23
>24
<div class="container">25
<div class="row">26
<div class="col-md-1"></div>27
<div class="col-md-5">28
<a class="navbar-brand" href="#">29
<img30
src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"31
height="30"32
alt=""33
loading="lazy"34
/>35
</a>36
</div>37
<div class="col-md-2">38
<form class="d-flex input-group w-auto">39
<input40
type="search"41
class="form-control"42
placeholder="Search"43
aria-label="Search"44
/>45
</form>46
</div>47
<div class="col-md-3">48
<ul class="navbar-nav justify-content-center">49
<!-- Icons -->50
<li class="nav-item mr-3 mr-lg-0">51
<a class="nav-link" href="#">52
<i class="fas fa-home fa-lg text-dark"></i>53
</a>54
</li>55
<li class="nav-item mr-3 mr-lg-0">56
<a class="nav-link" href="#">57
<i class="fas fa-paper-plane fa-lg text-dark"></i>58
</a>59
</li>60
<li class="nav-item mr-3 mr-lg-0">61
<a class="nav-link" href="#">62
<i class="far fa-compass fa-lg text-dark"></i>63
</a>64
</li>65
<li class="nav-item mr-3 mr-lg-0">66
<a class="nav-link" href="#">67
<i class="far fa-heart fa-lg text-dark"></i>68
</a>69
</li>70
<!-- Avatar -->71
<li class="nav-item dropdown">72
<a73
class="nav-link dropdown-toggle d-flex align-items-center"74
href="#"75
id="navbarDropdownMenuLink"76
role="button"77
data-toggle="dropdown"78
aria-expanded="false"79
>80
<img81
src="https://mdbootstrap.com/img/new/avatars/1.jpg"82
class="rounded-circle"83
height="22"84
alt=""85
loading="lazy"86
/>87
</a>88
<ul89
class="dropdown-menu"90
aria-labelledby="navbarDropdownMenuLink"91
>92
<li>93
<a class="dropdown-item" href="#">My profile</a>94
</li>95
<li><a class="dropdown-item" href="#">Settings</a></li>96
<li><a class="dropdown-item" href="#">Logout</a></li>97
</ul>98
</li>99
</ul>100
</div>101
</div>102
</div>103
</div>104
<!-- Collapsible wrapper -->105
</div>106
<!-- Container wrapper -->107
</nav>108
<!-- Navbar -->109
</header>110
111
<main>112
<div class="container my-5">113
<div class="row">114
<div class="col-md-1"></div>115
<div class="col-md-7">116
<section class="story-container" id="story">117
<ul>118
<li>119
<div class="story">120
<img121
src="https://mdbootstrap.com/img/new/avatars/1.jpg"122
class="rounded-circle"123
height="50"124
alt="Avatar"125
/>126
</div>127
<span>billy_M</span>128
</li>129
<li>130
<div class="story">131
<img132
src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg"133
class="rounded-circle"134
height="50"135
alt="Avatar"136
/>137
</div>138
<span>billy_M</span>139
</li>140
<li>141
<div class="story">142
<img143
src="https://mdbootstrap.com/img/new/avatars/2.jpg"144
class="rounded-circle"145
height="50"146
alt="Avatar"147
/>148
</div>149
<span>John_doe</span>150
</li>151
<li>152
<div class="story">153
<img154
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg"155
class="rounded-circle"156
height="50"157
alt="Avatar"158
/>159
</div>160
<span>judit_3</span>161
</li>162
<li>163
<div class="story">164
<img165
src="https://mdbootstrap.com/img/new/avatars/4.jpg"166
class="rounded-circle"167
height="50"168
alt="Avatar"169
/>170
</div>171
<span>paulaa</span>172
</li>173
<li>174
<div class="story">175
<img176
src="https://mdbootstrap.com/img/new/avatars/5.jpg"177
class="rounded-circle"178
height="50"179
alt="Avatar"180
/>181
</div>182
<span>julia_art</span>183
</li>184
<li>185
<div class="story">186
<img187
src="https://mdbootstrap.com/img/new/avatars/6.jpg"188
class="rounded-circle"189
height="50"190
alt="Avatar"191
/>192
</div>193
<span>berta_ng</span>194
</li>195
<li>196
<div class="story">197
<img198
src="https://mdbootstrap.com/img/new/avatars/15.jpg"199
class="rounded-circle"200
height="50"201
alt="Avatar"202
/>203
</div>204
<span>my_art</span>205
</li>206
<li>207
<div class="story">208
<img209
src="https://mdbootstrap.com/img/new/avatars/17.jpg"210
class="rounded-circle"211
height="50"212
alt="Avatar"213
/>214
</div>215
<span>photo_me</span>216
</li>217
<li>218
<div class="story">219
<img220
src="https://mdbootstrap.com/img/new/avatars/10.jpg"221
class="rounded-circle"222
height="50"223
alt="Avatar"224
/>225
</div>226
<span>rae</span>227
</li>228
<li>229
<div class="story">230
<img231
src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg"232
class="rounded-circle"233
height="50"234
alt="Avatar"235
/>236
</div>237
<span>billy_M</span>238
</li>239
</ul>240
</section>241
242
<section class="newsfeed my-5">243
<div class="post">244
<div class="card">245
<div class="card-body">246
<div class="container">247
<!-- Author -->248
<div class="row">249
<div class="col-md-8">250
<div class="d-flex story">251
<img252
src="https://mdbootstrap.com/img/new/avatars/4.jpg"253
class="rounded-circle"254
height="40"255
alt="Avatar"256
/>257
<div class="mt-2">258
<a href="" class="text-dark">259
<strong class="mt-5 ml-2">julia_art</strong>260
</a>261
</div>262
</div>263
</div>264
<div class="col-md-4">265
<i266
class="fas fa-ellipsis-h fa-lf mt-2 float-right"267
></i>268
</div>269
</div>270
</div>271
</div>272
<!-- Photo -->273
<div274
class="bg-image hover-overlay ripple shadow-1-strong rounded-0"275
data-ripple-color="light"276
>277
<img278
src="https://mdbootstrap.com/img/new/standard/city/092.jpg"279
class="w-100"280
/>281
<a href="#!">282
<div283
class="mask"284
style="background-color: rgba(251, 251, 251, 0.2)"285
></div>286
</a>287
</div>288
289
<!-- Interactions -->290
<div class="card-body">291
<div class="container">292
<div class="row">293
<div class="col-md-8">294
<i class="far fa-heart fa-lg ml-0"></i>295
<i class="far fa-comment fa-lg mx-2"></i>296
<i class="far fa-paper-plane fa-lg"></i>297
</div>298
<div class="col-md-4 text-right">299
<i class="far fa-bookmark fa-lg"></i>300
</div>301
</div>302
<!-- Liked by -->303
<div class="row mt-1">304
<div class="col-md-8 mt-1">305
<img306
class="rounded-circle"307
src="https://mdbootstrap.com/img/new/avatars/7.jpg"308
alt="avatar"309
style="width: 20px"310
/>311
<small312
>Liked by <strong>janet_t</strong> and313
<strong>500,678</strong> others</small314
>315
</div>316
</div>317
<!-- Description -->318
<div class="row">319
<div class="col-md-12 mt-1">320
<p>321
<strong class="text-dark">juliar.art</strong> Lorem,322
ipsum dolor sit amet consectetur adipisicing elit.323
Eveniet dolorem iste enim odit corporis quos dolore324
rem... <small class="my-1">more</small>325
</p>326
</div>327
</div>328
<!-- Comments -->329
<div class="row">330
<small class="my-1">View all 2137 comments</small>331
<p class="mb-0">332
<strong class="text-dark">alex_123</strong> Lorem,333
ipsum dolor.334
</p>335
<p>336
<strong class="text-dark">janet_t</strong> Lorem ipsum337
dolor sit amet consectetur adipisicing elit.338
Necessitatibus corporis omnis facilis possimus.339
</p>340
<small class="my-1">22 hours ago</small>341
</div>342
343
<!-- Comment form -->344
<div class="row mt-2">345
<hr />346
<div class="col-md-11">347
<div class="form-outline">348
<input349
type="text"350
id="form1"351
class="form-control"352
placeholder="Leave a comment"353
/>354
</div>355
</div>356
<div class="col-md-1">357
<p class="text-info mt-1">Post</p>358
</div>359
</div>360
</div>361
</div>362
</div>363
</div>364
<div class="post my-5">365
<div class="card">366
<div class="card-body">367
<div class="container">368
<div class="row">369
<div class="col-md-8">370
<!-- Data -->371
<div class="d-flex">372
<a href="">373
<img374
src="https://mdbootstrap.com/img/new/avatars/18.jpg"375
class="border rounded-circle mr-2"376
alt=""377
style="height: 40px"378
/>379
</a>380
<div class="mt-2">381
<a href="" class="text-dark">382
<strong class="mt-5">jane_photos</strong>383
</a>384
</div>385
</div>386
</div>387
<div class="col-md-4">388
<i389
class="fas fa-ellipsis-h fa-lf mt-2"390
style="float: right"391
></i>392
</div>393
</div>394
</div>395
</div>396
<!-- Media -->397
<div398
class="bg-image hover-overlay ripple rounded-0"399
data-ripple-color="light"400
>401
<img402
src="https://mdbootstrap.com/img/new/standard/city/090.jpg"403
class="w-100"404
/>405
<a href="#!">406
<div407
class="mask"408
style="background-color: rgba(251, 251, 251, 0.2)"409
></div>410
</a>411
</div>412
<!-- Media -->413
<!-- Interactions -->414
<div class="card-body">415
<div class="container">416
<div class="row">417
<div class="col-md-8">418
<i class="far fa-heart fa-lg ml-0"></i>419
<i class="far fa-comment fa-lg ml-2"></i>420
<i class="far fa-paper-plane fa-lg ml-2"></i>421
</div>422
<div class="col-md-4 text-right">423
<i class="far fa-bookmark fa-lg"></i>424
</div>425
</div>426
<!-- Liked by section -->427
<div class="row">428
<div class="col-md-8 mt-1">429
<img430
class="rounded-circle"431
src="https://mdbootstrap.com/img/new/avatars/8.jpg"432
alt="avatar"433
style="width: 20px"434
/>435
<small436
>Liked by <strong>johhny_h</strong> and437
<strong>100,679 others</strong></small438
>439
</div>440
</div>441
442
<!-- Post descripion -->443
<div class="row">444
<div class="col-md-12 mt-1 mb-0">445
<p class="mb-0">446
<strong class="text-dark">jane_photos</strong> Lorem447
ipsum dolor, sit amet consectetur adipisicing elit.448
Consequatur esse quas voluptatem, voluptate,449
deserunt iure quod. quas voluptatem, voluptate,450
deserunt iure quod451
</p>452
</div>453
<small class="my-1" style="color: grey"454
>View all 2137 comments</small455
>456
<p class="mb-0">457
<strong class="text-dark">johhny_shine</strong> Lorem458
ipsum459
</p>460
<p class="mb-0">461
<strong class="text-dark">billy_the_kid</strong> Lorem462
ipsum dolor, sit amet consectetur adipisicing elit.463
Consequatur esse quas voluptatem, voluptate, deserunt464
iure quod.465
</p>466
</div>467
<small class="ml-3 mt-2" style="color: grey"468
>22 hours ago</small469
>470
<div class="row mt-2">471
<hr />472
<div class="col-md-11">473
<div class="form-outline">474
<input475
type="text"476
id="form1"477
class="form-control"478
placeholder="Leave a comment"479
/>480
</div>481
</div>482
<div class="col-md-1">483
<p class="text-info mt-1">Post</p>484
</div>485
</div>486
</div>487
</div>488
</div>489
</div>490
</section>491
</div>492
<div class="col-md-3 d-md-none d-lg-block">493
<section class="mt-3">494
<!-- Author -->495
<div class="row">496
<div class="col-md-3">497
<img498
src="https://mdbootstrap.com/img/new/avatars/1.jpg"499
class="rounded-circle"500
height="60"501
alt="Avatar"502
/>503
</div>504
<div class="col-md-9">505
<ul class="ml-0 pl-1 mt-1 list-unstyled">506
<li>507
<p class="ml-3 text-dark mb-0 mt-1">508
<strong>bill_the_programmer.js</strong>509
</p>510
</li>511
<li>512
<span class="ml-3 text-dark">Bill Doe</span>513
</li>514
</ul>515
</div>516
</div>517
518
<!-- Suggestions -->519
<div>520
<small>Suggestions For You</small>521
<span class="float-right">See All</span>522
</div>523
524
<!-- Suggested users -->525
<div class="row">526
<div class="col-md-2">527
<img528
src="https://mdbootstrap.com/img/new/avatars/10.jpg"529
class="rounded-circle mt-2"530
height="40"531
alt="Avatar"532
/>533
</div>534
<div class="col-md-8">535
<ul class="ml-0 pl-1 mt-1 list-unstyled">536
<li>537
<small class="user-name"><strong>john_23</strong></small>538
</li>539
<li>540
<span class="user-name"541
>Followed by john_1 + 20 more</span542
>543
</li>544
</ul>545
</div>546
<div class="col-md-2">547
<p class="user-name mt-4 text-primary">Follow</p>548
</div>549
</div>550
<div class="row">551
<div class="col-md-2">552
<img553
src="https://mdbootstrap.com/img/new/avatars/11.jpg"554
class="rounded-circle mt-2"555
height="40"556
alt="Avatar"557
/>558
</div>559
<div class="col-md-8">560
<ul class="ml-0 pl-1 mt-1 list-unstyled">561
<li>562
<small class="user-name"563
><strong>donald_the_duck</strong></small564
>565
</li>566
<li>567
<span class="user-name"568
>Followed by john_1 + 35 more</span569
>570
</li>571
</ul>572
</div>573
<div class="col-md-2">574
<p class="user-name mt-4 text-primary">Follow</p>575
</div>576
</div>577
<div class="row">578
<div class="col-md-2">579
<img580
src="https://mdbootstrap.com/img/new/avatars/4.jpg"581
class="rounded-circle mt-2"582
height="40"583
alt="Avatar"584
/>585
</div>586
<div class="col-md-8">587
<ul class="ml-0 pl-1 mt-1 list-unstyled">588
<li>589
<small class="user-name"590
><strong>bill_the_programmer.js</strong></small591
>592
</li>593
<li>594
<span class="user-name">Followed by john_1 +10 more</span>595
</li>596
</ul>597
</div>598
<div class="col-md-2">599
<p class="user-name mt-4 text-primary">Follow</p>600
</div>601
</div>602
<div class="row">603
<div class="col-md-2">604
<img605
src="https://mdbootstrap.com/img/new/avatars/1.jpg"606
class="rounded-circle mt-2"607
height="40"608
alt="Avatar"609
/>610
</div>611
<div class="col-md-8">612
<ul class="ml-0 pl-1 mt-1 list-unstyled">613
<li>614
<small class="user-name"615
><strong>bill_the_programmer.js</strong></small616
>617
</li>618
<li>619
<span class="user-name">Followed by john_1 +10 more</span>620
</li>621
</ul>622
</div>623
<div class="col-md-2">624
<p class="user-name mt-4 text-primary">Follow</p>625
</div>626
</div>627
</section>628
</div>629
</div>630
</div>631
</main>xxxxxxxxxx1
body {2
background-color: #fafafa;3
}4
5
#story {6
background-color: #fff;7
margin: auto;8
border: 1px solid #dbdbdb;9
height: 110px;10
border-radius: 5px;11
overflow: hidden;12
position: relative;13
}14
15
.story {16
border-radius: 50%;17
}18
19
.story-container ul {20
list-style-type: none;21
display: flex;22
overflow-y: auto;23
padding: 20px;24
}25
26
.story-container ul li {27
padding: 0 10px;28
display: flex;29
flex-direction: column;30
align-items: center;31
justify-content: center;32
}33
34
.story-container ul li .story {35
padding: 2px;36
background: linear-gradient(37
45deg,38
#f09433 0%,39
#e6683c 25%,40
#dc2743 50%,41
#cc2366 75%,42
#bc1888 100%43
);44
}45
46
.user-name {47
font-size: 12px;48
}1
1
Console errors: 0