Wordpress Price Box Design

Simple price box design using css3

<div id="leftcol">
    <section class="box hostingpack">
        <header>
<span>NO.1</span>
<span>WordPress Hosting</span>
        </header>
        <ul>
            <li>Free Domain Name</li>
            <li>1-click WP Installation</li>
            <li>Top WordPress support</li>
            <li>Unmatched WP speed</li>
            <li>99.9% Server Uptime</li>
            <li>Immediate Activation</li>
        </ul>
<a href="#">Learn More</a>
 <footer>
<a href="#" class="fleft big_button bgrey">Sign Up</a>
<span class="fleft price">
<span>$7.95</span>
<span>/month</span>
</span>
</footer>
</section>

*{box-sizing:border-box;-moz-box-sizing:border-box;}
#leftcol{float:left;margin:0 28px 0 0;}
#leftcol section{width:216px;float:left;margin-right:10px;}
#leftcol .hostingpack{background:#f79034;box-shadow:0 3px 3px rgba(0,0,0,0.08), inset 0 0 35px rgba(0,0,0,0.15);border:0;}
#leftcol .hostingpack header{overflow:hidden;background:#444;box-shadow:inset 0 0 90px rgba(0,0,0,0.75), 0 1px 0 rgba(0,0,0,0.2);border-bottom:1px solid #f9b271;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,0.75);padding:12px 26px;}
#leftcol .hostingpack header span{float:left;font:56px Arial, Helvetica, sans-serif;}
#leftcol .hostingpack header span+span{float:left;width:70px;font:24px/24px Arial, Helvetica, sans-serif;text-transform:uppercase;margin:7px 0 0 10px;}
#leftcol .hostingpack ul{font-family:Arial;padding:10px 6px 3px 10px;}
#leftcol .hostingpack ul li{position:relative;font-weight:400;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.3);margin:3px 0;padding:0 0 0 12px;}
#leftcol .hostingpack ul li:before{position:absolute;top:8px;left:0;width:4px;height:4px;border-radius:50%;content:"";background:#fff;box-shadow:0 1px 2px rgba(0,0,0,0.3);}
#leftcol .hostingpack>a{color:#fff;font-size:12px;text-shadow:0 1px 2px rgba(0,0,0,0.3);text-decoration:underline;margin:0 0 0 22px;}
#leftcol .hostingpack>a:hover{text-decoration:none;}
#leftcol .hostingpack footer{overflow:hidden;background:#d1833d;border-top:1px solid #c6732a;box-shadow:0 -1px 0 rgba(255,255,255,0.3);margin:12px 0 0;padding:10px;}
#leftcol .hostingpack footer .price{position:relative;font-family:Arial, Helvetica, sans-serif;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.3);margin:3px 0 0 11px;}
#leftcol .hostingpack footer .price>span{position:absolute;top:0;left:0;font-size:24px;}
#leftcol .hostingpack footer .price>span+span{position:absolute;top:19px;left:0;font-size:13px;}
.bgrey{background:#444;}
.bgrey:hover,.bgrey:active{background:#555;}
.big_button{line-height:36px;font-size:16px;position:relative;display:inline-block;height:50px;color:#fff!important;font:700 20px/50px Arial, Helvetica, Tahoma, sans-serif;border-radius:4px;box-shadow:0 3px 0 rgba(0,0,0,0.2);text-align:center;text-shadow:0 1px 0 rgba(0,0,0,0.15);text-decoration:none;transition:background .15s linear, top .08s linear, box-shadow .08s linear;-moz-transition:background .15s linear, top .08s linear, box-shadow .08s linear;-webkit-transition:background .15s linear, top .08s linear, box-shadow .08s linear;-o-transition:background .15s linear, top .08s linear, box-shadow .08s linear;padding:0 20px;}
.fleft{float:left!important;}

DEMO