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>