Bootstrap 4 price plan using html css
<div id="priceTable"> <section> <div class="container"> <!--BLOCK ROW START--> <div class="row price-Table"> <div class="col-md-4"> <!--PRICE CONTENT START--> <div class="priceContent clearfix"> <!--HEAD PRICE DETAIL START--> <div class="table_head_price clearfix"> <!--HEAD CONTENT START--> <div class="generic_head_content clearfix"> <!--HEAD START--> <div class="head_bg"></div> <div class="head"> <span>Basic</span> <small>Plan</small> </div> <!--//HEAD END--> </div> <!--//HEAD CONTENT END--> <!--PRICE START--> <div class="table_price_tag clearfix"> <span class="price"> <span class="sign">$</span> <span class="currency">39</span> <span class="cent">.99</span> <span class="month">/Month</span> </span> </div> <!--//PRICE END--> </div> <!--//HEAD PRICE DETAIL END--> <!--FEATURE LIST START--> <div class="generic_feature_list"> <ul> <li><span>Unlimited</span> Website</li> <li><span>24x7</span> Support</li> <li><span>15GB </span>Bandwidth</li> <li><span>20GB</span> Cloud storage</li> <li><span>1 week</span> playback</li> </ul> </div> <!--//FEATURE LIST END--> <!--BUTTON START--> <div class="clearfix"> <a href="" class="price-plan btn btn-purchase">Buy now</a> </div> <!--//BUTTON END--> </div> <!--//PRICE CONTENT END--> </div> <div class="col-md-4"> <!--PRICE CONTENT START--> <div class="priceContent active clearfix two"> <!--HEAD PRICE DETAIL START--> <div class="table_head_price clearfix"> <!--HEAD CONTENT START--> <div class="generic_head_content clearfix"> <!--HEAD START--> <div class="head_bg"></div> <div class="head"> <span>Standard</span> <small>Plan</small> </div> <!--//HEAD END--> </div> <!--//HEAD CONTENT END--> <!--PRICE START--> <div class="table_price_tag clearfix"> <span class="price"> <span class="sign">$</span> <span class="currency">49</span> <span class="cent">.99</span> <span class="month">/Month</span> </span> </div> <!--//PRICE END--> </div> <!--//HEAD PRICE DETAIL END--> <!--FEATURE LIST START--> <div class="generic_feature_list"> <ul> <li><span>Unlimited</span> Website</li> <li><span>24x7</span> Support</li> <li><span>15GB </span>Bandwidth</li> <li><span>50GB</span> Cloud storage</li> <li><span>1 month</span> playback</li> </ul> </div> <!--//FEATURE LIST END--> <!--BUTTON START--> <div class="clearfix"> <a href="" class="price-plan btn btn-purchase activeBtn">Buy now</a> </div> <!--//BUTTON END--> </div> <!--//PRICE CONTENT END--> </div> <div class="col-md-4"> <!--PRICE CONTENT START--> <div class="priceContent clearfix"> <!--HEAD PRICE DETAIL START--> <div class="table_head_price clearfix"> <!--HEAD CONTENT START--> <div class="generic_head_content clearfix"> <!--HEAD START--> <div class="head_bg"></div> <div class="head"> <span>Premium</span> <small>Plan</small> </div> <!--//HEAD END--> </div> <!--//HEAD CONTENT END--> <!--PRICE START--> <div class="table_price_tag clearfix"> <span class="price"> <span class="sign">$</span> <span class="currency">69</span> <span class="cent">.99</span> <span class="month">/Month</span> </span> </div> <!--//PRICE END--> </div> <!--//HEAD PRICE DETAIL END--> <!--FEATURE LIST START--> <div class="generic_feature_list"> <ul> <li><span>100GB</span> Cloud storage</li> <li><span>6 Months</span> playback</li> <li><span>Unlimited</span> Website</li> <li><span>24x7</span> Support</li> <li><span>15GB </span>Bandwidth</li> </ul> </div> <!--//FEATURE LIST END--> <!--BUTTON START--> <div class="clearfix"> <a href="" class="price-plan btn btn-purchase">Buy now</a> </div> <!--//BUTTON END--> </div> <!--//PRICE CONTENT END--> </div> </div> <!--//BLOCK ROW END--> </div> </section> </div>
@import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700italic,700,900italic,900); @import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900); @import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900); /*price -2 */ a.price-plan.btn.btn-purchase { background: #dcdcdc; padding: 10px 45px; margin: 30px 0px 0px 0px; font-size: 17px; color: #666; font-weight: 600; transition: all .5s ease-in-out 0s; -moz-transition: all .5s ease-in-out 0s; -ms-transition: all .5s ease-in-out 0s; -o-transition: all .5s ease-in-out 0s; -webkit-transition: all .5s ease-in-out 0s; } #priceTable{ background: url(bg.jpg); padding: 80px 0px; } #priceTable .priceContent{ background-color: #fff; padding-bottom: 50px; } #priceTable .priceContent .table_head_price{ background-color: #f6f6f6; } #priceTable .priceContent .table_head_price .generic_head_content .head_bg{ border-color: #e4e4e4 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #e4e4e4; } #priceTable .priceContent .table_head_price .generic_head_content .head span{ color: #525252; } #priceTable .priceContent .table_head_price .table_price_tag .price .sign{ color: #414141; } #priceTable .priceContent .table_head_price .table_price_tag .price .currency{ color: #414141; } #priceTable .priceContent .table_head_price .table_price_tag .price .cent{ color: #414141; } #priceTable .priceContent .table_head_price .table_price_tag .month{ color: #414141; } .generic_feature_list { padding: 0px 20px; } #priceTable .priceContent .generic_feature_list ul li{ color: #737373; border-bottom: solid 1px #E4E4E4; } #priceTable .priceContent .generic_feature_list ul li span{ color: #414141; } #priceTable .priceContent .generic_price_btn a{ border: 1px solid #2ECC71; color: #2ECC71; } #priceTable .priceContent.active .table_head_price .generic_head_content .head_bg, #priceTable .priceContent:hover .table_head_price .generic_head_content .head_bg{ border-color:#03A9F4 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #2196F3; color: #fff; } #priceTable .priceContent:hover .table_head_price .generic_head_content .head span, #priceTable .priceContent.active .table_head_price .generic_head_content .head span, #priceTable .priceContent.active .table_head_price .generic_head_content .head small { color: #fff; transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; } #priceTable .priceContent:hover .generic_price_btn a, #priceTable .priceContent.active .generic_price_btn a{ background-color: #2ECC71; color: #fff; } #priceTable{ font-family: 'Raleway', sans-serif; } .row .table{ padding: 28px 0; } /*PRICE BODY CODE START*/ #priceTable .priceContent{ overflow: hidden; position: relative; text-align: center; } #priceTable .priceContent .table_head_price { margin: 0 0 20px 0; } #priceTable .priceContent .table_head_price .generic_head_content{ margin: 0 0 50px 0; } #priceTable .priceContent .table_head_price .generic_head_content .head_bg{ border-style: solid; border-width: 90px 1411px 23px 399px; position: absolute; } #priceTable .priceContent .table_head_price .generic_head_content .head{ padding-top: 25px; position: relative; z-index: 1; } #priceTable .priceContent .table_head_price .generic_head_content .head span{ font-family: "Raleway",sans-serif; font-size: 28px; font-weight: 600; letter-spacing: 2px; margin: 0; padding: 0; text-transform: uppercase; } #priceTable .priceContent .table_head_price .table_price_tag{ padding: 0 0 20px; } #priceTable .priceContent .table_head_price .table_price_tag .price{ display: block; } #priceTable .priceContent .table_head_price .table_price_tag .price .sign{ display: inline-block; font-family: "Lato",sans-serif; font-size: 28px; font-weight: 400; vertical-align: middle; } #priceTable .priceContent .table_head_price .table_price_tag .price .currency{ font-family: "Lato",sans-serif; font-size: 60px; font-weight: 600; letter-spacing: -2px; line-height: 60px; padding: 0; vertical-align: middle; } #priceTable .priceContent .table_head_price .table_price_tag .price .cent{ display: inline-block; font-family: "Lato",sans-serif; font-size: 24px; font-weight: 400; vertical-align: bottom; } #priceTable .priceContent .table_head_price .table_price_tag .month{ font-family: "Lato",sans-serif; font-size: 18px; font-weight: 400; letter-spacing: 3px; vertical-align: bottom; } #priceTable .priceContent .generic_feature_list ul{ list-style: none; padding: 0; margin: 0; } #priceTable .priceContent .generic_feature_list ul li{ font-family: "Lato",sans-serif; font-size: 18px; padding: 15px 0; transition: all 0.3s ease-in-out 0s; } #priceTable .priceContent .generic_feature_list ul li:hover{ transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; } #priceTable .priceContent .generic_feature_list ul li .fa{ padding: 0 10px; } #priceTable .priceContent .generic_price_btn{ margin: 20px 0 32px; } #priceTable .priceContent .generic_price_btn a{ border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; -webkit-border-radius: 50px; display: inline-block; font-family: "Lato",sans-serif; font-size: 18px; outline: medium none; padding: 12px 30px; text-decoration: none; text-transform: uppercase; } @media (max-width: 320px) { } @media (max-width: 767px) { #priceTable .priceContent{ margin-bottom:75px; } } @media (min-width: 768px) and (max-width: 991px) { #priceTable .col-md-3{ float:left; width:50%; } #priceTable .col-md-4{ float:left; width:50%; } #priceTable .priceContent{ margin-bottom:75px; } } @media (min-width: 992px) and (max-width: 1199px) { } @media (min-width: 1200px) { } #priceTable_home{ font-family: 'Raleway', sans-serif; } #priceTable_home ul{ margin: 0 auto; padding: 0; list-style: none; display: table; } #priceTable_home li{ float: left; } #priceTable_home li + li{ margin-left: 10px; padding-bottom: 10px; } #priceTable_home li a{ display: block; width: 50px; height: 50px; font-size: 0px; } #priceTable_home .divider{ border-bottom: 1px solid #ddd; margin-bottom: 20px; padding: 20px; } #priceTable_home .divider span{ width: 100%; display: table; height: 2px; background: #ddd; margin: 50px auto; line-height: 2px; } #priceTable_home .itemname{ text-align: center; font-size: 50px ; padding: 50px 0 20px ; border-bottom: 1px solid #ddd; margin-bottom: 40px; text-decoration: none; font-weight: 300; } #priceTable_home .itemnametext{ text-align: center; font-size: 20px; padding-top: 5px; text-transform: uppercase; display: inline-block; } #priceTable_home .footer{ padding:40px 0; } .price-heading{ text-align: center; } .price-heading h1{ color: #666; margin: 0; padding: 0 0 50px 0; } .demo-button { background-color: #333333; color: #ffffff; display: table; font-size: 20px; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 50px; outline-color: -moz-use-text-color; outline-style: none; outline-width: medium ; padding: 10px; text-align: center; text-transform: uppercase; } .bottom_btn{ background-color: #333333; color: #ffffff; display: table; font-size: 28px; margin: 60px auto 20px; padding: 10px 25px; text-align: center; text-transform: uppercase; } .demo-button:hover{ background-color: #666; color: #FFF; text-decoration:none; } .bottom_btn:hover{ background-color: #666; color: #FFF; text-decoration:none; } .activeBtn, .priceContent:hover a.price-plan.btn.btn-purchase { background: #2196F3 !important; color: #fff !important; } .head small { display: block; font-size: 18px; text-transform: uppercase; } #priceTable .priceContent {transition: all .5s ease-in-out 0s; -webkit-transition: all .5s ease-in-out 0s;} #priceTable .priceContent:hover { -webkit-transform: scale(1.08); transform: scale(1.08); } #priceTable .priceContent:hover .head small { color: #fff; } .priceContent.clearfix.two.active { -webkit-transform: scale(1.08); transform: scale(1.08); }
$(document).ready(function(){ $('.price-Table').hover(function(){ $('#priceTable .priceContent.active').removeClass('active'); $(this).removeClass('active'); $('a.price-plan.btn.btn-purchase.activeBtn').removeClass('activeBtn'); }); $('.price-Table').mouseleave(function(){ $('.price-Table .priceContent.two').addClass('active'); $(this).addClass('active'); $('.two a.price-plan.btn.btn-purchase').addClass('activeBtn'); }); })