Все о InstantCMS Все о InstantCMS

Почему мы?

Lorem ipsum dolor sit amet, consectetur adipisicing elit

design

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi.

development

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi.

branding

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi.

database

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi.

app

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi.

support

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi.

Блок преимуществ на Bootstrap

Удобный блок преимуществ на Bootstrap для ваших проектов на Инстант

Код - надо вставить в виджет HTML
  1. <link href="/templates/modern/svit/font/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  2. <body>
  3. <section class="services-area pt-100 pb-70" id="services">
  4. <div class="container">
  5. <div class="row">
  6. <div class="col-xl-8 mx-auto text-center">
  7. <div class="section-title">
  8. <h4>Почему мы?</h4>
  9. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  10. </div>
  11. </div>
  12. </div>
  13. <div class="row">
  14. <div class="col-lg-4 col-md-6">
  15. <div class="single-service">
  16. <i class="fa fa-dribbble"></i>
  17. <h4>design</h4>
  18. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi. </p>
  19. </div>
  20. </div>
  21. <div class="col-lg-4 col-md-6">
  22. <div class="single-service">
  23. <i class="fa fa-code"></i>
  24. <h4>development</h4>
  25. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi. </p>
  26. </div>
  27. </div>
  28. <div class="col-lg-4 col-md-6">
  29. <div class="single-service">
  30. <i class="fa fa-clone"></i>
  31. <h4>branding</h4>
  32. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi. </p>
  33. </div>
  34. </div>
  35. <div class="col-lg-4 col-md-6">
  36. <div class="single-service">
  37. <i class="fa fa-rocket"></i>
  38. <h4>database</h4>
  39. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi. </p>
  40. </div>
  41. </div>
  42. <div class="col-lg-4 col-md-6">
  43. <div class="single-service">
  44. <i class="fa fa-camera"></i>
  45. <h4>app</h4>
  46. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi. </p>
  47. </div>
  48. </div>
  49. <div class="col-lg-4 col-md-6">
  50. <div class="single-service">
  51. <i class="fa fa-clock-o"></i>
  52. <h4>support</h4>
  53. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi. </p>
  54. </div>
  55. </div>
  56. </div>
  57. </div>
  58. </section>
  59. </body>
  60. <style>
  61. .pt-100 {
  62. padding-top: 100px;
  63. }
  64. .pb-100 {
  65. padding-bottom: 100px;
  66. }
  67. .services-area {
  68. background-color: #f6f6f6;
  69. }
  70. .section-title {
  71. margin-bottom: 60px;
  72. }
  73. .section-title p {
  74. color: #777;
  75. font-size: 16px;
  76. }
  77. .section-title h4 {
  78. text-transform: capitalize;
  79. font-size: 40px;
  80. position: relative;
  81. padding-bottom: 20px;
  82. margin-bottom: 20px;
  83. font-weight: 600;
  84. }
  85. .section-title h4:before {
  86. position: absolute;
  87. content: "";
  88. width: 60px;
  89. height: 2px;
  90. background-color: #ff3636;
  91. bottom: 0;
  92. left: 50%;
  93. margin-left: -30px;
  94. }
  95. .section-title h4:after {
  96. position: absolute;
  97. background-color: #ff3636;
  98. content: "";
  99. width: 10px;
  100. height: 10px;
  101. bottom: -4px;
  102. left: 50%;
  103. margin-left: -5px;
  104. border-radius: 50%;
  105. }
  106. .single-service {
  107. border: 1px solid #eee;
  108. padding: 30px 10px;
  109. position: relative;
  110. text-align: center;
  111. margin-bottom: 30px;
  112. }
  113. .single-service i.fa {
  114. width: 60px;
  115. height: 60px;
  116. background-color: #ff3636;
  117. font-size: 25px;
  118. color: #fff;
  119. line-height: 60px;
  120. text-align:center;
  121. margin-bottom:20px;
  122. }
  123. .single-service i.fa {
  124. -webkit-transition: .4s;
  125. transition: .4s;
  126. }
  127. .single-service:hover i.fa {
  128. border-radius: 50%;
  129. }
  130. .single-service h4 {
  131. text-transform: capitalize;
  132. font-size: 22px;
  133. margin-bottom: 10px;
  134. font-weight: 500;
  135. }
  136. </style>
03:03
56
Нет комментариев. Ваш будет первым!
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.