Product page
- Extension page
a) Extension
Module position: slideshowModule suffix: Not used
<!-- Extension
================================================== -->
​
<div class="home-header h-block white">
<div class="h-block-content">
<div class="container">
<div class="row">
<div class="col-md-7 home-header-content">
<h2>Extension</h2>
<h4>Te dicat nihil offendit has, mel nisl liber ne, bonorum nonumes ad nam.<br />Facilis omittam in nec. Sea quando inermis assentior ea.</h4>
<div class="button-container"><a href="#" class="btn btn-primary btn-lg scroll-down"><em class="fa fa-download"></em> Download</a> <a href="#" target="_blank" rel="nofollow" class="btn btn-transparent btn-lg"><em class="fa fa-camera-retro"></em> View Demo</a></div>
</div>
<div class="col-md-5">
<div class="image-block"><img src="images/themeparrot/features/product_06.png" alt="product 06" class="img-responsive" /></div>
</div>
</div>
</div>
</div>
</div>
b) Features
Module position: home-2Module suffix: Not used
<!-- Extension tab
================================================== -->
​
<div class="h-block-2 black h-block">
<div class="h-block-content">
<div class="product-tab">
<ul class="nav nav-pills">
<li class="active"><a href="#feature-button-1" data-toggle="tab">Features</a></li>
<li><a href="#pricing" class="scroll-down">Pricing</a></li>
<li><a href="#" target="_blank" class="link-tab">Documentation</a></li>
</ul>
</div>
<div class="product-tab-content product-extension">
<div class="tab-content">
<div id="feature-button-1" class="tab-pane fade active in">
<section class="product-features row">
<ul class="nav product-feature-tab col-sm-3">
<li class="active"><a href="#plans" data-toggle="tab">Plans</a></li>
<li><a href="#payment-gateways" data-toggle="tab">Payment </a></li>
<li><a href="#admin-dashboard" data-toggle="tab">Reports</a></li>
<li><a href="#user-profile" data-toggle="tab">Membership Management</a></li>
<li><a href="#pricing-tax-config" data-toggle="tab">Pricing and Tax </a></li>
<li><a href="#integrations" data-toggle="tab"> Access Restriction</a></li>
<li><a href="#powerful-app" data-toggle="tab">Powerful App </a></li>
<li><a href="#email-notifications" data-toggle="tab">Email Notifications</a></li>
<li><a href="#invoice-app" data-toggle="tab">Invoice App</a></li>
<li><a href="#migrate-app" data-toggle="tab">Akeeba Subscriptions</a></li>
</ul>
<div class="feature-list-main-block col-sm-9">
<div class="tab-content">
<div id="plans" class="tab-pane fade active in">
<div class="row feature-list">
<div class="col-md-12">
<div class="feature-content-block">
<h4>Plans</h4>
<h5>Create as many plans as you want</h5>
<p>Alterum equidem mentitum ad pri, fuisset tincidunt ex ius. Est libris partiendo id, in iudico tacimates vim.Alterum equidem mentitum ad pri, fuisset tincidunt ex ius. Est libris partiendo id, in iudico tacimates vim.</p>
</div>
</div>
<div class="col-md-12">
<div class="feature-image-block"><img src="images/themeparrot/features/product_03.png" alt="product 03" class="img-responsive" /></div>
</div>
</div>
</div>
<div id="admin-dashboard" class="tab-pane fade in">
<div class="row feature-list">
<div class="col-md-12">
<div class="feature-content-block">
<h4>Dashboard Reporting and Analytics</h4>
<ul>
<li>Ut pri commune voluptaria.</li>
<li>Et iusto graecis pro, evertitur concludaturque sit in.</li>
<li>Augue argumentum pri no, ex persecuti forensibus suscipiantur vix.</li>
</ul>
</div>
</div>
<div class="col-md-12">
<div class="feature-image-block"><img src="images/themeparrot/features/product_04.png" alt="product 04" class="img-responsive" /></div>
</div>
</div>
</div>
<div id="user-profile" class="tab-pane fade in">
<div class="row feature-list">
<div class="col-md-12">
<div class="feature-content-block">
<h4>Membership Management</h4>
<p><strong>Front-end</strong></p>
<ul>
<li>Cu dicta dolore vocent pri, placerat mandamus praesent mel ne</li>
<li>Nec ad audiam ancillae appellantur</li>
</ul>
</div>
</div>
<div class="col-md-12">
<div class="feature-image-block"><img src="images/themeparrot/features/product_06.png" alt="product 06" class="img-responsive" /></div>
</div>
</div>
</div>
<div id="pricing-tax-config" class="tab-pane fade in">
<div class="row feature-list">
<div class="col-md-12">
<div class="feature-content-block">
<h4>Pricing and Tax</h4>
<ul>
<li>Pri sumo volutpat eu. Voluptua abhorreant sadipscing ea duo.</li>
<li>Tritani rationibus at eam, nibh minim sit in. Similique gloriatur temporibus vis ea, eos et error possim.</li>
<li>Eu eripuit inermis usu.</li>
</ul>
</div>
</div>
<div class="col-md-12">
<div class="feature-image-block"><img src="images/themeparrot/features/product_03.png" alt="product 03" class="img-responsive" /></div>
</div>
</div>
</div>
<div id="integrations" class="tab-pane fade in">
<div class="row feature-list">
<div class="col-md-12">
<div class="feature-content-block">
<h4>Member Access Restriction</h4>
<ul>
<li>Ex ius nonumes neglegentur necessitatibus, ad nec nobis urbanitas, id regione quaeque ius.</li>
<li>Qui primis invenire id, ut dolorum instructior sed. An elit labitur vim, quod latine at qui.</li>
<li>An elit labitur vim, quod latine at qui.</li>
</ul>
</div>
</div>
<div class="col-md-12">
<div class="feature-image-block"><img src="images/themeparrot/features/product_04.png" alt="product 04" class="img-responsive" /></div>
</div>
</div>
</div>
<div id="payment-gateways" class="tab-pane fade in">
<div class="row feature-list">
<div class="col-md-12">
<div class="feature-content-block">
<h4>Payment Integration</h4>
<ul>
<li>Mei unum impetus cu, usu sumo mutat dicit ex.</li>
<li>Augue argumentum pri no, ex persecuti forensibus suscipiantur vix.</li>
<li>Et iusto graecis pro, evertitur concludaturque sit in.</li>
</ul>
</div>
</div>
<div class="col-md-12">
<div class="feature-image-block"><img src="images/themeparrot/features/product_04.png" alt="product 04" class="img-responsive" /></div>
</div>
</div>
</div>
<div id="powerful-app" class="tab-pane fade in">
<div class="row feature-list">
<div class="col-md-12">
<div class="feature-content-block">
<h4>Powerful App</h4>
<p>Aliquip volumus cu sea, option prompta expetenda ex pro. Ne nec ornatus adipisci persecuti.</p>
<p>Nec ad audiam ancillae appellantur. Alterum equidem mentitum ad pri, fuisset tincidunt ex ius.</p>
</div>
</div>
<div class="col-md-12">
<div class="feature-image-block"><img src="images/themeparrot/features/product_06.png" alt="product 06" class="img-responsive" /></div>
</div>
</div>
</div>
<div id="email-notifications" class="tab-pane fade in">
<div class="row feature-list">
<div class="col-md-12">
<div class="feature-content-block">
<h4>Email Notifications</h4>
<ul>
<li>Qui primis invenire id, ut dolorum instructior sed. An elit labitur vim, quod latine at qui.
<ul>
<li>An elit labitur vim</li>
<li>Quod latine at qui</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-md-12">
<div class="feature-image-block"><img src="images/themeparrot/features/product_03.png" alt="product 03" class="img-responsive" /></div>
</div>
</div>
</div>
<div id="authorize-net" class="tab-pane fade in">
<div class="row feature-list">
<div class="col-md-12">
<div class="feature-content-block">
<h4>Authourize Payments</h4>
<p>Augue argumentum pri no, ex persecuti forensibus suscipiantur vix.</p>
<p>Vix in commune repudiare appellantur</p>
<p>Per exerci facete option ne, vero consectetuer consequuntur usu ei.</p>
<p>Ut pri commune voluptaria</p>
<p>velit facete ei cum.</p>
<p> </p>
</div>
</div>
<div class="col-md-12">
<div class="feature-image-block"><img src="images/themeparrot/features/product_04.png" alt="product 04" class="img-responsive" /></div>
</div>
</div>
</div>
<div id="invoice-app" class="tab-pane fade in">
<div class="row feature-list">
<div class="col-md-12">
<div class="feature-content-block">
<h4>Invoice App</h4>
<p>Lorem ipsum dolor sit amet, mel ad case nostrum delectus, ea minim aeque essent vel.</p>
<p>Etiam perfecto mel ei. Iriure latine oporteat ex eum, nullam senserit an usu</p>
<p>Ad usu veri placerat, tritani moderatius instructior in sed.</p>
</div>
</div>
<div class="col-md-12">
<div class="feature-image-block"><img src="images/themeparrot/features/product_06.png" alt="product 06" class="img-responsive" /></div>
</div>
</div>
</div>
<div id="migrate-app" class="tab-pane fade in">
<div class="row feature-list">
<div class="col-md-12">
<div class="feature-content-block">
<h4>Migrate from Akeeba Subscriptions</h4>
<p>Quas tation instructior pro eu, pro mundi civibus suavitate eu.</p>
<p>Tritani rationibus at eam, nibh minim sit in. Similique gloriatur temporibus vis ea, eos et error possim.</p>
<p> </p>
</div>
</div>
<div class="col-md-12">
<div class="feature-image-block"><img src="images/themeparrot/features/product_03.png" alt="product 03" class="img-responsive" /></div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
c) Pricing
Module position: home-3Module suffix: Not used
<!-- Extension pricing plans
================================================== -->
​
<div id="pricing" class="h-block h-block-3">
<div class="h-block-content">
<div class="plan-header">
<h2>Pricing</h2>
<p>Qui primis invenire id, ut dolorum instructior sed</p>
</div>
<div class="axis-subs-plans-wrapper">
<div class="row">
<div class="col-md-6">
<div class="plan-table free-plan">
<div class="table-header">
<div class="pricing-cost"><span><strong>$0</strong></span></div>
<h4>Free</h4>
</div>
<div class="buy-button"><span class="btn btn-primary btn-lg back-to-download">Download</span></div>
<div> </div>
<ul class="plan-list">
<li>Ut pri commune voluptaria</li>
<li>Qui primis invenire id</li>
<li>An elit labitur vim</li>
<li>Augue argumentum pri no</li>
<li>Per exerci facete option ne</li>
<li>Tritani rationibus at eam</li>
<li>Similique gloriatur temporibus</li>
<li>Eu eripuit inermis usu</li>
<li>Aliquip volumus cu sea</li>
<li>Ut pri commune voluptaria</li>
<li>Qui primis invenire id</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
</ul>
<div class="buy-button"><span class="btn btn-primary btn-lg back-to-download">Download</span></div>
</div>
</div>
<div class="col-md-6">
<div class="plan-table premium-plan featured-plan">
<div class="best_package">New</div>
<div class="table-header">
<div class="pricing-cost"><span><strong>$49</strong></span>
<h5>/6 months</h5>
</div>
<h4>Premium</h4>
</div>
<div class="buy-button"><a href="index.php/component/axisubs/Plan/subscription-pro" class="btn btn-primary">Buy now</a></div>
<ul class="plan-list">
<li>Eu eripuit inermis usu</li>
<li>Tritani rationibus at eam</li>
<li>Similique gloriatur temporibus vis ea, eos et error possim</li>
<li>Est libris partiendo id</li>
<li>Tritani rationibus at eam</li>
<li>Pri sumo volutpat eu</li>
<li>Ne nec ornatus adipisci persecuti</li>
<li><a href="#">Paypal payment</a></li>
<li>Est libris partiendo id</li>
<li>Ex ius nonumes neglegentur necessitatibus</li>
<li><a href="#">An elit labitur vim, quod latine at qui</a> (App)</li>
<li class="pricingtbl-pro-feature-item"><a href="#">Vix in commune repudiare appellantur</a></li>
<li class="pricingtbl-pro-feature-item"><a href="#"> Per exerci facete option ne</a></li>
<li><a href="#"> An elit labitur vim, quod latine at qui</a></li>
<li>Mei unum impetus cu, usu sumo mutat dicit ex</li>
<li class="pricingtbl-pro-feature-item">Ex ius nonumes neglegentur necessitatibus</li>
<li class="pricingtbl-pro-feature-item">Qui primis invenire id, ut dolorum instructior sed</li>
<li class="pricingtbl-pro-feature-item">Est libris partiendo id</li>
</ul>
<div class="buy-button"><a href="index.php/subscribe/subscription-pro" class="btn btn-primary">Buy now</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
d) Compare features
Module position: home-4Module suffix: Not used
<!-- Extension compare features
================================================== -->
​
<div class="features-compare-table">
<div class="header">
<h2>Compare features</h2>
<div class="row">
<div class="col-sm-8 col-heading heading">One-Time Price</div>
<div class="col-sm-2 col-xs-6 border-left hidden-xs">
<h4>Free</h4>
<span class="big-number">$0</span></div>
<div class="col-sm-2 col-xs-6 border-left hidden-xs">
<h4>PRO</h4>
<span class="big-number">$49</span></div>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-heading">
<div class="feat-icon"><em class="fa fa-sitemap"></em></div>
<div class="feat-text">
<h4>Create Free and Paid Plans</h4>
<p>Offer $0 Veniam cotidieque vel ea, ex postea adipisci his.</p>
</div>
</div>
<div class="col-xs-6 hidden-sm hidden-md hidden-lg">
<h4>Free</h4>
</div>
<div class="col-sm-2 col-xs-6 border-left "><em class="fa fa-check"></em></div>
<div class="col-xs-6 hidden-sm hidden-md hidden-lg">
<h4>PRO</h4>
</div>
<div class="col-sm-2 col-xs-6 border-left "><em class="fa fa-check"></em></div>
</div>
<div class="row">
<div class="col-sm-8 col-heading">
<div class="feat-icon"><em class="fa fa-sitemap"></em></div>
<div class="feat-text">
<h4>Recurring and Non-Recurring Plans</h4>
<p>Et vix dictas referrentur, id inimicus pertinacia nam. Ne idque sonet est, ut mel habeo praesent concludaturque.</p>
</div>
</div>
<div class="col-xs-6 hidden-sm hidden-md hidden-lg">
<h4>Free</h4>
</div>
<div class="col-sm-2 col-xs-6 border-left "><em class="fa fa-check"></em></div>
<div class="col-xs-6 hidden-sm hidden-md hidden-lg">
<h4>PRO</h4>
</div>
<div class="col-sm-2 col-xs-6 border-left "><em class="fa fa-check"></em></div>
</div>
<div class="row">
<div class="col-sm-8 col-heading">
<div class="feat-icon"><em class="fa fa-sitemap"></em></div>
<div class="feat-text">
<h4>Trial period on Subscriptions</h4>
<p>Ea commodo impedit nostrum eum. Labore vivendo mea id.</p>
</div>
</div>
<div class="col-xs-6 hidden-sm hidden-md hidden-lg">
<h4>Free</h4>
</div>
<div class="col-sm-2 col-xs-6 border-left "><em class="fa fa-check"></em></div>
<div class="col-xs-6 hidden-sm hidden-md hidden-lg">
<h4>PRO</h4>
</div>
<div class="col-sm-2 col-xs-6 border-left "><em class="fa fa-check"></em></div>
</div>
<div class="row">
<div class="col-sm-8 col-heading">
<div class="feat-icon"><em class="fa fa-desktop"></em></div>
<div class="feat-text">
<h4>Admin Dashboard</h4>
<p>Ei mutat tamquam ponderum eum, eam aeterno graecis luptatum te.</p>
</div>
</div>
<div class="col-xs-6 hidden-sm hidden-md hidden-lg">
<h4>Free</h4>
</div>
<div class="col-sm-2 col-xs-6 border-left "><em class="fa fa-check"></em></div>
<div class="col-xs-6 hidden-sm hidden-md hidden-lg">
<h4>PRO</h4>
</div>
<div class="col-sm-2 col-xs-6 border-left "><em class="fa fa-check"></em></div>
</div>
<div class="row">
<div class="col-sm-8 col-heading">
<div class="feat-icon"><em class="fa fa-users"></em></div>
<div class="feat-text">
<h4>User Profile</h4>
<p>View / Edit / Update profile data</p>
</div>
</div>
<div class="col-xs-6 hidden-sm hidden-md hidden-lg">
<h4>Free</h4>
</div>
<div class="col-sm-2 col-xs-6 border-left "><em class="fa fa-check"></em></div>
<div class="col-xs-6 hidden-sm hidden-md hidden-lg">
<h4>PRO</h4>
</div>
<div class="col-sm-2 col-xs-6 border-left "><em class="fa fa-check"></em></div>
</div>
<div class="row">
<div class="col-sm-8 col-heading">
<div class="feat-icon"><em class="fa fa-usd"></em></div>
<div class="feat-text">
<h4>Basic Pricing and Tax configuration</h4>
<p>Apeirian recteque suscipiantur cu pro. Et vix dictas referrentur, id inimicus pertinacia nam. Ne idque sonet est, ut mel habeo praesent concludaturque.</p>
</div>
</div>
<div class="col-xs-6 hidden-sm hidden-md hidden-lg">
<h4>Free</h4>
</div>
<div class="col-sm-2 col-xs-6 border-left "><em class="fa fa-check"></em></div>
<div class="col-xs-6 hidden-sm hidden-md hidden-lg">
<h4>PRO</h4>
</div>
<div class="col-sm-2 col-xs-6 border-left "><em class="fa fa-check"></em></div>
</div>
<div class="row">
<div class="col-sm-8 col-heading">
<div class="feat-icon"><em class="fa fa-sitemap"></em></div>
<div class="feat-text">
<h4>Integrations</h4>
<p>Ea commodo impedit nostrum eum. Labore vivendo mea id.</p>
</div>
</div>
<div class="col-xs-6 hidden-sm hidden-md hidden-lg">
<h4>Free</h4>
</div>
<div class="col-sm-2 col-xs-6 border-left "><em class="fa fa-check"></em></div>
<div class="col-xs-6 hidden-sm hidden-md hidden-lg">
<h4>PRO</h4>
</div>
<div class="col-sm-2 col-xs-6 border-left "><em class="fa fa-check"></em></div>
</div>
<div class="row">
<div class="col-sm-8 col-heading">
<div class="feat-icon"><em class="fa fa-usd"></em></div>
<div class="feat-text">
<h4><a href="#">Paypal payment</a></h4>
<p>Apeirian recteque suscipiantur cu pro.</p>
</div>
</div>
<div class="col-xs-6 hidden-sm hidden-md hidden-lg">
<h4>Free</h4>
</div>
<div class="col-sm-2 col-xs-6 border-left "><