Все о InstantCMS Все о InstantCMS

Standard

10 Ne jmisya a pokupai
  • 50GB Disk Space
  • 50 Email Accounts
  • 50GB Monthly Bandwidth
  • 10 Subdomains
  • 50 Domains

Business

20 Ne jmisya a pokupai
  • 70GB Disk Space
  • 70 Email Accounts
  • 70GB Monthly Bandwidth
  • 20 Subdomains
  • 70 Domains

Premium

30 Ne jmisya a pokupai
  • 80GB Disk Space
  • 80 Email Accounts
  • 80GB Monthly Bandwidth
  • 30 Subdomains
  • 80 Domains

Extra

40 Ne jmisya a pokupai
  • 90GB Disk Space
  • 90 Email Accounts
  • 90GB Monthly Bandwidth
  • 40 Subdomains
  • 90 Domains

Ценовая таблица из 4 прайсов

Ценовая таблица из 4 прайсов с рублевыми иконками. Готовый сниппет ценовой таблицы состоящей из 4 адаптивных прайсов зелёного цвета сделанных для Bootstrap.

Код - надо вставить в виджет HTML
  1. <link rel="stylesheet" href="/templates/modern/svit/font/css/font-awesome.min.css" />
  2. <style>
  3. .pricingTable{
  4. border: 1px solid #dbdbdb;
  5. box-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
  6. border-radius: 10px;
  7. text-align: center;
  8. }
  9. .pricingTable .pricingTable-header{
  10. background-color: #f5f5f5;
  11. color:#fff;
  12. padding-bottom: 25px;
  13. }
  14. .pricingTable-header .heading{
  15. background-color: #82b440;
  16. display: block;
  17. padding: 15px 10px;
  18. transition:0.4s ease-in-out;
  19. }
  20. .pricingTable:hover .heading{
  21. background-color: #419e00;
  22. }
  23. .pricingTable .heading h3{
  24. font-weight:bold;
  25. margin: 0;
  26. text-transform: uppercase;
  27. }
  28. .pricingTable-header .price-value {
  29. display: block;
  30. font-size: 25px;
  31. font-weight: 800;
  32. color: #474747;
  33. line-height: 35px;
  34. margin-top: 10px;
  35. padding: 20px 10px 0;
  36. }
  37. .pricingTable .price-value span{
  38. font-size: 60px;
  39. font-weight: 100;
  40. }
  41. .pricingTable .subtitle{
  42. font-size: 13px;
  43. color: #262626;
  44. margin-top: 15px;
  45. display: block;
  46. }
  47. .pricingTable .pricingContent ul{
  48. list-style: none;
  49. padding: 0;
  50. margin-bottom: 0;
  51. }
  52. .pricingTable .pricingContent ul li{
  53. border-top: 1px solid #dbdbdb;
  54. padding: 10px 0;
  55. background-color: #f7fff7;
  56. }
  57. .pricingTable .pricingContent ul li:nth-child(odd) {
  58. background-color: #fff;
  59. }
  60. .pricingContent ul li:last-child{
  61. border-bottom: 1px solid #dbdbdb;
  62. }
  63. .pricingTable .pricingTable-sign-up{
  64. padding: 25px 0;
  65. }
  66. .pricingTable .btn-block{
  67. background: #82b440;
  68. border:0px none;
  69. border-radius: 5px;
  70. color:#fff;
  71. width: 50%;
  72. padding: 10px 5px;
  73. margin: 0 auto;
  74. text-transform: capitalize;
  75. transition:0.3s ease;
  76. }
  77. .pricingTable .btn-block:after{
  78. content: "\f090";
  79. font-family: 'FontAwesome';
  80. font-size: 15px;
  81. padding-left: 10px;
  82. }
  83. .pricingTable .btn-block:hover{
  84. background: #419e00;
  85. color:#fff;
  86. }
  87. @media screen and (max-width:990px){
  88. .pricingTable{
  89. margin-bottom: 20px;
  90. }
  91. }
  92. </style>
  93.  
  94. <div class="container">
  95. <div class="row">
  96.  
  97. <div class="col-md-3 col-sm-6">
  98. <div class="pricingTable">
  99. <div class="pricingTable-header">
  100. <span class="heading">
  101. <h3>Standard</h3>
  102. </span>
  103. <span class="price-value"><i class="fa fa-rub"></i><span>10</span></span>
  104. <span class="subtitle">Ne jmisya a pokupai</span>
  105. </div>
  106.  
  107. <div class="pricingContent">
  108. <ul>
  109. <li><b>50GB</b> Disk Space</li>
  110. <li><b>50</b> Email Accounts</li>
  111. <li><b>50GB</b> Monthly Bandwidth</li>
  112. <li><b>10</b> Subdomains</li>
  113. <li><b>50</b> Domains</li>
  114. </ul>
  115. </div>
  116.  
  117. <div class="pricingTable-sign-up">
  118. <a href="#" class="btn btn-block btn-default">sign up</a>
  119. </div>
  120. </div>
  121. </div>
  122.  
  123. <div class="col-md-3 col-sm-6">
  124. <div class="pricingTable">
  125. <div class="pricingTable-header">
  126. <span class="heading">
  127. <h3>Business</h3>
  128. </span>
  129. <span class="price-value"><i class="fa fa-rub"></i><span>20</span></span>
  130. <span class="subtitle">Ne jmisya a pokupai</span>
  131. </div>
  132.  
  133. <div class="pricingContent">
  134. <ul>
  135. <li><b>70GB</b> Disk Space</li>
  136. <li><b>70</b> Email Accounts</li>
  137. <li><b>70GB</b> Monthly Bandwidth</li>
  138. <li><b>20</b> Subdomains</li>
  139. <li><b>70</b> Domains</li>
  140. </ul>
  141. </div>
  142.  
  143. <div class="pricingTable-sign-up">
  144. <a href="#" class="btn btn-block btn-default">sign up</a>
  145. </div>
  146. </div>
  147. </div>
  148.  
  149. <div class="col-md-3 col-sm-6">
  150. <div class="pricingTable">
  151. <div class="pricingTable-header">
  152. <span class="heading">
  153. <h3>Premium</h3>
  154. </span>
  155. <span class="price-value"><i class="fa fa-rub"></i><span>30</span></span>
  156. <span class="subtitle">Ne jmisya a pokupai</span>
  157. </div>
  158.  
  159. <div class="pricingContent">
  160. <ul>
  161. <li><b>80GB</b> Disk Space</li>
  162. <li><b>80</b> Email Accounts</li>
  163. <li><b>80GB</b> Monthly Bandwidth</li>
  164. <li><b>30</b> Subdomains</li>
  165. <li><b>80</b> Domains</li>
  166. </ul>
  167. </div>
  168.  
  169. <div class="pricingTable-sign-up">
  170. <a href="#" class="btn btn-block btn-default">sign up</a>
  171. </div>
  172. </div>
  173. </div>
  174.  
  175. <div class="col-md-3 col-sm-6">
  176. <div class="pricingTable">
  177. <div class="pricingTable-header">
  178. <span class="heading">
  179. <h3>Extra</h3>
  180. </span>
  181. <span class="price-value"><i class="fa fa-rub"></i><span>40</span></span>
  182. <span class="subtitle">Ne jmisya a pokupai</span>
  183. </div>
  184.  
  185. <div class="pricingContent">
  186. <ul>
  187. <li><b>90GB</b> Disk Space</li>
  188. <li><b>90</b> Email Accounts</li>
  189. <li><b>90GB</b> Monthly Bandwidth</li>
  190. <li><b>40</b> Subdomains</li>
  191. <li><b>90</b> Domains</li>
  192. </ul>
  193. </div>
  194.  
  195. <div class="pricingTable-sign-up">
  196. <a href="#" class="btn btn-block btn-default">sign up</a>
  197. </div>
  198. </div>
  199. </div>
  200.  
  201. </div><!-- ./row -->
  202. </div>
00:40
50
Нет комментариев. Ваш будет первым!
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.