Foundation zurb snippet: Pricing box

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: pricing



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css" /> <div class="row margin-b-30"> <div class="large-3 columns margin-b-30 fadeInLeft animated"> <div class="price-box"> <h3>Support </h3> <h4>free<span>Life time</span></h4> <ul class="list-unstyled"> <li><i class="fa fa-tags"></i> At verso perso</li> <li><i class="fa fa-cogs"></i> Basic support</li> <li><i class="fa fa-heart"></i> accumbad nurso</li> <li><i class="fa fa-star"></i> consuct elit amet</li> <li><i class="fa fa-shopping-cart"></i> nota idlia aremd</li> </ul> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna psum olor . </p> <a href="#" class="button success">Purchase Now <i class="fa fa-shopping-cart"></i></a> </div> </div><!--col--> <div class="large-3 columns margin-b-30 fadeInLeft animated"> <div class="price-box popular"> <h3>Single </h3> <h4><sup>$</sup>18.00<span>Per Month</span></h4> <ul class="list-unstyled"> <li><i class="fa fa-tags"></i> At verso perso</li> <li><i class="fa fa-cogs"></i> Basic support</li> <li><i class="fa fa-heart"></i> accumbad nurso</li> <li><i class="fa fa-star"></i> consuct elit amet</li> <li><i class="fa fa-shopping-cart"></i> nota idlia aremd</li> </ul> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna psum olor . </p> <a href="#" class="button success">Purchase Now <i class="fa fa-shopping-cart"></i></a> </div> </div><!--col--> <div class="large-3 columns margin-b-30 fadeInLeft animated"> <div class="price-box"> <h3>Multiple </h3> <h4><sup>$</sup>99.99<span>Per Month</span></h4> <ul class="list-unstyled"> <li><i class="fa fa-tags"></i> At verso perso</li> <li><i class="fa fa-cogs"></i> Basic support</li> <li><i class="fa fa-heart"></i> accumbad nurso</li> <li><i class="fa fa-star"></i> consuct elit amet</li> <li><i class="fa fa-shopping-cart"></i> nota idlia aremd</li> </ul> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna psum olor . </p> <a href="#" class="button success">Purchase Now <i class="fa fa-shopping-cart"></i></a> </div> </div><!--col--> <div class="large-3 columns margin-b-30 fadeInLeft animated"> <div class="price-box"> <h3>Extended </h3> <h4><sup>$</sup>799<span>Per Month</span></h4> <ul class="list-unstyled"> <li><i class="fa fa-tags"></i> At verso perso</li> <li><i class="fa fa-cogs"></i> Basic support</li> <li><i class="fa fa-heart"></i> accumbad nurso</li> <li><i class="fa fa-star"></i> consuct elit amet</li> <li><i class="fa fa-shopping-cart"></i> nota idlia aremd</li> </ul> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna psum olor . </p> <a href="#" class="button success">Purchase Now <i class="fa fa-shopping-cart"></i></a> </div> </div><!--col--> </div>
body{margin-top:20px;} /********* Pricing tables **********/ .price-box{ box-shadow: 1px 2px 15px rgba(0,0,0,0.2); -webkit-box-shadow: 1px 2px 15px rgba(0,0,0,0.2); transition: all 0.3s; -webkit-transition: all 0.3s; text-align: center; padding-bottom: 20px; border: 1px solid #ddd; } .price-box.popular h3{ background-color: #7bae17; color:#fff; } .price-box:hover{ box-shadow: none; -webit-box-shadow: none; } .price-box h3{ color:#000; background-color: #f5f5f5; text-transform: uppercase; padding: 20px; margin-bottom: 0px; font-weight: 700; } .price-box h4{ font-size: 40px; font-weight: 700; background-color: #fff; padding: 10px; } .price-box h4 sup, .price-box h4 sub{ font-size: 12px; } .price-box h4 sup{ vertical-align: top; top: 9px; font-weight: 400; } .price-box h4 sub{ vertical-align: bottom; bottom: 7px; left: -9px; font-weight: 400; } .price-box h4 span{ display: block; font-size: 13px; color:#7bae17; font-weight: 600; margin-top: 5px; } .price-box ul{ text-align: left; } .price-box ul li{ padding: 8px 25px; font-weight: 400; border-bottom: 1px solid #eee; } .price-box ul li i{ color:#7bae17; margin-right: 10px; } .price-box p{ padding: 20px 25px; font-size: 12px; line-height: 18px; } /**dark price**/ .price-box.dark{ background-color: #344154; } .price-box.dark h4, .price-box.dark h3{ color:#fff; background-color: #344154; } .price-box.dark.popular h3{ background-color: #7bae17; } .price-box.dark ul li{ border-bottom-color:rgba(255,255,255,0.1); color:#aaa; } .list-unstyled { padding-left: 0; list-style: none; }
Dey-Dey

Pricing box

Dey-Dey
  May 15th, 20:39
53 Views