CSS - divがメインコンテナから外に出る

Question

私は、ブートストラップを使用して価格設定表を設計しました。 1つの問題を除いてすべてが正常に動作しています。つまり、価格表は".pricing-table-wrp"コンテナには表示されません。それはコンテナから外に現れる。固定幅を".flipcontainer"コンテナのみにすると動作しますが、携帯電話の応答性の問題に直面しています&タブ。したがって、私は、要素に固定された高さを与えずに価格設定テーブルを価格表のwrpコンテナに配置したいと考えています。私を助けてください。前もって感謝します。フルスクリーンのフィドルを見てください。さらなる詳細：https://html.paperindex.com/boost-your-sales.html

$(document).ready(function() { 
 
    $(".flip").on("click", function() { 
 
    $(this).addClass("btn-active"); 
 
    $(".flipreverse").removeClass("btn-active"); 
 
    $('.card').removeClass('flipped'); 
 
    }) 
 
    $(".flipreverse").on("click", function() { 
 
    $(this).addClass("btn-active"); 
 
    $(".flip").removeClass("btn-active"); 
 
    $('.card').addClass('flipped'); 
 
    }) 
 
})

/*boost-your-sales-new*/ 
 

 
.bst-ur-sls-tgle-btn-wrp button { 
 
    width: 200px; 
 
    border: none; 
 
    outline: none; 
 
    font-size: 20px; 
 
} 
 

 
.bst-ur-sls-tgle-btn-wrp button:hover, 
 
.bst-ur-sls-tgle-btn-wrp button { 
 
    /*background: #fff;*/ 
 
    box-shadow: none; 
 
    outline: none; 
 
    background-color: #fff; 
 
    border-radius: 25px; 
 
} 
 

 
.bst-yr-sls-nav { 
 
    border: 2px solid #1e6c97; 
 
    border-radius: 50px; 
 
    max-width: 448px; 
 
    background: #fff; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 30px; 
 
} 
 

 
.pricing-table-wrp { 
 
    background: #F1F7FB; 
 
    padding: 60px 0; 
 
} 
 

 
.btn-active { 
 
    background: #ffcc29 !important; 
 
    transition: all 1s ease out; 
 
    border-radius: 25px; 
 
} 
 

 
.bst-ur-sls-tgle-btn-wrp button:first-child { 
 
    margin-left: 10px; 
 
} 
 

 
.bst-ur-sls-tgle-btn-wrp .navbar-btn:active, 
 
.bst-ur-sls-tgle-btn-wrp .navbar-btn:focus { 
 
    border: none !important; 
 
    outline: none !important; 
 
    box-shadow: none; 
 
} 
 

 
.flipcontainer { 
 
    width: 100%; 
 
    position: relative; 
 
    -webkit-perspective: 800px; 
 
    -moz-perspective: 800px; 
 
    -o-perspective: 800px; 
 
    perspective: 800px; 
 
} 
 

 
.card { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    -webkit-transition: -webkit-transform 1s; 
 
    -moz-transition: -moz-transform 1s; 
 
    -o-transition: -o-transform 1s; 
 
    transition: transform 1s; 
 
    -webkit-transform-style: preserve-3d; 
 
    -moz-transform-style: preserve-3d; 
 
    -o-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    -webkit-transform-origin: 50% 50%; 
 
} 
 

 
.card>div { 
 
    display: block; 
 
    width: 100%; 
 
    position: absolute; 
 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    -o-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
} 
 

 
.frnt-img i, 
 
.bck-img i { 
 
    font-size: 80px; 
 
    color: #ffcc29; 
 
} 
 

 
.pricing-tbl>tbody>tr>td { 
 
    padding-top: 17px; 
 
    padding-bottom: 17px; 
 
} 
 

 
.pricing-tbl>tbody>tr>td:first-child { 
 
    text-align: left; 
 
    padding-left: 30px; 
 
} 
 

 
.pricing-tbl>tbody>tr>td:last-child a { 
 
    color: #fff; 
 
} 
 

 
.pricing-tbl>tbody>tr>td:last-child { 
 
    padding-right: 30px; 
 
    text-align: right; 
 
} 
 

 
.pricing-tbl>tbody>tr:last-child>td { 
 
    border-bottom: 1px solid #ccc; 
 
} 
 

 
.subsribe-btn-wrp { 
 
    text-align: center; 
 
    margin-top: 50px; 
 
} 
 

 
.frnt-img, 
 
.bck-img { 
 
    padding: 50px; 
 
    padding-bottom: 4px; 
 
} 
 

 
.card .front { 
 
    background: #fff; 
 
    border-radius: 10px; 
 
    color: #555; 
 
} 
 

 
.price i { 
 
    font-size: 16px; 
 
    vertical-align: super; 
 
} 
 

 
.price { 
 
    word-spacing: -6px; 
 
    margin-bottom: 0; 
 
} 
 

 
.price sup { 
 
    font-size: 14px; 
 
    vertical-align: super; 
 
} 
 

 
.card .back { 
 
    background: #fff; 
 
    -webkit-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
    border-radius: 10px; 
 
    color: #555; 
 
} 
 

 
.card.flipped { 
 
    -webkit-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
} 
 

 
.flip-cards { 
 
    margin-top: 40px; 
 
} 
 

 

 
/*boost-your-sales-new-ends*/ 
 

 
.boost-your-sales-bnr-content-wrap { 
 
    color: #fff; 
 
    min-height: 24.29rem; 
 
    position: relative; 
 
    padding: 1.429rem; 
 
} 
 

 
.boost-your-sales-bnr-content-wrap>h1, 
 
.boost-your-sales-bnr-content-wrap>h2 { 
 
    margin: 0; 
 
    color: #fff; 
 
    font-size: 2.5rem; 
 
    text-align: center; 
 
    margin-top: 2.286rem; 
 
    margin-bottom: 0; 
 
} 
 

 
.boost-your-sales-bnr-content-wrap>h2 { 
 
    color: #ffcc29; 
 
} 
 

 
.boost-your-sales-bnr-content-wrap>h3 { 
 
    text-align: center; 
 
    font-size: 2.286rem; 
 
    font-family: "Montserrat"; 
 
    font-weight: normal; 
 
} 
 

 
.budiness-promotion-title>h2 { 
 
    text-align: center; 
 
    background: #1e6c97; 
 
    margin: 0; 
 
    padding: 1.429rem; 
 
    font-size: 2.286rem; 
 
    color: #fff; 
 
} 
 

 
.budiness-promotion-subtitle>h2 { 
 
    text-align: center; 
 
    font-size: 2rem; 
 
    margin-top: 2.5rem; 
 
    margin-left: 1.07rem; 
 
    margin-right: 1.07rem; 
 
} 
 

 
.budiness-promotion-wrap { 
 
    border: 1px solid #B8C0C5; 
 
    border-top: none; 
 
} 
 

 
.membership-imgs { 
 
    padding: 2.143rem; 
 
    margin-top: 2.143rem; 
 
} 
 

 
.budiness-promotion-wrap+.container-fluid h4 { 
 
    text-align: center; 
 
    margin-top: 2.143rem; 
 
    margin-bottom: 2.143rem; 
 
    font-size: 1.714rem; 
 
    color: #505253; 
 
} 
 

 
.plan-for-your-business { 
 
    background: #F5FAFC; 
 
} 
 

 
.plan-for-your-business a { 
 
    white-space: normal !important; 
 
} 
 

 
.plan-for-your-business h2 { 
 
    font-size: 2rem; 
 
    color: #505253; 
 
    margin-bottom: 4.286rem; 
 
    margin-top: 2.143rem; 
 
} 
 

 
.plan-for-ur-business-title { 
 
    background: #E0F1FA; 
 
    padding: 1.071rem; 
 
    min-height: 4.714rem; 
 
} 
 

 
.plan-for-ur-business-title>h4 { 
 
    text-align: center; 
 
    font-size: 1.214rem; 
 
    margin: 0; 
 
} 
 

 
.plan-for-ur-business-title>p { 
 
    text-align: center; 
 
    margin-bottom: 0; 
 
} 
 

 
.plan-for-ur-business-title>h3 { 
 
    margin: 0; 
 
    padding: 1.07rem; 
 
    font-size: 1.429rem; 
 
    color: #505253; 
 
} 
 

 
.plan-for-ur-business-subhead { 
 
    padding: 1.07rem; 
 
    border-left: 4px solid #1e6c97; 
 
} 
 

 
.plan-for-your-business-content { 
 
    background: #fff; 
 
} 
 

 
.plan-for-your-business-content p { 
 
    margin: 0 1.07rem; 
 
    padding: 1.714rem 0; 
 
    border-bottom: 1px solid #ccc; 
 
} 
 

 
.plan-for-your-business-content p:last-child { 
 
    border-bottom: none; 
 
} 
 

 

 
/*.popover { 
 
    background: #1e6c97; 
 
    color:#fff; 
 
    width: 100%; 
 
    max-width:500px; 
 
} 
 
.popover.right>.arrow:after { 
 
    border-right-color: #1e6c97; 
 
}*/ 
 

 
.pi-popover, 
 
.inbox-popover { 
 
    color: #1E6C97; 
 
} 
 

 
.pi-popover+.popover, 
 
.inbox-popover+.popover { 
 
    background: #fff; 
 
    color: #000; 
 
    max-width: 500px; 
 
    border: 2px solid #1E6C97; 
 
} 
 

 
.pi-popover+.popover { 
 
    width: 100%; 
 
} 
 

 
.inbox-popover+.popover { 
 
    width: 500px; 
 
} 
 

 
.pi-popover+.popover.right>.arrow, 
 
.inbox-popover+.popover.right>.arrow { 
 
    border-right-color: #1E6C97; 
 
} 
 

 
.pi-popover+.popover.right>.arrow:after, 
 
.inbox-popover+.popover.right>.arrow:after { 
 
    border-right-color: #fff; 
 
    left: 2px; 
 
} 
 

 
.quaranty-img { 
 
    max-width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    right: 1.214rem; 
 
    bottom: 2.571rem; 
 
} 
 

 
.honest-pricing { 
 
    margin: 2.143rem 1.07rem; 
 
} 
 

 
.membership-separator { 
 
    border-right: 1px solid #ccc; 
 
} 
 

 
.bosst-your-sales-logo-wrap { 
 
    margin-bottom: 0; 
 
    background: #000; 
 
    border: none; 
 
    border-radius: 0; 
 
} 
 

 
.boost-your-sales-bottom-wrap>p { 
 
    text-align: center; 
 
    padding: 1.429rem 1rem; 
 
    background: #fff; 
 
    margin-bottom: 0; 
 
    font-size: 1.143rem; 
 
} 
 

 
.boost-your-sales-bottom { 
 
    display: inline-block; 
 
} 
 

 
.boost-your-sales-bottom p { 
 
    margin-top: 3rem; 
 
    margin-bottom: 3rem; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<div class="pricing-table-wrp"> 
 
    <div class="container-fluid"> 
 
    <div class="text-center"> 
 
     <h2 class="mrgn-top-0" data-original-title="" title="">Black Friday plans &amp; pricing</h2> 
 
     <h5>Get the package of 4 SEO tools with 30% LIFETIME discount now!</h5> 
 
     <nav class="navbar navbar-default bst-yr-sls-nav"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header bst-ur-sls-tgle-btn-wrp"> 
 
      <button class="btn navbar-btn flip"><b>Annual</b> <small>Save ~ 40%</small></button> <button class="btn navbar-btn flipreverse btn-active">Monthly</button> 
 
      </div> 
 
     </div> 
 
     </nav> 
 
     <div class="row flip-cards"> 
 
     <div class="col-xs-4 col-sm-4"> 
 
      <section class="flipcontainer flip-section1"> 
 
      <div class="card flipped"> 
 
       <div class="front"> 
 
       <div class="frnt-img"> 
 
        <i aria-hidden="true" class="fa fa-hourglass-start"></i> 
 
       </div> 
 
       <h3>mangools <span class="clr-gold">Basic</span></h3> 
 
       <h2 class="price" data-original-title="" title=""><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>49</b> <sup>00</sup></h2> 
 
       <p class="fnt-8 text-center">per month</p> 
 
       <table class="table pricing-tbl mrgn-top-30"> 
 
        <tbody> 
 
        <tr> 
 
         <td>Keyword research</td> 
 
         <td><span class="label label-default"><a data-original-title="" href="#" title="">KWFinder</a></span></td> 
 
        </tr> 
 
        <tr> 
 
         <td> 
 
         <p class="mrgn-btm-20">KW lookups per 24 hours</p> 
 
         <p>Keyword suggestions per search</p> 
 
         </td> 
 
         <td> 
 
         <p class="mrgn-btm-20">100</p> 
 
         <p>200</p> 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td>SERP analysis</td> 
 
         <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPChecker</a></span></td> 
 
        </tr> 
 
        </tbody> 
 
       </table> 
 
       <div class="subsribe-btn-wrp"> 
 
        <button class="btn btn-pi btn-lg radius-2" type="button">Subscribe now <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button> 
 
       </div> 
 
       </div> 
 
       <div class="back"> 
 
       <div class="frnt-img"> 
 
        <i aria-hidden="true" class="fa fa-hourglass-start"></i> 
 
       </div> 
 
       <h3>mangools <span class="clr-gold">Basic</span></h3> 
 
       <h2 class="price" data-original-title="" title=""><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>49</b> <sup>00</sup></h2> 
 
       <p class="fnt-8 text-center">per month</p> 
 
       <table class="table pricing-tbl mrgn-top-30"> 
 
        <tbody> 
 
        <tr> 
 
         <td>Keyword research</td> 
 
         <td><span class="label label-default"><a data-original-title="" href="#" title="">KWFinder</a></span></td> 
 
        </tr> 
 
        <tr> 
 
         <td> 
 
         <p class="mrgn-btm-20">KW lookups per 24 hours</p> 
 
         <p>Keyword suggestions per search</p> 
 
         </td> 
 
         <td> 
 
         <p class="mrgn-btm-20">100</p> 
 
         <p>200</p> 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td>SERP analysis</td> 
 
         <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPChecker</a></span></td> 
 
        </tr> 
 
        </tbody> 
 
       </table> 
 
       <div class="subsribe-btn-wrp"> 
 
        <button class="btn btn-pi btn-lg radius-2" type="button">Subscribe now <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </section> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4"> 
 
      <section class="flipcontainer flip-section2"> 
 
      <div class="card flipped"> 
 
       <div class="front"> 
 
       <div class="frnt-img"> 
 
        <i aria-hidden="true" class="fa fa-hourglass-start"></i> 
 
       </div> 
 
       <h3>mangools <span class="clr-gold">Basic</span></h3> 
 
       <h2 class="price" data-original-title="" title=""><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>49</b> <sup>00</sup></h2> 
 
       <p class="fnt-8 text-center">per month</p> 
 
       <table class="table pricing-tbl mrgn-top-30"> 
 
        <tbody> 
 
        <tr> 
 
         <td>Keyword research</td> 
 
         <td><span class="label label-default"><a data-original-title="" href="#" title="">KWFinder</a></span></td> 
 
        </tr> 
 
        <tr> 
 
         <td> 
 
         <p class="mrgn-btm-20">KW lookups per 24 hours</p> 
 
         <p>Keyword suggestions per search</p> 
 
         </td> 
 
         <td> 
 
         <p class="mrgn-btm-20">100</p> 
 
         <p>200</p> 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td>SERP analysis</td> 
 
         <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPChecker</a></span></td> 
 
        </tr> 
 
        </tbody> 
 
       </table> 
 
       <div class="subsribe-btn-wrp"> 
 
        <button class="btn btn-pi btn-lg radius-2" type="button">Subscribe now <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button> 
 
       </div> 
 
       </div> 
 
       <div class="back"> 
 
       <div class="frnt-img"> 
 
        <i aria-hidden="true" class="fa fa-hourglass-start"></i> 
 
       </div> 
 
       <h3>mangools <span class="clr-gold">Basic</span></h3> 
 
       <h2 class="price" data-original-title="" title=""><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>49</b> <sup>00</sup></h2> 
 
       <p class="fnt-8 text-center">per month</p> 
 
       <table class="table pricing-tbl mrgn-top-30"> 
 
        <tbody> 
 
        <tr> 
 
         <td>Keyword research</td> 
 
         <td><span class="label label-default"><a data-original-title="" href="#" title="">KWFinder</a></span></td> 
 
        </tr> 
 
        <tr> 
 
         <td> 
 
         <p class="mrgn-btm-20">KW lookups per 24 hours</p> 
 
         <p>Keyword suggestions per search</p> 
 
         </td> 
 
         <td> 
 
         <p class="mrgn-btm-20">100</p> 
 
         <p>200</p> 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td>SERP analysis</td> 
 
         <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPChecker</a></span></td> 
 
        </tr> 
 
        <tr> 
 
         <td> 
 
         <p>SERP lookups per 24 hours *</p> 
 
         </td> 
 
         <td> 
 
         <p>100</p> 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td>Rank tracking</td> 
 
         <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPWatcher</a></span></td> 
 
        </tr> 
 
        <tr> 
 
         <td> 
 
         <p class="mrgn-btm-20">Tracked keywords</p> 
 
         <p class="mrgn-btm-20">Tracked domains</p> 
 
         <p>Rank updates</p> 
 
         </td> 
 
         <td> 
 
         <p class="mrgn-btm-20">100</p> 
 
         <p class="mrgn-btm-20">Unlimited</p> 
 
         <p>Daily</p> 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td>Backlink analysis</td> 
 
         <td><span class="label label-default"><a data-original-title="" href="#" title="">COMING SOON</a></span></td> 
 
        </tr> 
 
        </tbody> 
 
       </table> 
 
       <div class="subsribe-btn-wrp"> 
 
        <button class="btn btn-pi btn-lg radius-2" type="button">Subscribe now <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </section> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4"> 
 
      <section class="flipcontainer flip-section3"> 
 
      <div class="card flipped"> 
 
       <div class="front"> 
 
       <div class="frnt-img"> 
 
        <i aria-hidden="true" class="fa fa-hourglass-start"></i> 
 
       </div> 
 
       <h3>mangools <span class="clr-gold">Basic</span></h3> 
 
       <h2 class="price" data-original-title="" title=""><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>49</b> <sup>00</sup></h2> 
 
       <p class="fnt-8 text-center">per month</p> 
 
       <table class="table pricing-tbl mrgn-top-30"> 
 
        <tbody> 
 
        <tr> 
 
         <td>Keyword research</td> 
 
         <td><span class="label label-default"><a data-original-title="" href="#" title="">KWFinder</a></span></td> 
 
        </tr> 
 
        <tr> 
 
         <td> 
 
         <p class="mrgn-btm-20">KW lookups per 24 hours</p> 
 
         <p>Keyword suggestions per search</p> 
 
         </td> 
 
         <td> 
 
         <p class="mrgn-btm-20">100</p> 
 
         <p>200</p> 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td>SERP analysis</td> 
 
         <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPChecker</a></span></td> 
 
        </tr> 
 
        <tr> 
 
         <td> 
 
         <p>SERP lookups per 24 hours *</p> 
 
         </td> 
 
         <td> 
 
         <p>100</p> 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td>Rank tracking</td> 
 
         <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPWatcher</a></span></td> 
 
        </tr> 
 
        <tr> 
 
         <td> 
 
         <p class="mrgn-btm-20">Tracked keywords</p> 
 
         <p class="mrgn-btm-20">Tracked domains</p> 
 
         <p>Rank updates</p> 
 
         </td> 
 
         <td> 
 
         <p class="mrgn-btm-20">100</p> 
 
         <p class="mrgn-btm-20">Unlimited</p> 
 
         <p>Daily</p> 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td>Backlink analysis</td> 
 
         <td><span class="label label-default"><a data-original-title="" href="#" title="">COMING SOON</a></span></td> 
 
        </tr> 
 
        </tbody> 
 
       </table> 
 
       <div class="subsribe-btn-wrp"> 
 
        <button class="btn btn-pi btn-lg radius-2" type="button">Subscribe now <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button> 
 
       </div> 
 
       </div> 
 
       <div class="back"> 
 
       <div class="frnt-img"> 
 
        <i aria-hidden="true" class="fa fa-hourglass-start"></i> 
 
       </div> 
 
       <h3>mangools <span class="clr-gold">Basic</span></h3> 
 
       <h2 class="price" data-original-title="" title=""><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>49</b> <sup>00</sup></h2> 
 
       <p class="fnt-8 text-center">per month</p> 
 
       <table class="table pricing-tbl mrgn-top-30"> 
 
        <tbody> 
 
        <tr> 
 
         <td>Keyword research</td> 
 
         <td><span class="label label-default"><a data-original-title="" href="#" title="">KWFinder</a></span></td> 
 
        </tr> 
 
        <tr> 
 
         <td> 
 
         <p class="mrgn-btm-20">KW lookups per 24 hours</p> 
 
         <p>Keyword suggestions per search</p> 
 
         </td> 
 
         <td> 
 
         <p class="mrgn-btm-20">100</p> 
 
         <p>200</p> 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td>SERP analysis</td> 
 
         <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPChecker</a></span></td> 
 
        </tr> 
 
        <tr> 
 
         <td> 
 
         <p>SERP lookups per 24 hours *</p> 
 
         </td> 
 
         <td> 
 
         <p>100</p> 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td>Rank tracking</td> 
 
         <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPWatcher</a></span></td> 
 
        </tr> 
 
        <tr> 
 
         <td> 
 
         <p class="mrgn-btm-20">Tracked keywords</p> 
 
         <p class="mrgn-btm-20">Tracked domains</p> 
 
         <p>Rank updates</p> 
 
         </td> 
 
         <td> 
 
         <p class="mrgn-btm-20">100</p> 
 
         <p class="mrgn-btm-20">Unlimited</p> 
 
         <p>Daily</p> 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td>Backlink analysis</td> 
 
         <td><span class="label label-default"><a data-original-title="" href="#" title="">COMING SOON</a></span></td> 
 
        </tr> 
 
        </tbody> 
 
       </table> 
 
       <div class="subsribe-btn-wrp"> 
 
        <button class="btn btn-pi btn-lg radius-2" type="button">Subscribe now <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </section> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

問題は、すべての要素がabsolute位置はそれほど代わりにあなたがフロントを保つことができ、自分の親に0の高さを与えていることであるposition:relativeバックにのみposition:absolute（必要に応じて残りのCSSを調整します）：

$(document).ready(function() { 
 
    $(".flip").on("click", function() { 
 
    $(this).addClass("btn-active"); 
 
    $(".flipreverse").removeClass("btn-active"); 
 
    $('.card').removeClass('flipped'); 
 
    }) 
 
    $(".flipreverse").on("click", function() { 
 
    $(this).addClass("btn-active"); 
 
    $(".flip").removeClass("btn-active"); 
 
    $('.card').addClass('flipped'); 
 
    }) 
 
})

/*boost-your-sales-new*/ 
 

 
.bst-ur-sls-tgle-btn-wrp button { 
 
    width: 200px; 
 
    border: none; 
 
    outline: none; 
 
    font-size: 20px; 
 
} 
 

 
.bst-ur-sls-tgle-btn-wrp button:hover, 
 
.bst-ur-sls-tgle-btn-wrp button { 
 
    /*background: #fff;*/ 
 
    box-shadow: none; 
 
    outline: none; 
 
    background-color: #fff; 
 
    border-radius: 25px; 
 
} 
 

 
.bst-yr-sls-nav { 
 
    border: 2px solid #1e6c97; 
 
    border-radius: 50px; 
 
    max-width: 448px; 
 
    background: #fff; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 30px; 
 
} 
 

 
.pricing-table-wrp { 
 
    background: #F1F7FB; 
 
    padding: 60px 0; 
 
} 
 

 
.btn-active { 
 
    background: #ffcc29 !important; 
 
    transition: all 1s ease out; 
 
    border-radius: 25px; 
 
} 
 

 
.bst-ur-sls-tgle-btn-wrp button:first-child { 
 
    margin-left: 10px; 
 
} 
 

 
.bst-ur-sls-tgle-btn-wrp .navbar-btn:active, 
 
.bst-ur-sls-tgle-btn-wrp .navbar-btn:focus { 
 
    border: none !important; 
 
    outline: none !important; 
 
    box-shadow: none; 
 
} 
 

 
.flipcontainer { 
 
    width: 100%; 
 
    position: relative; 
 
    -webkit-perspective: 800px; 
 
    -moz-perspective: 800px; 
 
    -o-perspective: 800px; 
 
    perspective: 800px; 
 
} 
 

 
.card { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
    -webkit-transition: -webkit-transform 1s; 
 
    -moz-transition: -moz-transform 1s; 
 
    -o-transition: -o-transform 1s; 
 
    transition: transform 1s; 
 
    -webkit-transform-style: preserve-3d; 
 
    -moz-transform-style: preserve-3d; 
 
    -o-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    -webkit-transform-origin: 50% 50%; 
 
} 
 

 
.card>div { 
 
    display: block; 
 
    width: 100%; 
 
    position: absolute; 
 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    -o-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
} 
 

 
.frnt-img i, 
 
.bck-img i { 
 
    font-size: 80px; 
 
    color: #ffcc29; 
 
} 
 

 
.pricing-tbl>tbody>tr>td { 
 
    padding-top: 17px; 
 
    padding-bottom: 17px; 
 
} 
 

 
.pricing-tbl>tbody>tr>td:first-child { 
 
    text-align: left; 
 
    padding-left: 30px; 
 
} 
 

 
.pricing-tbl>tbody>tr>td:last-child a { 
 
    color: #fff; 
 
} 
 

 
.pricing-tbl>tbody>tr>td:last-child { 
 
    padding-right: 30px; 
 
    text-align: right; 
 
} 
 

 
.pricing-tbl>tbody>tr:last-child>td { 
 
    border-bottom: 1px solid #ccc; 
 
} 
 

 
.subsribe-btn-wrp { 
 
    text-align: center; 
 
    margin-top: 50px; 
 
} 
 

 
.frnt-img, 
 
.bck-img { 
 
    padding: 50px; 
 
    padding-bottom: 4px; 
 
} 
 

 
.card .front { 
 
    background: #fff; 
 
    border-radius: 10px; 
 
    color: #555; 
 
    position:relative; 
 
} 
 

 
.price i { 
 
    font-size: 16px; 
 
    vertical-align: super; 
 
} 
 

 
.price { 
 
    word-spacing: -6px; 
 
    margin-bottom: 0; 
 
} 
 

 
.price sup { 
 
    font-size: 14px; 
 
    vertical-align: super; 
 
} 
 

 
.card .back { 
 
    background: #fff; 
 
    top:0; 
 
    text-align:center; 
 
    -webkit-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
    border-radius: 10px; 
 
    color: #555; 
 
} 
 

 
.card.flipped { 
 
    -webkit-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
} 
 

 
.flip-cards { 
 
    margin-top: 40px; 
 
} 
 

 

 
/*boost-your-sales-new-ends*/ 
 

 
.boost-your-sales-bnr-content-wrap { 
 
    color: #fff; 
 
    min-height: 24.29rem; 
 
    position: relative; 
 
    padding: 1.429rem; 
 
} 
 

 
.boost-your-sales-bnr-content-wrap>h1, 
 
.boost-your-sales-bnr-content-wrap>h2 { 
 
    margin: 0; 
 
    color: #fff; 
 
    font-size: 2.5rem; 
 
    text-align: center; 
 
    margin-top: 2.286rem; 
 
    margin-bottom: 0; 
 
} 
 

 
.boost-your-sales-bnr-content-wrap>h2 { 
 
    color: #ffcc29; 
 
} 
 

 
.boost-your-sales-bnr-content-wrap>h3 { 
 
    text-align: center; 
 
    font-size: 2.286rem; 
 
    font-family: "Montserrat"; 
 
    font-weight: normal; 
 
} 
 

 
.budiness-promotion-title>h2 { 
 
    text-align: center; 
 
    background: #1e6c97; 
 
    margin: 0; 
 
    padding: 1.429rem; 
 
    font-size: 2.286rem; 
 
    color: #fff; 
 
} 
 

 
.budiness-promotion-subtitle>h2 { 
 
    text-align: center; 
 
    font-size: 2rem; 
 
    margin-top: 2.5rem; 
 
    margin-left: 1.07rem; 
 
    margin-right: 1.07rem; 
 
} 
 

 
.budiness-promotion-wrap { 
 
    border: 1px solid #B8C0C5; 
 
    border-top: none; 
 
} 
 

 
.membership-imgs { 
 
    padding: 2.143rem; 
 
    margin-top: 2.143rem; 
 
} 
 

 
.budiness-promotion-wrap+.container-fluid h4 { 
 
    text-align: center; 
 
    margin-top: 2.143rem; 
 
    margin-bottom: 2.143rem; 
 
    font-size: 1.714rem; 
 
    color: #505253; 
 
} 
 

 
.plan-for-your-business { 
 
    background: #F5FAFC; 
 
} 
 

 
.plan-for-your-business a { 
 
    white-space: normal !important; 
 
} 
 

 
.plan-for-your-business h2 { 
 
    font-size: 2rem; 
 
    color: #505253; 
 
    margin-bottom: 4.286rem; 
 
    margin-top: 2.143rem; 
 
} 
 

 
.plan-for-ur-business-title { 
 
    background: #E0F1FA; 
 
    padding: 1.071rem; 
 
    min-height: 4.714rem; 
 
} 
 

 
.plan-for-ur-business-title>h4 { 
 
    text-align: center; 
 
    font-size: 1.214rem; 
 
    margin: 0; 
 
} 
 

 
.plan-for-ur-business-title>p { 
 
    text-align: center; 
 
    margin-bottom: 0; 
 
} 
 

 
.plan-for-ur-business-title>h3 { 
 
    margin: 0; 
 
    padding: 1.07rem; 
 
    font-size: 1.429rem; 
 
    color: #505253; 
 
} 
 

 
.plan-for-ur-business-subhead { 
 
    padding: 1.07rem; 
 
    border-left: 4px solid #1e6c97; 
 
} 
 

 
.plan-for-your-business-content { 
 
    background: #fff; 
 
} 
 

 
.plan-for-your-business-content p { 
 
    margin: 0 1.07rem; 
 
    padding: 1.714rem 0; 
 
    border-bottom: 1px solid #ccc; 
 
} 
 

 
.plan-for-your-business-content p:last-child { 
 
    border-bottom: none; 
 
} 
 

 

 
/*.popover { 
 
    background: #1e6c97; 
 
    color:#fff; 
 
    width: 100%; 
 
    max-width:500px; 
 
} 
 
.popover.right>.arrow:after { 
 
    border-right-color: #1e6c97; 
 
}*/ 
 

 
.pi-popover, 
 
.inbox-popover { 
 
    color: #1E6C97; 
 
} 
 

 
.pi-popover+.popover, 
 
.inbox-popover+.popover { 
 
    background: #fff; 
 
    color: #000; 
 
    max-width: 500px; 
 
    border: 2px solid #1E6C97; 
 
} 
 

 
.pi-popover+.popover { 
 
    width: 100%; 
 
} 
 

 
.inbox-popover+.popover { 
 
    width: 500px; 
 
} 
 

 
.pi-popover+.popover.right>.arrow, 
 
.inbox-popover+.popover.right>.arrow { 
 
    border-right-color: #1E6C97; 
 
} 
 

 
.pi-popover+.popover.right>.arrow:after, 
 
.inbox-popover+.popover.right>.arrow:after { 
 
    border-right-color: #fff; 
 
    left: 2px; 
 
} 
 

 
.quaranty-img { 
 
    max-width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    right: 1.214rem; 
 
    bottom: 2.571rem; 
 
} 
 

 
.honest-pricing { 
 
    margin: 2.143rem 1.07rem; 
 
} 
 

 
.membership-separator { 
 
    border-right: 1px solid #ccc; 
 
} 
 

 
.bosst-your-sales-logo-wrap { 
 
    margin-bottom: 0; 
 
    background: #000; 
 
    border: none; 
 
    border-radius: 0; 
 
} 
 

 
.boost-your-sales-bottom-wrap>p { 
 
    text-align: center; 
 
    padding: 1.429rem 1rem; 
 
    background: #fff; 
 
    margin-bottom: 0; 
 
    font-size: 1.143rem; 
 
} 
 

 
.boost-your-sales-bottom { 
 
    display: inline-block; 
 
} 
 

 
.boost-your-sales-bottom p { 
 
    margin-top: 3rem; 
 
    margin-bottom: 3rem; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<div class="pricing-table-wrp"> 
 
    <div class="container-fluid"> 
 
    <div class="text-center"> 
 
     <h2 class="mrgn-top-0" data-original-title="" title="">Black Friday plans &amp; pricing</h2> 
 
     <h5>Get the package of 4 SEO tools with 30% LIFETIME discount now!</h5> 
 
     <nav class="navbar navbar-default bst-yr-sls-nav"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header bst-ur-sls-tgle-btn-wrp"> 
 
      <button class="btn navbar-btn flip"><b>Annual</b> <small>Save ~ 40%</small></button> <button class="btn navbar-btn flipreverse btn-active">Monthly</button> 
 
      </div> 
 
     </div> 
 
     </nav> 
 
    </div> 
 
    <div class="row flip-cards"> 
 
     <div class="col-xs-4 col-sm-4"> 
 
     <section class="flipcontainer flip-section1"> 
 
      <div class="card flipped"> 
 
      <div class="front"> 
 
       <div class="frnt-img"> 
 
       <i aria-hidden="true" class="fa fa-hourglass-start"></i> 
 
       </div> 
 
       <h3>mangools <span class="clr-gold">Basic</span></h3> 
 
       <h2 class="price" data-original-title="" title=""><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>49</b> <sup>00</sup></h2> 
 
       <p class="fnt-8 text-center">per month</p> 
 
       <table class="table pricing-tbl mrgn-top-30"> 
 
       <tbody> 
 
        <tr> 
 
        <td>Keyword research</td> 
 
        <td><span class="label label-default"><a data-original-title="" href="#" title="">KWFinder</a></span></td> 
 
        </tr> 
 
        <tr> 
 
        <td> 
 
         <p class="mrgn-btm-20">KW lookups per 24 hours</p> 
 
         <p>Keyword suggestions per search</p> 
 
        </td> 
 
        <td> 
 
         <p class="mrgn-btm-20">100</p> 
 
         <p>200</p> 
 
        </td> 
 
        </tr> 
 
        <tr> 
 
        <td>SERP analysis</td> 
 
        <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPChecker</a></span></td> 
 
        </tr> 
 
       </tbody> 
 
       </table> 
 
       <div class="subsribe-btn-wrp"> 
 
       <button class="btn btn-pi btn-lg radius-2" type="button">Subscribe now <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button> 
 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="frnt-img"> 
 
       <i aria-hidden="true" class="fa fa-hourglass-start"></i> 
 
       </div> 
 
       <h3>mangools <span class="clr-gold">Basic</span></h3> 
 
       <h2 class="price" data-original-title="" title=""><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>49</b> <sup>00</sup></h2> 
 
       <p class="fnt-8 text-center">per month</p> 
 
       <table class="table pricing-tbl mrgn-top-30"> 
 
       <tbody> 
 
        <tr> 
 
        <td>Keyword research</td> 
 
        <td><span class="label label-default"><a data-original-title="" href="#" title="">KWFinder</a></span></td> 
 
        </tr> 
 
        <tr> 
 
        <td> 
 
         <p class="mrgn-btm-20">KW lookups per 24 hours</p> 
 
         <p>Keyword suggestions per search</p> 
 
        </td> 
 
        <td> 
 
         <p class="mrgn-btm-20">100</p> 
 
         <p>200</p> 
 
        </td> 
 
        </tr> 
 
        <tr> 
 
        <td>SERP analysis</td> 
 
        <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPChecker</a></span></td> 
 
        </tr> 
 
       </tbody> 
 
       </table> 
 
       <div class="subsribe-btn-wrp"> 
 
       <button class="btn btn-pi btn-lg radius-2" type="button">Subscribe now <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </section> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4"> 
 
     <section class="flipcontainer flip-section2"> 
 
      <div class="card flipped"> 
 
      <div class="front"> 
 
       <div class="frnt-img"> 
 
       <i aria-hidden="true" class="fa fa-hourglass-start"></i> 
 
       </div> 
 
       <h3>mangools <span class="clr-gold">Basic</span></h3> 
 
       <h2 class="price" data-original-title="" title=""><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>49</b> <sup>00</sup></h2> 
 
       <p class="fnt-8 text-center">per month</p> 
 
       <table class="table pricing-tbl mrgn-top-30"> 
 
       <tbody> 
 
        <tr> 
 
        <td>Keyword research</td> 
 
        <td><span class="label label-default"><a data-original-title="" href="#" title="">KWFinder</a></span></td> 
 
        </tr> 
 
        <tr> 
 
        <td> 
 
         <p class="mrgn-btm-20">KW lookups per 24 hours</p> 
 
         <p>Keyword suggestions per search</p> 
 
        </td> 
 
        <td> 
 
         <p class="mrgn-btm-20">100</p> 
 
         <p>200</p> 
 
        </td> 
 
        </tr> 
 
        <tr> 
 
        <td>SERP analysis</td> 
 
        <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPChecker</a></span></td> 
 
        </tr> 
 
       </tbody> 
 
       </table> 
 
       <div class="subsribe-btn-wrp"> 
 
       <button class="btn btn-pi btn-lg radius-2" type="button">Subscribe now <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button> 
 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="frnt-img"> 
 
       <i aria-hidden="true" class="fa fa-hourglass-start"></i> 
 
       </div> 
 
       <h3>mangools <span class="clr-gold">Basic</span></h3> 
 
       <h2 class="price" data-original-title="" title=""><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>49</b> <sup>00</sup></h2> 
 
       <p class="fnt-8 text-center">per month</p> 
 
       <table class="table pricing-tbl mrgn-top-30"> 
 
       <tbody> 
 
        <tr> 
 
        <td>Keyword research</td> 
 
        <td><span class="label label-default"><a data-original-title="" href="#" title="">KWFinder</a></span></td> 
 
        </tr> 
 
        <tr> 
 
        <td> 
 
         <p class="mrgn-btm-20">KW lookups per 24 hours</p> 
 
         <p>Keyword suggestions per search</p> 
 
        </td> 
 
        <td> 
 
         <p class="mrgn-btm-20">100</p> 
 
         <p>200</p> 
 
        </td> 
 
        </tr> 
 
        <tr> 
 
        <td>SERP analysis</td> 
 
        <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPChecker</a></span></td> 
 
        </tr> 
 
        <tr> 
 
        <td> 
 
         <p>SERP lookups per 24 hours *</p> 
 
        </td> 
 
        <td> 
 
         <p>100</p> 
 
        </td> 
 
        </tr> 
 
        <tr> 
 
        <td>Rank tracking</td> 
 
        <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPWatcher</a></span></td> 
 
        </tr> 
 
        <tr> 
 
        <td> 
 
         <p class="mrgn-btm-20">Tracked keywords</p> 
 
         <p class="mrgn-btm-20">Tracked domains</p> 
 
         <p>Rank updates</p> 
 
        </td> 
 
        <td> 
 
         <p class="mrgn-btm-20">100</p> 
 
         <p class="mrgn-btm-20">Unlimited</p> 
 
         <p>Daily</p> 
 
        </td> 
 
        </tr> 
 
        <tr> 
 
        <td>Backlink analysis</td> 
 
        <td><span class="label label-default"><a data-original-title="" href="#" title="">COMING SOON</a></span></td> 
 
        </tr> 
 
       </tbody> 
 
       </table> 
 
       <div class="subsribe-btn-wrp"> 
 
       <button class="btn btn-pi btn-lg radius-2" type="button">Subscribe now <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </section> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4"> 
 
     <section class="flipcontainer flip-section3"> 
 
      <div class="card flipped"> 
 
      <div class="front"> 
 
       <div class="frnt-img"> 
 
       <i aria-hidden="true" class="fa fa-hourglass-start"></i> 
 
       </div> 
 
       <h3>mangools <span class="clr-gold">Basic</span></h3> 
 
       <h2 class="price" data-original-title="" title=""><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>49</b> <sup>00</sup></h2> 
 
       <p class="fnt-8 text-center">per month</p> 
 
       <table class="table pricing-tbl mrgn-top-30"> 
 
       <tbody> 
 
        <tr> 
 
        <td>Keyword research</td> 
 
        <td><span class="label label-default"><a data-original-title="" href="#" title="">KWFinder</a></span></td> 
 
        </tr> 
 
        <tr> 
 
        <td> 
 
         <p class="mrgn-btm-20">KW lookups per 24 hours</p> 
 
         <p>Keyword suggestions per search</p> 
 
        </td> 
 
        <td> 
 
         <p class="mrgn-btm-20">100</p> 
 
         <p>200</p> 
 
        </td> 
 
        </tr> 
 
        <tr> 
 
        <td>SERP analysis</td> 
 
        <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPChecker</a></span></td> 
 
        </tr> 
 
        <tr> 
 
        <td> 
 
         <p>SERP lookups per 24 hours *</p> 
 
        </td> 
 
        <td> 
 
         <p>100</p> 
 
        </td> 
 
        </tr> 
 
        <tr> 
 
        <td>Rank tracking</td> 
 
        <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPWatcher</a></span></td> 
 
        </tr> 
 
        <tr> 
 
        <td> 
 
         <p class="mrgn-btm-20">Tracked keywords</p> 
 
         <p class="mrgn-btm-20">Tracked domains</p> 
 
         <p>Rank updates</p> 
 
        </td> 
 
        <td> 
 
         <p class="mrgn-btm-20">100</p> 
 
         <p class="mrgn-btm-20">Unlimited</p> 
 
         <p>Daily</p> 
 
        </td> 
 
        </tr> 
 
        <tr> 
 
        <td>Backlink analysis</td> 
 
        <td><span class="label label-default"><a data-original-title="" href="#" title="">COMING SOON</a></span></td> 
 
        </tr> 
 
       </tbody> 
 
       </table> 
 
       <div class="subsribe-btn-wrp"> 
 
       <button class="btn btn-pi btn-lg radius-2" type="button">Subscribe now <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button> 
 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="frnt-img"> 
 
       <i aria-hidden="true" class="fa fa-hourglass-start"></i> 
 
       </div> 
 
       <h3>mangools <span class="clr-gold">Basic</span></h3> 
 
       <h2 class="price" data-original-title="" title=""><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>49</b> <sup>00</sup></h2> 
 
       <p class="fnt-8 text-center">per month</p> 
 
       <table class="table pricing-tbl mrgn-top-30"> 
 
       <tbody> 
 
        <tr> 
 
        <td>Keyword research</td> 
 
        <td><span class="label label-default"><a data-original-title="" href="#" title="">KWFinder</a></span></td> 
 
        </tr> 
 
        <tr> 
 
        <td> 
 
         <p class="mrgn-btm-20">KW lookups per 24 hours</p> 
 
         <p>Keyword suggestions per search</p> 
 
        </td> 
 
        <td> 
 
         <p class="mrgn-btm-20">100</p> 
 
         <p>200</p> 
 
        </td> 
 
        </tr> 
 
        <tr> 
 
        <td>SERP analysis</td> 
 
        <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPChecker</a></span></td> 
 
        </tr> 
 
        <tr> 
 
        <td> 
 
         <p>SERP lookups per 24 hours *</p> 
 
        </td> 
 
        <td> 
 
         <p>100</p> 
 
        </td> 
 
        </tr> 
 
        <tr> 
 
        <td>Rank tracking</td> 
 
        <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPWatcher</a></span></td> 
 
        </tr> 
 
        <tr> 
 
        <td> 
 
         <p class="mrgn-btm-20">Tracked keywords</p> 
 
         <p class="mrgn-btm-20">Tracked domains</p> 
 
         <p>Rank updates</p> 
 
        </td> 
 
        <td> 
 
         <p class="mrgn-btm-20">100</p> 
 
         <p class="mrgn-btm-20">Unlimited</p> 
 
         <p>Daily</p> 
 
        </td> 
 
        </tr> 
 
        <tr> 
 
        <td>Backlink analysis</td> 
 
        <td><span class="label label-default"><a data-original-title="" href="#" title="">COMING SOON</a></span></td> 
 
        </tr> 
 
       </tbody> 
 
       </table> 
 
       <div class="subsribe-btn-wrp"> 
 
       <button class="btn btn-pi btn-lg radius-2" type="button">Subscribe now <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </section> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>