<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <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 ----------> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="pricingTable"> <div class="pricingTable-header"> <span class="heading"> <h3>Standard</h3> </span> <span class="price-value"><span class="currency">$</span>10<span class="mo"> month</span></span> </div> <div class="pricingContent"> <ul> <li>50GB Disk Space</li> <li>50 Email Accounts</li> <li>50GB Monthly Bandwidth</li> <li>50 Domains</li> <li>Unlimited Subdomains</li> </ul> </div><!-- / CONTENT BOX--> <div class="pricingTable-sign-up"> <a href="#" class="btn btn-block btn-default">sign up</a> </div><!-- BUTTON BOX--> </div> </div> <div class="col-md-3 col-sm-6"> <div class="pricingTable"> <div class="pricingTable-header"> <span class="heading"> <h3>Standard</h3> </span> <span class="price-value"><span class="currency">$</span>10<span class="mo"> month</span></span> </div> <div class="pricingContent"> <ul> <li>50GB Disk Space</li> <li>50 Email Accounts</li> <li>50GB Monthly Bandwidth</li> <li>50 Domains</li> <li>Unlimited Subdomains</li> </ul> </div><!-- / CONTENT BOX--> <div class="pricingTable-sign-up"> <a href="#" class="btn btn-block btn-default">sign up</a> </div><!-- BUTTON BOX--> </div> </div> <div class="col-md-3 col-sm-6"> <div class="pricingTable"> <div class="pricingTable-header"> <span class="heading"> <h3>Standard</h3> </span> <span class="price-value"><span class="currency">$</span>10<span class="mo"> month</span></span> </div> <div class="pricingContent"> <ul> <li>50GB Disk Space</li> <li>50 Email Accounts</li> <li>50GB Monthly Bandwidth</li> <li>50 Domains</li> <li>Unlimited Subdomains</li> </ul> </div><!-- / CONTENT BOX--> <div class="pricingTable-sign-up"> <a href="#" class="btn btn-block btn-default">sign up</a> </div><!-- BUTTON BOX--> </div> </div> <div class="col-md-3 col-sm-6"> <div class="pricingTable"> <div class="pricingTable-header"> <span class="heading"> <h3>Standard</h3> </span> <span class="price-value"><span class="currency">$</span>10<span class="mo"> month</span></span> </div> <div class="pricingContent"> <ul> <li>50GB Disk Space</li> <li>50 Email Accounts</li> <li>50GB Monthly Bandwidth</li> <li>50 Domains</li> <li>Unlimited Subdomains</li> </ul> </div><!-- / CONTENT BOX--> <div class="pricingTable-sign-up"> <a href="#" class="btn btn-block btn-default">sign up</a> </div><!-- BUTTON BOX--> </div> </div> </div> </div> </div>

.pricingTable{ text-align: center; background: #727cb6; padding-top: 5px; transition: all 0.5s ease-in-out 0s; } .pricingTable > .pricingTable-header{ color:#fff; background: #273238; height: 190px; position: relative; transition: all 0.5s ease 0s; } .pricingTable > .pricingTable-header:after{ content: ""; border-bottom: 40px solid #727cb6; border-left: 263px solid transparent; position: absolute; right:0px; bottom: 0px; } .pricingTable:hover .pricingTable-header{ height: 230px; transition: all 0.5s ease 0s; } .pricingTable-header > .heading{ display: block; padding: 20px 0; } .heading > h3{ margin: 0; text-transform: uppercase; } .pricingTable-header > .price-value{ display: block; font-size: 60px; line-height: 60px; } .pricingTable-header > .price-value > .mo{ font-size: 14px; display: block; line-height: 0px; text-transform: uppercase; } .pricingTable-header > .price-value > .currency{ font-size: 24px; margin-right: 4px; position: relative; bottom:30px; } .pricingTable > .pricingContent{ text-transform: uppercase; color:#fff } .pricingTable > .pricingContent > ul{ list-style: none; padding: 0; } .pricingTable > .pricingContent > ul > li{ padding: 15px 0; border-bottom: 1px solid #fff; } .pricingTable > .pricingContent > ul > li:last-child{ border: 0px none; } .pricingTable-sign-up{ padding: 30px 0; } .pricingTable-sign-up > .btn-block{ width: 80%; margin: 0 auto; background: #273238; border:2px solid #fff; color:#fff; padding: 15px 12px; text-transform: uppercase; font-size: 18px; } .pricingTable-sign-up > .btn-block:hover{ opacity: 0.9; } .pink{ background: #ed687c; } .pink .pricingTable-header:after{ border-bottom-color: #ed687c; } .orange{ background: #e67e22; } .orange .pricingTable-header:after{ border-bottom-color: #e67e22; } .blue{ background: #3498db; } .blue .pricingTable-header:after{ border-bottom-color: #3498db; } @media screen and (max-width: 1200px){ .pricingTable > .pricingTable-header:after{ border-left: 215px solid transparent; } } @media screen and (max-width: 990px){ .pricingTable{ margin-bottom: 20px; } .pricingTable > .pricingTable-header:after{ border-left: 349px solid transparent; } } @media screen and (max-width: 480px){ .pricingTable{ overflow: hidden; } .pricingTable > .pricingTable-header:after { border-left: 459px solid rgba(0, 0, 0, 0); } }