{{ enablePlugins('prettify') }}

{% extends "layouts/application.html" %}


{% block content %}

  {% include "shared/page-title-ecommerce.html" %}
  
  <div class="pricing-table">
    <div class="pt-col-4">
      <div class="pt-header">
        <div class="pt-title">Free</div>
        <div class="pt-price">
          <span class="pt-currency">$</span>
          <span class="pt-amount">0</span>
        </div>
      </div>
      <ul class="pt-features">
        <li><strong>1</strong> Project</li>
        <li><strong>1GB</strong> Storage</li>
        <li><strong>128MB</strong> Memory</li>
        <li>No Support</li>
      </ul>
      <div class="pt-footer">
        <a class="btn btn-primary z-depth-0" role="button">Add to card</a>
      </div>
    </div>
    <div class="pt-col-4 pt-featured">
      <div class="pt-header">
        <div class="pt-title">Standard</div>
        <div class="pt-price">
          <span class="pt-currency">$</span>
          <span class="pt-amount">50</span>
          <span class="pt-period">/ mo</span>
        </div>
      </div>
      <ul class="pt-features">
        <li><strong>10</strong> Projects</li>
        <li><strong>5GB</strong> Storage</li>
        <li><strong>256MB</strong> Memory</li>
        <li>24/7 Technical Support</li>
      </ul>
      <div class="pt-footer">
        <a class="btn btn-primary z-depth-0" role="button">Add to card</a>
      </div>
    </div>
    <div class="pt-col-4">
      <div class="pt-header">
        <div class="pt-title">Premium</div>
        <div class="pt-price">
          <span class="pt-currency">$</span>
          <span class="pt-amount">60</span>
          <span class="pt-period">/ mo</span>
        </div>
      </div>
      <ul class="pt-features">
        <li><strong>15</strong> Projects</li>
        <li><strong>10GB</strong> Storage</li>
        <li><strong>512MB</strong> Memory</li>
        <li>24/7 Technical Support</li>
      </ul>
      <div class="pt-footer">
        <a class="btn btn-primary z-depth-0" role="button">Add to card</a>
      </div>
    </div>
    <div class="pt-col-4">
      <div class="pt-header">
        <div class="pt-title">Professional</div>
        <div class="pt-price">
          <span class="pt-currency">$</span>
          <span class="pt-amount">70</span>
          <span class="pt-period">/ mo</span>
        </div>
      </div>
      <ul class="pt-features">
        <li><strong>25</strong> Projects</li>
        <li><strong>20GB</strong> Storage</li>
        <li><strong>1024MB</strong> Memory</li>
        <li>24/7 Technical Support</li>
      </ul>
      <div class="pt-footer">
        <a class="btn btn-primary z-depth-0" role="button">Add to card</a>
      </div>
    </div>
  </div>

{% endblock %}