manyi/static/angular-mod/tpl/page_price.html

<div class="bg-light lter b-b wrapper-md hidden-print">
  <h1 class="m-n font-thin h3">Price</h1>
</div>
<div class="wrapper-md">
  <div class="row row-sm">
    <div class="col-lg-3 col-md-4 col-sm-6">
      <div class="panel b-a">
        <div class="panel-heading text-center bg-info no-border">
          <h4 class="text-u-c m-b-none">Start</h4>
          <h2 class="m-t-none">
            <sup class="pos-rlt" style="top:-22px">$</sup>
            <span class="text-2x text-lt">99</span>
            <span class="text-xs">/ mo</span>
          </h2>
        </div>
        <ul class="list-group">
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> Email preview on air
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> Spam testing and blocking
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> 100 GB Space
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> 200 user accounts
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> Free support for two years
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> Free upgrade for one year
          </li>
        </ul>
        <div class="panel-footer text-center">
          <a href class="btn btn-info font-bold m">Start your free trial</a>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6">
      <div class="panel b-a">
        <div class="panel-heading text-center bg-warning no-border">
          <span class="text-u-c m-b-none font-bold">Premium</span>          
        </div>
        <div class="wrapper text-center b-b b-light">
          <h2 class="m-t-none">
            <sup class="pos-rlt" style="top:-22px">$</sup>
            <span class="text-2x text-lt">199</span>
            <span class="text-xs">/ mo</span>
          </h2>
        </div>
        <ul class="list-group text-center no-borders m-t-sm">
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> Email preview on air
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> Spam testing and blocking
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> 100 GB Space
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> 200 user accounts
          </li>
          <li class="list-group-item">
            <i class="icon-close text-danger m-r-xs"></i> <span class="text-l-t">Free support for two years</span>
          </li>
          <li class="list-group-item">
            <i class="icon-close text-danger m-r-xs"></i> <span class="text-l-t">Free upgrade for one year</span>
          </li>
        </ul>
        <div class="panel-footer text-center">
          <a href class="btn btn-warning font-bold m">Start your free trial</a>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6">
      <div class="panel b-a">
        <div class="panel-heading wrapper-xs bg-success no-border">          
        </div>
        <div class="wrapper text-center">
          <h4 class="text-u-c m-b-none">Bussiness</h4>
          <h2 class="m-t-none">
            <sup class="pos-rlt" style="top:-22px">$</sup>
            <span class="text-2x text-lt">299</span>
            <span class="text-xs">/ mo</span>
          </h2>
        </div>
        <ul class="list-group">
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> Email preview on air
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> Spam testing and blocking
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> 100 GB Space
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> 200 user accounts
          </li>
          <li class="list-group-item">
            <i class="icon-close text-danger m-r-xs"></i> <span class="text-l-t">Free support for two years</span>
          </li>
          <li class="list-group-item">
            <i class="icon-close text-danger m-r-xs"></i> <span class="text-l-t">Free upgrade for one year</span>
          </li>
        </ul>
        <div class="panel-footer text-center">
          <a href class="btn btn-success font-bold m">Start your free trial</a>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 hidden-md">
      <div class="panel b-a">
        <div class="panel-heading wrapper-xs bg-primary no-border">
          
        </div>
        <div class="wrapper text-center b-b b-light">
          <h4 class="text-u-c m-b-none">Enterprise</h4>
          <h2 class="m-t-none">
            <sup class="pos-rlt" style="top:-22px">$</sup>
            <span class="text-2x text-lt">399</span>
            <span class="text-xs">/ mo</span>
          </h2>
        </div>
        <ul class="list-group text-center no-borders m-t-sm">
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> Email preview on air
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> Spam testing and blocking
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> 100 GB Space
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> 200 user accounts
          </li>
          <li class="list-group-item">
            <i class="icon-close text-danger m-r-xs"></i> <span class="text-l-t">Free support for two years</span>
          </li>
          <li class="list-group-item">
            <i class="icon-close text-danger m-r-xs"></i> <span class="text-l-t">Free upgrade for one year</span>
          </li>
        </ul>
        <div class="panel-footer text-center">
          <a href class="btn btn-primary font-bold m">Start your free trial</a>
        </div>
      </div>
    </div>
  </div>
  <h2 class="font-thin m-b-lg">Combine</h2>
  <div class="row no-gutter">
    <div class="col-lg-3 col-md-4 col-sm-6">
      <div class="panel b-a">
        <div class="panel-heading wrapper-xs bg-primary no-border">          
        </div>
        <div class="wrapper text-center b-b b-light">
          <h4 class="text-u-c m-b-none">Start</h4>
          <h2 class="m-t-none">
            <sup class="pos-rlt" style="top:-22px">$</sup>
            <span class="text-2x text-lt">99</span>
            <span class="text-xs">/ mo</span>
          </h2>
        </div>
        <ul class="list-group text-center no-borders m-t-sm">
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> Email preview on air
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> Spam testing and blocking
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> 100 GB Space
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> 200 user accounts
          </li>
          <li class="list-group-item">
            <i class="icon-close text-danger m-r-xs"></i> <span class="text-l-t">Free support for two years</span>
          </li>
          <li class="list-group-item">
            <i class="icon-close text-danger m-r-xs"></i> <span class="text-l-t">Free upgrade for one year</span>
          </li>
        </ul>
        <div class="panel-footer text-center">
          <a href class="btn btn-primary font-bold m">Start your free trial</a>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6">
      <div class="panel b-a m-t-n-md m-b-xl">
        <div class="panel-heading wrapper-xs bg-warning dker no-border">
          
        </div>
        <div class="wrapper bg-warning text-center m-l-n-xxs m-r-n-xxs">
          <h4 class="text-u-c m-b-none">Premium</h4>
          <h2 class="m-t-none">
            <sup class="pos-rlt" style="top:-22px">$</sup>
            <span class="text-2x text-lt">199</span>
            <span class="text-xs">/ mo</span>
          </h2>
        </div>
        <ul class="list-group text-center no-borders m-t-sm">
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> Email preview on air
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> Spam testing and blocking
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> 100 GB Space
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> 200 user accounts
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> Free support for two years
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> Free upgrade for one year
          </li>
        </ul>
        <div class="panel-footer text-center b-t m-t bg-light lter">
          <div class="m-t-sm">Recommanded for you</div>
          <a href class="btn btn-warning font-bold m">Start your free trial</a>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6">
      <div class="panel b-a">
        <div class="panel-heading wrapper-xs bg-primary no-border">          
        </div>
        <div class="wrapper text-center b-b b-light">
          <h4 class="text-u-c m-b-none">Business</h4>
          <h2 class="m-t-none">
            <sup class="pos-rlt" style="top:-22px">$</sup>
            <span class="text-2x text-lt">299</span>
            <span class="text-xs">/ mo</span>
          </h2>
        </div>
        <ul class="list-group text-center no-borders m-t-sm">
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> Email preview on air
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> Spam testing and blocking
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> 500 GB Space
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> 1000 user accounts
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> Free support for two years
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> Free upgrade for one year
          </li>
        </ul>
        <div class="panel-footer text-center">
          <a href class="btn btn-primary font-bold m">Start your free trial</a>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 hidden-md">
      <div class="panel b-a">
        <div class="panel-heading wrapper-xs bg-primary no-border">
          
        </div>
        <div class="wrapper text-center b-b b-light">
          <h4 class="text-u-c m-b-none">Enterprise</h4>
          <h2 class="m-t-none">
            <sup class="pos-rlt" style="top:-22px">$</sup>
            <span class="text-2x text-lt">399</span>
            <span class="text-xs">/ mo</span>
          </h2>
        </div>
        <ul class="list-group text-center no-borders m-t-sm">
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> Email preview on air
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> Spam testing and blocking
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> Unlimited Space
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> Unlimited user accounts
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> Free support for two years
          </li>
          <li class="list-group-item">
            <i class="icon-check text-success m-r-xs"></i> Free upgrade for one year
          </li>
        </ul>
        <div class="panel-footer text-center">
          <a href class="btn btn-primary font-bold m">Start your free trial</a>
        </div>
      </div>
    </div>
  </div>
</div>