Price table
<div class="row"> <!-- START SINGLE PRICING DESIGN AREA --> <div class="col-md-4 col-sm-12"> <div class="pricing-table text-center " > <h3 class="price-title">Basic</h3> <div class="price"> <p><span class="dollor">$</span>29<span class="month">/monthly</span></p> </div> <p>1 Interior Designer</p> <p>1 Construction Worker</p> <p>1 Repairing Expert</p> <p>1 Supervisor</p> <a href="#" class="read-more">BUY NOW</a> </div> </div> <!-- / END SINGLE PRICING DESIGN AREA --> <!-- START SINGLE PRICING DESIGN AREA --> <div class="col-md-4 col-sm-12"> <div class="pricing-table active text-center" > <h3 class="price-title">Standard</h3> <div class="price"> <p><span class="dollor">$</span>49<span class="month">/monthly</span></p> </div> <p>3 Interior Designers</p> <p>3 Construction Workers</p> <p>3 Repairing Experts</p> <p>3 Supervisors</p> <a href="#" class="read-more active">BUY NOW</a> </div> </div> <!-- / END SINGLE PRICING DESIGN AREA --> <!-- START SINGLE PRICING DESIGN AREA --> <div class="col-md-4 col-sm-12"> <div class="pricing-table text-center " > <h3 class="price-title">Premium</h3> <div class="price"> <p><span class="dollor">$</span>99<span class="month">/monthly</span></p> </div> <p>5 Interior Designers</p> <p>5 Construction Workers</p> <p>5 Repairing Experts</p> <p>5 Supervisors</p> <a href="#" class="read-more">BUY NOW</a> </div> </div> <!-- / END SINGLE PRICING DESIGN AREA --> </div>
.pricing-area {} .pricing-table { background: #fff; box-shadow: 0px 0px 25px 0px #f5f5f5; padding: 30px 40px; color: #303030; position: relative; border-radius: 10px; } .price-title { border-bottom: 1px solid #d9d9d9; padding-bottom: 5px; text-transform: uppercase; } .price p { font-weight: 900; font-size: 62px; display: inline-table; margin: 30px 0 20px 0; } .price span.dollor { font-size: 20px; vertical-align: middle; } .price span { display: table-cell; } .price span.month { font-size: 15px; font-weight: normal; } .pricing-table:hover, .pricing-area .active { background-color: #497cbf; color:#fff; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; -ms-transform: scale(1.05, 1.05); /* IE 9 */ -webkit-transform: scale(1.05, 1.05); /* Safari */ transform: scale(1.05, 1.05); } .pricing-table:hover a.read-more, .pricing-area .active a.read-more { background: transparent; border: 1px solid #fff; color:#fff; } a.read-more { margin-top: 20px; display: inline-block; color: #fff; background: #497cbf; padding: 10px 25px; border: 1px solid #497cbf; border-radius: 100px; text-transform: uppercase; font-size: 12px; } a.white-read-more { margin-top: 20px; display: inline-block; color: #fff; background: #497cbf; padding: 10px 25px; border: 1px solid #497cbf; border-radius: 100px; text-transform: uppercase; font-size: 12px; } a.read-more:hover { color: #000; -webkit-transition: .3s; transition: .3s; border: 1px solid #497cbf; background: transparent; } a.white-read-more:hover { background: transparent; color: #fff; -webkit-transition: .3s; transition: .3s; } .text-center { text-align: center;}