Pricing

pricing.html

<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,900|Ubuntu:400' rel='stylesheet' type='text/css'>

<div class="plans">
  <div class="free personal">
    <div class="title">Free</div>
    <div class="price">$0/month</div>
    <div class="table">
      <table>
        <tr>
          <td>&infin;  Public Blocks</td>
        </tr>
        <tr>
          <td>&infin;  Colloboration</td>
        </tr>
        <tr>
          <td>0 Private Blocks</td>
        </tr>
      </table>
    </div>
  </div>
  <div class="basic personal">
    <div class="title">Basic</div>
    <div class="price">$8/month</div>
    <div class="table">
      <table>
        <tr>
          <td>All the feature of free</td>
        </tr>
        <tr>
          <td>Unlimited organization</td>
        </tr>
        <tr>
          <td>10 Private Blocks</td>
        </tr>
      </table>
    </div>
  </div>
  <div class="personal permium">
    <div class="title">Premium</div>
    <div class="price">$15/month</div>
    <div class="table">
      <table>
        <tr>
          <td>All the features you need</td>
        </tr>
        <tr>
          <td>Manage you blog</td>
        </tr>
        <tr>
          <td>Documentation for your project</td>
        </tr>
        <tr>
          <td>Write a book</td>
        </tr>
        <tr>
          <td>20GB for file storage</td>
        </tr>
        <tr>
          <td>Priority Support</td>
        </tr>
        <tr>
          <td>Google Apps for Domains sign-on</td>
        </tr>
      </table>
    </div>
  </div>
  <div class="extra personal">
    <div class="title">Extra</div>
    <div class="price">$30/month</div>
    <div class="table">
      <table>
        <tr>
          <td>All features in premium </td>
        </tr>
        <tr>
          <td>Shopping CMS</td>
        </tr>
        <tr>
          <td>Team management</td>
        </tr>
        <tr>
          <td>Even management</td>
        </tr>
        <tr>
          <td>Social Network management</td>
        </tr>
        <tr>
          <td>Analytic Services</td>
        </tr>
      </table>
    </div>
  </div>
  <div class="ultimate personal">
    <div class="title">Ultimate</div>
    <div class="price">$49+/month</div>
    <div class="table">
       <table>
         <tr>
           <td>All the features we have</td>
         </tr>
         <tr>
           <td>Administrative control over security policies</td>
         </tr>
         <tr>
           <td>You demand we provide</td>
         </tr>
         <tr>
           <td>One new feature each month</td>
         </tr>
       </table>
    </div>
  </div>
</div>

pricing.styl

box-shadow()
    -webkit-box-shadow arguments
    -moz-box-shadow arguments
    box-shadow arguments
    html.ie8 &,
    html.ie7 &,
    html.ie6 &
      border 1px solid arguments[length(arguments) - 1]

personal = #FD6816
premium = #63D1AB
border-white = #f9f9f9
black = #2f2f2f
shadow = #efefef
width = 15em

body
  font-family "Ubuntu",san-serif

.plans
  .personal,.business
    float left
    margin: 10px
    width: width
    text-align center
    border: 1em solid border-white
    display: inline-block
    border-radius 10px
    box-shadow: -1px 1px darken(shadow,20%)
  .title
    box-shadow: 1px -1px shadow
    border-radius 10px
    font-size 3em
    color black
    font-weight 300
    font-family "Lato"
  .price
    display block
    background black
    width width+0.7
    color white
    font-family "Lato"
    font-weight 900
    padding 10px
    margin-left -1em
    text-align center
  .table
    box-shadow: 1px 1px shadow
    border-radius 10px
  table, tbody, tr, td
    display block
  td
    text-align center
    padding 10px 0px
  .permium 
    .price
      background-color premium
      color white