This call to action block uses the Joomlashine Grid-Layout system to make it responsive. The buttons are animated when hovered over. Original published in the content-top position and was based on a module form JSN Dona.

Financial service

We offer financial solutions including small business loans and merchant cash advances to assist small business owners

read more

Strategic Marketing

We can make a deep research on your service and generate clever, creative ideas that can boost your income.

read more

Customer analytics

We offer financial solutions including small business loans and merchant cash advances to assist small business owners.

read more

 

CSS

/*--- Our Services ---*/

.our-services {}

.our-services .os-block {
	margin-top: 15px;
	min-width: 300px; /* stops the blocks getting too squashed */
	text-align: center;	
}

.our-services .os-icon {    
	width: 130px;
	height: 130px;
	line-height: 128px;
	border: 1px solid #e6e6e6;
	border-radius: 50%;
	display: inline-block;
}

.our-services .os-title h4 {
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 3px;
	margin-top: 25px;
	min-height: 50px;  /* This allows you to make sure the columns are equal height */
}

.our-services .os-text {
	padding: 0 10px;
	margin-top: 20px;
	min-height: 150px; /* This allows you to make sure the columns are equal height */	  
}

.our-services .os-button {
	margin-top: 25px;
	margin-bottom: 25px;
	display: inline-block;	
}

.our-services .os-button a.btn {
	color: #fff;
	font-size: 12px;
	line-height: 20px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-top: 10px;
	padding: 10px;
	display: inline-block;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;  
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	transition: 0.3s;
	-moz-transition: 0.3s;
	-webkit-transition: 0.3s;
	width: 136px;
	border-color: #F26522;
	background: #F26522;	
	}

.our-services .os-button a.btn:hover {
	background: none;
	color: #F26522;
}

@media screen and (max-width: 480px) {
	
	/* Stop large os-block going off screen */
	.our-services .os-block {
		min-width: 1px;		
	}
	
	/* remove uneeded white space in mobile view*/
	.our-services .os-title h4 {
		min-height: 1px;
	}
	.our-services .os-text {
		min-height: 1px;
	}
}

CSS (Fix for this template to get the demo running)

.our-services .os-button a.btn {
	color: #fff !important;
}
.our-services .os-button a.btn:hover {		
	color: #F26522 !important;
}

HTML

<div class="grid-layout our-services">

	<div class="os-block">
		<div class="os-icon"><img src="/images/kb/2016/794/Bank.png" alt="Bank" /></div>
		<div class="os-title">
			<h4>Financial service</h4>
		</div>
		<div class="os-text">			
			<p>We offer financial solutions including small business loans and merchant cash advances to assist small business owners</p>			
		</div>
		<div class="os-button"><a href="#" class="btn">read more</a></div>
	</div>
	
	<div class="os-block">
		<div class="os-icon"><img src="/images/kb/2016/794/Idea.png" alt="Idea" /></div>
		<div class="os-title">
			<h4>Strategic Marketing</h4>
		</div>
		<div class="os-text">			
			<p>We can make a deep research on your service and generate clever, creative ideas that can boost your income.</p>			
		</div>
		<div class="os-button"><a href="#" class="btn">read more</a></div>
	</div>
	
	<div class="os-block">
		<div class="os-icon"><img src="/images/kb/2016/794/Chart.png" alt="Chart" /></div>
		<div class="os-title">
			<h4>Customer analytics</h4>
		</div>
		<div class="os-text">			
			<p>We offer financial solutions including small business loans and merchant cash advances to assist small business owners.</p>			
		</div>
		<div class="os-button"><a href="#" class="btn">read more</a></div>
	</div>
	
</div>

<!-- Required to prevent scroll bars -->
<div class="clearbreak">&nbsp;</div>