Все о InstantCMS Все о InstantCMS
2020

Web Desginer

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

2021

Web Developer

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

2022

Web Desginer

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

2023

Web Developer

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

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

Блок преимуществ на Bootstrap таймлайн для ваших проектов на Инстант. Адаптивный. Скопируй код и вставь в виджет HTML

Код - надо вставить в виджет HTML
  1. <main>
  2. <div class="container">
  3. <div class="row">
  4. <div class="col-md-12">
  5. <div class="main-timeline3">
  6. <div class="timeline">
  7. <div class="timeline-icon"><span class="year">2020</span></div>
  8. <div class="timeline-content">
  9. <h3 class="title">Web Desginer</h3>
  10. <p class="description">
  11. Рыбатекст используется дизайнерами, проектировщиками и фронтендерами, когда нужно быстро заполнить макеты или прототипы содержимым. Это тестовый
  12. </p>
  13. </div>
  14. </div>
  15. <div class="timeline">
  16. <div class="timeline-icon"><span class="year">2021</span></div>
  17. <div class="timeline-content">
  18. <h3 class="title">Web Developer</h3>
  19. <p class="description">
  20. Рыбатекст используется дизайнерами, проектировщиками и фронтендерами, когда нужно быстро заполнить макеты или прототипы содержимым. Это тестовый
  21. </p>
  22. </div>
  23. </div>
  24. <div class="timeline">
  25. <div class="timeline-icon"><span class="year">2022</span></div>
  26. <div class="timeline-content">
  27. <h3 class="title">Web Desginer</h3>
  28. <p class="description">
  29. Рыбатекст используется дизайнерами, проектировщиками и фронтендерами, когда нужно быстро заполнить макеты или прототипы содержимым. Это тестовый
  30. </p>
  31. </div>
  32. </div>
  33. <div class="timeline">
  34. <div class="timeline-icon"><span class="year">2023</span></div>
  35. <div class="timeline-content">
  36. <h3 class="title">Web Developer</h3>
  37. <p class="description">
  38. Рыбатекст используется дизайнерами, проектировщиками и фронтендерами, когда нужно быстро заполнить макеты или прототипы содержимым. Это тестовый
  39. </p>
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. </main>
  47. <style>
  48.  
  49.  
  50. /*timeline3*/
  51.  
  52.  
  53. .main-timeline3 {
  54. overflow: hidden;
  55. position: relative
  56. }
  57.  
  58. .main-timeline3 .timeline {
  59. position: relative;
  60. margin-top: -79px
  61. }
  62.  
  63. .main-timeline3 .timeline:first-child {
  64. margin-top: 0
  65. }
  66.  
  67. .main-timeline3 .timeline-icon,
  68. .main-timeline3 .year {
  69. margin: auto;
  70. position: absolute;
  71. top: 0;
  72. left: 0;
  73. bottom: 0;
  74. right: 0
  75. }
  76.  
  77. .main-timeline3 .timeline:after,
  78. .main-timeline3 .timeline:before {
  79. content: "";
  80. display: block;
  81. width: 100%;
  82. clear: both
  83. }
  84.  
  85. .main-timeline3 .timeline:before {
  86. content: "";
  87. width: 100%;
  88. height: 100%;
  89. position: absolute;
  90. top: 0;
  91. right: 0;
  92. z-index: 2
  93. }
  94.  
  95. .main-timeline3 .timeline-icon {
  96. width: 210px;
  97. height: 210px;
  98. border-radius: 50%;
  99. border: 25px solid transparent;
  100. border-top-color: #f44556;
  101. border-right-color: #f44556;
  102. z-index: 1;
  103. transform: rotate(45deg)
  104. }
  105.  
  106. .main-timeline3 .year {
  107. display: block;
  108. width: 110px;
  109. height: 110px;
  110. line-height: 110px;
  111. border-radius: 50%;
  112. background: #fff;
  113. box-shadow: 0 0 20px rgba(0, 0, 0, .4);
  114. font-size: 30px;
  115. font-weight: 700;
  116. color: #f44556;
  117. text-align: center;
  118. transform: rotate(-45deg)
  119. }
  120.  
  121. .main-timeline3 .timeline-content {
  122. width: 35%;
  123. float: right;
  124. background: #f44556;
  125. padding: 30px 20px;
  126. margin: 50px 0;
  127. box-shadow: 0 10px 25px -10px rgba(72, 29, 99, .3);
  128. z-index: 1;
  129. position: relative
  130. }
  131.  
  132. .main-timeline3 .timeline-content:before {
  133. content: "";
  134. width: 20%;
  135. height: 15px;
  136. background: #f44556;
  137. position: absolute;
  138. top: 50%;
  139. left: -20%;
  140. z-index: -1;
  141. transform: translateY(-50%)
  142. }
  143.  
  144. .main-timeline3 .title {
  145. font-size: 20px;
  146. font-weight: 700;
  147. color: #fff;
  148. margin: 0 0 10px
  149. }
  150.  
  151. .main-timeline3 .description {
  152. font-size: 16px;
  153. color: #fff;
  154. line-height: 24px;
  155. margin: 0
  156. }
  157.  
  158. .main-timeline3 .timeline:nth-child(2n) .timeline-icon {
  159. transform: rotate(-135deg);
  160. border-top-color: #e97e2e;
  161. border-right-color: #e97e2e
  162. }
  163.  
  164. .main-timeline3 .timeline:nth-child(2n) .year {
  165. transform: rotate(135deg);
  166. color: #e97e2e
  167. }
  168.  
  169. .main-timeline3 .timeline:nth-child(2n) .timeline-content {
  170. float: left
  171. }
  172.  
  173. .main-timeline3 .timeline:nth-child(2n) .timeline-content:before {
  174. left: auto;
  175. right: -20%
  176. }
  177.  
  178. .main-timeline3 .timeline:nth-child(2n) .timeline-content,
  179. .main-timeline3 .timeline:nth-child(2n) .timeline-content:before {
  180. background: #e97e2e
  181. }
  182.  
  183. .main-timeline3 .timeline:nth-child(3n) .timeline-icon {
  184. border-top-color: #13afae;
  185. border-right-color: #13afae
  186. }
  187.  
  188. .main-timeline3 .timeline:nth-child(3n) .year {
  189. color: #13afae
  190. }
  191.  
  192. .main-timeline3 .timeline:nth-child(3n) .timeline-content,
  193. .main-timeline3 .timeline:nth-child(3n) .timeline-content:before {
  194. background: #13afae
  195. }
  196.  
  197. .main-timeline3 .timeline:nth-child(4n) .timeline-icon {
  198. border-top-color: #105572;
  199. border-right-color: #105572
  200. }
  201.  
  202. .main-timeline3 .timeline:nth-child(4n) .year {
  203. color: #105572
  204. }
  205.  
  206. .main-timeline3 .timeline:nth-child(4n) .timeline-content,
  207. .main-timeline3 .timeline:nth-child(4n) .timeline-content:before {
  208. background: #105572
  209. }
  210.  
  211. @media only screen and (max-width:1199px) {
  212. .main-timeline3 .timeline {
  213. margin-top: -103px
  214. }
  215. .main-timeline3 .timeline-content:before {
  216. left: -18%
  217. }
  218. .main-timeline3 .timeline:nth-child(2n) .timeline-content:before {
  219. right: -18%
  220. }
  221. }
  222.  
  223. @media only screen and (max-width:990px) {
  224. .main-timeline3 .timeline {
  225. margin-top: -127px
  226. }
  227. .main-timeline3 .timeline-content:before {
  228. left: -2%
  229. }
  230. .main-timeline3 .timeline:nth-child(2n) .timeline-content:before {
  231. right: -2%
  232. }
  233. }
  234.  
  235. @media only screen and (max-width:767px) {
  236. .main-timeline3 .timeline {
  237. margin-top: 0;
  238. overflow: hidden
  239. }
  240. .main-timeline3 .timeline:before,
  241. .main-timeline3 .timeline:nth-child(2n):before {
  242. box-shadow: none
  243. }
  244. .main-timeline3 .timeline-icon,
  245. .main-timeline3 .timeline:nth-child(2n) .timeline-icon {
  246. margin-top: -30px;
  247. margin-bottom: 20px;
  248. position: relative;
  249. transform: rotate(135deg)
  250. }
  251. .main-timeline3 .timeline:nth-child(2n) .year,
  252. .main-timeline3 .year {
  253. transform: rotate(-135deg)
  254. }
  255. .main-timeline3 .timeline-content,
  256. .main-timeline3 .timeline:nth-child(2n) .timeline-content {
  257. width: 100%;
  258. float: none;
  259. border-radius: 0 0 20px 20px;
  260. text-align: center;
  261. padding: 25px 20px;
  262. margin: 0 auto
  263. }
  264. .main-timeline3 .timeline-content:before,
  265. .main-timeline3 .timeline:nth-child(2n) .timeline-content:before {
  266. width: 15px;
  267. height: 25px;
  268. position: absolute;
  269. top: -22px;
  270. left: 50%;
  271. z-index: -1;
  272. transform: translate(-50%, 0)
  273. }
  274. }
  275.  
  276. </style>
01:08
41
Нет комментариев. Ваш будет первым!
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.