<div class="container mt-100 mb-100">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="comment-widgets m-b-20">
<div class="d-flex flex-row comment-row">
<div class="p-2"><span class="round"><img src="https://i.imgur.com/uIgDDDd.jpg" alt="user" width="50"></span></div>
<div class="comment-text w-100 mt-2">
<h6>Samso Nagaro Like your home work</h6>
<div class="comment-time"> <span class="label label-info">Today</span> <span class="action-icons"> </span> </div>
<p>Lession 5</p>
</div>
</div>
</div>
<div class="comment-widgets m-b-20 width8">
<div class="d-flex flex-row comment-row">
<div class="p-2"><span class="round"><img src="https://i.imgur.com/cAdLHeY.jpg" alt="user" width="50"></span></div>
<div class="comment-text w-100 mt-2">
<h6>Tuli James commented on your home work</h6>
<div class="comment-time"> <span class="label label-info">Yesterday</span> <span class="action-icons"> </span> </div>
<p class="w-100">Lession 8 - Computer Netowrk</p>
</div>
</div>
</div>
<div class="comment-widgets m-b-20 width8">
<div class="d-flex flex-row comment-row">
<div class="p-2"><span class="round"><img src="https://img.icons8.com/dusk/100/000000/diamond.png" alt="user" width="50"></span></div>
<div class="comment-text w-100 mt-2">
<h6>+10 crystal earned</h6>
<div class="comment-time"> <span class="label label-success">12 June, 2019</span> <span class="action-icons"> </span> </div>
<p class="w-100">Marathon</p>
</div>
</div>
</div>
<div class="comment-widgets m-b-20 width8">
<div class="d-flex flex-row comment-row">
<div class="p-2"><span class="round"><img src="https://img.icons8.com/flat_round/64/000000/vote-badge.png" alt="user" width="50"></span></div>
<div class="comment-text w-100 mt-2">
<h6>+20 vista badge earned</h6>
<div class="comment-time"> <span class="label label-success">9 June, 2019</span> <span class="action-icons"> </span> </div>
<p class="w-100">Silvester</p>
</div>
</div>
</div>
<div class="comment-widgets m-b-20 width8">
<div class="d-flex flex-row comment-row">
<div class="p-2"><span class="round"><img src="https://i.imgur.com/tT8rjKC.jpg" alt="user" width="50"></span></div>
<div class="comment-text w-100 mt-2">
<h6>Simona Like your comment</h6>
<div class="comment-time"> <span class="label label-info">7 June, 2019</span> <span class="action-icons"> </span> </div>
<p class="w-100">comment #435435</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@import url(http://fonts.googleapis.com/css?family=Calibri:400,300,700);
body {
background-color: #D32F2F;
font-family: 'Calibri', sans-serif !important
}
.card-no-border .card {
border: 0px;
border-radius: 4px;
-webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05)
}
.card-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.25rem
}
.comment-widgets .comment-row:hover {
background: rgba(0, 0, 0, 0.02);
cursor: pointer
}
.comment-widgets .comment-row {
border-bottom: 1px solid rgba(120, 130, 140, 0.13);
padding: 15px
}
.label {
padding: 3px 10px;
line-height: 13px;
color: #ffffff;
font-weight: 400;
border-radius: 4px;
font-size: 75%
}
.round img {
border-radius: 100%
}
.label-info {
background-color: #1976d2
}
.label-success {
background-color: green
}
.comment-time {
float: right
}
.mt-100 {
margin-top: 100px
}
.mb-100 {
margin-bottom: 100px
}