Все о InstantCMS Все о InstantCMS

пример текста

ПРАЙС ЛИСТ

Lorem Ipsum is simply dummy text of the printing and typesetting.

standard

25₽ руб.

  • 100GB Monthly Bandwidth
  • 100 Google AdWords
  • 100 Domain Hosting
  • SSL Shopping Cart
  • 24/7 Live Support
purchase now

professional

125₽ руб.

  • 100GB Monthly Bandwidth
  • 100 Google AdWords
  • 100 Domain Hosting
  • SSL Shopping Cart
  • 24/7 Live Support
purchase now

business

225₽ руб.

  • 100GB Monthly Bandwidth
  • 100 Google AdWords
  • 100 Domain Hosting
  • SSL Shopping Cart
  • 24/7 Live Support
purchase now

Теплица прайсов из 3 блоков bootstrap

Теплица прайсов из 3 блоков. Очень удобно использовать для своих проектов на Инстант.

Код - надо вставить в виджет HTML
  1. <link rel="stylesheet" href="/templates/modern/svit/font/css/font-awesome.min.css" />
  2. <script src="/templates/admincoreui/js/vendors/bootstrap/js/bootstrap.min.js"></script>
  3.  
  4. <script src="/templates/admincoreui/js/vendors/jquery/js/jquery.min.js"></script>
  5. <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,800,900%7cRaleway:300,400,500,600,700" rel="stylesheet">
  6. <section class="pricing-area pt-100 pb-100" id="pricing">
  7. <div class="container">
  8. <div class="row">
  9. <div class="col-xl-8 mx-auto text-center">
  10. <div class="section-title">
  11. <h4>пример текста</h4>
  12. <h2>ПРАЙС ЛИСТ</h2>
  13. <p>Lorem Ipsum is simply dummy text of the printing and typesetting.</p>
  14. </div>
  15. </div>
  16. </div>
  17. <div class="row">
  18. <div class="col-xl-4">
  19. <div class="single-price">
  20. <div class="price-title">
  21. <h4>standard</h4>
  22. </div>
  23. <div class="price-tag">
  24. <h2>25<span>руб.</span></h2>
  25. </div>
  26. <div class="price-item">
  27. <ul>
  28. <li>100GB Monthly Bandwidth</li>
  29. <li>100 Google AdWords</li>
  30. <li>100 Domain Hosting</li>
  31. <li>SSL Shopping Cart</li>
  32. <li>24/7 Live Support</li>
  33. </ul>
  34. </div>
  35. <a href="" class="box-btn">purchase now</a>
  36. </div>
  37. </div>
  38. <div class="col-xl-4">
  39. <div class="single-price">
  40. <div class="price-title">
  41. <h4>professional</h4>
  42. </div>
  43. <div class="price-tag center">
  44. <h2>125<span>руб.</span></h2>
  45. </div>
  46. <div class="price-item">
  47. <ul>
  48. <li>100GB Monthly Bandwidth</li>
  49. <li>100 Google AdWords</li>
  50. <li>100 Domain Hosting</li>
  51. <li>SSL Shopping Cart</li>
  52. <li>24/7 Live Support</li>
  53. </ul>
  54. </div>
  55. <a href="" class="box-btn">purchase now</a>
  56. </div>
  57. </div>
  58. <div class="col-xl-4">
  59. <div class="single-price">
  60. <div class="price-title">
  61. <h4>business</h4>
  62. </div>
  63. <div class="price-tag">
  64. <h2>225<span>руб.</span></h2>
  65. </div>
  66. <div class="price-item">
  67. <ul>
  68. <li>100GB Monthly Bandwidth</li>
  69. <li>100 Google AdWords</li>
  70. <li>100 Domain Hosting</li>
  71. <li>SSL Shopping Cart</li>
  72. <li>24/7 Live Support</li>
  73. </ul>
  74. </div>
  75. <a href="" class="box-btn">purchase now</a>
  76. </div>
  77. </div>
  78. </div>
  79. </div>
  80. </section>
  81. <style>
  82. .pb-100 {
  83. padding-bottom: 100px;
  84. }
  85. .pt-100 {
  86. padding-top: 100px;
  87. }
  88. a{
  89. text-decoration:none;
  90. }
  91. .section-title h4 {
  92. font-size: 14px;
  93. font-weight: 500;
  94. color: #777;
  95. }
  96. .section-title h2 {
  97. font-size: 32px;
  98. text-transform: capitalize;
  99. margin: 15px 0;
  100. display: inline-block;
  101. position: relative;
  102. font-weight: 700;
  103. padding-bottom: 15px;
  104. letter-spacing: 1px;
  105. text-transform: uppercase;
  106. }
  107. .section-title p {
  108. font-weight: 300;
  109. font-size: 14px;
  110. }
  111. .black-bg .section-title h2, .black-bg .section-title h4, .black-bg .section-title p {
  112. color:#fff
  113. }
  114. .section-title h2:before {
  115. position: absolute;
  116. content: "";
  117. width: 150px;
  118. height: 1px;
  119. background-color: #777;
  120. bottom: 0;
  121. left: 50%;
  122. margin-left: -75px;
  123. }
  124. .section-title h2:after {
  125. position: absolute;
  126. content: "";
  127. width: 80px;
  128. height: 3px;
  129. background-color: #e16038;
  130. border: darkblue;
  131. bottom: -1px;
  132. left: 50%;
  133. margin-left: -40px;
  134. }
  135. .section-title {
  136. margin-bottom: 70px;
  137. }
  138. .single-price {
  139. text-align: center;
  140. padding: 30px;
  141. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  142. }
  143. .price-title h4 {
  144. font-size: 24px;
  145. text-transform: uppercase;
  146. font-weight: 600;
  147. }
  148. .price-tag {
  149. margin: 30px 0;
  150. }
  151. .price-tag {
  152. margin: 30px 0;
  153. background-color: #fafafa;
  154. color: #000;
  155. padding: 10px 0;
  156. }
  157. .center.price-tag {
  158. background-color: tomato;
  159. color:#fff
  160. }
  161. .price-tag h2 {
  162. font-size: 45px;
  163. font-weight: 600;
  164. font-family: poppins;
  165. }
  166. .price-tag h2 span {
  167. font-weight: 300;
  168. font-size: 16px;
  169. font-style: italic;
  170. }
  171. .price-item ul {
  172. margin: 0;
  173. padding: 0;
  174. list-style: none;
  175. }
  176. .price-item ul li {
  177. font-size: 14px;
  178. padding: 5px 0;
  179. border-bottom: 1px dashed #eee;
  180. margin: 5px 0;
  181. }
  182. .price-item ul li:last-child {
  183. border-bottom: 0;
  184. }
  185. .single-price a {
  186. margin-top: 15px;
  187. }
  188. a.box-btn {
  189. background-color: tomato;
  190. padding: 5px 20px;
  191. display: inline-block;
  192. color: #fff;
  193. text-transform: capitalize;
  194. border-radius: 3px;
  195. font-size: 15px;
  196. transition: .3s;
  197. }
  198. a.box-btn:hover, a.border-btn:hover {
  199. background-color: #d35400;
  200. }
  201. </style>
10:59
56
Нет комментариев. Ваш будет первым!
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.