Activity

Introduction

Activity or timeline is perfectly design for Pangong.

HTML Structure

<div class="user-activity">
<div class="media">
<div class="media-img-wrap">
<div class="avatar avatar-sm">
<img src="dist/img/avatar2.jpg" alt="user" class="avatar-img rounded-circle">
</div>
</div>
<div class="media-body">
<div>
<span class="d-block mb-5"><span class="font-weight-500 text-dark text-capitalize">Laura Thompson</span><span class="pl-5">joined josh groben team.</span></span>
<span class="d-block font-13 mb-30">3 hours ago</span>
</div>
<div class="card d-inline-block w-sm-360p">
<div class="card-body">
<div class="d-flex flex-wrap">
<img class="d-86 rounded mb-15 mr-15" src="dist/img/img-thumb1.jpg" alt="thumb">
<div class="w-65">
<h6 class="mb-5">Team Josh Groben</h6>
<p>A fan club for josh groben songs</p>
<div class="avatar-group avatar-group-sm avatar-group-overlapped mt-10">
<div class="avatar">
<img src="dist/img/avatar1.jpg" alt="user" class="avatar-img rounded-circle">
</div>
<div class="avatar">
<img src="dist/img/avatar2.jpg" alt="user" class="avatar-img rounded-circle">
</div>
<div class="avatar">
<img src="dist/img/avatar3.jpg" alt="user" class="avatar-img rounded-circle">
</div>
<div class="avatar">
<img src="dist/img/avatar4.jpg" alt="user" class="avatar-img rounded-circle">
</div>
<div class="avatar">
<span class="avatar-text avatar-text-green rounded-circle"><span class="initial-wrap"><span>87+</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer text-muted justify-content-between">
<div><span class="text-dark">7,120</span> Members (87 new)</div>
<button class="btn btn-xs btn-primary ml-15 w-sm-100p">join</button>
</div>
</div>
</div>
</div>
<div class="media">
</div>
<div class="media">
</div>
</div>
‚Äč