Plans Bootstrap

by Tiago Sousa

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="palette-white">
    <div class="row">
        <div class="col-sm-4">
            <div class="plan-wrap plan-one">
                <h1 class="plan-name">Standar</h1>
                <div class="plan-strip">
                    <span class="plan-price">23€</span>
                </div>
                
                <div class="plan-features">
                    <ul class="item-list">
                        <li>Item 1</li>
                        <li>Item 2</li>
                    </ul>
                </div>
            </div><!-- /.plan-wrap -->
        </div><!-- /.col-sm-4 -->
        
        <div class="col-sm-4">
            <div class="plan-wrap plan-two">
                <h1 class="plan-name">Specialized</h1>
                <div class="plan-strip">
                    <span class="plan-price">23€</span>
                </div>
                
                <div class="plan-features">
                    <ul class="item-list">
                        <li>Item 1</li>
                        <li>Item 2</li>
                    </ul>
                </div>
            </div><!-- /.plan-wrap -->
        </div><!-- /.col-sm-4 -->
        
        <div class="col-sm-4">
            <div class="plan-wrap plan-tree">
                <h1 class="plan-name">Business</h1>
                <div class="plan-strip">
                    <span class="plan-price">23€</span>
                </div>
                
                <div class="plan-features">
                    <ul class="item-list">
                        <li>Item 1</li>
                        <li>Item 2</li>
                    </ul>
                </div>
            </div><!-- /.plan-wrap -->
        </div><!-- /.col-sm-4 -->
    </div>
</div>

CSS

body {
    background-color: #ecf0f1;
}

.rounded {
    border-radius: 50%;
    width: 200px;
	height: 200px;
    display: inline-block;
}

.plan-wrap {
    text-align: center;
    padding: 10px 0px;
    margin: 20px 0px;
    /*
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    */
    border-radius: 3%;
    overflow: hidden;
}

.plan-one {
    background-color: #4aa3df;
}

.plan-two {
    background-color: #e74c3c;
}

.plan-tree {
    background-color: #f1c40f;
}

.plan-strip {
    background-color: #bdc3c7;
}
.plan-price{
    font-size: 21px;
    font-weight: 700;
}
.item-list {
    list-style: none;
    padding: 0;
}