<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-3"> <!-- Price Table Item --> <div class="price-table text-center"> <div class="price-table-heading"> <p>Match2Lists</p> <p>BASIC PLAN</p> </div> <div class="price-table-body"> <p class="value">$95<small>/month</small></p> <p><small>Billed Annually</small></p> </div> <ul class="list-group"> <p class="list-group-item-w">1 User</p> <p class="list-group-item-g">Unlimited Projects</p> <p class="list-group-item-w">25K Records Max List Size</p> <p class="list-group-item-g">Match, Merge, De-Dupe</p> <p class="list-group-item-w">-</p> <p class="list-group-item-g">-</p> <p class="list-group-item-w">-</p> <p class="list-group-item-g">-</p> <p class="list-group-item-w"><small>Active Lists: 10</small></p> <p class="list-group-item-g"><small>Active Projects: 10</small></p> <p class="list-group-item-w"><small>List/Project Expiry: 30 Days</small></p> <p class="list-group-item-g">-</p> </ul> <div class="price-table-footer"> <a class="btn btn-lg btn-success" href=/features/pricing/limited-small-data-plan>Get Started</a> </div> </div> <!-- END Price Table Item --> <!-- START: Will be visible in tablet and mobile devices to make gap between tow price items --> <div class="col-xs-12 col-sm-12 margin-bottom-20"></div> <!-- END: Will be visible in tablet and mobile devices to make gap between tow price items --> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <!-- Price Table Item --> <div class="price-table text-center"> <div class="price-table-heading"> <p>Match2List</p> <p>STANDARD PLAN</p> </div> <div class="price-table-body"> <p class="value">$245<small>/month</small></p> <p><small>Billed Annually</small></p> </div> <ul class="list-group"> <p class="list-group-item-w">1 User</p> <p class="list-group-item-g">Unlimited Projects</p> <p class="list-group-item-w">100K Records Max List Size</p> <p class="list-group-item-g">Match, Merge, De-Dupe</p> <p class="list-group-item-w">-</p> <p class="list-group-item-g">-</p> <p class="list-group-item-w">-</p> <p class="list-group-item-g">-</p> <p class="list-group-item-w"><small>Active Lists: 20</small></p> <p class="list-group-item-g"><small>Active Projects: 20</small></p> <p class="list-group-item-w"><small>List/Project Expiry: Unlimited</small></p> <p class="list-group-item-g">-</p> </ul> <div class="price-table-footer"> <a class="btn btn-lg btn-success" href="/features/pricing/unlimited-small-data">Get Started</a> </div> </div> <!-- END Price Table Item --> <!-- START: Will be visible in tablet and mobile devices to make gap between tow price items --> <div class="col-xs-12 col-sm-12 margin-bottom-20"></div> <!-- END: Will be visible in tablet and mobile devices to make gap between tow price items --> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <!-- Price Table Item --> <div class="price-table text-center"> <div class="price-table-heading"> <p>Match2DnB (inc M2L)</p> <p>CUSTOM D&B DATA PLAN</p> </div> <div class="price-table-body"> <p class="value"><small>from </small>$795<small>/month</small></p> <p><small>Billed Annually</small></p> </div> <ul class="list-group"> <p class="list-group-item-w">1 User</p> <p class="list-group-item-g">Unlimited projects</p> <p class="list-group-item-w">100K Records Max Data Size</p> <p class="list-group-item-g">Match, Merge, De-Dupe</p> <p class="list-group-item-w">1 Matching Template</p> <p class="list-group-item-g">-</p> <p class="list-group-item-w"><strong>Match2DnB</strong></p> <p class="list-group-item-g"><strong>Custom D&B Data Credits</strong></p> <p class="list-group-item-w"><small>Active Lists: 40</small></p> <p class="list-group-item-g"><small>Active Projects: 40</small></p> <p class="list-group-item-w"><small>List/Project Expiry: Unlimited</small></p> <p class="list-group-item-g">-</p> </ul> <div class="price-table-footer"> <a class="btn btn-lg btn-success" href="/features/pricing/unlimited-big-data-plan">Get Started</a> </div> </div> <!-- END Price Table Item --> <!-- START: Will be visible in tablet and mobile devices to make gap between tow price items --> <div class="col-xs-12 col-sm-12 margin-bottom-20"></div> <!-- END: Will be visible in tablet and mobile devices to make gap between tow price items --> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <!-- Price Table Item --> <div class="price-table text-center"> <div class="price-table-heading"> <p>Enterprise</p> <p>BESPOKE SOLUTION</p> </div> <div class="price-table-body"> <p class="value">$Custom</p> <p><small>Annual or Multi Year</small></p> </div> <ul class="list-group"> <p class="list-group-item-w">Multiple Users</p> <p class="list-group-item-g">Unlimited projects</p> <p class="list-group-item-w">Millions of Records</p> <p class="list-group-item-g">Match, Merge, De-Dupe</p> <p class="list-group-item-w">Multiple Matching Templates</p> <p class="list-group-item-g">Workflow Automation</p> <p class="list-group-item-w"><strong>Match2DnB</strong></p> <p class="list-group-item-g"><strong>Custom D&B Data Credits</strong></p> <p class="list-group-item-w"><small>Active Lists: Custom</small></p> <p class="list-group-item-g"><small>Active Projects: Custom</small></p> <p class="list-group-item-w"><small>List/Project Expiry: Unlimited</small></p> <p class="list-group-item-g">Managed Services</p> </ul> <div class="price-table-footer"> <a class="btn btn-lg btn-success" href="/features/pricing/custom-solutions">Contact Us</a> </div> </div> <!-- END Price Table Item --> <!-- START: Will be visible in tablet and mobile devices to make gap between tow price items --> <div class="col-xs-12 col-sm-12 margin-bottom-20"></div> <!-- END: Will be visible in tablet and mobile devices to make gap between tow price items --> </div> </div> </div>

body { font-family: 'Lato', sans-serif; font-size: 16px; line-height: 28px; } .main-title { font-weight: 700; text-align: center; margin: 50px 0; } .margin-bottom-20 { margin-bottom: 20px; } .margin-bottom-50 { margin-bottom: 50px; } /* ================================= Price Table ================================= */ .price-table { background: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: 7px solid #eeeeee; -moz-transition: all .3s ease; -o-transition: all .3s ease; -webkit-transition: all .3s ease; } .price-table:hover { background: rgb(0,0,0, .03); border-color: #77b258; } .price-table .price-table-heading { color: #333333; background: #f9f9f9; font-size: 14px; padding: 5px 0 5px; margin: 0; } .price-table .price-table-heading .title { color: #333333; font-weight: 200; letter-spacing: 1px; } .price-table > .price-table-body { color: #FFFFFF; background: #77b258; padding: 5px 0 5px; -moz-transition: all .3s ease; -o-transition: all .3s ease; -webkit-transition: all .3s ease; } .price-table > .price-table-body .value { font-size: 28px; font-weight: 300; color: #FFFFFF; padding: 0; } .price-table > .price-table-body .value small { font-size: 16px; } .price-table > .list-group { color: #333; font-weight: 400; margin-bottom: 0; } .price-table > .list-group .list-group-item-w { color: #333; font-weight: 400; font-size: 14px; margin: 0px 0px 0px -15px; padding: 5px 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: 0; } .price-table > .list-group .list-group-item-g { color: #333; font-weight: 400; font-size: 14px; margin: 0px 0px 0px -15px; background: #f9f9f9; padding: 5px 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: 0; } .price-table > .list-group .list-group-item { color: #333; font-weight: 400; font-size: 14px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; margin: 0px 0px 0px -15px; } .price-table .btn { -webkit-border-radius: 3px; -moz-border-radius: 3px; background: #77b258; border-radius: 0px; font-weight: 700; } .price-table-footer { background: #eeeeee; padding: 15px 0; }