TGI Box Office

by Marventus

HTML

<div id="box-office-wrapper">
	<div id="box-office-gravity" class="box-office">
		<img src="http://localhost/blogs/tgi/wp-content/uploads/2014/03/gravity-cover.jpg" alt="Gravity" height="222" width="150" />
		<div class="box-office-info">
			<p class="par-budget"><span class="icon icon-budget"></span><span class="text text-budget">300 million</span></p>
			<p class="par-profit"><span class="icon icon-profit"></span><span class="text text-profit">600 million</span></p>
			<p class="par-ratio"><span class="icon icon-ratio"></span><span class="text text-ratio">1.25</span></p>
            <p class="par-source">Data collected on <span class="imdb-logo" title="Internaitonal Movie Database">
		</div>
	</div>
	<div id="box-office-ironman3" class="box-office">
		<img src="http://localhost/blogs/tgi/wp-content/uploads/2014/03/iron-man-3-cover.jpg" alt="Iron Man 3" height="222" width="150" />	
	</div>
	<div id="box-office-startrek2" class="box-office">
		<img src="http://localhost/blogs/tgi/wp-content/uploads/2014/03/star-trek-into-darkness-cover.jpg" alt="Startrek 2: Into Darkness" height="222" width="150" />
	</div>
	<div id="box-office-theloneranger" class="box-office">
		<img src="http://localhost/blogs/tgi/wp-content/uploads/2014/03/the-lone-ranger-cover.jpg" alt="The Lone Ranger" height="222" width="150" />
	</div>
	<div id="box-office-thehobbit2" class="box-office">
		<img src="http://localhost/blogs/tgi/wp-content/uploads/2014/03/the-hobbit-2-the-desolation-of-smaug-cover.jpg" alt="The Hobbit 2 - The Desolation of Smaug" height="222" width="150" />
	</div>
</div>

CSS

@import url('http://fnt.webink.com/wfs/webink.css/?project=48A0FEEA-BDD3-4D13-87A6-73DC10C33BB5&fonts=31B87CF9-F410-ED20-E812-2F143D523935:f=Hermes-Regular');

/* CSS for Single Posts */
#box-office-wrapper, #box-office-wrapper div {
	height: 222px;
}
#box-office-wrapper {
	margin-bottom: 26px;
    width: 809px;
}
#box-office-wrapper div {
	width: 150px;
}
#box-office-wrapper p {
    font: bold 14px Corbel, Arial, Helvetica, sans-serif;
	height: 32px;
	line-height: normal;
}
.box-office {
	float: left;
	margin-right: 15px;
	position: relative;
}
#box-office-theloneranger {
	margin-right: 14px;
}
.box-office:last-child {
	margin-right: 0!important;
}
.box-office-info {
	background: rgba(0,0,0,0.75);
	position: absolute;
	left: 0;
	top: 0;
}
.box-office-info .icon {
	background: #2CAE85;
	display: inline-block;
	height: 32px;
	width: 32px;
}
.box-office-info span {
	color: #FFF;
}
.box-office-info .icon {
    background: url('http://localhost/blogs/tgi/wp-content/themes/eleven40-pro/images/box-office-32.png') no-repeat;
    margin-right: 5px;
}
.box-office-info .icon-budget {
    background-position: 0 0;
}
.box-office-info .icon-profit {
    background-position: 0 -64px;
}
.box-office-info .icon-ratio {
    background-position: 0 -128px;
}