colors.phps

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic" rel="stylesheet" type="text/css">
	<style type="text/css">
	* {
		-webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -ms-box-sizing: border-box;
                -o-box-sizing: border-box;
                box-sizing: border-box;
	}
	body {
		padding: 1em 1em 5em 1em;
		/*font: 13px sans-serif;*/
		font: 10pt "Droid Serif",serif;
	}
	#wrapper {
		width: 70%;
		max-width: 800px;
		margin: 0 auto;
	}
	.block {
		display: inline-block;
		box-sizing: content-box;
		height: 50px;
		width: 80px;
		margin: 5px;
		border: 1px dotted #000;
		position: relative;
		border: 1px solid rgba(0,0,0,0.2);
		box-shadow: 2px 2px 4px rgba(0,0,0,0.15);
	}
	.block > div {
		width: 82px;
		height: 20px;
		margin: -1px;
		line-height: 20px;
		text-align: center;
		text-transform: uppercase;
		/*text-shadow: white 0 1px 1px;*/
		position: absolute;
		bottom: 0px;
		/*background-color: rgba(0,0,0,0.1);*/
		color: #fff;
		background: #111;
		opacity: 0.7;
		filter: alpha(opacity=70);
	}
	</style>
</head>
<body>


<div id="wrapper">
	<div class="block" style="width:100%">
		<div style="width:100%;height:100%;margin:0;text-transform:capitalize;font-size:19pt;padding:15px">Color samples</div>
	</div>
<?php

$colors = array(
	'#fc8596',
	'#f6f6f2',
	'#666666',
	'#9d9d93',
	'#fc5555',
	'#ffffff',
	'#000000',
	'#e5554e',
	'#383838',
	'#777',
	'#333',
);

foreach($colors as $color) {
	?>
	<div class="block" style="background-color:<?=$color?>">
		<div><?=$color?></div>
	</div>
	<?php
}

?>
</div>


</body>
</html>