Hello Everyone, in this post I will share how to add pricing table in blogger. This pricing table is a pure CSS program which means I have used only HTML and CSS to create these cards. I hope you understand the code behind making this card.
This card is made using HTML and CSS only, so when you click the buy button no action or anything happens.
If you want to install this pricing table on your website, then read the complete post and follow the given steps.
What is Pricing Table ?
Pricing table is one such way by which we can easily display any type of price by table. On many websites, you must have seen that along with the list of an item, its price is also written in the table. This pricing table is made with the help of very pure html and css. No JavaScript has been used in this, which will not affect the loading speed of your website.
How To Add Pricing Table in Blogger :-
<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css' integrity='sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==' referrerpolicy='no-referrer' rel='stylesheet'/>
<style type='text/css'>
/* This Pricing Table Design By Www.SmartTechMukesh.Com */
:root{
--yellow-color:#ffd861;
--green-color:#43ef8b;
--ribbon-color:#a26bfa;
--basic-background:#ffecb3;
--premium-background:#d0b3ff;
--ultimate-background:#baf8d4;}
.stmWrapper{max-width:1090px;width:100%;margin:auto;display:flex;flex-wrap:wrap;justify-content:space-between;}
.stmWrapper .stmTable{background:#fff;width:calc(33% - 20px);padding:30px 30px;position:relative;box-shadow:0 5px 10px rgba(0,0,0,0.1);}
.stmTable .price-section{display:flex;justify-content:center;}
.stmTable .stm-Price-area{height:120px;width:120px;border-radius:50%;padding:2px;}
.stm-Price-area .inner-area{height:100%;width:100%;border-radius:50%;border:3px solid #fff;line-height:117px;text-align:center;color:#fff;position:relative;}
.stm-Price-area .inner-area .text{font-size:25px;font-weight:400;position:absolute;top:-10px;left:17px;}
.stm-Price-area .inner-area .price{font-size:45px;font-weight:500;margin-left:16px;}
.stmTable .stm-Package-name{width:100%;height:2px;margin:35px 0;position:relative;}
.stmTable .stm-Package-name::before{position:absolute;top:50%;left:50%;font-size:25px;font-weight:500;background:#fff;padding:0 15px;transform:translate(-50%,-50%);}
.stmTable .features li{margin-bottom:15px;list-style:none;display:flex;justify-content:space-between;}
.features li .list-name{font-size:17px;font-weight:400;}
.features li .icon{font-size:15px;}
.features li .icon.check{color:#2db94d;}
.features li .icon.cross{color:#cd3241;}
.stmTable .btn{width:100%;display:flex;margin-top:35px;justify-content:center;}
.stmTable .btn button{width:80%;height:50px;color:#fff;font-size:20px;font-weight:500;border:none;outline:none;border-radius:25px;cursor:pointer;transition:all 0.3s ease;}
.stmTable .btn button:hover{border-radius:5px;}
.stm-Basic .features li::selection{background:var(--yellow-color);}
.stm-Basic::selection,.stm-Basic .stm-Price-area,.stm-Basic .inner-area{background:var(--yellow-color);}
.stm-Basic .btn button{border:2px solid var(--yellow-color);background:#fff;color:var(--yellow-color);}
.stm-Basic .btn button:hover{background:var(--yellow-color);color:#fff;}
.stm-Premium::selection,.stm-Premium .stm-Price-area,.stm-Premium .inner-area,.stm-Premium .btn button{background:var(--ribbon-color);}
.stm-Premium .btn button:hover{background:#833af8;}
.stm-Ultimate::selection,.stm-Ultimate .stm-Price-area,.stm-Ultimate .inner-area{background:var(--green-color);}
.stm-Ultimate .btn button{border:2px solid var(--green-color);color:var(--green-color);background:#fff;}
.stm-Ultimate .btn button:hover{background:var(--green-color);color:#fff;}
.stm-Basic .stm-Package-name{background:var(--basic-background);}
.stm-Premium .stm-Package-name{background:var(--premium-background);}
.stm-Ultimate .stm-Package-name{background:var(--ultimate-background);}
.stm-Basic .stm-Package-name::before{content:"Basic";}
.stm-Premium .stm-Package-name::before{content:"Premium";font-size:24px;}
.stm-Ultimate .stm-Package-name::before{content:"Ultimate";font-size:24px;}
@media (max-width:1020px){.stmWrapper .stmTable{width:calc(50% - 20px);margin-bottom:40px;}}
@media (max-width:698px){.stmWrapper .stmTable{width:100%;}}
::selection{color:#fff;}
.stmTable .ribbon{width:150px;height:150px;position:absolute;top:-10px;left:-10px;overflow:hidden;}
.stmTable .ribbon::before,.stmTable .ribbon::after{position:absolute;content:"";z-index:-1;display:block;border:7px solid #4606ac;border-top-color:transparent;border-left-color:transparent;}
.stmTable .ribbon::before{top:0;right:15px;}
.stmTable .ribbon::after{bottom:15px;left:0;}
.stmTable .ribbon span{position:absolute;top:30px;right:0;transform:rotate(-45deg);width:200px;background:var(--ribbon-color);padding:10px 0;color:#fff;text-align:center;font-size:17px;text-transform:uppercase;box-shadow:0 5px 10px rgba(0,0,0,0.12);}
</style>
<div class="stmWrapper">
<div class="stmTable stm-Basic">
<div class="price-section">
<div class="stm-Price-area">
<div class="inner-area">
<span class="text">$</span>
<span class="price">29</span>
</div>
</div>
</div>
<div class="stm-Package-name"></div>
<ul class="features">
<li>
<span class="list-name">One Selected Template</span>
<span class="icon check"><i class="fas fa-check"></i></span>
</li>
<li>
<span class="list-name">100% Responsive Design</span>
<span class="icon check"><i class="fas fa-check"></i></span>
</li>
<li>
<span class="list-name">Credit Remove Permission</span>
<span class="icon cross"><i class="fas fa-times"></i></span>
</li>
<li>
<span class="list-name">Lifetime Template Updates</span>
<span class="icon cross"><i class="fas fa-times"></i></span>
</li>
</ul>
<div class="btn"><button>Purchase</button></div>
</div>
<div class="stmTable stm-Premium">
<div class="ribbon"><span>Recommend</span></div>
<div class="price-section">
<div class="stm-Price-area">
<div class="inner-area">
<span class="text">$</span>
<span class="price">59</span>
</div>
</div>
</div>
<div class="stm-Package-name"></div>
<ul class="features">
<li>
<span class="list-name">Five Existing Templates</span>
<span class="icon check"><i class="fas fa-check"></i></span>
</li>
<li>
<span class="list-name">100% Responsive Design</span>
<span class="icon check"><i class="fas fa-check"></i></span>
</li>
<li>
<span class="list-name">Credit Remove Permission</span>
<span class="icon check"><i class="fas fa-check"></i></span>
</li>
<li>
<span class="list-name">Lifetime Template Updates</span>
<span class="icon cross"><i class="fas fa-times"></i></span>
</li>
</ul>
<div class="btn"><button>Purchase</button></div>
</div>
<div class="stmTable stm-Ultimate">
<div class="price-section">
<div class="stm-Price-area">
<div class="inner-area">
<span class="text">$</span>
<span class="price">99</span>
</div>
</div>
</div>
<div class="stm-Package-name"></div>
<ul class="features">
<li>
<span class="list-name">All Existing Templates</span>
<span class="icon check"><i class="fas fa-check"></i></span>
</li>
<li>
<span class="list-name">100% Responsive Design</span>
<span class="icon check"><i class="fas fa-check"></i></span>
</li>
<li>
<span class="list-name">Credit Remove Permission</span>
<span class="icon check"><i class="fas fa-check"></i></span>
</li>
<li>
<span class="list-name">Lifetime Template Updates</span>
<span class="icon check"><i class="fas fa-check"></i></span>
</li>
</ul>
<div class="btn"><button>Purchase</button></div>
</div>
</div>
Conclusion :-
In this post I have shared with you all How To Add Pricing Table in Blogger. So how did you like this post, you can tell by commenting, if you have any question then you can comment. Thanks for visiting our website.
Refrence:
Www.SmartTechMukesh.Com
Good Job❤
ReplyDeleteFrom Ngohoanganhtuan.net
Thanks
DeleteGreat article bro 👌👌👌
ReplyDeleteThanks
DeleteGood
ReplyDelete☞ Love from QuangLinhChiaSe.Com
Thanks
DeleteThis article is really helpful, thank you for sharing.
ReplyDeleteThanks
DeleteNice content sir
ReplyDeleteThanks
DeletePlease how do I add median UI download button to my post
ReplyDeleteYou have an article explaining how to add an automatic table of contents in Blogger
ReplyDelete