Pricing Table

Developer
Elena
Size
6,784 Kb
Views
8,096
  1. Pricing Table Previews
  2. Pricing Table HTML Codes
  3. Pricing Table CSS Codes

How do I make an pricing table?

What is a pricing table? How do you make a pricing table? This script and codes were developed by Elena on 17 December 2022, Saturday.

Pricing Table Previews
IQ Test

Pricing Table - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pricing Table</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */	/* ============================================================================= Base ========================================================================== */	html, body { width: 100%; height: 100%; -webkit-text-size-adjust: none; }	body { line-height: 1; background: #FFF; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 62.5%; /* font-size 1em = 10px = 62.5%*/ margin: 0; padding: 0;	}	::-moz-selection { background: #FFF; color: #000; } ::selection { background: #FFF; color: #000; }	.clr, .wrap { *zoom: 1;	}	.clr:before,	.clr:after { display: table; content: ""; line-height: 0;	}	.clr:after { clear: both;	}	.wrap:before,	.wrap:after { display: table; content: ""; line-height: 0;	}	.wrap:after { clear: both;	}	.wrap { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 1520px; width: 100%; text-align: center; margin: 0 auto; padding: 0 25px;	}	.wrap { *width: 1200px; }	.wrap.full { width: 100%; max-width: 100%; text-align: center; border: none;	}	[class*='bit-'] { /*display: block;*/ *float: left; position: relative; display: inline-block; text-align: center; margin: 1% 1% 4% 1%; width: 20%; *width: 18%; min-width: 270px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;	}	.bit-3:first-child { *margin-left: 135px;}	[class*='bit-']:before,	[class*='bit-']:after { display: table; content: ""; line-height: 0;	}	[class*='bit-']:after { clear: both;	}	#content { padding: 20px 0; }	.pricing-table ul { overflow: hidden; border: 1px solid #bebebe; background: #FFF; padding: 0; list-style-type: none; line-height: 2.7em; color: #7d7d7d; cursor: pointer; text-align: center; -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -ms-transition: all 1s ease-in; -o-transition: all 1s ease-in; transition: all 1s ease-in;	} .pricing-table ul > li { padding: 11.5px 0; font-size: 2.2em; width: 100%; -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -ms-transition: all 1s ease-in; -o-transition: all 1s ease-in; transition: all 1s ease-in; } .pricing-table ul > li h3 { padding: 0; margin: 0; font-size: 1em; line-height: 1.5em; font-weight: normal; } .pricing-table ul > li.p-rise { padding: 30px 0; margin-bottom: 25px; -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -ms-transition: all 1s ease-in; -o-transition: all 1s ease-in; transition: all 1s ease-in; } .pricing-table ul > li.p-rise > p { padding: 0; margin:0; font-size: 1.7em; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .check { margin-top: 25px; } .check a { width: 90%; margin: 0 auto; text-align: center; height: 45px; font-size: 1.2em; line-height: 1.4em; text-transform: lowercase; text-decoration: none; display: inline-block; *display: inline; /* IE7 inline-block hack */ *zoom: 1; /* IE7 inline-block hack */ -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -ms-transition: all 1s ease-in; -o-transition: all 1s ease-in; transition: all 1s ease-in; }	/* ============================================================================= Hover ========================================================================== */	.pricing-table [class*='bit-']:hover { margin: 0% -1.5% 5% -1.5%; zoom:1; position: relative; width: 22%; z-index: 888; -webkit-transform: scale(1.05,1.05); -moz-transform: scale(1.05,1.05); -ms-transform: scale(1.05,1.05); -o-transform: scale(1.05,1.05); transform: scale(1.05,1.05); /* IE 8 scale */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.0, M12=0, M21=0, M22=1.0, SizingMethod='auto expand');	}	.pricing-table .bit-3:first-child:hover { *margin: 1% -1.5% 5% 12%; }	/* ============================================================================= Theme param ========================================================================== */	.pricing-table ul:hover li { border-bottom: none; background: none; }	.pricing-table ul:hover li.title { color: #fff; }	.pricing-table ul:hover li { color: #ACA8A8; }	.pricing-table ul li.line { background: url(https://github.com/lime7/pt/blob/master/images/iconmonstr-check-mark-icon-32-line.png?raw=true) 12% 50% no-repeat; } .pricing-table ul:hover li.line { background: url(https://github.com/lime7/pt/blob/master/images/iconmonstr-check-mark-icon-32-hover.png?raw=true) 12% 50% no-repeat; }	.pricing-table ul li { color: #474747; }	.pricing-table ul li.title { color:#8f9090; background: #000; }	.pricing-table ul li.p-rise { border-bottom: none; } .pricing-table ul li.p-rise:hover { color:#fff; }	.pricing-table .check a:hover { text-decoration: underline; color: #FFF !important; background: url(https://github.com/lime7/pt/blob/master/images/iconmonstr-arrow-28-icon-32-w.png?raw=true) 88% 50% no-repeat !important;	}	.border li.title { border-bottom: 3px solid #fff; }	.border ul li { border-bottom: 1px solid #f5f5f5; }	.bee li:nth-child(even) { background-color: #f8f8f8 !important; }	.fr-font .p-rise p { font: 2em 'PT Sans Caption' medium !important; }	.op-s-font .p-rise { font: 2.5em 'Open Sans' medium; }	.white ul li.p-rise, .white .check a {color: #FFF; }	.black ul li.p-rise, .black .check a {color: #000; }	.white .check a { background: url(https://github.com/lime7/pt/blob/master/images/iconmonstr-arrow-28-icon-32-w.png?raw=true) 88% 50% no-repeat; }	.black .check a { background: url(https://github.com/lime7/pt/blob/master/images/iconmonstr-arrow-28-icon-32-black.png?raw=true) 88% 50% no-repeat; }	/* ___________________________________________________________________ | theme - orange | main color - #ff6e22 | background color - #333333 | ___________________________________________________________________ */	.theme-orange li.p-rise, .theme-orange .check a { background-color: #ff6e22; }	.theme-orange ul:hover li.title, .theme-orange ul:hover>.p-rise { border-bottom: 1px solid #ff6e22; }	.theme-orange ul:hover > .send .check a, .theme-orange ul:hover>.p-rise { color: #ff6e22; }	.theme-orange ul:hover > .send .check a { background: url(https://github.com/lime7/pt/blob/master/images/iconmonstr-arrow-28-icon-32-orange.png?raw=true) 88% 50% no-repeat; }	.theme-orange ul:hover, .theme-orange ul:hover li.title,	.theme-orange ul:hover>.p-rise, .theme-orange ul:hover > .send .check a { background-color: #333333; }	/* ___________________________________________________________________ | theme - blue | main color - #57bae8 | background color - #4e616d | ___________________________________________________________________ */	.theme-blue li.p-rise, .theme-blue .check a { background-color: #57bae8; }	.theme-blue ul:hover li.title, .theme-blue ul:hover>.p-rise { border-bottom: 1px solid #57bae8; }	.theme-blue ul:hover > .send .check a, .theme-blue ul:hover>.p-rise { color: #57bae8; }	.theme-blue ul:hover > .send .check a { background: url(https://github.com/lime7/pt/blob/master/images/iconmonstr-arrow-28-icon-32-blue.png?raw=true) 88% 50% no-repeat; }	.theme-blue ul:hover, .theme-blue ul:hover li.title,	.theme-blue ul:hover>.p-rise, .theme-blue ul:hover > .send .check a { background-color: #4e616d; }	/* ___________________________________________________________________ | theme - red | main color - #c21e0a | background color - #302A2A | ___________________________________________________________________ */	.theme-red li.p-rise, .theme-red .check a { background-color: #c21e0a; }	.theme-red ul:hover li.title, .theme-red ul:hover>.p-rise { border-bottom: 1px solid #c21e0a; }	.theme-red ul:hover > .send .check a, .theme-red ul:hover>.p-rise { color: #c21e0a; }	.theme-red ul:hover > .send .check a { background: url(https://github.com/lime7/pt/blob/master/images/iconmonstr-arrow-28-icon-32-red.png?raw=true) 88% 50% no-repeat; }	.theme-red ul:hover, .theme-red ul:hover li.title,	.theme-red ul:hover>.p-rise, .theme-red ul:hover > .send .check a { background-color: #302A2A; }	/* ___________________________________________________________________ | theme - green | main color - #00c09e | background color - #000 | ___________________________________________________________________ */	.theme-green li.p-rise, .theme-green .check a { background-color: #00c09e; }	.theme-green ul:hover li.title, .theme-green ul:hover>.p-rise { border-bottom: 1px solid #00c09e; }	.theme-green ul:hover > .send .check a, .theme-green ul:hover>.p-rise { color: #00c09e; }	.theme-green ul:hover > .send .check a { background: url(https://github.com/lime7/pt/blob/master/images/iconmonstr-arrow-28-icon-32-green.png?raw=true) 88% 50% no-repeat; }	.theme-green ul:hover, .theme-green ul:hover li.title,	.theme-green ul:hover>.p-rise, .theme-green ul:hover > .send .check a { background-color: #000; }	/* ___________________________________________________________________ | theme - pink | main color - #eb5656 | background color - #414141 | ___________________________________________________________________ */	.theme-pink li.p-rise, .theme-pink .check a { background-color: #eb5656; }	.theme-pink ul:hover li.title, .theme-pink ul:hover>.p-rise { border-bottom: 1px solid #eb5656; }	.theme-pink ul:hover > .send .check a, .theme-pink ul:hover>.p-rise { color: #eb5656; }	.theme-pink ul:hover > .send .check a { background: url(https://github.com/lime7/pt/blob/master/images/iconmonstr-arrow-28-icon-32-pink.png?raw=true) 88% 50% no-repeat; }	.theme-pink ul:hover, .theme-pink ul:hover li.title,	.theme-pink ul:hover>.p-rise, .theme-pink ul:hover > .send .check a { background-color: #414141; }	/*_________________________________________________*/	@media only screen and (max-width: 1248px) { .bit-4 { margin: 1% 7% 4% 7%; } .pricing-table .bit-4:hover { margin: 1% 7% 4% 7%; *margin: 1% 7% 4% 7%; }	}	@media only screen and (max-width: 940px) { .bit-3 { margin: 1% 5% 4% 5%; } .pricing-table .bit-3:hover { margin: 1% 5% 4% 5%; *margin: 1% 5% 4% 5%; }	}	@media only screen and (max-width: 820px) { .bit-3 { margin: 1% 5% 4% 5%; } .bit-4 { margin: 1% 1% 4% 1%; } .pricing-table .bit-4:hover { margin: 1% 1% 4% 1%; *margin: 1% 1% 4% 1%; } .pricing-table .bit-3:hover { margin: 1% 5% 4% 5%; *margin: 1% 5% 4% 5%; }	}	@media only screen and (max-width: 750px) { .bit-3, .bit-4 { margin: 1% 1% 4% 1%; } .pricing-table [class*='bit-']:hover { margin: 1% 1% 4% 1%; *margin: 1% 1% 4% 1%; }	}	@media only screen and (max-width: 640px) {	.wrap { border: none; }	}	@media only screen and (max-width: 585px) {	.bit-3, .bit-4 { margin: 5% 1% 2% 1%; } .pricing-table [class*='bit-']:hover { margin: 5% 1% 2% 1%; *margin: 5% 1% 2% 1%; }	} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<html lang="en">
<head>	<meta charset="UTF-8"> <meta name="description" content="Pricing table only css"> <meta name="keywords" content="Pricing table, html5, css3, responsive, ie7 "> <meta name="author" content="Semenchenko V. Helen"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">	<link href='https://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700|Open+Sans:400,700' rel='stylesheet' type='text/css'>	<!-- enable HTML5 elements in IE7+8 -->	<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->	<!-- <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700|Open+Sans:400,700,300' rel='stylesheet' type='text/css'> -->	<title>Pricing table</title>
</head>
<body>	<div id="content">	<div class="wrap">	<div class="row pricing-table theme-orange fr-font white border">	<ul class="bit-4">	<li class="title">	<h3>Basic</h3>	</li>	<li class="p-rise"><p ><sup>$</sup>4.99<sub>/em</sub></p></li>	<li class="line">1 Gb</li>	<li class="line">10 Gb</li>	<li class="line">1 Domain</li>	<li class="line">Unlimited</li>	<li class="send">	<div class="check">	<a href="">Sign Up</span></a>	</div>	</li>	</ul>	<ul class="bit-4">	<li class="title">	<h3>Professional</h3>	</li>	<li class="p-rise"><p ><sup>$</sup>49.99<sub>/em</sub></p></li>	<li class="line">50 Gb</li>	<li class="line">1000 Gb</li>	<li class="line">25 Domain</li>	<li class="line">Unlimited</li>	<li class="send">	<div class="check">	<a href="">Sign Up</a>	</div>	</li>	</ul>	<ul class="bit-4">	<li class="title">	<h3>Business</h3>	</li>	<li class="p-rise"><p ><sup>$</sup>129.99<sub>/em</sub></p></li>	<li class="line">50 Gb</li>	<li class="line">1000 Gb</li>	<li class="line">25 Domain</li>	<li class="line">Unlimited</li>	<li class="send">	<div class="check">	<a href="">Sign Up</a>	</div>	</li>	</ul>	<ul class="bit-4">	<li class="title">	<h3>Enterprice</h3>	</li>	<li class="p-rise"><p ><sup>$</sup>129.99<sub>/em</sub></p></li>	<li class="line">Unlimited</li>	<li class="line">Unlimited</li>	<li class="line">Unlimited</li>	<li class="line">Unlimited</li>	<li class="send">	<div class="check">	<a href="">Sign Up</a>	</div>	</li>	</ul>	</div>	<div class="row pricing-table theme-blue fr-font black border">	<div class="wrap full">	<ul class="bit-4">	<li class="title">	<h3>Basic</h3>	</li>	<li class="p-rise"><p ><sup>$</sup>4.99<sub>/em</sub></p></li>	<li class="line">1 Gb</li>	<li class="line">10 Gb</li>	<li class="line">1 Domain</li>	<li class="line">Unlimited</li>	<li class="send">	<div class="check">	<a href="">Sign Up</a>	</div>	</li>	</ul>	<ul class="bit-4">	<li class="title">	<h3>Professional</h3>	</li>	<li class="p-rise"><p ><sup>$</sup>49.99<sub>/em</sub></p></li>	<li class="line">50 Gb</li>	<li class="line">1000 Gb</li>	<li class="line">25 Domain</li>	<li class="line">Unlimited</li>	<li class="send">	<div class="check">	<a href="">Sign Up</a>	</div>	</li>	</ul>	<ul class="bit-4">	<li class="title">	<h3>Business</h3>	</li>	<li class="p-rise"><p ><sup>$</sup>129.99<sub>/em</sub></p></li>	<li class="line">50 Gb</li>	<li class="line">1000 Gb</li>	<li class="line">25 Domain</li>	<li class="line">Unlimited</li>	<li class="send">	<div class="check">	<a href="">Sign Up</a>	</div>	</li>	</ul>	<ul class="bit-4">	<li class="title">	<h3>Enterprice</h3>	</li>	<li class="p-rise"><p ><sup>$</sup>129.99<sub>/em</sub></p></li>	<li class="line">Unlimited</li>	<li class="line">Unlimited</li>	<li class="line">Unlimited</li>	<li class="line">Unlimited</li>	<li class="send">	<div class="check">	<a href="">Sign Up</a>	</div>	</li>	</ul>	</div>	</div>	<div class="row pricing-table theme-red op-s-font black bee">	<div class="wrap full">	<ul class="bit-3">	<li class="title">	<h3>Basic</h3>	</li>	<li class="p-rise"><p ><sup>$</sup>4.99<sub>/em</sub></p></li>	<li class="line">1 Gb</li>	<li class="line">10 Gb</li>	<li class="line">1 Domain</li>	<li class="line">Unlimited</li>	<li class="send">	<div class="check">	<a href="">Sign Up</span></a>	</div>	</li>	</ul>	<ul class="bit-3">	<li class="title">	<h3>Professional</h3>	</li>	<li class="p-rise"><p ><sup>$</sup>49.99<sub>/em</sub></p></li>	<li class="line">50 Gb</li>	<li class="line">1000 Gb</li>	<li class="line">25 Domain</li>	<li class="line">Unlimited</li>	<li class="send">	<div class="check">	<a href="">Sign Up</a>	</div>	</li>	</ul>	<ul class="bit-3">	<li class="title">	<h3>Business</h3>	</li>	<li class="p-rise"><p ><sup>$</sup>129.99<sub>/em</sub></p></li>	<li class="line">50 Gb</li>	<li class="line">1000 Gb</li>	<li class="line">25 Domain</li>	<li class="line">Unlimited</li>	<li class="send">	<div class="check">	<a href="">Sign Up</a>	</div>	</li>	</ul>	</div>	</div>	<div class="row pricing-table theme-green op-s-font black bee">	<div class="wrap full">	<ul class="bit-4">	<li class="title">	<h3>Basic</h3>	</li>	<li class="p-rise"><p ><sup>$</sup>4.99<sub>/em</sub></p></li>	<li class="line">1 Gb</li>	<li class="line">10 Gb</li>	<li class="line">1 Domain</li>	<li class="line">Unlimited</li>	<li class="send">	<div class="check">	<a href="">Sign Up</a>	</div>	</li>	</ul>	<ul class="bit-4">	<li class="title">	<h3>Professional</h3>	</li>	<li class="p-rise"><p ><sup>$</sup>49.99<sub>/em</sub></p></li>	<li class="line">50 Gb</li>	<li class="line">1000 Gb</li>	<li class="line">25 Domain</li>	<li class="line">Unlimited</li>	<li class="send">	<div class="check">	<a href="">Sign Up</a>	</div>	</li>	</ul>	<ul class="bit-4">	<li class="title">	<h3>Business</h3>	</li>	<li class="p-rise"><p ><sup>$</sup>129.99<sub>/em</sub></p></li>	<li class="line">50 Gb</li>	<li class="line">1000 Gb</li>	<li class="line">25 Domain</li>	<li class="line">Unlimited</li>	<li class="send">	<div class="check">	<a href="">Sign Up</a>	</div>	</li>	</ul>	<ul class="bit-4">	<li class="title">	<h3>Enterprice</h3>	</li>	<li class="p-rise"><p ><sup>$</sup>129.99<sub>/em</sub></p></li>	<li class="line">Unlimited</li>	<li class="line">Unlimited</li>	<li class="line">Unlimited</li>	<li class="line">Unlimited</li>	<li class="send">	<div class="check">	<a href="">Sign Up</a>	</div>	</li>	</ul>	</div>	</div>	<div class="row pricing-table theme-pink op-s-font black bee">	<div class="wrap full">	<ul class="bit-3">	<li class="title">	<h3>Basic</h3>	</li>	<li class="p-rise"><p ><sup>$</sup>4.99<sub>/em</sub></p></li>	<li class="line">1 Gb</li>	<li class="line">10 Gb</li>	<li class="line">1 Domain</li>	<li class="line">Unlimited</li>	<li class="send">	<div class="check">	<a href="">Sign Up</span></a>	</div>	</li>	</ul>	<ul class="bit-3">	<li class="title">	<h3>Professional</h3>	</li>	<li class="p-rise"><p ><sup>$</sup>49.99<sub>/em</sub></p></li>	<li class="line">50 Gb</li>	<li class="line">1000 Gb</li>	<li class="line">25 Domain</li>	<li class="line">Unlimited</li>	<li class="send">	<div class="check">	<a href="">Sign Up</a>	</div>	</li>	</ul>	<ul class="bit-3">	<li class="title">	<h3>Business</h3>	</li>	<li class="p-rise"><p ><sup>$</sup>129.99<sub>/em</sub></p></li>	<li class="line">50 Gb</li>	<li class="line">1000 Gb</li>	<li class="line">25 Domain</li>	<li class="line">Unlimited</li>	<li class="send">	<div class="check">	<a href="">Sign Up</a>	</div>	</li>	</ul>	</div>	</div>	</div>	</div>
</body>
</html>
</body>
</html>

Pricing Table - Script Codes CSS Codes

/* ============================================================================= Base ========================================================================== */	html, body { width: 100%; height: 100%; -webkit-text-size-adjust: none; }	body { line-height: 1; background: #FFF; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 62.5%; /* font-size 1em = 10px = 62.5%*/ margin: 0; padding: 0;	}	::-moz-selection { background: #FFF; color: #000; } ::selection { background: #FFF; color: #000; }	.clr, .wrap { *zoom: 1;	}	.clr:before,	.clr:after { display: table; content: ""; line-height: 0;	}	.clr:after { clear: both;	}	.wrap:before,	.wrap:after { display: table; content: ""; line-height: 0;	}	.wrap:after { clear: both;	}	.wrap { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 1520px; width: 100%; text-align: center; margin: 0 auto; padding: 0 25px;	}	.wrap { *width: 1200px; }	.wrap.full { width: 100%; max-width: 100%; text-align: center; border: none;	}	[class*='bit-'] { /*display: block;*/ *float: left; position: relative; display: inline-block; text-align: center; margin: 1% 1% 4% 1%; width: 20%; *width: 18%; min-width: 270px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;	}	.bit-3:first-child { *margin-left: 135px;}	[class*='bit-']:before,	[class*='bit-']:after { display: table; content: ""; line-height: 0;	}	[class*='bit-']:after { clear: both;	}	#content { padding: 20px 0; }	.pricing-table ul { overflow: hidden; border: 1px solid #bebebe; background: #FFF; padding: 0; list-style-type: none; line-height: 2.7em; color: #7d7d7d; cursor: pointer; text-align: center; -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -ms-transition: all 1s ease-in; -o-transition: all 1s ease-in; transition: all 1s ease-in;	} .pricing-table ul > li { padding: 11.5px 0; font-size: 2.2em; width: 100%; -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -ms-transition: all 1s ease-in; -o-transition: all 1s ease-in; transition: all 1s ease-in; } .pricing-table ul > li h3 { padding: 0; margin: 0; font-size: 1em; line-height: 1.5em; font-weight: normal; } .pricing-table ul > li.p-rise { padding: 30px 0; margin-bottom: 25px; -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -ms-transition: all 1s ease-in; -o-transition: all 1s ease-in; transition: all 1s ease-in; } .pricing-table ul > li.p-rise > p { padding: 0; margin:0; font-size: 1.7em; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .check { margin-top: 25px; } .check a { width: 90%; margin: 0 auto; text-align: center; height: 45px; font-size: 1.2em; line-height: 1.4em; text-transform: lowercase; text-decoration: none; display: inline-block; *display: inline; /* IE7 inline-block hack */ *zoom: 1; /* IE7 inline-block hack */ -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -ms-transition: all 1s ease-in; -o-transition: all 1s ease-in; transition: all 1s ease-in; }	/* ============================================================================= Hover ========================================================================== */	.pricing-table [class*='bit-']:hover { margin: 0% -1.5% 5% -1.5%; zoom:1; position: relative; width: 22%; z-index: 888; -webkit-transform: scale(1.05,1.05); -moz-transform: scale(1.05,1.05); -ms-transform: scale(1.05,1.05); -o-transform: scale(1.05,1.05); transform: scale(1.05,1.05); /* IE 8 scale */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.0, M12=0, M21=0, M22=1.0, SizingMethod='auto expand');	}	.pricing-table .bit-3:first-child:hover { *margin: 1% -1.5% 5% 12%; }	/* ============================================================================= Theme param ========================================================================== */	.pricing-table ul:hover li { border-bottom: none; background: none; }	.pricing-table ul:hover li.title { color: #fff; }	.pricing-table ul:hover li { color: #ACA8A8; }	.pricing-table ul li.line { background: url(https://github.com/lime7/pt/blob/master/images/iconmonstr-check-mark-icon-32-line.png?raw=true) 12% 50% no-repeat; } .pricing-table ul:hover li.line { background: url(https://github.com/lime7/pt/blob/master/images/iconmonstr-check-mark-icon-32-hover.png?raw=true) 12% 50% no-repeat; }	.pricing-table ul li { color: #474747; }	.pricing-table ul li.title { color:#8f9090; background: #000; }	.pricing-table ul li.p-rise { border-bottom: none; } .pricing-table ul li.p-rise:hover { color:#fff; }	.pricing-table .check a:hover { text-decoration: underline; color: #FFF !important; background: url(https://github.com/lime7/pt/blob/master/images/iconmonstr-arrow-28-icon-32-w.png?raw=true) 88% 50% no-repeat !important;	}	.border li.title { border-bottom: 3px solid #fff; }	.border ul li { border-bottom: 1px solid #f5f5f5; }	.bee li:nth-child(even) { background-color: #f8f8f8 !important; }	.fr-font .p-rise p { font: 2em 'PT Sans Caption' medium !important; }	.op-s-font .p-rise { font: 2.5em 'Open Sans' medium; }	.white ul li.p-rise, .white .check a {color: #FFF; }	.black ul li.p-rise, .black .check a {color: #000; }	.white .check a { background: url(https://github.com/lime7/pt/blob/master/images/iconmonstr-arrow-28-icon-32-w.png?raw=true) 88% 50% no-repeat; }	.black .check a { background: url(https://github.com/lime7/pt/blob/master/images/iconmonstr-arrow-28-icon-32-black.png?raw=true) 88% 50% no-repeat; }	/* ___________________________________________________________________ | theme - orange | main color - #ff6e22 | background color - #333333 | ___________________________________________________________________ */	.theme-orange li.p-rise, .theme-orange .check a { background-color: #ff6e22; }	.theme-orange ul:hover li.title, .theme-orange ul:hover>.p-rise { border-bottom: 1px solid #ff6e22; }	.theme-orange ul:hover > .send .check a, .theme-orange ul:hover>.p-rise { color: #ff6e22; }	.theme-orange ul:hover > .send .check a { background: url(https://github.com/lime7/pt/blob/master/images/iconmonstr-arrow-28-icon-32-orange.png?raw=true) 88% 50% no-repeat; }	.theme-orange ul:hover, .theme-orange ul:hover li.title,	.theme-orange ul:hover>.p-rise, .theme-orange ul:hover > .send .check a { background-color: #333333; }	/* ___________________________________________________________________ | theme - blue | main color - #57bae8 | background color - #4e616d | ___________________________________________________________________ */	.theme-blue li.p-rise, .theme-blue .check a { background-color: #57bae8; }	.theme-blue ul:hover li.title, .theme-blue ul:hover>.p-rise { border-bottom: 1px solid #57bae8; }	.theme-blue ul:hover > .send .check a, .theme-blue ul:hover>.p-rise { color: #57bae8; }	.theme-blue ul:hover > .send .check a { background: url(https://github.com/lime7/pt/blob/master/images/iconmonstr-arrow-28-icon-32-blue.png?raw=true) 88% 50% no-repeat; }	.theme-blue ul:hover, .theme-blue ul:hover li.title,	.theme-blue ul:hover>.p-rise, .theme-blue ul:hover > .send .check a { background-color: #4e616d; }	/* ___________________________________________________________________ | theme - red | main color - #c21e0a | background color - #302A2A | ___________________________________________________________________ */	.theme-red li.p-rise, .theme-red .check a { background-color: #c21e0a; }	.theme-red ul:hover li.title, .theme-red ul:hover>.p-rise { border-bottom: 1px solid #c21e0a; }	.theme-red ul:hover > .send .check a, .theme-red ul:hover>.p-rise { color: #c21e0a; }	.theme-red ul:hover > .send .check a { background: url(https://github.com/lime7/pt/blob/master/images/iconmonstr-arrow-28-icon-32-red.png?raw=true) 88% 50% no-repeat; }	.theme-red ul:hover, .theme-red ul:hover li.title,	.theme-red ul:hover>.p-rise, .theme-red ul:hover > .send .check a { background-color: #302A2A; }	/* ___________________________________________________________________ | theme - green | main color - #00c09e | background color - #000 | ___________________________________________________________________ */	.theme-green li.p-rise, .theme-green .check a { background-color: #00c09e; }	.theme-green ul:hover li.title, .theme-green ul:hover>.p-rise { border-bottom: 1px solid #00c09e; }	.theme-green ul:hover > .send .check a, .theme-green ul:hover>.p-rise { color: #00c09e; }	.theme-green ul:hover > .send .check a { background: url(https://github.com/lime7/pt/blob/master/images/iconmonstr-arrow-28-icon-32-green.png?raw=true) 88% 50% no-repeat; }	.theme-green ul:hover, .theme-green ul:hover li.title,	.theme-green ul:hover>.p-rise, .theme-green ul:hover > .send .check a { background-color: #000; }	/* ___________________________________________________________________ | theme - pink | main color - #eb5656 | background color - #414141 | ___________________________________________________________________ */	.theme-pink li.p-rise, .theme-pink .check a { background-color: #eb5656; }	.theme-pink ul:hover li.title, .theme-pink ul:hover>.p-rise { border-bottom: 1px solid #eb5656; }	.theme-pink ul:hover > .send .check a, .theme-pink ul:hover>.p-rise { color: #eb5656; }	.theme-pink ul:hover > .send .check a { background: url(https://github.com/lime7/pt/blob/master/images/iconmonstr-arrow-28-icon-32-pink.png?raw=true) 88% 50% no-repeat; }	.theme-pink ul:hover, .theme-pink ul:hover li.title,	.theme-pink ul:hover>.p-rise, .theme-pink ul:hover > .send .check a { background-color: #414141; }	/*_________________________________________________*/	@media only screen and (max-width: 1248px) { .bit-4 { margin: 1% 7% 4% 7%; } .pricing-table .bit-4:hover { margin: 1% 7% 4% 7%; *margin: 1% 7% 4% 7%; }	}	@media only screen and (max-width: 940px) { .bit-3 { margin: 1% 5% 4% 5%; } .pricing-table .bit-3:hover { margin: 1% 5% 4% 5%; *margin: 1% 5% 4% 5%; }	}	@media only screen and (max-width: 820px) { .bit-3 { margin: 1% 5% 4% 5%; } .bit-4 { margin: 1% 1% 4% 1%; } .pricing-table .bit-4:hover { margin: 1% 1% 4% 1%; *margin: 1% 1% 4% 1%; } .pricing-table .bit-3:hover { margin: 1% 5% 4% 5%; *margin: 1% 5% 4% 5%; }	}	@media only screen and (max-width: 750px) { .bit-3, .bit-4 { margin: 1% 1% 4% 1%; } .pricing-table [class*='bit-']:hover { margin: 1% 1% 4% 1%; *margin: 1% 1% 4% 1%; }	}	@media only screen and (max-width: 640px) {	.wrap { border: none; }	}	@media only screen and (max-width: 585px) {	.bit-3, .bit-4 { margin: 5% 1% 2% 1%; } .pricing-table [class*='bit-']:hover { margin: 5% 1% 2% 1%; *margin: 5% 1% 2% 1%; }	}
Pricing Table - Script Codes
Pricing Table - Script Codes
Home Page Home
Developer Elena
Username semenchenko
Uploaded December 17, 2022
Rating 3
Size 6,784 Kb
Views 8,096
Do you need developer help for Pricing Table?

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!

Elena (semenchenko) Script Codes
Name
Walking skeleton only css
Calc.js
Business card mockup
Css piramide
SVG circle path
Fish 2d game only CSS
Card
A Pen by Elena
Responsive HTML Email template
3d css cube
Create amazing video scripts 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!