Apollo-DEC/apollo_developers
Apollo-DEC/apollo_developers
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
master
apollo_developers/assets/views/utility_pricing_table.html
venbatechnologies@gmail.com 1809bcf9c9 fixed table for student details
2018-04-23 18:34:11 +05:30

547 lines
13 KiB
HTML
Executable File
Raw Permalink Blame History

<!-- start: PAGE TITLE -->
<section id="page-title">
<div class="row">
<div class="col-sm-8">
<h1 class="mainTitle" translate="sidebar.nav.utilities.PRICING">{{ mainTitle }}</h1>
<span class="mainDescription">If you're making a rockin' marketing site for a subscription-based product, you're likely in need of a pricing table. </span>
</div>
<div ncy-breadcrumb></div>
</div>
</section>
<!-- end: PAGE TITLE -->
<!-- start: PRICING TABLE EXAMPLE 1 -->
<div class="container-fluid container-fullw bg-white">
<div class="row">
<div class="col-md-12">
<h5 class="over-title margin-bottom-15">First <span class="text-bold">example</span></h5>
<p>
These tables fill 100% of their container and are made from a simple unordered list.
</p>
<div class="pricing-table">
<div class="col-lg-3 col-md-3 col-xs-6">
<ul class="plan plan1">
<li class="plan-name">
Basic
</li>
<li class="plan-price">
<h3> $19 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
</li>
<li>
<strong>5GB</strong> Storage
</li>
<li>
<strong>1GB</strong> RAM
</li>
<li>
<strong>400GB</strong> Bandwidth
</li>
<li>
<strong>10</strong> Email Address
</li>
<li>
<strong>Forum</strong> Support
</li>
<li class="plan-action">
<a href="#" class="btn btn-green btn-lg">
Signup
</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-xs-6">
<ul class="plan plan2 featured">
<li class="plan-name">
Standard
</li>
<li class="plan-price">
<h3> $29 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
</li>
<li>
<strong>5GB</strong> Storage
</li>
<li>
<strong>1GB</strong> RAM
</li>
<li>
<strong>400GB</strong> Bandwidth
</li>
<li>
<strong>10</strong> Email Address
</li>
<li>
<strong>Forum</strong> Support
</li>
<li class="plan-action">
<a href="#" class="btn btn-green btn-lg">
Signup
</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-xs-6">
<ul class="plan plan3">
<li class="plan-name">
Advanced
</li>
<li class="plan-price">
<h3> $49 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
</li>
<li>
<strong>50GB</strong> Storage
</li>
<li>
<strong>8GB</strong> RAM
</li>
<li>
<strong>1024GB</strong> Bandwidth
</li>
<li>
<strong>Unlimited</strong> Email Address
</li>
<li>
<strong>Forum</strong> Support
</li>
<li class="plan-action">
<a href="#" class="btn btn-green btn-lg">
Signup
</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-xs-6">
<ul class="plan plan4">
<li class="plan-name">
Mighty
</li>
<li class="plan-price">
<h3> $99 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
</li>
<li>
<strong>50GB</strong> Storage
</li>
<li>
<strong>8GB</strong> RAM
</li>
<li>
<strong>1024GB</strong> Bandwidth
</li>
<li>
<strong>Unlimited</strong> Email Address
</li>
<li>
<strong>Forum</strong> Support
</li>
<li class="plan-action">
<a href="#" class="btn btn-green btn-lg">
Signup
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- end: PRICING TABLE EXAMPLE 1 -->
<!-- start: PRICING TABLE EXAMPLE 2 -->
<div class="container-fluid container-fullw">
<div class="row">
<div class="col-md-12">
<h5 class="over-title margin-bottom-15">Second <span class="text-bold">example</span></h5>
<p>
These tables fill 100% of their container and are made from a simple unordered list.
</p>
<div class="pricing-table pricing-green">
<div class="col-lg-3 col-md-3 col-xs-6">
<ul class="plan plan1">
<li class="plan-name">
Basic
</li>
<li class="plan-price">
<h3> $19 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
</li>
<li>
<strong>5GB</strong> Storage
</li>
<li>
<strong>1GB</strong> RAM
</li>
<li>
<strong>400GB</strong> Bandwidth
</li>
<li>
<strong>10</strong> Email Address
</li>
<li>
<strong>Forum</strong> Support
</li>
<li class="plan-action">
<a href="#" class="btn btn-red btn-lg">
Signup
</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-xs-6">
<ul class="plan plan2 featured">
<li class="plan-name">
Standard
</li>
<li class="plan-price">
<h3> $29 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
</li>
<li>
<strong>5GB</strong> Storage
</li>
<li>
<strong>1GB</strong> RAM
</li>
<li>
<strong>400GB</strong> Bandwidth
</li>
<li>
<strong>10</strong> Email Address
</li>
<li>
<strong>Forum</strong> Support
</li>
<li class="plan-action">
<a href="#" class="btn btn-red btn-lg">
Signup
</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-xs-6">
<ul class="plan plan3">
<li class="plan-name">
Advanced
</li>
<li class="plan-price">
<h3> $49 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
</li>
<li>
<strong>50GB</strong> Storage
</li>
<li>
<strong>8GB</strong> RAM
</li>
<li>
<strong>1024GB</strong> Bandwidth
</li>
<li>
<strong>Unlimited</strong> Email Address
</li>
<li>
<strong>Forum</strong> Support
</li>
<li class="plan-action">
<a href="#" class="btn btn-red btn-lg">
Signup
</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-xs-6">
<ul class="plan plan4">
<li class="plan-name">
Mighty
</li>
<li class="plan-price">
<h3> $99 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
</li>
<li>
<strong>50GB</strong> Storage
</li>
<li>
<strong>8GB</strong> RAM
</li>
<li>
<strong>1024GB</strong> Bandwidth
</li>
<li>
<strong>Unlimited</strong> Email Address
</li>
<li>
<strong>Forum</strong> Support
</li>
<li class="plan-action">
<a href="#" class="btn btn-red btn-lg">
Signup
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- end: PRICING TABLE EXAMPLE 2 -->
<!-- start: PRICING TABLE EXAMPLE 3 -->
<div class="container-fluid container-fullw bg-white">
<div class="row">
<div class="col-md-12">
<h5 class="over-title margin-bottom-15">Third <span class="text-bold">example</span></h5>
<p>
These tables fill 100% of their container and are made from a simple unordered list.
</p>
<div class="pricing-table pricing-blue">
<div class="col-lg-3 col-md-3 col-xs-6">
<ul class="plan plan1">
<li class="plan-name">
Basic
</li>
<li class="plan-price">
<h3> $19 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
</li>
<li>
<strong>5GB</strong> Storage
</li>
<li>
<strong>1GB</strong> RAM
</li>
<li>
<strong>400GB</strong> Bandwidth
</li>
<li>
<strong>10</strong> Email Address
</li>
<li>
<strong>Forum</strong> Support
</li>
<li class="plan-action">
<a href="#" class="btn btn-blue btn-lg">
Signup
</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-xs-6">
<ul class="plan plan2 featured">
<li class="plan-name">
Standard
</li>
<li class="plan-price">
<h3> $29 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
</li>
<li>
<strong>5GB</strong> Storage
</li>
<li>
<strong>1GB</strong> RAM
</li>
<li>
<strong>400GB</strong> Bandwidth
</li>
<li>
<strong>10</strong> Email Address
</li>
<li>
<strong>Forum</strong> Support
</li>
<li class="plan-action">
<a href="#" class="btn btn-blue btn-lg">
Signup
</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-xs-6">
<ul class="plan plan3">
<li class="plan-name">
Advanced
</li>
<li class="plan-price">
<h3> $49 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
</li>
<li>
<strong>50GB</strong> Storage
</li>
<li>
<strong>8GB</strong> RAM
</li>
<li>
<strong>1024GB</strong> Bandwidth
</li>
<li>
<strong>Unlimited</strong> Email Address
</li>
<li>
<strong>Forum</strong> Support
</li>
<li class="plan-action">
<a href="#" class="btn btn-blue btn-lg">
Signup
</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-xs-6">
<ul class="plan plan4">
<li class="plan-name">
Mighty
</li>
<li class="plan-price">
<h3> $99 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
</li>
<li>
<strong>50GB</strong> Storage
</li>
<li>
<strong>8GB</strong> RAM
</li>
<li>
<strong>1024GB</strong> Bandwidth
</li>
<li>
<strong>Unlimited</strong> Email Address
</li>
<li>
<strong>Forum</strong> Support
</li>
<li class="plan-action">
<a href="#" class="btn btn-blue btn-lg">
Signup
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- end: PRICING TABLE EXAMPLE 3 -->
<!-- start: PRICING TABLE EXAMPLE 4 -->
<div class="container-fluid container-fullw">
<div class="row">
<div class="col-md-12">
<h5 class="over-title margin-bottom-15">Fourth <span class="text-bold">example</span></h5>
<p>
These tables fill 100% of their container and are made from a simple unordered list.
</p>
<div class="pricing-table pricing-red">
<div class="col-lg-3 col-md-3 col-xs-6">
<ul class="plan plan1">
<li class="plan-name">
Basic
</li>
<li class="plan-price">
<h3> $19 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
</li>
<li>
<strong>5GB</strong> Storage
</li>
<li>
<strong>1GB</strong> RAM
</li>
<li>
<strong>400GB</strong> Bandwidth
</li>
<li>
<strong>10</strong> Email Address
</li>
<li>
<strong>Forum</strong> Support
</li>
<li class="plan-action">
<a href="#" class="btn btn-blue btn-lg">
Signup
</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-xs-6">
<ul class="plan plan2 featured">
<li class="plan-name">
Standard
</li>
<li class="plan-price">
<h3> $29 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
</li>
<li>
<strong>5GB</strong> Storage
</li>
<li>
<strong>1GB</strong> RAM
</li>
<li>
<strong>400GB</strong> Bandwidth
</li>
<li>
<strong>10</strong> Email Address
</li>
<li>
<strong>Forum</strong> Support
</li>
<li class="plan-action">
<a href="#" class="btn btn-blue btn-lg">
Signup
</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-xs-6">
<ul class="plan plan3">
<li class="plan-name">
Advanced
</li>
<li class="plan-price">
<h3> $49 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
</li>
<li>
<strong>50GB</strong> Storage
</li>
<li>
<strong>8GB</strong> RAM
</li>
<li>
<strong>1024GB</strong> Bandwidth
</li>
<li>
<strong>Unlimited</strong> Email Address
</li>
<li>
<strong>Forum</strong> Support
</li>
<li class="plan-action">
<a href="#" class="btn btn-blue btn-lg">
Signup
</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-xs-6">
<ul class="plan plan4">
<li class="plan-name">
Mighty
</li>
<li class="plan-price">
<h3> $99 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
</li>
<li>
<strong>50GB</strong> Storage
</li>
<li>
<strong>8GB</strong> RAM
</li>
<li>
<strong>1024GB</strong> Bandwidth
</li>
<li>
<strong>Unlimited</strong> Email Address
</li>
<li>
<strong>Forum</strong> Support
</li>
<li class="plan-action">
<a href="#" class="btn btn-blue btn-lg">
Signup
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- end: PRICING TABLE EXAMPLE 4 -->
Reference in New Issue View Git Blame Copy Permalink