neocities/views/plan/_pricing.erb

<section class="section plans">
  <h2>All Neocities plans include a neocities.org subdomain, WebDAV uploading, one-click backups, and all our social features. We'll never show ads on your site.</h2>
  
  <div class="plan-overview">
    <div class="header">
      <div class="col col-50 personal">
        Personal
      </div>
      <div class="col col-50 professional">
        Professional
      </div>
    </div>
    
    <div class="body">
      <div class="col col-25 free">
        <div class="plan-image free"></div>
        <h3>Free</h3>
        <div class="price">$0</div>
        <div class="interval">per month</div>
        <a href="/" class="btn-Action">Choose</a>
        <ul>
          <li><strong>30 MB</strong> storage</li>
          <li><strong>10 GB</strong> bandwidth</li>
        </ul>
      </div>
      
      <div class="col col-25 supporter">
        <div class="plan-image"></div>
        <h3>Supporter</h3>
        <div class="price">$5</div>
        <div class="interval">per month</div>
        <a href="/" class="btn-Action">Choose</a>
        <ul>
          <li><strong>1 GB</strong> storage</li>
          <li><strong>100 GB</strong> bandwidth</li>
        </ul>
        <ul>
          <li>Custom Domains</li>
          <li>Global CDN Cache</li>
          <li>DDoS mitigation</li>
        </ul>
      </div>
      
      <div class="col col-25 catbus">

        <div class="plan-image"></div>
        <h3>Cat Bus</h3>
        <div class="price">$20</div>
        <div class="interval">per month</div>
        <a href="/" class="btn-Action">Choose</a>
        <ul>
          <li><strong>10 GB</strong> storage</li>
          <li><strong>500 GB</strong> bandwidth</li>
        </ul>
        <ul>
          <li>Custom Domains</li>
          <li>Global CDN Cache</li>
          <li>DDoS mitigation</li>
          <li>Custom SSL Certificates</li>
          <li>No upload type restrictions</li>
          <li>Coming Soon: Unlimited Sites</li>
        </ul>
      </div>
      
      <div class="col col-25 fatcat">
        <div class="plan-image"></div>
        <h3>Fat Cat</h3>
        <div class="price">$50</div>
        <div class="interval">per month</div>
        <a href="/" class="btn-Action">Choose</a>
        <ul>
          <li><strong>100 GB</strong> storage</li>
          <li><strong>2 TB</strong> bandwidth</li>
        </ul>
        <ul>
          <li>Custom Domains</li>
          <li>Global CDN Cache</li>
          <li>DDoS mitigation</li>
          <li>Custom SSL Certificates</li>
          <li>No upload type restrictions</li>
          <li>Coming Soon: Unlimited Sites</li>
        </ul>
      </div>
      
    </div>
    
  </div>
  
  <h2><a href="">Compare Plans <i class="fa fa-caret-down"></i></a></h2>
  
  <table class="plan-chart">
    <tr>
      <th class="feature-column"></th>
      <th>
        <h3>Free</h3>
        <p>$0/mo</p>
        <a href="/" class="btn-Action">Choose</a>
      </th>
      <th>
        <h3>Supporter</h3>
        <p>$5/mo</p>
        <a href="/" class="btn-Action">Choose</a>
      </th>
      <th class="professional">
        <h3>Cat Bus</h3>
        <p>$20/mo</p>
        <a href="/" class="btn-Action">Choose</a>
      </th>
      <th class="professional">
        <h3>Fat Cat</h3>
        <p>$50/mo</p>
        <a href="/" class="btn-Action">Choose</a>
      </th>
    </tr>
    <tr>
      <td class="feature-column">Storage</td>
      <td>30 MB</td>
      <td>1 GB</td>
      <td>10 GB</td>
      <td>100 GB</td>
    </tr>
    <tr>
      <td class="feature-column">Bandwidth</td>
      <td>10 GB</td>
      <td>100 GB</td>
      <td>500 GB</td>
      <td>2 TB</td>
    </tr>
    <tr>
      <td class="feature-column">No advertising, ever</td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">WebDAV Uploading</td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">Neocities.org Subdomain</td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">One-Click Backups</td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">Site Tags</td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">RSS Feed</td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">Follow Your Favorite Sites</td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">Site Profile</td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">Neocities Site Editor</td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">Site Tipping (Coming Soon)</td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">Custom Domains</td>
      <td></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">High Performance Global CDN Cache</td>
      <td></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">DDoS Mitigation</td>
      <td></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">Unlimited Site Creation (Coming Soon)</td>
      <td></td>
      <td></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">Custom SSL Certificates</td>
      <td></td>
      <td></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">No File Upload Type Restrictions</td>
      <td></td>
      <td></td>
      <td></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
  </table>
</section>