"Pricing Table : Demo1"
Bootstrap 3.0.0 Snippet by vivekbisht109

<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-md-3 col-sm-6"> <div class="pricingTable"> <div class="pricingTable-header"> <span class="price-value">10<span class="currency">$</span></span> <h3 class="title">Standard</h3> </div> <ul class="pricing-content"> <li>50GB Disk Space</li> <li>50 Email Accounts</li> <li>50GB Monthly Bandwidth</li> <li>10 Subdomains</li> <li>15 Domains</li> </ul> <a href="#" class="pricingTable-signup">Sign Up</a> </div> </div> <div class="col-md-3 col-sm-6"> <div class="pricingTable green"> <div class="pricingTable-header"> <span class="price-value">20<span class="currency">$</span></span> <h3 class="title">Business</h3> </div> <ul class="pricing-content"> <li>60GB Disk Space</li> <li>60 Email Accounts</li> <li>60GB Monthly Bandwidth</li> <li>15 Subdomains</li> <li>20 Domains</li> </ul> <a href="#" class="pricingTable-signup">Sign Up</a> </div> </div> </div> </div>
.demo{ background: #a7a7a7; } .pricingTable{ background: #fff; padding-bottom: 20px; overflow: hidden; } .pricingTable .pricingTable-header{ margin-bottom: 40px; position: relative; z-index: 1; } .pricingTable .pricingTable-header:before{ content: ""; width: 100%; height: 150%; background: #606aa3; position: absolute; top: -90%; left: -20%; z-index: -1; transform: rotate(-42deg); } .pricingTable .pricingTable-header:after{ content: ""; width: 100%; height: 190%; background: #727cb6; position: absolute; top: -76%; right: -16%; z-index: -2; transform: rotate(20deg); } .pricingTable .price-value{ display: inline-block; width: 50%; padding: 30px 0; float: left; font-size: 30px; color: #fff; line-height: 20px; position: relative; top: 10px; left: 20px; } .pricingTable .currency{ font-size: 20px; position: relative; top: -10px; right: -3px; } .pricingTable .title{ display: inline-block; width: 50%; padding: 30px 0; margin: 0; font-size: 20px; font-weight: bold; color: #fff; line-height: 20px; text-transform: uppercase; position: relative; top: 10px; right: 7px; } .pricingTable .pricing-content{ list-style: none; padding: 0; margin: 0 0 20px 0; text-align: center; clear: both; } .pricingTable .pricing-content li{ font-size: 17px; color: #828282; line-height: 40px; } .pricingTable .pricingTable-signup{ display: block; width: 80%; padding: 10px 0; text-align: center; border: 1px solid #606aa3; border-radius: 40px; margin: 0 auto; font-size: 18px; color: #606aa3; z-index: 1; text-transform: uppercase; overflow: hidden; position: relative; } .pricingTable .pricingTable-signup:before, .pricingTable .pricingTable-signup:after{ content: ""; border-width: 0; border-style: solid; position: absolute; z-index: -1; transition: all 0.7s ease 0s; } .pricingTable .pricingTable-signup:before{ border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #606aa3; bottom: 0; left: 0; } .pricingTable .pricingTable-signup:after{ border-color: rgba(0, 0, 0, 0) #606aa3 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); top: 0; right: 0; } .pricingTable .pricingTable-signup:hover:before, .pricingTable .pricingTable-signup:hover:after{ border-width: 150px 262px; } .pricingTable.green .pricingTable-header:before{ background: #18a288; } .pricingTable.green .pricingTable-header:after{ background: #1abc9c; } .pricingTable.green .pricingTable-signup{ border-color: #1abc9c; color: #1abc9c; } .pricingTable.green .pricingTable-signup:before{ border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #18a288; } .pricingTable.green .pricingTable-signup:after{ border-color: rgba(0, 0, 0, 0) #18a288 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); } .pricingTable.orange .pricingTable-header:before{ background: #ee6e00; } .pricingTable.orange .pricingTable-header:after{ background: #e67e22; } .pricingTable.orange .pricingTable-signup{ border-color: #e67e22; color: #e67e22; } .pricingTable.orange .pricingTable-signup:before{ border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #ee6e00; } .pricingTable.orange .pricingTable-signup:after{ border-color: rgba(0, 0, 0, 0) #ee6e00 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); } .pricingTable.purple .pricingTable-header:before{ background: #b14468; } .pricingTable.purple .pricingTable-header:after{ background: #cf4d78; } .pricingTable.purple .pricingTable-signup{ border-color: #cf4d78; color: #cf4d78; } .pricingTable.purple .pricingTable-signup:before{ border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #b14468; } .pricingTable.purple .pricingTable-signup:after{ border-color: rgba(0, 0, 0, 0) #b14468 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); } @media only screen and (max-width: 990px){ .pricingTable{ margin-bottom: 30px; } } @media only screen and (max-width: 767px){ .pricingTable .pricingTable-header:before{ height: 300%; top: -267%; } .pricingTable .pricingTable-header:after{ height: 270%; top: -106%; } .pricingTable .title{ text-align: center; } } @media only screen and (max-width: 480px){ .pricingTable .pricingTable-header:after{ top: -146%; } } @media only screen and (max-width: 479px){ .pricingTable .pricingTable-header:before{ height: 200%; top: -120%; left: -20%; } }

Related: See More


Questions / Comments: