Все о InstantCMS Все о InstantCMS

Анимированные блоки

Любой текст!

Рыбатекст используется дизайнерами, проектировщиками и фронтендерами, когда нужно быстро заполнить макеты или прототипы содержимым.

$129

  • All Widgets
  • Unlimited Section
  • 300 Line Icon
  • Support 24x7
  • Updates for 1 year

Любой текст!!

Рыбатекст используется дизайнерами, проектировщиками и фронтендерами, когда нужно быстро заполнить макеты или прототипы содержимым.

$149

  • All Widgets
  • Unlimited Section
  • 400 Line Icon
  • Support 24x7
  • Updates for 2 year

Что угодно!

Рыбатекст используется дизайнерами, проектировщиками и фронтендерами, когда нужно быстро заполнить макеты или прототипы содержимым.

$169

  • All Widgets
  • Unlimited Section
  • 500+ Line Icon
  • Support 24x7
  • Lifetime Update

Анимированные блоки

Анимированные блоки для Инстант

Код - надо вставить в виджет HTML
  1. <div class="container">
  2. <center class="mt-4 mb-4">
  3. <h2>Анимированные блоки</h2>
  4. </center>
  5. <section class="section-tours">
  6. <div class="row">
  7. <div class="col-lg-4 mb-4">
  8. <div class="my-flip-container">
  9. <div class="my-flip-inner my-flip-right">
  10. <div class="my-flip-inner-wrapper">
  11. <div class="my-flip-side my-flip-front">
  12. <div class="my-flip-image my-flip-image--1">
  13. <img src="/templates/modern/svit/images/1.jpg">
  14. </div>
  15. <div class="my-flip-details">
  16. <h4 class="my-flip-heading">Любой текст!</h4>
  17. <div class="my-flip-text">
  18. <p>Рыбатекст используется дизайнерами, проектировщиками и фронтендерами, когда нужно быстро заполнить макеты или прототипы содержимым. </p>
  19. </div>
  20. </div>
  21. </div>
  22. <div class="my-flip-side my-flip-back my-flip-back-1">
  23. <div class="my-flip-back-inner">
  24. <div class="my-flip-price">
  25. <h3>$129</h3>
  26. </div>
  27. <div class="my-flip-back-text">
  28. <ul>
  29. <li>All Widgets</li>
  30. <li>Unlimited Section</li>
  31. <li>300 Line Icon</li>
  32. <li>Support 24x7</li>
  33. <li>Updates for 1 year</li>
  34. </ul>
  35. </div>
  36. <div class="my-flip-btn-box"><a href="#0" class="my-flip-btn">Book Now</a></div>
  37. </div>
  38. </div>
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. <div class="col-lg-4 mb-4">
  44. <div class="my-flip-container">
  45. <div class="my-flip-inner my-flip-right">
  46. <div class="my-flip-inner-wrapper">
  47. <div class="my-flip-side my-flip-front">
  48. <div class="my-flip-image my-flip-image--2">
  49. <img src="/templates/modern/svit/images/1.jpg">
  50. </div>
  51. <div class="my-flip-details">
  52. <h4 class="my-flip-heading">Любой текст!!</h4>
  53. <div class="my-flip-text">
  54. <p>Рыбатекст используется дизайнерами, проектировщиками и фронтендерами, когда нужно быстро заполнить макеты или прототипы содержимым. </p>
  55. </div>
  56. </div>
  57. </div>
  58. <div class="my-flip-side my-flip-back my-flip-back-2">
  59. <div class="my-flip-back-inner">
  60. <div class="my-flip-price">
  61. <h3>$149</h3>
  62. </div>
  63. <div class="my-flip-back-text">
  64. <ul>
  65. <li>All Widgets</li>
  66. <li>Unlimited Section</li>
  67. <li>400 Line Icon</li>
  68. <li>Support 24x7</li>
  69. <li>Updates for 2 year</li>
  70. </ul>
  71. </div>
  72. <div class="my-flip-btn-box"><a href="#0" class="my-flip-btn">Book Now</a></div>
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. <div class="col-lg-4 mb-4">
  80. <div class="my-flip-container">
  81. <div class="my-flip-inner my-flip-right">
  82. <div class="my-flip-inner-wrapper">
  83. <div class="my-flip-side my-flip-front">
  84. <div class="my-flip-image my-flip-image--3">
  85. <img src="/templates/modern/svit/images/1.jpg">
  86. </div>
  87. <div class="my-flip-details">
  88. <h4 class="my-flip-heading">Что угодно!</h4>
  89. <div class="my-flip-text">
  90. <p>Рыбатекст используется дизайнерами, проектировщиками и фронтендерами, когда нужно быстро заполнить макеты или прототипы содержимым. </p>
  91. </div>
  92. </div>
  93. </div>
  94. <div class="my-flip-side my-flip-back my-flip-back-3">
  95. <div class="my-flip-back-inner">
  96. <div class="my-flip-price">
  97. <h3>$169</h3>
  98. </div>
  99. <div class="my-flip-back-text">
  100. <ul>
  101. <li>All Widgets</li>
  102. <li>Unlimited Section</li>
  103. <li>500+ Line Icon</li>
  104. <li>Support 24x7</li>
  105. <li>Lifetime Update</li>
  106. </ul>
  107. </div>
  108. <div class="my-flip-btn-box"><a href="#0" class="my-flip-btn">Book Now</a></div>
  109. </div>
  110. </div>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115. </div>
  116. </section>
  117. </div>
  118. <style>
  119. a:hover{
  120. text-decoration: none;
  121. }
  122.  
  123. .my-flip-inner-wrapper {
  124. perspective: 150rem;
  125. -moz-perspective: 150rem;
  126. position: relative;
  127. }
  128. .my-flip-side {
  129. display: block;
  130. height: 500px;
  131. top: 0;
  132. right: 0;
  133. left: 0;
  134. box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
  135. transition: all .8s ease;
  136. -webkit-backface-visibility: hidden;
  137. backface-visibility: hidden;
  138. }
  139.  
  140. .my-flip-back {
  141. transform: rotateY(180deg);
  142. color: #fff;
  143. position: absolute;
  144. z-index: -1;
  145. box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
  146. padding: 46px;
  147. }
  148.  
  149. .my-flip-back-1 {
  150. background: linear-gradient(to right bottom, #ffb900, #ff7730);
  151. }
  152.  
  153. .my-flip-back-2 {
  154. background: linear-gradient(to right bottom, #000428, #004e92);
  155. }
  156.  
  157. .my-flip-back-3 {
  158. background: linear-gradient(to right bottom, #2998ff, #5643fa);
  159. }
  160.  
  161. .my-flip-inner-wrapper:hover .my-flip-front {
  162. transform: rotateY(-180deg);
  163. }
  164.  
  165. .my-flip-inner-wrapper:hover .my-flip-back {
  166. transform: rotateY(0);
  167. }
  168. .my-flip-image {
  169. height: 15rem;
  170. background-blend-mode: screen;
  171. clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  172. }
  173. .my-flip-image img{
  174. width: 100%;
  175. height: 100%;
  176. background-blend-mode: screen;
  177. object-fit: cover;
  178. }
  179. .my-flip-heading {
  180. margin: 0 0 15px;
  181. }
  182. .my-flip-details {
  183. padding: 2rem;
  184. }
  185. .my-flip-details p {
  186. font-size: 15px;
  187. margin: 0;
  188. line-height: 2;
  189. color: #848484;
  190. }
  191. .my-flip-back-inner ul {
  192. list-style: none;
  193. margin: 0 0 1.5rem;
  194. padding: 0;
  195. }
  196. .my-flip-back-text ul li {
  197. text-align: center;
  198. color:#fff;
  199. font-size: 1rem;
  200. padding: 0.8rem 0;
  201. }
  202. .my-flip-back-inner ul li:not(:last-child) {
  203. border-bottom: 1px solid #ffffff;
  204. }
  205. .my-flip-price {
  206. color: #fff;
  207. text-align: center;
  208. margin-bottom: 1rem;
  209. }
  210. .my-flip-price h3 {
  211. font-size: 3rem;
  212. font-weight: 300;
  213. }
  214. .my-flip-btn-box {
  215. text-align: center;
  216. }
  217. .my-flip-btn{
  218. text-transform: uppercase;
  219. padding: 1rem 1.8rem;
  220. font-size: 1rem;
  221. background-color: #fff;
  222. color: #000;
  223. border-radius: 10rem;
  224. display: inline-block;
  225. transition: all .2s;
  226. color: initial;
  227. position: relative;
  228. }
  229. .my-flip-btn:hover {
  230. transform: translateY(-4px);
  231. box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
  232. color: #000;
  233. }
  234. </style>
01:39
146
Нет комментариев. Ваш будет первым!
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.