Album - MP3 Zing

by Van Hai Le

HTML

<div class="album-chart">
	<div class="album-cover">
		<div class="overlay">
			<span>02</span>
		</div>
	</div>
	<div class="album-info">
		<div class="album-title">Thanh Pho Buon</div>
		<div class="album-singer">Luu Anh Loan</div>
		<div class="album-count">3,545</div>
	</div>
</div>
<div class="album-chart">
	<div class="album-cover">
		<div class="overlay">
			<span>02</span>
		</div>
	</div>
	<div class="album-info">
		<div class="album-title">Thanh Pho Buon</div>
		<div class="album-singer">Luu Anh Loan</div>
		<div class="album-count">3,545</div>
	</div>
</div>
<div class="album-chart">
	<div class="album-cover">
		<div class="overlay">
			<span>02</span>
		</div>
	</div>
	<div class="album-info">
		<div class="album-title">Thanh Pho Buon</div>
		<div class="album-singer">Luu Anh Loan</div>
		<div class="album-count">3,545</div>
	</div>
</div>
<div class="album-chart">
	<div class="album-cover">
		<div class="overlay">
			<span>02</span>
		</div>
	</div>
	<div class="album-info">
		<div class="album-title">Thanh Pho Buon</div>
		<div class="album-singer">Luu Anh Loan</div>
		<div class="album-count">3,545</div>
	</div>
</div>

CSS

body {
	font-family: Roboto;
	/* margin: 0; */
}

.album-chart {
	display: flex;
	padding: 16px 0;
	border-bottom: 1px solid #eee;
}

.album-cover {
	width: 128px;
	height: 128px;
	background-color: #ccc;
	background-image: url('https://images.unsplash.com/photo-1545199143-c6f9256ec576?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=128&h=128&q=80');
	background-size: cover;
	background-position: center;
	margin-right: 16px;
}

.overlay {
	height: 100%;
	width: 100%;
	background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,212,255,0) 100%);
	display: flex;
	align-items: flex-end;
	padding: 8px;
	box-sizing: border-box;
}

span {
	color: #fff;
	font-size: 20px;
	
}

.album-info .album-title {
	margin-bottom: 8px;
	font-size: 20px;
}

.album-info .album-singer, .album-info .album-count {
	color: #888;
	font-size: 14px;
}

.album-info .album-singer {
	margin-bottom: 8px;
}