<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<h2>STYLE 1</h2>
<!-- PRICING TABLE STYLE 1-->
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
<div class="price_table_container">
<div class="price_table_heading">Starter</div>
<div class="price_table_body">
<div class="price_table_row cost warning-bg"><strong>$ 19</strong><span>/MONTH</span></div>
<div class="price_table_row">1 Website</div>
<div class="price_table_row">10 GB Storage</div>
<div class="price_table_row">10 GB Bandwidth</div>
<div class="price_table_row">10 Email Addresses</div>
<div class="price_table_row">Free Backup</div>
<div class="price_table_row">Full Time Support</div>
</div>
<a href="#" class="btn btn-warning btn-lg btn-block">Sign Up</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
<div class="recommended"><strong><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> RECOMMENDED</strong></div>
<div class="price_table_container">
<div class="price_table_heading">Basic</div>
<div class="price_table_body">
<div class="price_table_row cost primary-bg"><strong>$ 29</strong><span>/MONTH</span></div>
<div class="price_table_row">10 Websites</div>
<div class="price_table_row">100 GB Storage</div>
<div class="price_table_row">100 GB Bandwidth</div>
<div class="price_table_row">50 Email Addresses</div>
<div class="price_table_row">Free Backup</div>
<div class="price_table_row">Full Time Support</div>
</div>
<a href="#" class="btn btn-primary btn-lg btn-block">Sign Up</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
<div class="price_table_container">
<div class="price_table_heading">Premium</div>
<div class="price_table_body">
<div class="price_table_row cost success-bg"><strong>$ 39</strong><span>/MONTH</span></div>
<div class="price_table_row">100 Websites</div>
<div class="price_table_row">1 TB Storage</div>
<div class="price_table_row">1 TB Bandwidth</div>
<div class="price_table_row">100 Email Addresses</div>
<div class="price_table_row">Free Backup</div>
<div class="price_table_row">Full Time Support</div>
</div>
<a href="#" class="btn btn-success btn-lg btn-block">Sign Up</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
<div class="price_table_container">
<div class="price_table_heading">Master</div>
<div class="price_table_body">
<div class="price_table_row cost info-bg"><strong>$ 60</strong><span>/MONTH</span></div>
<div class="price_table_row">Unlimited Websites</div>
<div class="price_table_row">10 TB Storage</div>
<div class="price_table_row">100 TB Bandwidth</div>
<div class="price_table_row">1000 Email Addresses</div>
<div class="price_table_row">Free Backup</div>
<div class="price_table_row">Full Time Support</div>
</div>
<a href="#" class="btn btn-info btn-lg btn-block">Sign Up</a>
</div>
</div>
</div>
</div>
<!-- PRICING TABLE STYLE 1-->
<!-- SPACER-->
<div class="spacer"></div>
<!-- SPACER-->
<h2>STYLE 2</h2>
<!-- PRICING TABLE STYLE 2-->
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
<div class="price_table_container">
<div class="price_table_heading">Starter</div>
<div class="price_table_body">
<div class="price_table_row cost dark-bg"><strong>$ 19</strong><span>/MONTH</span></div>
<div class="price_table_row">1 Website</div>
<div class="price_table_row">10 GB Storage</div>
<div class="price_table_row">10 GB Bandwidth</div>
<div class="price_table_row">10 Email Addresses</div>
<div class="price_table_row">Free Backup</div>
<div class="price_table_row">Full Time Support</div>
</div>
<a href="#" class="btn btn-dark btn-lg btn-block">Sign Up</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
<div class="price_table_container">
<div class="price_table_heading">Basic</div>
<div class="price_table_body">
<div class="price_table_row cost danger-bg"><strong>$ 29</strong><span>/MONTH</span></div>
<div class="price_table_row">10 Websites</div>
<div class="price_table_row">100 GB Storage</div>
<div class="price_table_row">100 GB Bandwidth</div>
<div class="price_table_row">50 Email Addresses</div>
<div class="price_table_row">Free Backup</div>
<div class="price_table_row">Full Time Support</div>
</div>
<a href="#" class="btn btn-danger btn-lg btn-block">Sign Up</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
<div class="price_table_container">
<div class="price_table_heading">Premium</div>
<div class="price_table_body">
<div class="price_table_row cost royal-bg"><strong>$ 39</strong><span>/MONTH</span></div>
<div class="price_table_row">100 Websites</div>
<div class="price_table_row">1 TB Storage</div>
<div class="price_table_row">1 TB Bandwidth</div>
<div class="price_table_row">100 Email Addresses</div>
<div class="price_table_row">Free Backup</div>
<div class="price_table_row">Full Time Support</div>
</div>
<a href="#" class="btn btn-royal btn-lg btn-block">Sign Up</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
<div class="recommended"><strong><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> RECOMMENDED</strong></div>
<div class="price_table_container">
<div class="price_table_heading">Master</div>
<div class="price_table_body">
<div class="price_table_row cost static-bg"><strong>$ 60</strong><span>/MONTH</span></div>
<div class="price_table_row">Unlimited Websites</div>
<div class="price_table_row">10 TB Storage</div>
<div class="price_table_row">100 TB Bandwidth</div>
<div class="price_table_row">1000 Email Addresses</div>
<div class="price_table_row">Free Backup</div>
<div class="price_table_row">Full Time Support</div>
</div>
<a href="#" class="btn btn-static btn-lg btn-block">Sign Up</a>
</div>
</div>
</div>
</div>
<!-- PRICING TABLE STYLE 2-->
<h2>STYLE 3</h2><br><br>
<!-- PRICING TABLE STYLE 3-->
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
<div class="price_table_container">
<div class="price_table_heading">Starter</div>
<div class="price_table_body">
<div class="price_table_row cost warning-text"><strong>$ 19</strong><span>/MONTH</span></div>
<div class="price_table_row">1 Website</div>
<div class="price_table_row">10 GB Storage</div>
<div class="price_table_row">10 GB Bandwidth</div>
<div class="price_table_row">10 Email Addresses</div>
<div class="price_table_row">Free Backup</div>
<div class="price_table_row">Full Time Support</div>
</div>
<a href="#" class="btn btn-warning btn-lg btn-block">Sign Up</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
<div class="price_table_container">
<div class="price_table_heading">Basic</div>
<div class="price_table_body">
<div class="price_table_row cost primary-text"><strong>$ 29</strong><span>/MONTH</span></div>
<div class="price_table_row">10 Websites</div>
<div class="price_table_row">100 GB Storage</div>
<div class="price_table_row">100 GB Bandwidth</div>
<div class="price_table_row">50 Email Addresses</div>
<div class="price_table_row">Free Backup</div>
<div class="price_table_row">Full Time Support</div>
</div>
<a href="#" class="btn btn-primary btn-lg btn-block">Sign Up</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
<div class="recommended"><strong><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> RECOMMENDED</strong></div>
<div class="price_table_container">
<div class="price_table_heading">Premium</div>
<div class="price_table_body">
<div class="price_table_row cost success-text"><strong>$ 39</strong><span>/MONTH</span></div>
<div class="price_table_row">100 Websites</div>
<div class="price_table_row">1 TB Storage</div>
<div class="price_table_row">1 TB Bandwidth</div>
<div class="price_table_row">100 Email Addresses</div>
<div class="price_table_row">Free Backup</div>
<div class="price_table_row">Full Time Support</div>
</div>
<a href="#" class="btn btn-success btn-lg btn-block">Sign Up</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
<div class="price_table_container">
<div class="price_table_heading">Master</div>
<div class="price_table_body">
<div class="price_table_row cost info-text"><strong>$ 60</strong><span>/MONTH</span></div>
<div class="price_table_row">Unlimited Websites</div>
<div class="price_table_row">10 TB Storage</div>
<div class="price_table_row">100 TB Bandwidth</div>
<div class="price_table_row">1000 Email Addresses</div>
<div class="price_table_row">Free Backup</div>
<div class="price_table_row">Full Time Support</div>
</div>
<a href="#" class="btn btn-info btn-lg btn-block">Sign Up</a>
</div>
</div>
</div>
</div>
<!-- PRICING TABLE STYLE 3-->
<!-- SPACER-->
<div class="spacer"></div>
<!-- SPACER-->
<h2>STYLE 4</h2>
<!-- PRICING TABLE STYLE 4-->
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
<div class="price_table_container">
<div class="price_table_heading">Starter</div>
<div class="price_table_body">
<div class="price_table_row cost dark-text"><strong>$ 19</strong><span>/MONTH</span></div>
<div class="price_table_row">1 Website</div>
<div class="price_table_row">10 GB Storage</div>
<div class="price_table_row">10 GB Bandwidth</div>
<div class="price_table_row">10 Email Addresses</div>
<div class="price_table_row">Free Backup</div>
<div class="price_table_row">Full Time Support</div>
</div>
<a href="#" class="btn btn-dark btn-lg btn-block">Sign Up</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
<div class="price_table_container">
<div class="price_table_heading">Basic</div>
<div class="price_table_body">
<div class="price_table_row cost danger-text"><strong>$ 29</strong><span>/MONTH</span></div>
<div class="price_table_row">10 Websites</div>
<div class="price_table_row">100 GB Storage</div>
<div class="price_table_row">100 GB Bandwidth</div>
<div class="price_table_row">50 Email Addresses</div>
<div class="price_table_row">Free Backup</div>
<div class="price_table_row">Full Time Support</div>
</div>
<a href="#" class="btn btn-danger btn-lg btn-block">Sign Up</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
<div class="price_table_container">
<div class="price_table_heading">Premium</div>
<div class="price_table_body">
<div class="price_table_row cost royal-text"><strong>$ 39</strong><span>/MONTH</span></div>
<div class="price_table_row">100 Websites</div>
<div class="price_table_row">1 TB Storage</div>
<div class="price_table_row">1 TB Bandwidth</div>
<div class="price_table_row">100 Email Addresses</div>
<div class="price_table_row">Free Backup</div>
<div class="price_table_row">Full Time Support</div>
</div>
<a href="#" class="btn btn-royal btn-lg btn-block">Sign Up</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
<div class="recommended"><strong><span class="glyphicon glyphicon-lock" aria-hidden="true"></span> More Security</strong></div>
<div class="price_table_container">
<div class="price_table_heading">Master</div>
<div class="price_table_body">
<div class="price_table_row cost static-text"><strong>$ 60</strong><span>/MONTH</span></div>
<div class="price_table_row">Unlimited Websites</div>
<div class="price_table_row">10 TB Storage</div>
<div class="price_table_row">100 TB Bandwidth</div>
<div class="price_table_row">1000 Email Addresses</div>
<div class="price_table_row">Free Backup</div>
<div class="price_table_row">Full Time Support</div>
</div>
<a href="#" class="btn btn-static btn-lg btn-block">Sign Up</a>
</div>
</div>
</div>
</div>
<!-- PRICING TABLE STYLE 4-->
<h2>STYLE 5</h2>
<!-- PRICING TABLE STYLE 5-->
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
<div class="price_table_container">
<div class="price_table_heading">Starter</div>
<div class="price_table_body">
<div class="price_table_row cost warning-text"><strong>$ 19</strong><span>/MONTH</span></div>
<div class="price_table_row">1 Website</div>
<div class="price_table_row">10 GB Storage</div>
<div class="price_table_row">10 GB Bandwidth</div>
<div class="price_table_row">10 Email Addresses</div>
<div class="price_table_row">Free Backup</div>
<div class="price_table_row">Full Time Support</div>
</div>
<a href="#" class="btn btn-warning btn-lg btn-block">Sign Up</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
<div class="price_table_container">
<div class="price_table_heading">Basic</div>
<div class="price_table_body">
<div class="price_table_row cost primary-text"><strong>$ 29</strong><span>/MONTH</span></div>
<div class="price_table_row">10 Websites</div>
<div class="price_table_row">100 GB Storage</div>
<div class="price_table_row">100 GB Bandwidth</div>
<div class="price_table_row">50 Email Addresses</div>
<div class="price_table_row">Free Backup</div>
<div class="price_table_row">Full Time Support</div>
</div>
<a href="#" class="btn btn-primary btn-lg btn-block">Sign Up</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
<div class="recommended"><strong><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> RECOMMENDED</strong></div>
<div class="price_table_container">
<div class="price_table_heading">Premium</div>
<div class="price_table_body">
<div class="price_table_row cost success-bg"><strong>$ 39</strong><span>/MONTH</span></div>
<div class="price_table_row">100 Websites</div>
<div class="price_table_row">1 TB Storage</div>
<div class="price_table_row">1 TB Bandwidth</div>
<div class="price_table_row">100 Email Addresses</div>
<div class="price_table_row">Free Backup</div>
<div class="price_table_row">Full Time Support</div>
</div>
<a href="#" class="btn btn-success btn-lg btn-block">Sign Up</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
<div class="price_table_container">
<div class="price_table_heading">Master</div>
<div class="price_table_body">
<div class="price_table_row cost info-text"><strong>$ 60</strong><span>/MONTH</span></div>
<div class="price_table_row">Unlimited Websites</div>
<div class="price_table_row">10 TB Storage</div>
<div class="price_table_row">100 TB Bandwidth</div>
<div class="price_table_row">1000 Email Addresses</div>
<div class="price_table_row">Free Backup</div>
<div class="price_table_row">Full Time Support</div>
</div>
<a href="#" class="btn btn-info btn-lg btn-block">Sign Up</a>
</div>
</div>
</div>
</div>
<!-- PRICING TABLE STYLE 5-->
<!-- SPACER-->
<div class="spacer"></div>
<!-- SPACER-->
<h2>STYLE 6</h2>
<!-- PRICING TABLE STYLE 6-->
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
<div class="price_table_container">
<div class="price_table_heading">Starter</div>
<div class="price_table_body">
<div class="price_table_row cost dark-text"><strong>$ 19</strong><span>/MONTH</span></div>
<div class="price_table_row">1 Website</div>
<div class="price_table_row">10 GB Storage</div>
<div class="price_table_row">10 GB Bandwidth</div>
<div class="price_table_row">10 Email Addresses</div>
<div class="price_table_row">Free Backup</div>
<div class="price_table_row">Full Time Support</div>
</div>
<a href="#" class="btn btn-dark btn-lg btn-block">Sign Up</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
<div class="recommended"><strong><span class="glyphicon glyphicon-lock" aria-hidden="true"></span> More Security</strong></div>
<div class="price_table_container">
<div class="price_table_heading">Basic</div>
<div class="price_table_body">
<div class="price_table_row cost danger-text"><strong>$ 29</strong><span>/MONTH</span></div>
<div class="price_table_row">10 Websites</div>
<div class="price_table_row">100 GB Storage</div>
<div class="price_table_row">100 GB Bandwidth</div>
<div class="price_table_row">50 Email Addresses</div>
<div class="price_table_row">Free Backup</div>
<div class="price_table_row">Full Time Support</div>
</div>
<a href="#" class="btn btn-danger btn-lg btn-block">Sign Up</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
<div class="price_table_container">
<div class="price_table_heading">Premium</div>
<div class="price_table_body">
<div class="price_table_row cost royal-text"><strong>$ 39</strong><span>/MONTH</span></div>
<div class="price_table_row">100 Websites</div>
<div class="price_table_row">1 TB Storage</div>
<div class="price_table_row">1 TB Bandwidth</div>
<div class="price_table_row">100 Email Addresses</div>
<div class="price_table_row">Free Backup</div>
<div class="price_table_row">Full Time Support</div>
</div>
<a href="#" class="btn btn-royal btn-lg btn-block">Sign Up</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
<div class="price_table_container">
<div class="price_table_heading">Master</div>
<div class="price_table_body">
<div class="price_table_row cost static-text"><strong>$ 60</strong><span>/MONTH</span></div>
<div class="price_table_row">Unlimited Websites</div>
<div class="price_table_row">10 TB Storage</div>
<div class="price_table_row">100 TB Bandwidth</div>
<div class="price_table_row">1000 Email Addresses</div>
<div class="price_table_row">Free Backup</div>
<div class="price_table_row">Full Time Support</div>
</div>
<a href="#" class="btn btn-static btn-lg btn-block">Sign Up</a>
</div>
</div>
</div>
</div>
<!-- PRICING TABLE STYLE 6-->
/*!
* pricing.css (https://github.com/abhimaliyeckal)
* Version: 1.0
* Author: Abhishek Raj
* Linkedin URL: https://in.linkedin.com/in/abhimaliyeckal
* Github: https://github.com/abhimaliyeckal
* Made available under a MIT License:
* http://www.opensource.org/licenses/mit-license.php
* pricing.css Copyright Abhishek Raj 2014.
*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
body{
background:#010101;
}
.price_table_container{
text-align:center;
color:#666;
margin-top:35px;
font-family: 'Open Sans', sans-serif;
}
.price_table_heading{
font-size:36px;
padding:10px;
background:#EEE;
}
.price_table_row {
padding:15px;
background: #FFF;
}
.cost{
padding:30px;
font-size:30px;
}
.cost span{
font-size:15px;
}
.price_table_row:nth-of-type(even) {
background: #F8F8F8;
}
.btn{
border-radius:0px;
}
.recommended{
/*USER DEFINED COLOUR*/
background:#FF3A3A;
color:#FFF;
/*USER DEFINED COLOUR*/
padding:3px 0 3px 0;
margin-top:10px;
text-align:center;
margin-bottom:-35px;
font-family: 'Open Sans', sans-serif;
}
.spacer{width:100%;height:50px;}
/*Already Defined Colours*/
/*Background*/
.primary-bg{background:#337AB7;color:#FFF;}
.success-bg{background:#5CB85C;color:#FFF;}
.info-bg{background:#5BC0DE;color:#FFF;}
.warning-bg{background:#F0AD4E;color:#FFF;}
.danger-bg{background:#D9534F;color:#FFF;}
.dark-bg{background:#444;color:#FFF;}
.royal-bg{background:#8E74E2;color:#FFF;}
.static-bg{background:#2BB0A6;color:#FFF;}
/*Only Text Colours*/
.primary-text{background:#FFF;color:#337AB7;}
.success-text{background:#FFF;color:#5CB85C;}
.info-text{background:#FFF;color:#5BC0DE;}
.warning-text{background:#FFF;color:#F0AD4E;}
.danger-text{background:#FFF;color:#D9534F;}
.dark-text{background:#FFF;color:#444;}
.royal-text{background:#FFF;color:#8E74E2;}
.static-text{background:#FFF;color:#2BB0A6;}
/*Additional Button styles*/
/*BTN-DARK*/
.btn-dark {
color: #fff;
background-color: #444;
border-color: #444;
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark.focus,
.btn-dark:active,
.btn-dark.active,
.open > .dropdown-toggle.btn-dark {
color: #fff;
background-color: #222;
border-color: #222;
}
.btn-dark:active,
.btn-dark.active,
.open > .dropdown-toggle.btn-dark {
background-image: none;
}
/*BTN-ROYAL---------*/
.btn-royal {
color: #fff;
background-color: #8E74E2;
border-color: #8E74E2;
}
.btn-royal:hover,
.btn-royal:focus,
.btn-royal.focus,
.btn-royal:active,
.btn-royal.active,
.open > .dropdown-toggle.btn-royal {
color: #fff;
background-color: #7451E8;
border-color: #7451E8;
}
.btn-royal:active,
.btn-royal.active,
.open > .dropdown-toggle.btn-royal {
background-image: none;
}
/*BTN-STATIC---------*/
.btn-static {
color: #fff;
background-color: #2BB0A6;
border-color: #2BB0A6;
}
.btn-static:hover,
.btn-static:focus,
.btn-static.focus,
.btn-static:active,
.btn-static.active,
.open > .dropdown-toggle.btn-static {
color: #fff;
background-color: #07A094;
border-color: #07A094;
}
.btn-static:active,
.btn-static.active,
.open > .dropdown-toggle.btn-static {
background-image: none;
}
/*!
* Hover.css (http://ianlunn.co.uk/)
* Version: 1.0.10
* Author: Ian Lunn @IanLunn