Combining pricing tables

Developer
Lizz
Size
3,668 Kb
Views
38,456
  1. Combining pricing tables Previews
  2. Combining pricing tables HTML Codes
  3. Combining pricing tables CSS Codes
  4. Combining pricing tables JS Codes

How do I make an combining pricing tables?

What is a combining pricing tables? How do you make a combining pricing tables? This script and codes were developed by Lizz on 18 August 2022, Thursday.

Combining pricing tables Previews
IQ Test

Combining pricing tables - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>combining pricing tables</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Dashboard Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> </head> <body>
<div class="container"> <div class="row"> <h4> Simple Pricing Table </h4> <div class="col-md-4"> <div class="pt-package-3"> <div class="pt-header" style="background-color:'+thirdPackageColor+';"> <h2> FREE PLAN </h2> <h3>
<span class="pt-currency">$</span>
<span class="pt-amount">19</span>
<span class="pt-terms">/mo</span>
</h3> </div> <ul class="pt-feature-list">
<li>500GB Storage</li>
<li>15 Users</li>
<li>50 Databases</li>
<li>Safe &amp; Secure</li>
<li>24hr Tech Support</li>
<li>No Ads</li>
</ul> </div>
<a class="pt-button pt-button-3" href="#" style="background-color:'+thirdPackageColor+';">Select Package</a>
</div> <div class="col-md-4"> <div class="panel panel-warning"> <div class="panel-heading"> <h4 class="text-center"> GOLD PLAN</h4> </div> <div class="panel-body text-center"> <p class="lead"> <strong>$10 / month</strong></p> </div> <ul class="list-group list-group-flush text-center"> <li class="list-group-item"><i class="icon-ok text-danger"></i>Personal use</li> <li class="list-group-item"><i class="icon-ok text-danger"></i>Unlimited projects</li> <li class="list-group-item"><i class="icon-ok text-danger"></i>27/7 support</li> </ul> <div class="panel-footer"> <a class="btn btn-lg btn-block btn-warning" href="http://www.jquery2dotnet.com">BUY NOW!</a> </div> </div> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="text-center"> PLATINUM PLAN</h4> </div> <div class="panel-body text-center"> <p class="lead"> <strong>$10 / month</strong></p> </div> <ul class="list-group list-group-flush text-center"> <li class="list-group-item"><i class="icon-ok text-danger"></i>Personal use</li> <li class="list-group-item"><i class="icon-ok text-danger"></i>Unlimited projects</li> <li class="list-group-item"><i class="icon-ok text-danger"></i>27/7 support</li> </ul> <div class="panel-footer"> <a class="btn btn-lg btn-block btn-default" href="http://www.jquery2dotnet.com">BUY NOW!</a> </div> </div> </div> <hr><hr><hr> <div class="col-md-4"> <div class="panel panel-info"> <div class="panel-heading"> <h4 class="text-center"> PRO PLAN</h4> </div> <div class="panel-body text-center"> <p class="lead"> <strong>$10 / month</strong></p> </div> <ul class="list-group list-group-flush text-center"> <li class="list-group-item"><i class="icon-ok text-danger"></i>Personal use</li> <li class="list-group-item"><i class="icon-ok text-danger"></i>Unlimited projects</li> <li class="list-group-item"><i class="icon-ok text-danger"></i>27/7 support</li> </ul> <div class="panel-footer"> <a class="btn btn-lg btn-block btn-info" href="http://www.jquery2dotnet.com">BUY NOW!</a> </div> </div> </div> </div>
</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> </body> <script src="js/index.js"></script>
</body>
</html>

Combining pricing tables - Script Codes CSS Codes

.pt-package-1 .pt-header,.pt-button-1{background-color:#60d2bb;}.pt-package-2 .pt-header,.pt-button-2{background-color:#09c6a0;}.pt-package-3 .pt-header,.pt-button-3{background-color:#1da78b;}.pt-package-4 .pt-header,.pt-button-4{background-color:#25806e;}::selection{background-color:#1da78b;color:#fff};
/*MAIN STYLES*/
/* CSS Mini Reset */
html, body, div, form, fieldset, legend, label{ margin: 0; padding: 0;}
table{ border-collapse: collapse; border-spacing: 0;}
th, td{ text-align: left; vertical-align: top;}
h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; margin: 0; padding: 0; }
ul, li { margin: 0; padding: 0; list-style: none;}
img { border: 0; }
/* General */
body {	background: #fff;	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {	margin: 100px auto;	width: 90%;
}
.pt-column {	/*display: inline-block;	width: 22%;	margin: 0 0 0 2.1%;	padding: 0;*/	}
.pt-package-1, .pt-package-2, .pt-package-3, .pt-package-4 {	margin: 0;	padding: 0px;	background: #fff;	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.15);	-moz-box-shadow: 0 0 10px rgba(0,0,0,.15);	box-shadow: 0 0 10px rgba(0,0,0,.15);
}
/*Header Styles*/
.pt-header {	color: #fff;	text-align: center;
}
.pt-header h2 {	text-transform: uppercase;	font-weight: 600;	font-size: 12px;	color: rgba(255, 255, 255, 0.6);	padding: 16px 0 0 0;
}
.pt-header h3 {	font-size: 64px;	font-weight: 200;	padding: 0px 0 16px 0;
}
.pt-currency {	font-size: 34px;	font-weight: 100;
}
.pt-amount {	margin: 0 -14px 0 -12px;
}
.pt-terms {	text-transform: lowercase;	font-size: 14px;	color: rgba(255, 255, 255, 0.6);
}
/*Feature Lists*/
.pt-feature-list {	padding: 5px;
}
.pt-feature-list li {	height: 40px;	line-height: 40px;	padding-left: 45px;	-moz-border-radius: 3px;	-webkit-border-radius: 3px;	border-radius: 3px;	color: #666;	font-size: 14px;	background-image: url('http://medialoot.com/preview/pricing-table/images/pt-checkmark-icon.png');	background-repeat: no-repeat;	background-position: 8px 10px;
}
.pt-feature-list li.no-icon {	background-image: none;
}
.pt-feature-list li:nth-of-type(even) {	background-color: #f5f5f5;
}
/*Buttons*/
a.pt-button {	display: block;	color: #fff;	text-decoration: none;	font-size: 18px;	font-weight: 200;	height: 50px;	line-height: 50px;	text-align: center;	margin: 10px 0;
}
a.pt-button:hover {	-webkit-box-shadow: inset 0 0 250px rgba(255,255,255,.2);	-moz-box-shadow: inset 0 0 250px rgba(255,255,255,.2);	box-shadow: inset 0 0 250px rgba(255,255,255,.2);
}
a.pt-button:active {	-webkit-box-shadow: inset 0 0 250px rgba(0,0,0,.2);	-moz-box-shadow: inset 0 0 250px rgba(0,0,0,.2);	box-shadow: inset 0 0 250px rgba(0,0,0,.2);
}
/*Responsive Styles*/
@media only screen and (max-width: 960px) {	.container {	width: 540px;	margin: 100px auto;	}	.pt-column {	width: 240px;	margin: 0 10px 20px 10px;	}
}
@media only screen and (max-width: 480px) {	.container {	width: 90%;	margin: 40px auto;	}	.pt-column {	width: 320px;	margin-bottom: 40px;	}
}
/* http://medialoot.com/preview/frame/pricing-table.html
http://medialoot.com/preview/pricing-table/pricing-table.css */

Combining pricing tables - Script Codes JS Codes

/*clean formatting
http://medialoot.com/item/flexible-pricing-table-template/
<title>Dashboard Template for Bootstrap</title>
diff heights
http://wbpreview.com/previews/WB07C692G/
basic not so cute
http://wsnippets.com/create-professional-pricing-table-css3-twitter-bootstrap-3-0/
https://www.fastmail.fm/pages/fastmail/docs/pricingtbl.html
circle price style
http://codecanyon.net/item/priciq-bootstrap-3-pricing-table/6596509*/
Combining pricing tables - Script Codes
Combining pricing tables - Script Codes
Home Page Home
Developer Lizz
Username lizz
Uploaded August 18, 2022
Rating 3
Size 3,668 Kb
Views 38,456
Do you need developer help for Combining pricing tables?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Lizz (lizz) Script Codes
Name
SVG Braille alphabet via JS
Ionicons website - SO CLEAN yum
Just circular bg for ionicons
Ionicons experiments
Fixed ionic bar with numbered steps
Tinker v1 - delete later
Super simple purecss.io yui landing page
SVG with links created from AngularJS and json
Fixed side menu like bootstrap and ionic documentation
Ionic sharing data btw views
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!