<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Prcing plan starts here --> <section class="our-plans"> <div class="container"> <div class="row text-center"> <div class="col-md-12"> <h2 class="section-title">Our Pricing and Plan</h2> </div> </div> <!-- PLANS STARTS --> <div class="row mrt-40"> <div class="price-plan"> <div class="plan-details"> <h2>Silver</h2> <h3> ^$ <strong>10,000</strong> _/PA </h3> </div> <div class="plan-features"> <ul> <li>Bronze-Leads</li> <li>Client Access</li> <li>Social Media Access</li> <li>Newsletter Subscriptions</li> <li>Tech News</li> <li>Partner Portal</li> </ul> </div> <div class="accept-plan"> <a target="_self" href="#" >Buy Now</a> </div> </div> <!--4th ends--> <div class="price-plan"> <div class="plan-details"> <h2>Gold</h2> <h3> ^$ <strong>20,000</strong> _/PA </h3> </div> <div class="plan-features"> <ul> <li>Partner Access</li> <li>Exclusive Research and Market Intelligence</li> <li>Peer2Peer Networking</li> <li>Dedicated Account Manager</li> <li>Regional Signature events</li> </ul> </div> <div class="accept-plan"> <a target="_self" href="#" >Buy Now</a> </div> </div> <!--2nd ends--> <div class="price-plan"> <div class="plan-details"> <h2>Platinum</h2> <h3> ^$ <strong>50,000</strong> _/PA </h3> </div> <div class="plan-features"> <ul> <li>Dedicated PDO</li> <li>Access to Gold Partners</li> <li>Invitations to Signature Regional Events</li> <li>Access to Tech Trends</li> <li>Access to Hotdesks of Regional TechXource offices</li> </ul> </div> <div class="accept-plan"> <a target="_self" href="#" >Buy Now</a> </div> </div> <!--3rd ends--> <div class="price-plan"> <div class="plan-details"> <h2>Reserve</h2> <h3> ^$ <strong>1,50,000</strong> _/PA </h3> </div> <div class="plan-features"> <ul> <li>Dedicated Team</li> <li>Campus Tours</li> <li>Access to Partner Leadership</li> <li>Invitation to Global Events</li> <li>RFP and Procurement Advisory</li> <li>Virtual Offices, Custom Sourcing, OneonOne Peer Networking</li> </ul> </div> <div class="accept-plan"> <a target="_self" href="#" >Buy Now</a> </div> </div> <!--4th ends--> </div> <!-- Plans ends --> </div> </section> <!-- pricing plans ends here -->

.our-plans{ width:100%; } .our-plans .price-plan{ width:100%; padding: 20px; background: #fff; border: 1px solid #eaeaea; margin-bottom: 20px; } .our-plans .price-plan:last-child{ margin-bottom: 0; } .our-plans .price-plan .plan-details, .our-plans .price-plan .plan-features, .our-plans .price-plan .accept-plan{ float:left; padding: 0 10px; } .our-plans .price-plan .plan-details{ width: 25%; } .our-plans .price-plan .plan-features{ width:55%; } .our-plans .price-plan .accept-plan{ width:20%; } .our-plans .price-plan .plan-details h2{ display: block; font-size: 24px; line-height: 30px; font-weight: 700; padding: 20px 0; color: #252a37; margin-bottom: 0; } .our-plans .price-plan .plan-details h3{ font-size: 34px; padding: 0 0; position: relative; color: #252a37; margin: 0 0 25px; } .our-plans .price-plan .plan-details h3 sub{ font-size: 20px; left: -0.6em; position: relative; } .our-plans .price-plan .plan-details h3 sup{ top: -0.9em; font-size: 50%; left: -0.01em; font-weight: 700; } /* plan features */ .our-plans .price-plan .plan-features ul{ list-style: none; } .our-plans .price-plan .plan-features ul li{ position: relative; padding-left: 30px; margin-bottom: 4px; } .our-plans .price-plan .plan-features ul li:before{ content: "\f00c"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; /*--adjust as necessary--*/ color: #2154cf; font-size: 18px; padding-right: 0.5em; position: absolute; top: 0px; left: 0; } /* plan details ends here */ .our-plans .price-plan .accept-plan{ text-align: center; } .our-plans .price-plan .accept-plan a{ text-align: center; padding: 5px 20px; background-color: #2154cf; color: #fff; border-radius: 27px; margin-top: 20%; display: inline-block; } .our-plans .price-plan .accept-plan a:hover{ background:#272d33; }