Все о InstantCMS Все о InstantCMS

Первый Блок

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

Второй Блок

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

Третий Блок

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

Четвертый Блок

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

Четыре адаптивных блока

Код - надо вставить в виджет HTML
  1. <link rel="stylesheet" href="/templates/modern/svit/font/css/font-awesome.min.css" />
  2. <style>
  3. .wrap {
  4. display: flex;
  5. background: white;
  6. padding: 1rem 1rem 1rem 1rem;
  7. border-radius: 0.5rem;
  8. box-shadow: 7px 7px 30px -5px rgba(0,0,0,0.1);
  9. margin-bottom: 2rem;
  10. }
  11.  
  12. .wrap:hover {
  13. background: linear-gradient(135deg,#6394ff 0%,#0a193b 100%);
  14. color: white;
  15. }
  16.  
  17. .ico-wrap {
  18. margin: auto;
  19. }
  20.  
  21. .mbr-iconfont {
  22. font-size: 4.5rem !important;
  23. color: #313131;
  24. margin: 1rem;
  25. padding-right: 1rem;
  26. }
  27. .vcenter {
  28. margin: auto;
  29. }
  30.  
  31. .mbr-section-title3 {
  32. text-align: left;
  33. }
  34. h2 {
  35. margin-top: 0.5rem;
  36. margin-bottom: 0.5rem;
  37. }
  38. .display-5 {
  39. font-family: 'Source Sans Pro',sans-serif;
  40. font-size: 1.4rem;
  41. }
  42. .mbr-bold {
  43. font-weight: 700;
  44. }
  45.  
  46. p {
  47. padding-top: 0.5rem;
  48. padding-bottom: 0.5rem;
  49. line-height: 25px;
  50. }
  51. .display-6 {
  52. font-family: 'Source Sans Pro',sans-serif;
  53. font-size: 1re}
  54. </style>
  55.  
  56. <!------ Include the above in your HEAD tag ---------->
  57. <section>
  58. <div class="container">
  59.  
  60.  
  61. <div class="row mbr-justify-content-center">
  62.  
  63. <div class="col-lg-6 mbr-col-md-10">
  64. <div class="wrap">
  65. <div class="ico-wrap">
  66. <span class="mbr-iconfont fa-volume-up fa"></span>
  67. </div>
  68. <div class="text-wrap vcenter">
  69. <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Первый <span>Блок</span></h2>
  70. <p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
  71. </div>
  72. </div>
  73. </div>
  74. <div class="col-lg-6 mbr-col-md-10">
  75. <div class="wrap">
  76. <div class="ico-wrap">
  77. <span class="mbr-iconfont fa-calendar fa"></span>
  78. </div>
  79. <div class="text-wrap vcenter">
  80. <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Второй
  81. <span>Блок</span>
  82. </h2>
  83. <p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
  84. </div>
  85. </div>
  86. </div>
  87. <div class="col-lg-6 mbr-col-md-10">
  88. <div class="wrap">
  89. <div class="ico-wrap">
  90. <span class="mbr-iconfont fa-globe fa"></span>
  91. </div>
  92. <div class="text-wrap vcenter">
  93. <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Третий
  94. <span>Блок</span>
  95. </h2>
  96. <p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
  97. </div>
  98. </div>
  99. </div>
  100. <div class="col-lg-6 mbr-col-md-10">
  101. <div class="wrap">
  102. <div class="ico-wrap">
  103. <span class="mbr-iconfont fa-trophy fa"></span>
  104. </div>
  105. <div class="text-wrap vcenter">
  106. <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Четвертый <span>Блок</span></h2>
  107. <p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
  108. </div>
  109. </div>
  110. </div>
  111. </div>
  112. </div>
  113. </section>
01:38
148
Нет комментариев. Ваш будет первым!
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.