Different Plans And Price Widget Using Pure HTML

Now everyone is selling something so displaying Plans And Price Widget is now important to say more in less words. Plans And Price Widget can clear others mind in sec by showing the features and price in a manner so that the client can make himself comfortable by seeing Plans And Price Widget beside start asking questions one by one.

There are many Plans And Price Widget available over internet but they are heavy in codes and too much hard to use but here we have a little and stylish Plans And Price Widget for your webpage that you can use anywhere. So now use out Plans And Price Widget by copying the code from below.

Features:

1.) Pure HTML-CSSAdded.
2.) No JavaScript JQuery Added.
3.) CSS Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Browser.

How To Add In A WebPage?

1.) Just Go To Your “Web Page File”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.

CSS:

<style type="text/css">
img{border:0}ul,li{list-style:none;margin:0;padding:0}a{color:#fb7c03;text-decoration:none}div{position:relative}#menu-holder{font:12px/1.5em Arial, Helvetica, sans-serif, "Arial Narrow";margin:80px auto;width:850px}.content{color:#c5c5c5;font-size:25px;margin-top:100px;text-align:center;text-shadow:#fff 1px 1px 1px}a.go{font-size:15px}a.go:hover{text-decoration:underline}#home{margin-top:20px}.column-clear{clear:both}.price_table{color:#444;font-family:arial, sans-serif;font-size:13px;font-weight:400;height:450px;width:100%}.price_table a{color:#444}.price_table .align_center{text-align:center}.price_table .pack-title{color:#217515;font-family:Viga, arial, sans-serif;font-size:30px;margin-top:10px;text-shadow:0 1px 0 rgba(125,207,61,0.4)}.price_table .price{color:#217515;font-family:Viga, arial, sans-serif;font-size:50px;margin:30px 0 20px;text-shadow:0 1px 0 rgba(125,207,61,0.4)}.price_table .time{color:#217515;font-size:14px;text-shadow:0 1px 0 rgba(125,207,61,0.4)}.price_table .column_1 .header_row_1{background:linear-gradient(#52A93E,#469436);border-bottom:1px solid #37752B;height:45px;padding:5px 0 0;width:100%}.price_table .column_1 .header_row_2{background:linear-gradient(#7DCF3D,#52A93E);border-top:1px solid #B0E287;height:100px;padding:5px 0;width:100%}.price_table .column_1{-moz-transform:translate(0px,0px);-moz-transition:all .2s ease-in-out;-ms-transform:translate(0px,0px);-ms-transition:all .2s ease-in-out;-o-transform:translate(0px,0px);-o-transition:all .2s ease-in-out;-webkit-transform:translate(0px,0px);-webkit-transition:all .2s ease-in-out;float:left;height:100%;transform:translate(0px,0px);transition:all .2s ease-in-out;width:270px}.price_table .column_1:hover{-moz-box-shadow:5px 0 25px rgba(0,0,0,0.7);-moz-transform:translate(-5px,-15px);-moz-transition-delay:0;-ms-transform:translate(-5px,-15px);-ms-transition-delay:0;-o-transform:translate(-5px,-15px);-o-transition-delay:0;-webkit-box-shadow:5px 0 25px rgba(0,0,0,0.7);-webkit-transform:translate(-5px,-15px);-webkit-transition-delay:0;box-shadow:5px 0 25px rgba(0,0,0,0.7);position:relative;transform:translate(-5px,-15px);transition-delay:0;z-index:100}.price_table .column_1:hover .header_row_1,.price_table .column_1:hover .header_row_2,.price_table .column_1:hover .row_style_1,.price_table .column_1:hover .row_style_2,.price_table .column_1:hover .row_style_footer_1,.price_table .column_1:hover .row_style_footer_2{padding-left:5px;padding-right:5px}.price_table .row_style_1,.price_table .row_style_2,.price_table .row_style_footer_1,.price_table .row_style_footer_2{float:left;height:40px;padding-top:9px;width:100%}.price_table .row_style_footer_1,.price_table .row_style_footer_2{padding:10px 0}.price_table .row_style_1,.price_table .row_style_footer_1{background-color:#F9F8F0}.price_table .row_style_2,.price_table .row_style_footer_2{background-color:#F0EED9}.price_table .row_style_1 span,.price_table .row_style_2 span{font-size:14px;position:relative}.price_table .row_style_1 span:before,.price_table .row_style_2 span:before{background:url(https://www.flashuser.net/tutorial/price-table/images/icon-yes.gif) no-repeat 0 0;content:"";height:24px;left:-30px;position:absolute;top:-3px;width:24px}.price_table .no-option span:before{background:url(../images/icon-no.gif) no-repeat 0 0;content:"";height:24px;left:-30px;position:absolute;top:-3px;width:24px}.buy_now{-moz-border-radius:3px;-moz-box-shadow:0 1px 2px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.3) inset;-webkit-border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.3) inset;background:linear-gradient(#fcca94,#f9a55c);border-color:#ddb385 #dca36c #db904f;border-radius:3px;border-style:solid;border-width:1px;box-shadow:0 1px 2px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.3) inset;color:#513b26;display:block;font-weight:700;height:20px;margin-left:auto;margin-right:auto;padding:5px 16px;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,0.4);width:60px}.buy_now:hover{background:linear-gradient(#fddfba,#fab371);border-color:#d2aa7e #d19c68 #d0894b}
</style>

HTML:

<div id="menu-holder">
<div class="price_table">
<div class="column_1">
<ul>
<li class="header_row_1 align_center">
<div class="pack-title">Basic</div>
</li>
<li class="header_row_2 align_center">
<div class="price"><span>$29</span></div>
<div class="time">per year</div>
</li>
<li class="row_style_1 align_center"><span>Lorem ipsum dolor sit</span></li>
<li class="row_style_1 align_center"><span>Praesent ac elit</span></li>
<li class="row_style_1 align_center"><span>Duis quis risus enim</span></li>
<li class="row_style_1 align_center no-option"><span>Suspendisse rutrum nulla</span></li>
<li class="row_style_1 align_center no-option"><span>Quisque mauris urna feugiat</span></li>
<li class="row_style_footer_1"><a href="#" class="buy_now">Sign Up</a></li>
</ul></div><!--end column-->
<div class="column_1">
<ul>
<li class="header_row_1 align_center">
<div class="pack-title">Professional</div>
</li>
<li class="header_row_2 align_center">
<div class="price"><span>$69</span></div>
<div class="time">per year</div>
</li>
<li class="row_style_2 align_center"><span>Lorem ipsum dolor sit</span></li>
<li class="row_style_2 align_center"><span>Praesent ac elit</span></li>
<li class="row_style_2 align_center"><span>Duis quis risus enim</span></li>
<li class="row_style_2 align_center"><span>Suspendisse rutrum nulla</span></li>
<li class="row_style_2 align_center no-option"><span>Quisque mauris urna feugiat</span></li>
<li class="row_style_footer_2"><a href="#" class="buy_now">Sign Up</a></li>
</ul></div><!--end column-->
<div class="column_1">
<ul>
<li class="header_row_1 align_center">
<div class="pack-title">Extended</div>
</li>
<li class="header_row_2 align_center">
<div class="price"><span>$179</span></div>
<div class="time">per year</div>
</li>
<li class="row_style_1 align_center"><span>Lorem ipsum dolor sit</span></li>
<li class="row_style_1 align_center"><span>Praesent ac elit</span></li>
<li class="row_style_1 align_center"><span>Duis quis risus enim</span></li>
<li class="row_style_1 align_center"><span>Suspendisse rutrum nulla</span></li>
<li class="row_style_1 align_center"><span>Quisque mauris urna feugiat</span></li>
<li class="row_style_footer_1"><a href="#" class="buy_now">Sign Up</a></li>
</ul></div><!--end column-->
</div><!--end price table-->
<div class="column-clear"></div>
</div><!--end menu-holder-->

Customization:

1.) Edit Your HTML As Per Your Requirements. Rest JavaScript Is Ok For General Us. Change the Twitter UserName with your own. If You Are Pro, Then You Can Do Any Thing.

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…