<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <div id="PricingTab"> <div class="container"> <h2>Our Sample Pricing</h2> <hr class="White-Yellow"> <div class="row"> <table class="table table-condensed table-hover"> <thead> <tr> <th class="tabco1 ">Features</th> <th class="tabco2" > Starter $$$ / 100 Words</th> <th class="tabco3">Converter $$$ / 100 Words</th> <th class="tabco4" >Maximizer $$$ / 100 Words</th> </tr> </thead> <tbody> <tr> <td class="tabco1" >100% Uniqueness</td> <td class="tabco2" ><i class="fa fa-check rightSign" aria-hidden="true"></i></td> <td class="tabco3"><i class="fa fa-check rightSign" aria-hidden="true"></i></td> <td class="tabco4"><i class="fa fa-check rightSign" aria-hidden="true"></i></td> </tr> <tr> <td class="tabco1" >Proof Checking</td> <td class="tabco2" ><i class="fa fa-times crossSign" aria-hidden="true"></i></td> <td class="tabco3" ><i class="fa fa-check rightSign" aria-hidden="true"></i></td> <td class="tabco4" ><i class="fa fa-check rightSign" aria-hidden="true"></i></td> </tr> <tr> <td class="tabco1" >Keyword Optimization</td> <td class="tabco2" ><i class="fa fa-times crossSign" aria-hidden="true"></i></td> <td class="tabco3" ><i class="fa fa-check rightSign" aria-hidden="true"></i></td> <td class="tabco4" ><i class="fa fa-check rightSign" aria-hidden="true"></i></td> </tr> <tr> <td class="tabco1" >LSI Keyword Optimization</td> <td class="tabco2" ><i class="fa fa-times crossSign" aria-hidden="true"></i></td> <td class="tabco3" ><i class="fa fa-check rightSign" aria-hidden="true"></i></td> <td class="tabco4" ><i class="fa fa-check rightSign" aria-hidden="true"></i></td> </tr> <tr> <td class="tabco1" >Grammarly Premium Checking</td> <td class="tabco2" ><i class="fa fa-times crossSign" aria-hidden="true"></i></td> <td class="tabco3" ><i class="fa fa-check rightSign" aria-hidden="true"></i></td> <td class="tabco4" ><i class="fa fa-check rightSign" aria-hidden="true"></i></td> </tr> <tr> <td class="tabco1"> Copyscape Premium Checking</td> <td class="tabco2" ><i class="fa fa-times crossSign" aria-hidden="true"></i></td> <td class="tabco3" ><i class="fa fa-check rightSign" aria-hidden="true"></i></td> <td class="tabco4" ><i class="fa fa-check rightSign" aria-hidden="true"></i></td> </tr> <tr> <td class="tabco1" >On-Page Optimization</td> <td class="tabco2" ><i class="fa fa-times crossSign" aria-hidden="true"></i></td> <td class="tabco3" ><i class="fa fa-times crossSign" aria-hidden="true"></i></td> <td class="tabco4" ><i class="fa fa-check rightSign" aria-hidden="true"></i></td> </tr> <tr> <td class="tabco1" >Bonus Content</td> <td class="tabco2" ><i class="fa fa-times crossSign" aria-hidden="true"></i></td> <td class="tabco3" ><i class="fa fa-times crossSign" aria-hidden="true"></i></td> <td class="tabco4" >500 Word Content Free With 10,000 Words</td> </tr> <tr> <td class="tabco1" >Modification After Submission</td> <td class="tabco2" ><i class="fa fa-times crossSign" aria-hidden="true"></i></td> <td class="tabco3" >1 Times</td> <td class="tabco4" >2 Times</td> </tr> <tr> <td class="tabco1" >Delivery Time</td> <td class="tabco2" >3-4 Days</i></td> <td class="tabco3" >2-3 Days</td> <td class="tabco4" >1-2 Days</i></td> </tr> <tr> <td class="tabco1" >WordPress Posting</td> <td class="tabco2" ><i class="fa fa-times crossSign" aria-hidden="true"></i></td> <td class="tabco3" ><i class="fa fa-times crossSign" aria-hidden="true"></i></td> <td class="tabco4" ><i class="fa fa-times crossSign" aria-hidden="true"></i></td> </tr> </tbody> </table> </div><!--row--> </div><!--container--> </div><!--PricingTab-->

#PricingTab { background-image: url('http://techprocircle.com/wp-content/uploads/2016/08/pricing_bg.jpg'); background-size: 100% 100%; background-attachment: fixed; padding: 100px 0; } #PricingTab h2{ font-family: 'Lato', sans-serif; font-weight: 700; font-size: 35px; color: #fff; text-transform: uppercase; text-align: center; } #PricingTab table{ max-width:800px; margin: 0 auto; box-shadow: 1px 1px 149px 0px rgb(24, 25, 25); } .tabco1 { background: #fff; width: 40%; padding: 10px !important; } th.tabco1 { background: #fff; padding: 32px 10px !important; font-size: 18px; text-transform: uppercase; color: #000; } .tabco2 { background: #009688; text-align: center; color: #fff; } th.tabco2 { background: #00C853; padding: 20px 5px !important; font-size: 18px; text-transform: uppercase; } .tabco3 { background: #03A9F4; text-align: center; color: #fff; } th.tabco3 { background: #039BE5; padding: 20px 10px !important; font-size: 18px; text-transform: uppercase; } .tabco4 { background: #EF5350; text-align: center; color: #fff; } th.tabco4 { background: #E53935; padding: 20px 10px !important; font-size: 18px; text-transform: uppercase; } .rightSign { color: #1ab921; background: #fff; border-radius: 45px; padding: 5px; border: 2px solid; box-shadow: 0px 0px 11px -5px #000; } .crossSign { color: #de2315; background: #fff; border-radius: 45px; padding: 5px 7px; border: 2px solid; box-shadow: 0px 0px 11px -5px #000; } .White-Yellow { border-top: 0; border-left: 75px solid #fff; border-right: 75px solid #FEF200; height: 5px; width: 0px; }