.container
	.cards
		- for (var x = 0; x < 6; x++)
			.card
				.card-content
					.card-header
						img(src="https://unsplash.it/300/300", alt="").card-header__image
					.card-body
						h4.card-body__header Fill Murray
						p.card-body__desc William James "Bill" Murray  is an American actor, comedian, and writer.
					.card-footer
						.card-footer__date 21.09.1950
						a(href="").card-footer__btn Link text
						
			.card
				.card-content
					.card-header
						img(src="http://fillmurray.com/300/300", alt="").card-header__image
					.card-body
						h4.card-body__header William James "Bill" Murray
						p.card-body__desc He first gained exposure on Saturday Night Live, a role which earned him his first Emmy Award and later went on to star in comedy films
					.card-footer
						.card-footer__date 21.09.1950
						a(href="").card-footer__btn Link text	
View Compiled
.cards
	display: flex
	flex-wrap: wrap
	margin: -1em 0 1em -1em
.card
	display: flex
	flex-direction: column
	flex: 0 0 25%
	padding: 1em 0 0 1em
	

.card-content
	display: flex
	flex-direction: column
	height: 100%
	text-align: center
	padding: 1em
	border: 1px solid #e2e5ea

.card-body
	flex-grow: 1
	

@media (max-width: 991px)
	.card
		flex: 0 0 33.3333333%
@media (max-width: 767px)
	.cards
		justify-content: center
	.card
		flex: 0 0 50%
		max-width: 250px
@media (max-width: 480px)
	.card
		flex: 0 0 100%
	
//===============some styles for better view
body
	background: linear-gradient(135deg, #008CBA 20%, #007095 80%)
	font-family: 'Quattrocento', serif
	padding-top: 1em
.card-content
	background-color: #fff
	transition: box-shadow 300ms ease-in
	&:hover
		box-shadow: 0 11px 7px 0 rgba(0, 0, 0, 0.19)
	&:hover .card-header__image
		transform: scale(1.05)

.card-header
	overflow: hidden
	position: relative
	transform: translate3d(0, 0, 0)
	perspective: 1000px
	margin: -1.1em -1.1em 0
	&:after
		content: ''
		opacity: 1
		position: absolute
		top: 0
		left: 0
		right: 0
		bottom: 0
		background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 100%)
.card-header__image
	max-width: 100%
	max-height: 100%
	margin: auto
	transition: transform 600ms ease-out
	transform-origin: center
	will-change: transform

.card-body__header
	font-family: 'Oswald', sans-serif

.card-footer__date
	margin-bottom: 10px
	
.card-footer__btn
	text-align: center
	text-decoration: none
	display: inline-block
	vertical-align: middle
	padding: 3px 30px
	font-size: 14px
	background: #008CBA
	border-color: #007095
	color: white
	transition: background-color 200ms ease-out
	&:hover
		color: white
		background: lighten(#008CBA, 5%)
		text-decoration: none
	&:focus
		text-decoration: none
		color: white
	&:active
		background: darken(#008CBA, 5%)
View Compiled
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.