| Server IP : 104.21.80.248 / Your IP : 172.71.28.155 Web Server : Apache/2.4.25 (Win32) OpenSSL/1.0.2j PHP/5.6.30 System : Windows NT WIN-ECQAAA40806 6.2 build 9200 (Windows Server 2012 Standard Edition) i586 User : SYSTEM ( 0) PHP Version : 5.6.30 Disable Function : NONE MySQL : ON | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : E:/Inetpub/www/news/datacenter/admin/template-pages/ |
Upload File : |
<style>
/* =================================
Style for Pricing Table Example 1
================================= */
.tabco1 {
background: #fff;
padding: 10px !important;
}
th.tabco1 {
background: #fff;
padding: 32px 10px !important;
font-size: 18px;
text-transform: uppercase;
color: #000;
vertical-align: middle !important;
}
.tabco2 {
background: #009688;
text-align: center;
color: #fff;
}
th.tabco2 {
background: #50cc83;
padding: 20px 5px !important;
font-size: 18px;
text-transform: uppercase;
vertical-align: middle !important;
}
.tabco3 {
background: #03A9F4;
text-align: center;
color: #fff;
}
th.tabco3 {
background: #039BE5;
padding: 20px 10px !important;
font-size: 18px;
text-transform: uppercase;
vertical-align: middle !important;
}
.tabco4 {
background: #EF5350;
text-align: center;
color: #fff;
}
th.tabco4 {
background: #E53935;
padding: 20px 10px !important;
font-size: 18px;
text-transform: uppercase;
vertical-align: middle !important;
}
.rightSign {
color: #1ab921;
background: #fff;
border-radius: 45px;
padding: 5px;
border: 2px solid;
}
.crossSign {
color: #de2315;
background: #fff;
border-radius: 45px;
padding: 5px 7px;
border: 2px solid;
}
/* =================================
Style for Pricing Table Example 2
================================= */
.price-table {
background: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
border: 7px solid #eeeeee;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-webkit-transition: all .3s ease;
}
.price-table:hover {
background: rgba(0,0,0, .03);
border-color: #0093DD;
}
.price-table .price-table-heading {
color: #333333;
background: #f9f9f9;
padding: 10px 0;
margin: 0;
}
.price-table .price-table-heading .title {
color: #333333;
font-weight: 900;
letter-spacing: 1px;
}
.price-table > .price-table-body {
color: #FFFFFF;
background: #0093DD;
padding: 50px 0 30px;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-webkit-transition: all .3s ease;
}
.price-table > .price-table-body .value {
font-size: 66px;
font-weight: 300;
color: #FFFFFF;
padding: 0;
}
.price-table > .price-table-body .value small {
font-size: 16px;
}
.price-table > .list-group {
color: #333;
font-weight: 400;
margin-bottom: 0;
}
.price-table > .list-group .list-group-item {
color: #333;
font-weight: 400;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.price-table .btn {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-weight: 700;
}
.price-table-footer {
background: #eeeeee;
padding: 15px 0;
}
</style>
<div class="row">
<div class="col-xl-12">
<div class="breadcrumb-holder">
<h1 class="main-title float-left">Pricing Tables</h1>
<ol class="breadcrumb float-right">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active">Pricing Tables</li>
</ol>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- end row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-6">
<div class="card mb-3">
<div class="card-header">
<h3><i class="fa fa-table"></i> Pricing table example 1</h3>
</div>
<div class="card-body">
<table class="table table-condensed table-hover table-bordered table-responsive-md">
<thead>
<tr>
<th class="tabco1">PLAN</th>
<th class="tabco2">Starter</th>
<th class="tabco3">Plus</th>
<th class="tabco4">Pro</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tabco1" >100% Uniqueness</td>
<td class="tabco2" ><i class="fa fa-check rightSign" aria-hidden="true"></i></td>
<td class="tabco3"><i class="fa fa-check rightSign" aria-hidden="true"></i></td>
<td class="tabco4"><i class="fa fa-check rightSign" aria-hidden="true"></i></td>
</tr>
<tr>
<td class="tabco1" >Proof Checking</td>
<td class="tabco2" ><i class="fa fa-times crossSign" aria-hidden="true"></i></td>
<td class="tabco3" ><i class="fa fa-check rightSign" aria-hidden="true"></i></td>
<td class="tabco4" ><i class="fa fa-check rightSign" aria-hidden="true"></i></td>
</tr>
<tr>
<td class="tabco1" >Keyword Optimization</td>
<td class="tabco2" ><i class="fa fa-times crossSign" aria-hidden="true"></i></td>
<td class="tabco3" ><i class="fa fa-check rightSign" aria-hidden="true"></i></td>
<td class="tabco4" ><i class="fa fa-check rightSign" aria-hidden="true"></i></td>
</tr>
<tr>
<td class="tabco1" >LSI Keyword Optimization</td>
<td class="tabco2" ><i class="fa fa-times crossSign" aria-hidden="true"></i></td>
<td class="tabco3" ><i class="fa fa-check rightSign" aria-hidden="true"></i></td>
<td class="tabco4" ><i class="fa fa-check rightSign" aria-hidden="true"></i></td>
</tr>
<tr>
<td class="tabco1" >Grammarly Premium Checking</td>
<td class="tabco2" ><i class="fa fa-times crossSign" aria-hidden="true"></i></td>
<td class="tabco3" ><i class="fa fa-check rightSign" aria-hidden="true"></i></td>
<td class="tabco4" ><i class="fa fa-check rightSign" aria-hidden="true"></i></td>
</tr>
<tr>
<td class="tabco1"> Copyscape Premium Checking</td>
<td class="tabco2" ><i class="fa fa-times crossSign" aria-hidden="true"></i></td>
<td class="tabco3" ><i class="fa fa-check rightSign" aria-hidden="true"></i></td>
<td class="tabco4" ><i class="fa fa-check rightSign" aria-hidden="true"></i></td>
</tr>
<tr>
<td class="tabco1" >On-Page Optimization</td>
<td class="tabco2" ><i class="fa fa-times crossSign" aria-hidden="true"></i></td>
<td class="tabco3" ><i class="fa fa-times crossSign" aria-hidden="true"></i></td>
<td class="tabco4" ><i class="fa fa-check rightSign" aria-hidden="true"></i></td>
</tr>
<tr>
<td class="tabco1" >Bonus Content</td>
<td class="tabco2" ><i class="fa fa-times crossSign" aria-hidden="true"></i></td>
<td class="tabco3" ><i class="fa fa-times crossSign" aria-hidden="true"></i></td>
<td class="tabco4" >500 Word Content Free</td>
</tr>
<tr>
<td class="tabco1" >Modification After Submission</td>
<td class="tabco2" ><i class="fa fa-times crossSign" aria-hidden="true"></i></td>
<td class="tabco3" >1 Times</td>
<td class="tabco4" >2 Times</td>
</tr>
<tr>
<td class="tabco1" >Delivery Time</td>
<td class="tabco2" >3-4 Working Days</td>
<td class="tabco3" >2-3 Working Days</td>
<td class="tabco4" >1-2 Working Days</td>
</tr>
<tr>
<td class="tabco1" >WordPress Posting</td>
<td class="tabco2" ><i class="fa fa-times crossSign" aria-hidden="true"></i></td>
<td class="tabco3" ><i class="fa fa-times crossSign" aria-hidden="true"></i></td>
<td class="tabco4" ><i class="fa fa-times crossSign" aria-hidden="true"></i></td>
</tr>
</tbody>
</table>
</div><!-- end card body -->
</div><!-- end card-->
</div><!-- end col-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-6">
<div class="card mb-3">
<div class="card-header">
<h3><i class="fa fa-table"></i> Pricing Table Example 1</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<!-- Price Table Item -->
<div class="price-table text-center">
<div class="price-table-heading">
<h4 class="title">PLAN A</h4>
</div>
<div class="price-table-body">
<p class="value">FREE</p>
</div>
<ul class="list-group">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="price-table-footer"> <a class="btn btn-lg btn-success" href="#">BUY NOW!</a> </div>
</div>
<!-- END Price Table Item -->
<!-- START: Will be visible in tablet and mobile devices to make gap between tow price items -->
<div class="col-xs-12 col-sm-12 mb-5"></div>
<!-- END: Will be visible in tablet and mobile devices to make gap between tow price items -->
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<!-- Price Table Item -->
<div class="price-table text-center">
<div class="price-table-heading">
<h4 class="title">FREE PLAN - A</h4>
</div>
<div class="price-table-body">
<p class="value">$25<small>/month</small></p>
</div>
<ul class="list-group">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="price-table-footer"> <a class="btn btn-lg btn-success" href="#">BUY NOW!</a> </div>
</div>
<!-- END Price Table Item -->
<!-- START: Will be visible in tablet and mobile devices to make gap between tow price items -->
<div class="col-xs-12 col-sm-12 mb-5"></div>
<!-- END: Will be visible in tablet and mobile devices to make gap between tow price items -->
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<!-- Price Table Item -->
<div class="price-table text-center">
<div class="price-table-heading">
<h4 class="title">FREE PLAN - A</h4>
</div>
<div class="price-table-body">
<p class="value">$50<small>/month</small></p>
</div>
<ul class="list-group">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="price-table-footer"> <a class="btn btn-lg btn-success" href="#">BUY NOW!</a> </div>
</div>
<!-- END Price Table Item -->
<!-- START: Will be visible in tablet and mobile devices to make gap between tow price items -->
<div class="col-xs-12 col-sm-12 mb-5"></div>
<!-- END: Will be visible in tablet and mobile devices to make gap between tow price items -->
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<!-- Price Table Item -->
<div class="price-table text-center">
<div class="price-table-heading">
<h4 class="title">FREE PLAN - A</h4>
</div>
<div class="price-table-body">
<p class="value">$100<small>/month</small></p>
</div>
<ul class="list-group">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="price-table-footer"> <a class="btn btn-lg btn-success" href="#">BUY NOW!</a> </div>
</div>
<!-- END Price Table Item -->
<!-- START: Will be visible in tablet and mobile devices to make gap between tow price items -->
<div class="col-xs-12 col-sm-12 mb-5"></div>
<!-- END: Will be visible in tablet and mobile devices to make gap between tow price items -->
</div>
</div><!-- end row-->
</div><!-- end card body-->
</div><!-- end card-->
</div><!-- end col-->
</div><!-- end row--