The Information blocks were adapted from JSN Reta

Header

CSS

/*--- Header Contact Information ---*/	

.header-contact-information:before,
.header-contact-information:after {
	content: "";
	display: table;
}

.header-contact-information:after {
	clear: both;
}

.header-ci-btn {
	font-size: 12px;
	line-height: 20px;
	color: #333 !important;
	text-transform: uppercase;
	font-weight: 500;
	padding: 10px 20px;
	border-radius: 3px;
	transition: 0.3s;
	-moz-transition: 0.3s;
	-webkit-transition: 0.3s;
	border: 1px solid #e5e5e5;
}

.header-contact-information .header-ci-btn:hover {
	opacity: .8;
}

.header-contact-information {
	margin-top: 30px;
	padding: 0 150px 0 20px;
	border-left: 1px solid #e5e5e5;
	position: relative;
}

.header-contact-information .jsn-left {
	font-size: 14px;
	line-height: 22px;
	margin: -8px 0 0;
}

.header-contact-information .jsn-left li {
	margin: 8px 0 0;
	list-style: none;
}

.header-contact-information .jsn-left li span {
	margin-right: 18px;
}

.header-contact-information .jsn-left li a {
	color: #363636;
}

.header-contact-information .jsn-left li a:hover {
	color: #b0c052;
}

.header-contact-information .header-ci-btn {
	position: absolute;
	top: 5px;
	right: 0;
}

body.jsn-direction-rtl .header-contact-information {
	padding: 0 20px 0 150px;
	border-right: 1px solid #e5e5e5;
	border-left: none;
}

body.jsn-direction-rtl .header-contact-information .header-ci-btn {
	top: 5px;
	left: 0;
	right: auto;
}

HTML

<div class="header-contact-information" style="width: 250px;">
	<ul class="jsn-left">
		<li><img src="/images/modules/784/header/fa-phone.png" alt="Call Us" /> 0800 123 4567</li>
		<li><img src="/images/modules/784/header/fa-phone.png" alt="Call Us" /> 01772 123456</li>
		<li><img src="/images/modules/784/header/fa-mobile-phone.png" alt="Call Us" /> 07747 123456</li>
		<li><img src="/images/modules/784/header/fa-envelope.png" alt="Call Us" /> <a href="mailto:info@example.com">info@example.com</a></li>
	</ul>
	<a href="http://quantumwarp.com/" class="header-ci-btn">contact us</a>
</div>

Footer

• Rocky Lane, Skerton, Manchester, Cumbria, MA1 1QW

• info@example.com

• 0800 123 4567

• 01772 123456

• 07777 123 456

CSS

/*--- Footer Contact Information ---*/

.footer-contact-information {
	list-style: none;
	font-size: 14px;
	padding-top: 30px;
}

.footer-contact-information p,
.footer-contact-information a {
	color: #acacac;
}

.footer-contact-information li {
	margin: 12px 0 0;
	list-style: none;
}

.footer-contact-information li:first-child {
	margin-top: 0;
}

.footer-contact-information li img {
	float: left;
	margin-right: 15px;
}

HTML

<div class="footer-contact-information">

	<img src="/images/modules/784/footer/784/footer/logo.png" alt="QuantumWarp" />

	<ul class="clearfix">
		<li>
			<p><img src="/images/modules/784/footer/784/footer/fa-map-marker.png" alt="" /> Rocky Lane, Skerton, Manchester, Cumbria, MA1 1QW</p>
		</li>
		<li>
			<p><img src="/images/modules/784/footer/784/footer/fa-envelope.png" alt="" /> <a href="mailto:info@example.com">info@example.com</a></p>
		</li>
		<li>
			<p><img src="/images/modules/784/footer/784/footer/fa-phone.png" alt="Call Us" /> 0800 123 4567</p>
		</li>
		<li>
			<p><img src="/images/modules/784/footer/784/footer/fa-phone.png" alt="Call Us" /> 01772 123456</p>
		</li>
		<li>
			<p><img src="/images/modules/784/footer/784/footer/fa-mobile-phone.png" alt="Call Us" /> 07777 123 456</p>
		</li>
	</ul>
	
</div>

The colour for the icons and text = #acacac