CSS Cards

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
body{
	background:#efefef;
}
.text-color{
	color:#fff;
}
.bg-color{
	background-color:#ed7703;
}
.card-wrap *{
	box-sizing: border-box;
	-wbkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	transition: .5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
}
.card-image,.card-content,.card-meta{
	padding:10px;
}
.card-image{
	padding-top:0;
}
.card-wrap{
	background:#efefef;
	padding:5px;
	font-family: 'Raleway', sans-serif;
}
.card{
	background:#fff;
	max-width:300px;
	display:inline-block;
	box-shadow: 0px 0px 2px 2px #c2c2c2;
	position:relative;
	overflow:hidden;
	margin:10px;
}
.card-image{
	margin-left:-10px;
	margin-right:-10px;
	position:relative;
}
.card-image.adjust{
	overflow:hidden;
	position: relative;
	width:320px;
	height: 200px;
}
.card-image.adjust img{
	position: absolute;
}
.card-image label{
	position: absolute;
	left:10px;
	bottom: 0;
	padding:6px 12px;
	text-align: center;
	font-weight: bold;
	font-size:11px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.card-image label.label-date{
	left:75%;
	border-radius: 100%;
	top:10px;
	width:50px;
	height: 50px;
	padding-top: 12px;
}
.card-image img{
	/*
	height:100%;
	max-height:100%;
	*/
}
.card-content h4{
	margin:0 0 10px 0;
	font-size:14px;
	text-transform:uppercase;
	letter-spacing:1px;
	font-weight:bold;
}
.card-content p{
	color:#717070;
	font-size:13px;
	margin:0 0 10px;
}
.card-meta{
	color:#8d8d8d;
	font-size:12px;
}
.card-meta span{
	display:inline-block;
	margin-right:10px;
}
.card-meta span .fa{
	color:#717070;
}
</style>


<!-- Start Card -->
<div class="card-wrap">
	<!-- Card 1 -->
	<div class="card">
		<div class="card-image adjust">
			<img src="http://4.bp.blogspot.com/-_BkUlfUa2yk/T2HOO6WuY9I/AAAAAAAAAew/wDS2mhYI8hk/s300/3D+Green+Nature+Wallpaper.jpg" />
			<label class="text-color bg-color">Nature</label>
			<label class="text-color bg-color label-date">Mar 27</label>
		</div>
		<div class="card-content">
			<h4>Beautiful Nature Wallpaper</h4>
			<p>Beautiful nature HD wallpaper for your desktop, mac, table and other device.</p>
		</div>
		<div class="card-meta">
			<span><i class="fa fa-clock-o" aria-hidden="true"></i> 15:47</span>
			<span><i class="fa fa-comment" aria-hidden="true"></i> Comments</span>
		</div>
	</div>
	<!-- End Card 1 -->

	<!-- Card 2 -->
	<div class="card">
		<div class="card-image adjust">
			<img src="https://1.bp.blogspot.com/-3RF6XnFX40M/WPW76VE-etI/AAAAAAAAEj0/un8zHhcnYVcrOgfwuLtrNDprU33EjYUtwCLcB/s600/maruti-suzuki-alto-k10_701x399_41452239169.jpg" />
			<label class="text-color bg-color">Car</label>
			<label class="text-color bg-color label-date">Apr 27</label>
		</div>
		<div class="card-content">
			<h4>MOST FUEL EFFICIENT CARS</h4>
			<p> As a serious cab owner the first thing you should consider before buying any car</p>
		</div>
		<div class="card-meta">
			<span><i class="fa fa-clock-o" aria-hidden="true"></i> Time</span>
			<span><i class="fa fa-comment" aria-hidden="true"></i> Comments</span>
		</div>
	</div>
	<!-- End Card 1 -->

	<!-- Card 3 -->
	<div class="card">
		<div class="card-image adjust">
			<img src="http://4.bp.blogspot.com/-wehRhLMiJ50/UexzUl2_mxI/AAAAAAAAA6Q/bZ92CBYELnQ/s400/bmw-K1200-S+bike+Fastest-heavy-bike.jpg" />
			<label class="text-color bg-color">Bike</label>
			<label class="text-color bg-color label-date">May 15</label>
		</div>
		<div class="card-content">
			<h4>10 Fastest Bikes In The World</h4>
			<p>The Ducati 1098 is a fastest sports bike it is also called “Ten Nine Eight”. It is made</p>
		</div>
		<div class="card-meta">
			<span><i class="fa fa-clock-o" aria-hidden="true"></i> Time</span>
			<span><i class="fa fa-comment" aria-hidden="true"></i> Comments</span>
		</div>
	</div>
	<!-- End Card 3 -->
</div>		
<!-- End Card -->