Created
November 12, 2013 10:02
-
-
Save monkeymonk/7428379 to your computer and use it in GitHub Desktop.
Clean and Simple Pricing Table
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*Pricing Page | |
| ------------------------------------*/ | |
| /*Pricing Head*/ | |
| .pricing { | |
| position:relative; | |
| border-radius:3px; | |
| margin-bottom:15px; | |
| box-shadow:0 0 5px #eee; | |
| } | |
| .pricing:hover { | |
| box-shadow:0 0 15px #b5b5b5; | |
| } | |
| .pricing:hover h4 { | |
| color:#55c931; | |
| } | |
| .pricing-head { | |
| text-align:center; | |
| } | |
| .pricing-head h3, | |
| .pricing-head h4 { | |
| margin:0; | |
| line-height:normal; | |
| font-weight:bold !important; | |
| } | |
| .pricing-head h3 span, | |
| .pricing-head h4 span { | |
| display:block; | |
| margin-top:5px; | |
| font-size:12px; | |
| font-style:italic; | |
| } | |
| .pricing-head h3 { | |
| color:#fafafa; | |
| padding:12px 0; | |
| font-size:35px; | |
| font-family:Arial; | |
| background:#55c931; | |
| border-radius:3px 3px 0 0; | |
| text-shadow:0 1px 0 #32a20f; | |
| border-bottom:solid 1px #41b91c; | |
| } | |
| .pricing-head h4 { | |
| color:#bac39f; | |
| padding:5px 0; | |
| font-size:70px; | |
| font-family:Arial; | |
| background:#fbfef2; | |
| text-shadow:0 1px 0 #fff; | |
| border-bottom:solid 1px #f5f9e7; | |
| } | |
| .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-content li i { | |
| top:2px; | |
| color:#72c02c; | |
| font-size:16px; | |
| margin-right:5px; | |
| position:relative; | |
| } | |
| /*Pricing Footer*/ | |
| .pricing-footer { | |
| color:#777; | |
| font-size:11px; | |
| line-height:17px; | |
| text-align:center; | |
| padding:0 20px 19px; | |
| border-radius:0 0 3px 3px; | |
| } | |
| .pricing-footer a, | |
| .pricing-footer button { | |
| color:#fff; | |
| border:none; | |
| margin-top:5px; | |
| font-size:16px; | |
| padding:6px 15px; | |
| text-align:center; | |
| border-radius:2px; | |
| background:#55c931; | |
| display:inline-block; | |
| text-transform:uppercase; | |
| text-shadow:0 1px 0 #38b312; | |
| border-bottom:solid 2px #41b91c; | |
| } | |
| .pricing-footer a:hover, | |
| .pricing-footer button:hover { | |
| cursor:pointer; | |
| background:#40ba1a; | |
| text-decoration:none; | |
| box-shadow:0 0 3px #999; | |
| } | |
| /*Priceing Active*/ | |
| .price-active, | |
| .pricing:hover { | |
| z-index:9; | |
| margin-top:-15px; | |
| box-shadow:0 0 15px #b5b5b5; | |
| } | |
| .price-active h4 { | |
| color:#55c931; | |
| } | |
| .no-space-pricing { | |
| padding: 0 15px; | |
| } | |
| .no-space-pricing .pricing:hover { | |
| -webkit-transition:box-shadow 0.3s ease-in-out; | |
| -moz-transition:box-shadow 0.3s ease-in-out; | |
| -o-transition:box-shadow 0.3s ease-in-out; | |
| 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: #55c931; | |
| padding: 15px 0; | |
| font-size: 80px; | |
| -webkit-transition:color 0.5s ease-in-out; | |
| -moz-transition:color 0.5s ease-in-out; | |
| -o-transition:color 0.5s ease-in-out; | |
| transition:color 0.5s ease-in-out; | |
| } | |
| /* Devices (tablets, 768px and more) */ | |
| @media (min-width: 767px) { | |
| /*Pricing Page*/ | |
| .no-space-pricing [class^="col-"], | |
| .no-space-pricing [class*=" col-"] { | |
| padding: 0; | |
| } | |
| /*End Pricing Page*/ | |
| } | |
| /* Medium Devices (Desktops, 992px and less) */ | |
| @media (max-width: 992px) { | |
| /*Pricing Page*/ | |
| .price-active, | |
| .pricing:hover { | |
| margin-top: 0; | |
| } | |
| .no-space-pricing .price-active .pricing-head h4, | |
| .no-space-pricing .pricing:hover .pricing-head h4 { | |
| padding: 5px 0; | |
| font-size: 70px; | |
| } | |
| /*End Pricing Page*/ | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="row margin-bottom-40"> | |
| <div class="col-md-3 col-sm-6"> | |
| <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><i class="icon-tags"></i> At vero eos</li> | |
| <li><i class="icon-asterisk"></i> No Support</li> | |
| <li><i class="icon-heart"></i> Fusce condimentum</li> | |
| <li><i class="icon-star"></i> Ut non libero</li> | |
| <li><i class="icon-shopping-cart"></i> 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> | |
| <button type="submit">Order Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6"> | |
| <div class="pricing hover-effect"> | |
| <div class="pricing-head"> | |
| <h3>Pro Unify <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><i class="icon-tags"></i> At vero eos</li> | |
| <li><i class="icon-asterisk"></i> No Support</li> | |
| <li><i class="icon-heart"></i> Fusce condimentum</li> | |
| <li><i class="icon-star"></i> Ut non libero</li> | |
| <li><i class="icon-shopping-cart"></i> 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> | |
| <button type="submit">Order Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6"> | |
| <div class="pricing hover-effect"> | |
| <div class="pricing-head"> | |
| <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><i class="icon-tags"></i> At vero eos</li> | |
| <li><i class="icon-asterisk"></i> No Support</li> | |
| <li><i class="icon-heart"></i> Fusce condimentum</li> | |
| <li><i class="icon-star"></i> Ut non libero</li> | |
| <li><i class="icon-shopping-cart"></i> 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> | |
| <button type="submit">Order Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6"> | |
| <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><i class="icon-tags"></i> At vero eos</li> | |
| <li><i class="icon-asterisk"></i> No Support</li> | |
| <li><i class="icon-heart"></i> Fusce condimentum</li> | |
| <li><i class="icon-star"></i> Ut non libero</li> | |
| <li><i class="icon-shopping-cart"></i> 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> | |
| <button type="submit">Order Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment