Advertisement
kobial8

Pricing Table | CSS Code

Feb 27th, 2015
236
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.92 KB | None | 0 0
  1. #pricing {
  2.   padding: 100px 0 70px;
  3. }
  4. #pricing ul.pricing {
  5.   list-style: none;
  6.   padding: 0;
  7.   margin: 70px 0 30px;
  8.   border: 1px solid #eee;
  9.   border-radius: 5px 5px 4px 4px;
  10.   padding: 15px;
  11.   text-align: center;
  12.   background: #2c3e50;
  13.   color: #ffffff;
  14. }
  15. #pricing ul.pricing li {
  16.   display: block;
  17.   padding: 10px;
  18. }
  19. #pricing ul.pricing li.plan-header {
  20.   background: #eee;
  21.   border-radius: 4px 4px 0 0;
  22.   margin: -15px -15px 10px;
  23.   padding: 15px 15px 30px;
  24.   border: 0;
  25.   background: #ea9d21;
  26. }
  27. #pricing ul.pricing li.plan-header .price-duration {
  28.   position: relative;
  29.   margin-top: -63px;
  30.   top: -10px;
  31.   display: inline-block;
  32.   width: 116px;
  33.   height: 116px;
  34.   background-image: -moz-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
  35.   background-image: -webkit-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
  36.   background-image: -ms-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
  37.   color: #fff;
  38.   border-radius: 100px;
  39.   border: 5px solid #f6f6f6;
  40. }
  41. #pricing ul.pricing li.plan-header .price-duration > span {
  42.   display: block;
  43.   line-height: 1;
  44. }
  45. #pricing ul.pricing li.plan-header .price-duration > span.price {
  46.   font-size: 24px;
  47.   font-weight: 700;
  48.   margin-top: 35px;
  49. }
  50. #pricing ul.pricing li.plan-header .price-duration > span.duration {
  51.   margin-top: 5px;
  52. }
  53. #pricing ul.pricing li.plan-header .plan-name {
  54.   margin-top: 10px;
  55.   font-size: 24px;
  56.   color: #272727;
  57.   font-weight: bold;
  58.   line-height: 1;
  59.   text-transform: uppercase;
  60. }
  61. #pricing ul.pricing.featured {
  62.   background: #222534;
  63.   color: #fff;
  64.   border: 0;
  65. }
  66. #pricing ul.pricing.featured li.plan-header {
  67.   background-image: -moz-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
  68.   background-image: -webkit-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
  69.   background-image: -ms-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
  70. }
  71. #pricing ul.pricing.featured li.plan-header .plan-name {
  72.   color: #fff;
  73. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement