Bootstrap Price Box

by Sendy Aditya Suryana

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<div class="container">
    <div class="row">
        <div class="span3 price-box">
            <ul class="package-details">
                <li class="package-title"><h3>PACKAGE NAME</h3></li>
                <li class="price-table">2<span class="mini">.99 USD /mo</span></li>
                <li class="feature">1 GB Diskspace</li>
                <li class="feature">10 GB Bandwidth</li>
                <li class="feature">1 Domain</li>
                <li class="feature">3 Subdomain</li>
                <li class="feature">5 Email</li>
                <li class="button"><a href="#" class="btn"><i class="icon-shopping-cart"></i>Buy Now</a></li>
            </ul>
        </div>
    </div>
</div>

CSS

.price-box {
    background: #666;
    border-radius: 3px;
    border: #666 1px solid;
    text-align: center;
}
.price-box h3 {
    font-size: 20px;
}
ul.package-details {
    margin-left: 0 !important;
}
ul.package-details li {
    list-style: none;
}
li.package-title {
    border-bottom: 1px #ccc solid;
    color: #fff;
}
li.price-table {
    font-size: 32px;
    margin-top: 10px;
    font-weight: bold;
    color: #fff;
}
span.mini {
    font-size: 14px;
    position: relative;
    top: -1em;
}
li.feature {
    background: white;
    padding: 5px 0;
    border-bottom: 1px #ccc solid;
}
li:odd {
    background: #ccc;
}
li:even {
    background: #eee;
}
li.button {
    padding-top: 10px;
}