How to Create Pricing Table/Chart ?
Today we'll create a Beautiful and Responsive Pricing Table in HTML CSS and jQuery.
So Welcome Back friends to the CodingTuting ! I'm Jignesh Panchal, let's go head.
 |
| Responsive Pricing Table Template with Animations |
1. What is Pricing Table ?
Pricing Table is a container which contains Key Points, Features, Specifications, Configuration, Price of any service or product, etc.
Pricing Table Design UI helps users/visitors to understand and differenciate among different different products/services. It is a very usefull part of a offer based website.
2. Use of Pricing Table
If we visit any website which offers Products/Services like Godaddy, Hostgator, Avira, etc. They all display their products in a tabular format. This tabular format is a Pricing Table. It contains the Specifications, Key Features, and Price of each product.
And if you are designing or developing any offer based website, then sure you'll need a Pricing Table Design for your project. Many plugins are available for Wordpress users to add Pricing Table in their blog.
But if know to code, so to create a design of Pricing Table UI by self coding is the better option then use of the plugin. We can also create a Pricing Table in Bootstrap. Bootstrap has inbuilt CSS which gives a beautiful look to our design.
But here I'm doing focus on self coding skills. Try to avoid Bootstrap sometime and develop by your own Coding Skills. So today we'll learn - How to Create a Pricing Table using HTML CSS and jQuery.
We also add some following features in our Pricing Table Design.
- Hover effect on the Pricing Table.
- Fading and Zooming animation on page load.
- Fading and Zooming animation on viewport on each time scroll the window.
These all animations are so advance. And these animations support mobile devices too. I've used the jQuery to control the scroll animation on the viewport. I've used CSS3 Keyframe animation. See the preview of our Pricing Table Design
3. Preview of Pricing Table
Note:- Some colors of Pricing Table are not being displayed in this preview video. But it'll show once you run the code in your web browser.
I've used 3 different colors in 3 Pricing Table. These colors are a very good standard, but you can change the color as per your choice, website branding and your need.
You may also like
Focus on the source code
Before look at the source code, let's understand How I did this? Don't be hurry for source code.
I'm using Google Fonts in my code. You can use it too or any others as you like.
- I've created basic structure in HTML and gives some CSS class to the elements and add jQuery CDN in the page
- I've applied the CSS to the selected elements.
- I created some @media queries and placed some CSSfor responsive design in it.
- At last I created a jQuery function to determine the viewport and apply some CSS for scroll effect
PriceTable.html
<!--Code by CodingTuting.Com Jignesh Panchal-->
<!DOCTYPE html>
<html>
<head>
<title>Price Table HTML CSS jQuery</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato|Raleway&display=swap" rel="stylesheet">
<link rel="stylesheet" href="StylePriceTable.css"/>
</head>
<body>
<div id="main-heading"><h1>Pricing Table in HTML CSS jQuery</h1></div>
<div class="description">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br/><br/>
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.<br/><br/>
The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.<br/><br/>
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humor and the like).
</p>
</div>
<div class="ct-row">
<div class="col-m3">
<div class="price-table tbl-wet">
<div class="pt-header">
<span class="pt-heading">Starter</span>
<span class="priceValue">
<sup>$</sup>5.99/<sub><small>Month</small></sub>
</span>
</div>
<div class="pt-body">
<ul>
<li><div class="spec">1 <span>Website</span></div></li>
<li><div class="spec">100GB <span>Storage</span></div></li>
<li><div class="spec">1GB <span>RAM</span></div></li>
<li><div class="spec">10 X 1 <span>Database</span></div></li>
<li><div class="spec">2GB <span>Bandwidth</span></div></li>
<li><div class="spec"><del>24 X 7 <span>Support</span></del></div></li>
<li><button type="button" class="btn-wet">Buy Now</button></li>
</ul>
</div>
</div>
</div>
<div class="col-m3">
<div class="price-table tbl-sky">
<div class="pt-header">
<span class="pt-heading">Economy</span>
<div class="best-ribbon"><span>Best Deal</span></div>
<span class="priceValue">
<sup>$</sup>6.99/<sub><small>Month</small></sub>
</span>
</div>
<div class="pt-body">
<ul>
<li><div class="spec">10 <span>Website</span></div></li>
<li><div class="spec">1TB <span>Storage</span></div></li>
<li><div class="spec">2GB <span>RAM</span></div></li>
<li><div class="spec">25 X 1 <span>Database</span></div></li>
<li><div class="spec">4GB <span>Bandwidth</span></div></li>
<li><div class="spec">24 X 7 <span>Support</span></div></li>
<li><button type="button" class="btn-sky">Buy Now</button></li>
</ul>
</div>
</div>
</div>
<div class="col-m3">
<div class="price-table tbl-lips">
<div class="pt-header">
<span class="pt-heading">Unlimited</span>
<span class="priceValue">
<sup>$</sup>8.99/<sub><small>Month</small></sub>
</span>
</div>
<div class="pt-body">
<ul>
<li><div class="spec">Unlimited <span>Website</span></div></li>
<li><div class="spec">Unlimited <span>Storage</span></div></li>
<li><div class="spec">4GB <span>RAM</span></div></li>
<li><div class="spec">Unlimited <span>Database</span></div></li>
<li><div class="spec">4GB <span>Bandwidth</span></div></li>
<li><div class="spec">24 X 7 <span>Support</span></div></li>
<li><button type="button" class="btn-lips">Buy Now</button></li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="ScriptPriceTable.js"></script>
</body>
</html>
StylePriceTable.css
/*Code by CodingTuting.Com Jignesh Panchal*/
body {
margin:0;
font-family: sans-serif;
}
#main-heading {
text-align:center;
}
.description {
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: justify;
padding: 0 0 30px;
}
.description p {
color: #656565;
line-height: 1.4;
font-size: 20px;
}
#main-heading h1 {
font-family: 'Raleway', sans-serif;
font-size: 50px;
letter-spacing: 3px;
color: #181873;
padding:15px;
}
.ct-row {
text-align:center;
padding-bottom: 2em;
}
.col-m3 {
width: 28%;
display: inline-block;
padding: 25px;
}
.price-table .pt-header {
text-align: center;
position: relative;
}
.price-table .pt-header .best-ribbon {
width: 130px;
height: 130px;
position: absolute;
overflow: hidden;
top: -10px;
left: -10px;
}
.price-table .pt-header .best-ribbon span {
position: absolute;
left: -47px;
top: 21px;
width: 206px;
font-size: 20px;
letter-spacing: 1.5px;
background: #3F51B5;
color: #fff;
font-family: 'Lato', sans-serif;
padding: 10px 0;
transform: rotate(-45deg);
}
.price-table .pt-header .best-ribbon span::before,
.price-table .pt-header .best-ribbon span::after {
border-top-color: transparent;
border-left-color: transparent;
}
.price-table .pt-header .best-ribbon::after,
.price-table .pt-header .best-ribbon::before {
z-index: -1;
content: '';
display: block;
border: 5px solid #8d9cf3;
position: absolute;
}
.price-table .pt-header .best-ribbon::before {
top: 0;
right: 0;
}
.price-table .pt-header .best-ribbon::after {
bottom: 0;
left: 0;
}
.price-table.tbl-wet .pt-header .pt-heading {
background-image: linear-gradient(to bottom right, #2ECC71, #39e682);
color: #fff;
}
.price-table.tbl-sky .pt-header .pt-heading {
background-image: linear-gradient(to bottom right, #009688 , #00bdab );
color: #fff;
}
.price-table.tbl-lips .pt-header .pt-heading {
background-image: linear-gradient(to bottom right, #E91E63, #f76093);
color: #fff;
}
.price-table .pt-header .pt-heading {
font-size: 28px;
display: block;
padding: 30px;
text-transform: uppercase;
letter-spacing: 3px;
font-family: 'Raleway', sans-serif;
}
.price-table .pt-header .priceValue {
font-size: 40px;
display: block;
padding: 15px;
background-color: #eee;
color: #656565;
font-family: "Lato",sans-serif;
}
.price-table .pt-header .priceValue small {
font-size: 18px;
}
.price-table .pt-body {
background-color: #fdfdfd;
}
.price-table .pt-body .spec {
position: relative;
font-size: 19px;
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
transition: all .5s ease-in;
}
.price-table .pt-body ul {
padding: 0;
margin: 0;
border: 1px solid #eee;
border-top: none;
position: relative;
}
.price-table .pt-body ul li {
padding:17px 0;
list-style-type: none;
border-bottom: 1px solid #eee;
color: #5f5f5f;
position: relative;
}
.price-table .pt-body ul li:not(:last-child)::before {
content: "";
position: absolute;
width: 0;
height: 100%;
top: 0;
left: 0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.price-table .pt-body ul li:hover .spec, .price-table .pt-body ul li:hover .spec span {
color:#fff;
}
.price-table .pt-body ul li:last-child {
border:none;
padding:0;
}
.price-table .pt-body ul li:nth-last-child(2) {
border-bottom:none;
}
.price-table .pt-body ul li span {
color: #9e9e9e;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.price-table .pt-body ul li button {
width: 100%;
font-size: 22px;
text-transform: uppercase;
padding: 12px 0;
background-color: transparent;
cursor: pointer;
font-family: 'Lato', sans-serif;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.price-table .pt-body ul li .btn-wet {
color: #2fcf73;
border: 1px solid #2fcf73;
}
.price-table .pt-body ul li .btn-wet:hover {
color: #fff;
background-color: #2fcf73;
border: 1px solid #2fcf73;
}
.price-table .pt-body ul li .btn-sky {
color: #00b3a2;
border: 1px solid #00b3a2;
}
.price-table .pt-body ul li .btn-sky:hover {
color: #fff;
background-color: #00b3a2;
border: 1px solid #00b3a2;
}
.price-table .pt-body ul li .btn-lips {
color: #f34b84;
border: 1px solid #f34b84;
}
.price-table .pt-body ul li .btn-lips:hover {
color: #fff;
background-color: #f34b84;
border: 1px solid #f34b84;
}
.price-table.tbl-wet .pt-body ul li:not(:last-child)::before {
background: #36df7d;
}
.price-table.tbl-sky .pt-body ul li:not(:last-child)::before {
background: #00b7a6;
}
.price-table.tbl-lips .pt-body ul li:not(:last-child)::before {
background: #f65b90;
}
.price-table .pt-body ul li:hover::before {
width: 100%;
}
.price-table.tbl-wet .spec {
-webkit-animation-name: fadeInRight;
-moz-animation-name: fadeInRight;
-o-animation-name: fadeInRight;
animation-name: fadeInRight;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
.price-table.tbl-sky .spec {
-webkit-animation-name: zoomIn;
-moz-animation-name: zoomIn;
-o-animation-name: zoomIn;
animation-name: zoomIn;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
.price-table.tbl-lips .spec {
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
animation-name: fadeInLeft;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
/* Media Queries */
/* Mini Screen */
@media only screen and (max-width : 980px) {
.col-m3 {
width: 42%;
}
}
/* iPads and Tablets (portrait and landscape) */
@media only screen and (max-device-width : 768px) {
.col-m3 {
width: 40%;
}
}
/* Smartphones (portrait and landscape) */
@media only screen and (max-device-width : 480px) {
.col-m3 {
width: 70%;
}
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
.col-m3 {
width: 85%;
}
}
/* Animations */
@-webkit-keyframes zoomIn {
0% {transform: scale(0);}
100% {transform: scale(1);}
}
@-moz-keyframes zoomIn {
0% {transform: scale(0);}
100% {transform: scale(1);}
}
@-o-keyframes zoomIn {
0% {transform: scale(0);}
100% {transform: scale(1);}
}
@keyframes zoomIn {
0% {transform: scale(0);}
100% {transform: scale(1);}
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@-moz-keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@-o-keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@-moz-keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@-o-keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
ScriptPriceTable.js
/*Code by CodingTuting.Com Jignesh Panchal*/
$(window).scroll(function(){
$('.tbl-sky .spec').each(function(){
var zoomIn = 1;
var zoomOut = 0;
if(isScrolledIntoView($(this))){
$(this).css({
'-webkit-transform': 'scale(' + zoomIn + ')',
'-moz-transform': 'scale(' + zoomIn + ')',
'-ms-transform': 'scale(' + zoomIn + ')',
'-o-transform': 'scale(' + zoomIn + ')',
'transform': 'scale(' + zoomIn + ')'
});
}
else{
$(this).css({
'-webkit-transform': 'scale(' + zoomOut + ')',
'-moz-transform': 'scale(' + zoomOut + ')',
'-ms-transform': 'scale(' + zoomOut + ')',
'-o-transform': 'scale(' + zoomOut + ')',
'transform': 'scale(' + zoomOut + ')'
});
}
});
$('.tbl-wet .spec').each(function(){
var fadeIn = "0px", fadeOut = "100px";
if(isScrolledIntoView($(this))){
$(this).css({
'-webkit-transform': 'scale(' + fadeIn + ')',
'-moz-transform': 'scale(' + fadeIn + ')',
'-ms-transform': 'scale(' + fadeIn + ')',
'-o-transform': 'scale(' + fadeIn + ')',
'transform': 'translateX(' + fadeIn + ')',
'opacity':1
});
}
else{
$(this).css({
'-webkit-transform': 'scale(' + fadeOut + ')',
'-moz-transform': 'scale(' + fadeOut + ')',
'-ms-transform': 'scale(' + fadeOut + ')',
'-o-transform': 'scale(' + fadeOut + ')',
'transform': 'translateX(' + fadeOut + ')',
'opacity':0
});
}
});
$('.tbl-lips .spec').each(function(){
var fadeIn = "0px", fadeOut = "-50px";
if(isScrolledIntoView($(this))){
$(this).css({
'-webkit-transform': 'scale(' + fadeIn + ')',
'-moz-transform': 'scale(' + fadeIn + ')',
'-ms-transform': 'scale(' + fadeIn + ')',
'-o-transform': 'scale(' + fadeIn + ')',
'transform': 'translateX(' + fadeIn + ')',
'opacity':1
});
}
else{
$(this).css({
'-webkit-transform': 'scale(' + fadeOut + ')',
'-moz-transform': 'scale(' + fadeOut + ')',
'-ms-transform': 'scale(' + fadeOut + ')',
'-o-transform': 'scale(' + fadeOut + ')',
'transform': 'translateX(' + fadeOut + ')',
'opacity':0
});
}
});
});
function isScrolledIntoView(elem){
var $elem = $(elem);
var $window = $(window);
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + $window.height();
var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
I hope you got - How To Create Responsive Pricing Table in HTML CSS jQuery. You can use this Pricing Table as per your need, and you can modified it also using your skills. Please read our more articles on Web Design and all.
If there is any bug in this tutorial please let us know in the comment.
We would like your suggestion on any topic. Please suggest us, we'll try to post about that topic as soon as. If you've any query regards the Web Design, Development, etc. Please do comment.
Sharing is Caring
Thanks for Reading
Keywords & Queries covered in this tutorial are:
2 Comments
Write Commentshttps://sites.google.com/site/ytviewsindiabuy/ Action games are more prominent than other games. Compared to adventure games they are more interactive and provide a greater adrenalin rush. They basically belong to that variety which includes striking games like fighting, star wars, space travels, wrestling, situational games and many more and we, at xpert4u.co.uk provide you with all these and many more.
Replyhttps://twitchviral.com/ Gaming is the latest rage that is slowly cropping up especially with the younger generation. Do not rush to the conclusion that games are just played by teenagers, there are men who have taken gaming as a profession and are making their ends meet by participating in gaming competitions. The gaming that will be looked into in this article will be online gaming, with the help of a computer. Internet is growing rapidly, this has paved the way for the explosive growth of the online gaming arena, which we shall be looking into on the course of this article.
ReplyEmoticonEmoticon