Bootstrap Price Box

by llcola

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>BESTELLUNG</h3></li>

                <li class="feature">1 x Cola 0,3</li>
                <li class="feature">2 Cheeseburger</li>
                <li class="feature">1 Flasche Wasser</li>
                <li class="test">Bestellung Offen</li>
            </ul>
        </div>
    </div>
</div>

CSS

.price-box {
    border-radius: 10px;
    text-align: center;
    width:50%;
box-shadow: 2px 2px 2px 2px #888888;
}

.price-box, .feature, .package-title{
    border: grey 1px solid;
}

.price-box h3 {
    font-size: 20px;
    font-family:Arial;
    font-weight:bold;

    
}

li{
      background:tomato; 
}

ul.package-details {
    margin:0;
    padding:0;
}
ul.package-details li {
    list-style: none;
}
li.package-title {
    color: white;
    background:tomato;
    border-radius:10px 10px 0px 0px;
}

li.feature {
    padding: 5px 0;
    text-align:left;

    color:white;
    font-weight:bold;
}

li.button {
    padding-top: 5px;
}

.test{
  color:grey;
  background:transparent;
  border-top: 1px solid grey;
  border-radius:0px 0px 10px 10px;
  font-weight:bold;
}