<!-- 


Another Design for Cards based on the Google's Material Design along with the ripple effect on the CTAs





-->




<div class="cards-row">
<div class="card">
	<img src='https://getmdl.io/assets/demos/welcome_card.jpg' class="card-image" />
	<div class="card-title">
		This is title.
	</div>
	<div class="card-desc">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus iusto s deleniti ea atque. Nostrum odio temporibus nisi inventore, velit hic in quas quos quo?
	</div>
	<div class="card-actions">
		<button type='button' class='card-action-readMore'>Read More</button>
	</div>
</div>

<div class="card">
	<img src='https://getmdl.io/assets/demos/welcome_card.jpg' class="card-image" />
	<div class="card-title">
		This is title.
	</div>
	<div class="card-desc">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus iusto sit, aperiam officia laborum labore voluptatibus deleniti ea atque. Nostrum odio temporibus nisi inventore, velit hic in quas quos quo?
	</div>
	<div class="card-actions">
		<button type='button' class='card-action-readMore'>Read More</button>
	</div>
</div><div class="card">
	<img src='https://getmdl.io/assets/demos/welcome_card.jpg' class="card-image" />
	<div class="card-title">
		This is title.
	</div>
	<div class="card-desc">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus iusto sit, aperiam officia laborum labore voluptatibus deleniti ea atque. Nostrum odio temporibus nisi inventore, velit hic in quas quos quo?
	</div>
	<div class="card-actions">
		<button type='button' class='card-action-readMore'>Read More</button>
	</div>
</div>
</div>

$buttonColor: #ff1d8e	

body
	font-family: 'Roboto'
	font-size: 0.9em
	background-color: #BBDEFB

.cards-row
	// background-color: #fff
	margin: 0px auto

.card
	display: inline-block
	width: 30%
	min-width: 400px
	// height: 330px
	// border: 1px solid transparentize(grey,0.7)
	box-sizing: border-box
	box-shadow: 2px 2px 25px 0px transparentize(black,0.3)
	border-radius: 3px
	margin: 1em 1.5%
	animation: scl 0.5s ease-in-out
	transform-origin: left center
	background-color: #fff
	&-title
		margin-top: -1.5em
		padding-bottom: 0.5em
		padding-left: 0.5em
		color: #fff
		font-size: 2em
	&-image
		width: 100%
		height: 162px
	&-desc
		padding: 0 1em 1em 1em
		border-bottom: 1px solid transparentize(grey,0.7)
		height: 75px
		overflow: hidden
		text-align: justify
	&-action
		&-readMore
			margin: 1em 0 1em 1em
			height: 3em
			width: 8em
			background: $buttonColor
			border: none
			font-weight: light
			color: #fff
			position: relative
			overflow: hidden
			outline: none
			border-radius: 2px
			&:hover
				background: transparentize(#ff1d8e,0.2)
				transition: all 0.1s ease-in
	
			
	&:hover
		box-shadow: 7px 7px 15px 2px transparentize(black,0.5)
		transition: box-shadow 0.3s ease-in

			
.ripple
	border-radius: 50%
	background: mix($buttonColor, white)
	position: absolute
	transform: scale(0)
	opacity: 1
	animation: ripple 0.4s linear

@keyframes ripple
	to
		transform: scale(2.5)
		opacity: 0

@keyframes scl
	0%
		opacity: 0
		transform: scaleX(0.9) translateX(-50px)
	75%
		opacity: 0.2
	100%
		transform: scaleX(1) translateX(0)
		opacity: 1

var buttons = document.getElementsByTagName('button');

Array.prototype.forEach.call(buttons, function (b) {
    b.addEventListener('click', createRipple);
});


function createRipple (e) {
		// alert('x');
    var circle = document.createElement('div');
    this.appendChild(circle);

    var d = Math.max(this.clientWidth, this.clientHeight);

    circle.style.width = circle.style.height = d + 'px';

var rect = this.getBoundingClientRect();
circle.style.left = e.clientX - rect.left -d/2 + 'px';
circle.style.top = e.clientY - rect.top - d/2 + 'px';
circle.classList.add('ripple');
		
	setTimeout(function(){
		circle.remove();
	},500);
}