<template>
	<div>
		<div class="pa-3">
			<p class="mb-0">Today</p>
		</div>
		<div class="media-listing">
			<ul class="list-unstyled">
				<li class="media border-bottom-light-1">
					<img src="/static/avatars/user-7.jpg" class="rounded-circle mr-4 img-responsive" alt="user profile" width="60" height="60" />
					<div class="media-body">
						<span class="fw-bold">Louise Kate <span class="small">@louisekate</span></span>
						<p class="mb-0">The new common language will be more simple and regular than the existing European languages. It will be as simple as Occidental; in fact, it will be Occidental.</p>
					</div>
				</li>
				<li class="media border-bottom-light-1">
					<img src="/static/avatars/user-8.jpg" class="rounded-circle mr-4 img-responsive" alt="user profile" width="60" height="60" />
					<div class="media-body">
						<span class="fw-bold">Annie Lee <span class="small">@Annielee</span></span>
						<p class="mb-0">Posted new photo</p>
						<div class="img-post">
							<img src="/static/img/profile-post.jpg" class="img-responsive"/>
						</div>
					</div>
				</li>
				<li class="media border-bottom-light-1">
					<img src="/static/avatars/user-9.jpg" class="rounded-circle mr-4 img-responsive" alt="user profile" width="60" height="60" />
					<div class="media-body">
						<span class="fw-bold mb-4 d-block">Mark Anthony <span class="small">@louisekate</span></span>
						<div class="card pa-3 primary white--text">
							<h3 class="mb-0">The new common language will be more simple and regular than the existing European languages.</h3>
						</div>
					</div>
				</li>
				<li class="media border-bottom-light-1">
					<img src="/static/avatars/user-10.jpg" class="rounded-circle mr-4 img-responsive" alt="user profile" width="60" height="60" />
					<div class="media-body">
						<span class="fw-bold">Annie Lee <span class="small">@louisekate</span></span>
						<p>Posted 4 photos</p>
						<ul class="list-inline row layout wrap">
							<li class="flex xs6 sm3 md3 lg3">
								<img src="/static/img/gallery1.jpg" class="img-responsive" width="200" height="200" alt="image post" />
							</li>
							<li class="flex xs6 sm3 md3 lg3">
								<img src="/static/img/gallery2.jpg" class="img-responsive" width="200" height="200" alt="image post" />
							</li>
							<li class="flex xs6 sm3 md3 lg3">
								<img src="/static/img/gallery3.jpg" class="img-responsive" width="200" height="200" alt="image post" />
							</li>
							<li class="flex xs6 sm3 md3 lg3">
								<img src="/static/img/gallery4.jpg" class="img-responsive" width="200" height="200" alt="image post" />
							</li>
						</ul>
					</div>
				</li>
				<li class="media border-bottom-light-1">
					<img src="/static/avatars/user-11.jpg" class="rounded-circle mr-4 img-responsive" alt="user profile" width="60" height="60" />
					<div class="media-body">
						<span class="fw-bold">Mark Anthony <span class="small">@louisekate</span></span>
						<p>Postd a new blog in website</p>
						<div class="media media-full">
							<img src="/static/img/post-2.png" class="img-responsive mr-4" alt="post image" width="300" height="180" />
							<div class="media-body">
							<h5 class="fw-bold">How to setup your estore in 10 min.</h5>
							<p>Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper </p>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>
