<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 ----------> <!-- User Profile Sidebar by @keenthemes A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme Licensed under MIT --> <div class="container content"> <div class="row"> <!-- Pricing --> <div class="col-md-3"> <div class="pricing hover-effect"> <div class="pricing-head"> <h3>Begginer <span> Officia deserunt mollitia </span> </h3> <h4><i>$</i>5<i>.49</i> <span> Per Month </span> </h4> </div> <ul class="pricing-content list-unstyled"> <li> At vero eos </li> <li> No Support </li> <li> Fusce condimentum </li> <li> Ut non libero </li> <li> Consecte adiping elit </li> </ul> <div class="pricing-footer"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna psum olor . </p> <a href="javascript:;" class="btn yellow-crusta"> Sign Up </a> </div> </div> </div> <div class="col-md-3"> <div class="pricing hover-effect"> <div class="pricing-head"> <h3>Pro <span> Officia deserunt mollitia </span> </h3> <h4><i>$</i>8<i>.69</i> <span> Per Month </span> </h4> </div> <ul class="pricing-content list-unstyled"> <li> At vero eos </li> <li> No Support </li> <li> Fusce condimentum </li> <li> Ut non libero </li> <li> Consecte adiping elit </li> </ul> <div class="pricing-footer"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna psum olor . </p> <a href="javascript:;" class="btn yellow-crusta"> Sign Up </a> </div> </div> </div> <div class="col-md-3"> <div class="pricing pricing-active hover-effect"> <div class="pricing-head pricing-head-active"> <h3>Expert <span> Officia deserunt mollitia </span> </h3> <h4><i>$</i>13<i>.99</i> <span> Per Month </span> </h4> </div> <ul class="pricing-content list-unstyled"> <li> At vero eos </li> <li> No Support </li> <li> Fusce condimentum </li> <li> Ut non libero </li> <li> Consecte adiping elit </li> </ul> <div class="pricing-footer"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna psum olor . </p> <a href="javascript:;" class="btn yellow-crusta"> Sign Up </a> </div> </div> </div> <div class="col-md-3"> <div class="pricing hover-effect"> <div class="pricing-head"> <h3>Hi-Tech <span> Officia deserunt mollitia </span> </h3> <h4><i>$</i>99<i>.00</i> <span> Per Month </span> </h4> </div> <ul class="pricing-content list-unstyled"> <li> At vero eos </li> <li> No Support </li> <li> Fusce condimentum </li> <li> Ut non libero </li> <li> Consecte adiping elit </li> </ul> <div class="pricing-footer"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna psum olor . </p> <a href="javascript:;" class="btn yellow-crusta"> Sign Up </a> </div> </div> </div> <!--//End Pricing --> </div> </div> <br> <br> <center> <strong>Powered by <a href="http://j.mp/metronictheme" target="_blank">KeenThemes</a></strong> </center> <br> <br>

/*** User Profile Sidebar by @keenthemes A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme Licensed under MIT ***/ /*** Content ***/ .content { padding: 30px 0; } /*** Pricing table ***/ .pricing { position: relative; margin-bottom: 15px; border: 3px solid #eee; } .pricing-active { border: 3px solid #36d7ac; margin-top: -10px; box-shadow: 7px 7px rgba(54, 215, 172, 0.2); } .pricing:hover { border: 3px solid #36d7ac; } .pricing:hover h4 { color: #36d7ac; } .pricing-head { text-align: center; } .pricing-head h3, .pricing-head h4 { margin: 0; line-height: normal; } .pricing-head h3 span, .pricing-head h4 span { display: block; margin-top: 5px; font-size: 14px; font-style: italic; } .pricing-head h3 { font-weight: 300; color: #fafafa; padding: 12px 0; font-size: 27px; background: #36d7ac; border-bottom: solid 1px #41b91c; } .pricing-head h4 { color: #bac39f; padding: 5px 0; font-size: 54px; font-weight: 300; background: #fbfef2; border-bottom: solid 1px #f5f9e7; } .pricing-head-active h4 { color: #36d7ac; } .pricing-head h4 i { top: -8px; font-size: 28px; font-style: normal; position: relative; } .pricing-head h4 span { top: -10px; font-size: 14px; font-style: normal; position: relative; } /*Pricing Content*/ .pricing-content li { color: #888; font-size: 12px; padding: 7px 15px; border-bottom: solid 1px #f5f9e7; } /*Pricing Footer*/ .pricing-footer { color: #777; font-size: 11px; line-height: 17px; text-align: center; padding: 0 20px 19px; } /*Priceing Active*/ .price-active, .pricing:hover { z-index: 9; } .price-active h4 { color: #36d7ac; } .no-space-pricing .pricing:hover { transition: box-shadow 0.2s ease-in-out; } .no-space-pricing .price-active .pricing-head h4, .no-space-pricing .pricing:hover .pricing-head h4 { color: #36d7ac; padding: 15px 0; font-size: 80px; transition: color 0.5s ease-in-out; } .yellow-crusta.btn { color: #FFFFFF; background-color: #f3c200; } .yellow-crusta.btn:hover, .yellow-crusta.btn:focus, .yellow-crusta.btn:active, .yellow-crusta.btn.active { color: #FFFFFF; background-color: #cfa500; }