<div class="header">
<span>Facebook</span>
</div>
<div class="container my-5">
<div class="row">
<div class="col-md-9 col-lg-7 mx-md-auto">
<div class="card">
<div class="card-header post-header">
<div class="media">
<img class="rounded-circle avatar z-depth-0" src="https://i.imgur.com/Kh8zuRc.jpg" alt="Avatar">
<div class="media-body ml-2">
<h6><a href="#">Metallica</a></h6>
<span class="text-muted"><small>12 hours ago</small></span>
</div>
</div>
</div>
<div class="card-body py-0">
<p class="post-text">
See you at the next <a href="#">#WorldWired</a> Metallica tour shows!
</p>
<div id="mdb-lightbox-ui"></div>
<div class="d-grid mdb-lightbox">
<figure class="item">
<a href="https://i.imgur.com/d2Pi9jD.jpg" data-size="960x640">
<img src="https://i.imgur.com/d2Pi9jD.jpg"/>
</a>
</figure>
<figure class="item">
<a href="https://i.imgur.com/pSBKCVg.jpg" data-size="960x640">
<img src="https://i.imgur.com/pSBKCVg.jpg"/>
</a>
</figure>
<figure class="item">
<a href="https://i.imgur.com/lHdRwVT.jpg" data-size="960x640">
<img src="https://i.imgur.com/lHdRwVT.jpg"/>
</a>
</figure>
<figure class="item">
<a href="https://i.imgur.com/ucJb5zZ.jpg" data-size="960x640">
<img src="https://i.imgur.com/ucJb5zZ.jpg"/>
</a>
</figure>
<figure class="item">
<a href="https://i.imgur.com/Qpbxt1h.jpg" data-size="960x640">
<img src="https://i.imgur.com/Qpbxt1h.jpg"/>
</a>
</figure>
<figure class="item">
<a href="https://i.imgur.com/7L8s8La.jpg" data-size="960x640">
<img src="https://i.imgur.com/7L8s8La.jpg"/>
</a>
</figure>
<figure class="item">
<a href="https://i.imgur.com/8GC0zU1.jpg" data-size="960x640">
<img src="https://i.imgur.com/8GC0zU1.jpg"/>
</a>
</figure>
<figure class="item">
<a href="https://i.imgur.com/pm1kc4d.jpg" data-size="960x640">
<img src="https://i.imgur.com/pm1kc4d.jpg"/>
</a>
</figure>
<figure class="item">
<a href="https://i.imgur.com/59DaQcm.jpg" data-size="960x640">
<img src="https://i.imgur.com/59DaQcm.jpg"/>
</a>
</figure>
<figure class="item">
<a href="https://i.imgur.com/awVOq0y.jpg" data-size="960x640">
<img src="https://i.imgur.com/awVOq0y.jpg"/>
</a>
</figure>
<figure class="item">
<a href="https://i.imgur.com/0oNITlM.jpg" data-size="960x640">
<img src="https://i.imgur.com/0oNITlM.jpg"/>
</a>
</figure>
<figure class="item">
<a href="https://i.imgur.com/8Nab17h.jpg" data-size="960x640">
<img src="https://i.imgur.com/8Nab17h.jpg"/>
</a>
</figure>
</div>
</div>
<div class="card-footer post-actions">
<div class="d-flex">
<div class="md-form input-group mt-0 mb-3">
<div class="input-group-prepend">
<span class="input-group-text md-addon">
<img class="rounded-circle"
src="https://secure.gravatar.com/avatar/22077f042101df62b9e93adc93221f1f?s=24&d=mm&r=g"/></span>
</div>
<input type="text" class="form-control special-form-control pl-0"
placeholder="Write a comment...">
</div>
<div class="ml-auto actions-menu">
<a class="btn-floating hoverable btn-sm">
<i class="fas fa-thumbs-up"></i>
</a>
<a class="btn-floating hoverable btn-sm">
<i class="fas fa-comment"></i>
</a>
<a class="btn-floating hoverable btn-sm">
<i class="fas fa-share"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
body {
background-color: #e9ebee;
color: #1d2129;
}
a {
color: #365899;
}
.post-header {
background: transparent;
border-bottom: 0;
}
.post-header h6 {
font-size: .9rem;
font-weight: 700;
margin-bottom: 0;
}
.post-text {
font-size: .875rem;
}
.avatar {
width: 36px;
border: 1px solid rgba(0, 0, 0, .15);
}
.post-actions {
background: transparent;
border-top: 0;
}
.header {
display: block;
width: 100%;
height: 48px;
background-color: #4267b2;
color: #fff;
}
.header > span {
display: block;
padding: 12px 15px;
}
.d-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
grid-gap: 5px;
}
.item {
position: relative;
}
.item:nth-child(2) {
grid-column: 3;
grid-row: 2 / 4;
}
.item:nth-child(5) {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.item a {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
overflow: hidden;
}
.item img {
height: 100%;
width: auto;
}
.special-form-control {
padding-left: 0;
font-size: .785rem;
}
.actions-menu {
flex-wrap: nowrap;
display: flex;
}
.btn-floating {
background: #eee;
}
.btn-floating:not(:hover) {
box-shadow: none !important;
}
.btn-floating i {
color: #1d2129;
}
$(function () {
$("#mdb-lightbox-ui").load("https://mdbootstrap.com/wp-content/themes/mdbootstrap4/mdb-addons/mdb-lightbox-ui.html");
});