#theaudleyway

by adamh

HTML

<div class="blocks">
	<div class="block active">
		<img src="http://www.audleytravel.com/images/2011/home/theway/discover.jpg">
		<h3>Discover</h3>
		<p>When you first call or email, your certified Country Specialist will spend time learning about who you are, what you like, and where you're interested in visiting.</p>
	</div>
	<div class="block">
		<img src="http://www.audleytravel.com/images/2011/home/theway/create.jpg">
		<h3>Create</h3>
		<p>As your Country Specialist shares their personal knowledge of your destinations, your perfect travel experience will come to life and be presented in a comprehensive tailor-made itinerary.</p>
	</div>
	<div class="block">
		<img src="http://www.audleytravel.com/images/2011/home/theway/prepare.jpg">
		<h3>Prepare</h3>
		<p>As your trip nears and excitement builds, your Country Specialist will be close by to answer questions that may arise and help you get ready for your perfect trip.</p>
	</div>
	<div class="block">
		<img src="http://www.audleytravel.com/images/2011/home/theway/experience.jpg">
		<h3>Experience</h3>
		<p>Your custom travel experience will be made even more amazing by guides and other locals your Country Specialist knows personally. And your Specialist will always be just a phone call or email away.</p>
	</div>
	<div class="block">
        <img src="http://www.audleytravel.com/images/2011/home/theway/share.jpg">
		<h3>Share</h3>
		<p>Nobody will be more excited to hear about your trip than your Country Specialist. They'll call you post-trip to talk about how things went and to see how deeply the travel bug has bitten you.</p>
	</div>
</div>

CSS

body {
    padding: 60px 0;
    background-color: #ffffff;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #f0f0f0), color-stop(1, #ffffff));
    background: -ms-linear-gradient(bottom, #f0f0f0, #ffffff);
    background: -moz-linear-gradient(center bottom, #f0f0f0 0%, #ffffff 100%);
    background: -o-linear-gradient(#ffffff, #f0f0f0);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0f0f0', GradientType=0);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #444;
    line-height: 1.4em;
}

.blocks {
    height: 1%;
    overflow: auto;
    width: 930px;
    margin: 0 auto;
}

.block {
    display: block;
    float: left;
    display: block;
    text-align: center;
    opacity: 1;
    width: 166px;
    padding: 7px;
    margin: 2px;
    border: 1px solid #cdccc9;
    background: white;
    border-radius: 4px;
    height: 1%;
    overflow: hidden;
    box-shadow: 0 4px 6px -6px #000000;
}

.block h3 {
    font-size: 20px;
    line-height: 24px;
    margin: 1em 0;
}

.block img {
    width: 166px;
    height: auto;
    border-radius: 2px;
}