Pricing table using CSS

HTML
<h1>Simple pricing table</h1> <div id="pricing-table" class="clear"> <div class="plan"> <h3>Ultimate<span>$59</span></h3> <a class="signup" href="">I want this!</a> <ul> <li>Объем диска: <b>10GB</b></li> <li>Месячный трафик: <b>100GB</b></li> <li>Количество email: <b>20</b></li> <li>Субдомены: <b>неограничено</b></li> </ul> </div > <div class="plan" id="most-popular"> <h3>Pro<span>$29</span></h3> <a class="signup" href="">I want this!</a> <ul> <li>Объем диска: <b>5GB</b></li> <li>Месячный трафик: <b>50GB</b></li> <li>Количество email: <b>10</b></li> <li>Субдомены: <b>неограничеснно</b></li> </ul> </div> <div class="plan"> <h3>Standart<span>$17</span></h3> <a class="signup" href="">I want this!</a> <ul> <li>Объем диска: <b>3GB</b></li> <li>Месячный трафик: <b>25GB</b></li> <li>Количество email: <b>5</b></li> <li>Субдоменов: <b>неограничено</b></li> </ul> </div> <div class="plan"> <h3>Basic<span>$9</span></h3> <a class="signup" href="">I want this!</a> <ul> <li>Объем диска: <b>1GB</b> Disk Space</li> <li>Месячный трафик: <b>10GB</b></li> <li>Количество email: <b>2</b></li> <li>Субдоменов: <b>неограничено</b></li> </ul> </div> </div>
CSS
body { background: #000000; } h1{text-align: center; color: #fff;} #about { text-align: center; color: #fafafa; font: normal small Arial, Helvetica; } #about a { color: #777; } /* --------------- */ #pricing-table { margin: 100px auto 50px auto; text-align: center; width: 892px; /* total computed width = 222 x 3 + 226 */ } #pricing-table .plan { font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica; text-shadow: 0 1px rgba(255,255,255,.8); background: #fff; border: 1px solid #ddd; color: #333; padding: 20px; width: 180px; /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */ float: left; position: relative; } #pricing-table #most-popular { z-index: 2; top: -13px; border-width: 3px; padding: 30px 20px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15); -webkit-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15); box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15); } #pricing-table .plan:nth-child(1) { -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; } #pricing-table .plan:nth-child(4) { -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; } /* --------------- */ #pricing-table h3 { font-size: 20px; font-weight: normal; padding: 20px; margin: -20px -20px 50px -20px; background-color: #eee; background-image: -moz-linear-gradient(#fff,#eee); background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee)); background-image: -webkit-linear-gradient(#fff, #eee); background-image: -o-linear-gradient(#fff, #eee); background-image: -ms-linear-gradient(#fff, #eee); background-image: linear-gradient(#fff, #eee); } #pricing-table #most-popular h3 { background-color: #ddd; background-image: -moz-linear-gradient(#eee,#ddd); background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd)); background-image: -webkit-linear-gradient(#eee, #ddd); background-image: -o-linear-gradient(#eee, #ddd); background-image: -ms-linear-gradient(#eee, #ddd); background-image: linear-gradient(#eee, #ddd); margin-top: -30px; padding-top: 30px; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } #pricing-table .plan:nth-child(1) h3 { -moz-border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; border-radius: 5px 0 0 0; } #pricing-table .plan:nth-child(4) h3 { -moz-border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0; border-radius: 0 5px 0 0; } #pricing-table h3 span { display: block; font: bold 25px/100px Georgia, Serif; color: #777; background: #fff; border: 5px solid #fff; height: 100px; width: 100px; margin: 10px auto -65px; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; -moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset; -webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset; box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset; } /* --------------- */ #pricing-table ul { margin: 20px 0 0 0; padding: 0; list-style: none; } #pricing-table li { border-top: 1px solid #9dba13; padding: 10px 0; } /* --------------- */ #pricing-table .signup { position: relative; padding: 8px 20px; margin: 20px 0 0 0; color: #fff; font: bold 14px Arial, Helvetica; text-transform: uppercase; text-decoration: none; display: inline-block; background-color: #9dba13; background-image: -moz-linear-gradient(#c3e425, #9dba13); background-image: -webkit-gradient(linear, left top, left bottom, from(#c3e425), to(#9dba13)); background-image: -webkit-linear-gradient(#c3e425, #9dba13); background-image: -o-linear-gradient(#c3e425, #9dba13); background-image: -ms-linear-gradient(#c3e425, #9dba13); background-image: linear-gradient(#c3e425, #9dba13); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; text-shadow: 0 1px 0 rgba(0,0,0,.3); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7); box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7); } #pricing-table .signup:hover { background-color: #9dba13; background-image: -moz-linear-gradient(#9dba13, #c3e425); background-image: -webkit-gradient(linear, left top, left bottom, from(#9dba13), to(#c3e425)); background-image: -webkit-linear-gradient(#9dba13, #c3e425); background-image: -o-linear-gradient(#9dba13, #c3e425); background-image: -ms-linear-gradient(#9dba13, #c3e425); background-image: linear-gradient(#9dba13, #c3e425); } #pricing-table .signup:active, #pricing-table .signup:focus { background: #9dba13; top: 2px; -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset; box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset; } /* --------------- */ .clear:before, .clear:after { content:""; display:table } .clear:after { clear:both } .clear { zoom:1 }
JAVASCRIPT
Expand for more options Login