You are here:Home»KB»Web Design»Design Elements, Styling, Effects and Code»Styled Elements»Information Blocks with Icons
Thursday, 10 December 2015 19:29

Information Blocks with Icons

Written by

For the purpose of this article these information blocks have been put together into one but you can seperate them in to sperate entities and put them in individual module positions.

Our Rooms

bed

Our rooms are comfortable with mod-cons including the important TV and kettle for the end of a relaxing day.

 

Relax

clock

Enjoy your stay and leave the stresses of the modern life behind you for your stay. The Lake District is a beautiful area to unwind.

 

English Breakfast

bulls eye eggs with toast and bacon

What better way to start the day than with a Traditional English Breakfast.

 

HTML

<div id="information-blocks-container">

	<div style="float: left;">
		<h3>Our Rooms</h3>
		<div>
			<div>
				<div class="align-left"><img src="/images/kb/2015/663/bed.png" alt="bed" style="margin: 5px;" /></div>
				<div class="align-right">
					<p style="width: 185px; margin-top: 0;">Our rooms are comfortable with mod-cons including the important TV and kettle for the end of a relaxing day.</p>
				</div>
			</div>
			<div class="clearbreak">&nbsp;</div>
		</div>
	</div>
	
	<div style="float: left;">
		<h3>Relax</h3>
		<div>
			<div>
				<div class="align-left"><img src="/images/kb/2015/663/clock.png" alt="clock" style="margin: 5px;" /></div>
				<div class="align-right">
					<p style="width: 185px; margin-top: 0;">Enjoy your stay and leave the stresses of the modern life behind you for your stay. The Lake District is a beautiful area to unwind.</p>
				</div>
			</div>
			<div class="clearbreak">&nbsp;</div>
		</div>
	</div>
	
	<div style="float: left;">
		<h3>English Breakfast</h3>
		<div>
			<div>
				<div class="align-left"><img src="/images/kb/2015/663/bulls-eye-eggs-with-toast-and-bacon.png" alt="bulls eye eggs with toast and bacon" style="margin: 5px;" /></div>
				<div class="align-right">
					<p style="width: 185px; margin-top: 0;">What better way to start the day than with a Traditional English Breakfast.</p>
				</div>
			</div>
			<div class="clearbreak">&nbsp;</div>
		</div>
	</div>
	
</div>

 

Read 905 times Last modified on Tuesday, 10 May 2016 17:52