CodePen

HTML

            
              <html>
<head>
<style>
#bluebox {
	height: 214px;
	width: 148px;
	background: url(http://img827.imageshack.us/img827/3418/fixedratebackground.png) no-repeat;
}

#box {
	height: 196px;
	width: 134px;
	
}

#percentage{
	height: 50px;
	width: 134px;
	background: #BADA55;
	margin: 0px;
	
}

#percentleft {
	background: black;
	height: 50px;
	width: 134px;
	margin: 0px;
}

#percentright {
	background: blue;
	height: 50px;
	width: 34px;
	margin: 0px;
	float: right;
}

#auto {
	background: pink;
	height: 23px;
	width: 134px;
}

</style>

</head>
<body>

<div id="bluebox">
	<div id="box">
<p style="text-align:center; color: white; font-family: Arial; padding-top: 5px; margin-bottom: 0px;">Fixed-Rate Home<br />Equity Loans</p>

		<div id="percentage">
			<div id="percentleft">
			<div id="percentright"></div>	
			</div>
			<div id="auto">
			<p style="text-align: center; font-size: 10px; margin: 0px;">15-year<br />with Auto Debit</p>
			</div>
			
			
		
		</div>
	</div>
</div>


</body>


</html>
            
          
!
via HTML Inspector

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................