<div class="wrap">
<div class="table">
<ul>
<li>
<div class="top">
<h1>STARTER</h1>
<div class="circle">$19</div>
</div>
<div class="bottom">
<p><span>5</span> users</p>
<p><span>10</span> projects</p>
<p><span>10GB</span> amount of space</p>
<p><span>5</span> e-mail accounts</p>
<div class="sign">
<a href='#' class='button'>SIGN UP</a>
</div>
</div>
</li>
<li>
<div class="top">
<h1>BASIC</h1>
<div class="circle">$29</div>
</div>
<div class="bottom">
<p><span>10</span> users</p>
<p><span>50</span> projects</p>
<p><span>50GB</span> amount of space</p>
<p><span>10</span> e-mail accounts</p>
<div class="sign">
<a href='#' class='button'>SIGN UP</a>
</div>
</div>
</li>
<li>
<div class="top purple white">
<h1>PRO</h1>
<div class="circle pink">$49</div>
</div>
<div class="bottom">
<p><span>100</span> users</p>
<p><span>Unlimited</span> projects</p>
<p><span>1TB</span> amount of space</p>
<p><span>100</span> e-mail accounts</p>
<div class="sign">
<a href='#' class="button purple" style="color:white;">SIGN UP</a>
</div>
</div>
</li>
<li>
<div class="top">
<h1>ULTRA</h1>
<div class="circle">$99</div>
</div>
<div class="bottom">
<p><span>Unlimited</span> users</p>
<p><span>Unlimited</span> projects</p>
<p><span>Unlimited</span> amount of space</p>
<p><span>Unlimited</span> e-mail accounts</p>
<div class="sign">
<a href='#' class='button'>SIGN UP</a>
</div>
</div>
</li>
</ul>
</div>
</div>
@import "compass/css3";
* {
margin:0;
padding:0;
}
@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,700|Droid+Serif:400,700);
html, body {
height: 100%;
}
body {
text-align:center;
background-color: #5d4660;
@include filter-gradient(#5d4660, #f7eec7, vertical);
$experimental-support-for-svg: true;
@include background-image(linear-gradient(top, #5d4660 0%,#f7eec7 100%));
font-family: 'Droid Sans', sans-serif;
}
.wrap {
width:800px;
margin:0 auto;
text-align:left;
color:#989A8F;
}
.table {
background-color:#ffffff;
height:325px;
width:100%;
margin-top:50px;
}
ul li {
float:left;
width:199px;
text-align:center;
border-left:1px solid #DDDCD8;
}
.top {
background-color:#EAE9E4;
height:75px;
h1 {
padding-top:20px;
}
}
.circle {
width:60px;
height:60px;
border-radius:60px;
font-size:20px;
color:#fff;
line-height:60px;
text-align:center;
background:#989A8F;
margin-left:70px;
margin-top:10px;
}
.bottom {
margin-top:50px;
p {
font-size:13px;
font-family: 'Droid Serif', sans-serif;
padding:5px;
span {
font-weight:bold;
}
}
}
.sign {
margin-top:50px;
.button {
border: 1px solid #989A8F;
padding: 10px 40px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
color: #989A8F;
font-size: 14px;
text-decoration: none;
vertical-align: middle;
font-size:17px;
}
}
.purple {
background-color:#5D4660;
}
.white {
color:#FFFFFF;
}
.pink {
background-color:#BC9B94;
}
View Compiled
// Coded a cool Dribbble shot by @vladedimovski
// http://dribbble.com/shots/842947-Pricing-Table
This Pen doesn't use any external CSS resources.