column.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <!-- meta tags -->
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7. <meta name="description" content="Bootstrap UI Kit">
  8. <meta name="keywords" content="ui kit">
  9. <meta name="author" content="UIdeck">
  10. <title>Column - Helium Bootstrap 4 UI Kit</title>
  11. <!-- CSS Files -->
  12. <link rel="stylesheet" href="css/bootstrap.min.css">
  13. <link rel="stylesheet" href="css/main.css">
  14. <link rel="stylesheet" href="css/animate.css">
  15. <link rel="stylesheet" href="css/owl.carousel.css">
  16. <link rel="stylesheet" href="css/owl.theme.css">
  17. <link rel="stylesheet" href="css/responsive.css">
  18. <!-- Fonts icons -->
  19. <link rel="stylesheet" href="css/font-awesome.min.css">
  20. </head>
  21. <body>
  22. <!-- Page Wrapper Start -->
  23. <div class="wrapper">
  24. <!--Content Area Start-->
  25. <div id="content">
  26. <div class="container">
  27. <div class="divider-info ptb column-style">
  28. <div class="page-header-title">
  29. <h2 class="heading-title text-center">Column Styles</h2>
  30. </div>
  31. <div class="row">
  32. <div class="col-sm-6">
  33. <h2 class="sub-title">Column 1/2</h2>
  34. <p>
  35. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend rerit non sed ligula. Vivamus purus odio, mollis ut sagittis vel, feugiat et nulla. Aenean id felis sed ligula volutpat consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent eu lacus diam. Vestibulum ut sem odio, eu sollicitudin tellus.
  36. </p>
  37. </div>
  38. <div class="col-sm-6">
  39. <h2 class="sub-title">Column 1/2</h2>
  40. <p>
  41. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend rerit non sed ligula. Vivamus purus odio, mollis ut sagittis vel, feugiat et nulla. Aenean id felis sed ligula volutpat consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent eu lacus diam. Vestibulum ut sem odio, eu sollicitudin tellus.
  42. </p>
  43. </div>
  44. </div>
  45. <div class="mb-60"></div>
  46. <div class="row">
  47. <div class="col-sm-4">
  48. <h2 class="sub-title">Column 1/3</h2>
  49. <p>
  50. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend rerit non sed ligula. Vivamus purus odio, mollis ut sagittis vel, feugiat et nulla. Aenean id felis sed ligula volutpat consectetur.
  51. </p>
  52. </div>
  53. <div class="col-sm-4">
  54. <h2 class="sub-title">Column 1/3</h2>
  55. <p>
  56. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend rerit non sed ligula. Vivamus purus odio, mollis ut sagittis vel, feugiat et nulla. Aenean id felis sed ligula volutpat consectetur.
  57. </p>
  58. </div>
  59. <div class="col-sm-4">
  60. <h2 class="sub-title">Column 1/3</h2>
  61. <p>
  62. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend rerit non sed ligula. Vivamus purus odio, mollis ut sagittis vel, feugiat et nulla. Aenean id felis sed ligula volutpat consectetur.
  63. </p>
  64. </div>
  65. </div>
  66. <div class="mb-60"></div>
  67. <div class="row">
  68. <div class="col-sm-3">
  69. <h2 class="sub-title">Column 1/4</h2>
  70. <p>
  71. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend rerit non sed ligula.
  72. </p>
  73. </div>
  74. <div class="col-sm-3">
  75. <h2 class="sub-title">Column 1/4</h2>
  76. <p>
  77. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend rerit non sed ligula.
  78. </p>
  79. </div>
  80. <div class="col-sm-3">
  81. <h2 class="sub-title">Column 1/4</h2>
  82. <p>
  83. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend rerit non sed ligula.
  84. </p>
  85. </div>
  86. <div class="col-sm-3">
  87. <h2 class="sub-title">Column 1/4</h2>
  88. <p>
  89. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend rerit non sed ligula.
  90. </p>
  91. </div>
  92. </div>
  93. <div class="mb-60"></div>
  94. <div class="row">
  95. <div class="col-sm-8">
  96. <h2 class="sub-title">Column 2/3</h2>
  97. <p>
  98. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend rerit non sed ligula. Vivamus purus odio, mollis ut sagittis vel, feugiat et nulla. Aenean id felis sed ligula volutpat consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend rerit non sed ligula. Vivamus purus odio, mollis ut sagittis vel, feugiat et nulla. Aenean id felis sed ligula volutpat consectetur mollis ut sagittis vel, feugiat et nulla.
  99. </p>
  100. </div>
  101. <div class="col-sm-4">
  102. <h2 class="sub-title">Column 1/3</h2>
  103. <p>
  104. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend rerit non sed ligula. Vivamus purus odio, mollis ut sagittis vel, feugiat et nulla. Aenean id felis sed ligula volutpat consectetur.
  105. </p>
  106. </div>
  107. </div>
  108. <div class="mb-60"></div>
  109. <div class="row">
  110. <div class="col-sm-6">
  111. <h2 class="sub-title">Column 1/2</h2>
  112. <p>
  113. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend rerit non sed ligula. Vivamus purus odio, mollis ut sagittis vel, feugiat et nulla. Aenean id felis sed ligula volutpat consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent eu lacus diam. Vestibulum ut sem odio, eu sollicitudin tellus.
  114. </p>
  115. </div>
  116. <div class="col-sm-3">
  117. <h2 class="sub-title">Column 1/4</h2>
  118. <p>
  119. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend rerit non sed ligula.
  120. </p>
  121. </div>
  122. <div class="col-sm-3">
  123. <h2 class="sub-title">Column 1/4</h2>
  124. <p>
  125. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend rerit non sed ligula.
  126. </p>
  127. </div>
  128. </div>
  129. <div class="mb-60"></div>
  130. <div class="row">
  131. <div class="col-sm-3">
  132. <h2 class="sub-title">Column 1/4</h2>
  133. <p>
  134. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend rerit non sed ligula.
  135. </p>
  136. </div>
  137. <div class="col-sm-6">
  138. <h2 class="sub-title">Column 1/2</h2>
  139. <p>
  140. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend rerit non sed ligula. Vivamus purus odio, mollis ut sagittis vel, feugiat et nulla. Aenean id felis sed ligula volutpat consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent eu lacus diam. Vestibulum ut sem odio, eu sollicitudin tellus.
  141. </p>
  142. </div>
  143. <div class="col-sm-3">
  144. <h2 class="sub-title">Column 1/4</h2>
  145. <p>
  146. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend rerit non sed ligula.
  147. </p>
  148. </div>
  149. </div>
  150. <div class="mb-60"></div>
  151. <div class="row">
  152. <div class="col-sm-9">
  153. <h2 class="sub-title">Column 3/4</h2>
  154. <p>
  155. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend rerit non sed ligula. Vivamus purus odio, mollis ut sagittis vel, feugiat et nulla. Aenean id felis sed ligula volutpat consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent eu lacus diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend rerit non sed ligula. Vivamus purus odio, mollis ut sagittis vel, feugiat et nulla. Aenean id felis sed ligula volutpat consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.
  156. </p>
  157. </div>
  158. <div class="col-sm-3">
  159. <h2 class="sub-title">Column 1/4</h2>
  160. <p>
  161. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend rerit non sed ligula.
  162. </p>
  163. </div>
  164. </div>
  165. <div class="mb-60"></div>
  166. <div class="row">
  167. <div class="col-md-2 col-sm-4">
  168. <h5 class="sub-title">Column 1/6</h5>
  169. <p>
  170. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula.
  171. </p>
  172. </div>
  173. <div class="col-md-2 col-sm-4">
  174. <h5 class="sub-title">Column 1/6</h5>
  175. <p>
  176. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula.
  177. </p>
  178. </div>
  179. <div class="col-md-2 col-sm-4">
  180. <h5 class="sub-title">Column 1/6</h5>
  181. <p>
  182. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula.
  183. </p>
  184. </div>
  185. <div class="col-md-2 col-sm-4">
  186. <h5 class="sub-title">Column 1/6</h5>
  187. <p>
  188. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula.
  189. </p>
  190. </div>
  191. <div class="col-md-2 col-sm-4">
  192. <h5 class="sub-title">Column 1/6</h5>
  193. <p>
  194. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula.
  195. </p>
  196. </div>
  197. <div class="col-md-2 col-sm-4">
  198. <h5 class="sub-title">Column 1/6</h5>
  199. <p>
  200. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula.
  201. </p>
  202. </div>
  203. </div>
  204. <div class="mb-60"></div>
  205. <div class="row">
  206. <div class="col-md-2 col-sm-4">
  207. <h5 class="sub-title">Column 1/6</h5>
  208. <p>
  209. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula.
  210. </p>
  211. </div>
  212. <div class="col-md-2 col-sm-4">
  213. <h5 class="sub-title">Column 1/6</h5>
  214. <p>
  215. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula.
  216. </p>
  217. </div>
  218. <div class="col-md-2 col-sm-4">
  219. <h5 class="sub-title">Column 1/6</h5>
  220. <p>
  221. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula.
  222. </p>
  223. </div>
  224. <div class="col-sm-6">
  225. <h2 class="sub-title">Column 1/6</h2>
  226. <p>
  227. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend rerit non sed ligula. Vivamus purus odio, mollis ut sagittis vel, feugiat et nulla. Aenean id felis sed ligula volutpat consectetur. Vestibulum ante ipsum primis in faucibus.
  228. </p>
  229. </div>
  230. </div>
  231. <div class="mb-60"></div>
  232. <div class="row">
  233. <div class="col-sm-4">
  234. <h2 class="sub-title">Column 1/3</h2>
  235. <p>
  236. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend rerit non sed ligula. Vivamus purus odio, mollis ut sagittis vel, feugiat et nulla.
  237. </p>
  238. </div>
  239. <div class="col-md-2 col-sm-4">
  240. <h5 class="sub-title">Column 1/6</h5>
  241. <p>
  242. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula.
  243. </p>
  244. </div>
  245. <div class="col-md-2 col-sm-4">
  246. <h5 class="sub-title">Column 1/6</h5>
  247. <p>
  248. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula.
  249. </p>
  250. </div>
  251. <div class="col-md-2 col-sm-4">
  252. <h5 class="sub-title">Column 1/6</h5>
  253. <p>
  254. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula.
  255. </p>
  256. </div>
  257. <div class="col-md-2 col-sm-4">
  258. <h5 class="sub-title">Column 1/6</h5>
  259. <p>
  260. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula.
  261. </p>
  262. </div>
  263. </div>
  264. <div class="mb-60"></div>
  265. <div class="row">
  266. <div class="col-sm-8">
  267. <h2 class="sub-title">Column 1/3</h2>
  268. <p>
  269. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend rerit non sed ligula. Vivamus purus odio, mollis ut sagittis vel, feugiat et nulla. Aenean id felis sed ligula volutpat consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend rerit non sed ligula. Vivamus purus odio, mollis ut sagittis vel, feugiat et nulla.
  270. </p>
  271. </div>
  272. <div class="col-md-2 col-sm-4">
  273. <h5 class="sub-title">Column 1/6</h5>
  274. <p>
  275. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula.
  276. </p>
  277. </div>
  278. <div class="col-md-2 col-sm-4">
  279. <h5 class="sub-title">Column 1/6</h5>
  280. <p>
  281. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula.
  282. </p>
  283. </div>
  284. </div>
  285. </div>
  286. </div>
  287. </div>
  288. <!--Content Area End-->
  289. </div>
  290. <!-- jQuery first, then Tether, then Bootstrap JS. -->
  291. <script src="js/jquery.min.js"></script>
  292. <script src="js/popper.min.js"></script>
  293. <script src="js/bootstrap.min.js"></script>
  294. <script src="js/owl.carousel.min.js"></script>
  295. <script src="js/form-validator.min.js"></script>
  296. <script src="js/contact-form-script.js"></script>
  297. <script src="js/main.js"></script>
  298. </body>
  299. </html>