sliders.html 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623
  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>Sliders - 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. <!-- sliders -->
  27. <div id="sliders">
  28. <div class="full-width">
  29. <div class="page-header-title">
  30. <h2 class="heading-title text-center">Sliders</h2>
  31. </div>
  32. <div class="container">
  33. <h4 class="sub-title space-left">Header Slider</h4>
  34. </div>
  35. <!-- light slider -->
  36. <div id="light-slider" class="carousel slide">
  37. <div id="carousel-area">
  38. <div id="carousel-slider" class="carousel slide" data-ride="carousel">
  39. <ol class="carousel-indicators">
  40. <li data-target="#carousel-slider" data-slide-to="0" class="active"></li>
  41. <li data-target="#carousel-slider" data-slide-to="1"></li>
  42. <li data-target="#carousel-slider" data-slide-to="2"></li>
  43. </ol>
  44. <div class="carousel-inner" role="listbox">
  45. <div class="carousel-item active">
  46. <img src="img/slider/bg-1.jpg" alt="">
  47. <div class="carousel-caption">
  48. <h3 class="slide-title animated fadeInDown"><span class="text-primary">Helium </span> - Bootstrap 4 UI Kit</h3>
  49. <h5 class="slide-text animated fadeIn">Lorem ipsum dolor sit amet, consectetuer adipiscing elit<br> Curabitur ultricies nisi Nam eget dui. Etiam rhoncus</h5>
  50. <a href="#" class="btn btn-lg btn-default-filled animated fadeInUp">Get Started</a>
  51. <a href="#" class="btn btn-lg btn-common animated fadeInUp">Learn More</a>
  52. </div>
  53. </div>
  54. <div class="carousel-item">
  55. <img src="img/slider/bg-2.jpg" alt="">
  56. <div class="carousel-caption">
  57. <h3 class="slide-title animated fadeInDown"><span class="text-primary">Cutting-edge</span> Features</h3>
  58. <h5 class="slide-text animated fadeIn">Lorem ipsum dolor sit amet, consectetuer adipiscing elit<br> Curabitur ultricies nisi Nam eget dui. Etiam rhoncus</h5>
  59. <a href="#" class="btn btn-lg btn-default-filled animated fadeInUp">Download Now</a>
  60. </div>
  61. </div>
  62. <div class="carousel-item">
  63. <img src="img/slider/bg-3.jpg" alt="">
  64. <div class="carousel-caption">
  65. <h3 class="slide-title animated fadeInDown"><span class="text-primary">100+ </span> UI Blocks & Components</h3>
  66. <h5 class="slide-text animated fadeIn">Lorem ipsum dolor sit amet, consectetuer adipiscing elit<br> Curabitur ultricies nisi Nam eget dui. Etiam rhoncus</h5>
  67. <a href="#" class="btn btn-lg btn-default-filled animated fadeInUp">Get Started</a>
  68. <a href="#" class="btn btn-lg btn-common animated fadeInUp">Download</a>
  69. </div>
  70. </div>
  71. </div>
  72. <a class="carousel-control-prev" href="#carousel-slider" role="button" data-slide="prev">
  73. <span class="carousel-control carousel-control-prev-icon" aria-hidden="true"></span>
  74. <span class="sr-only">Previous</span>
  75. </a>
  76. <a class="carousel-control-next" href="#carousel-slider" role="button" data-slide="next">
  77. <span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
  78. <span class="sr-only">Next</span>
  79. </a>
  80. </div>
  81. </div>
  82. </div>
  83. </div>
  84. </div>
  85. <!-- End sliders -->
  86. <div class="mb-60"></div>
  87. <!-- sliders -->
  88. <div id="sliders-two">
  89. <div class="full-width">
  90. <div class="container">
  91. <h4 class="sub-title space-left">Header Slider 2</h4>
  92. </div>
  93. <!-- light slider -->
  94. <div id="light-slider" class="carousel slide">
  95. <div id="carousel-area">
  96. <div id="carousel-slider-two" class="carousel slide" data-ride="carousel">
  97. <div class="carousel-inner" role="listbox">
  98. <div class="carousel-item active">
  99. <img src="img/slider1/bg-1.jpg" alt="">
  100. <div class="carousel-caption">
  101. <h3 class="slide-title animated fadeInDown">For the ones who look for <br> something new</h3>
  102. <h5 class="slide-text animated fadeIn">Lorem ipsum dolor sit amet, consectetuer adipiscing elit<br> Curabitur ultricies nisi Nam eget dui. Etiam rhoncus</h5>
  103. <a href="#" class="btn btn-lg btn-border btn-radius animated fadeInUp">Get Started</a>
  104. </div>
  105. </div>
  106. <div class="carousel-item">
  107. <img src="img/slider1/bg-2.jpg" alt="">
  108. <div class="carousel-caption">
  109. <h3 class="slide-title animated fadeInDown">Cutting-edge <br> Features</h3>
  110. <h5 class="slide-text animated fadeIn">Lorem ipsum dolor sit amet, consectetuer adipiscing elit<br> Curabitur ultricies nisi Nam eget dui. Etiam rhoncus</h5>
  111. <a href="#" class="btn btn-lg btn-default-filled btn-radius animated fadeInUp">Download Now</a>
  112. </div>
  113. </div>
  114. <div class="carousel-item">
  115. <img src="img/slider1/bg-3.jpg" alt="">
  116. <div class="carousel-caption">
  117. <h3 class="slide-title animated fadeInDown">100+ UI Blocks & Components</h3>
  118. <h5 class="slide-text animated fadeIn">Lorem ipsum dolor sit amet, consectetuer adipiscing elit<br> Curabitur ultricies nisi Nam eget dui. Etiam rhoncus</h5>
  119. <a href="#" class="btn btn-lg btn-default-filled btn-radius animated fadeInUp">Get Started</a>
  120. <a href="#" class="btn btn-lg btn-common animated btn-radius fadeInUp">Download</a>
  121. </div>
  122. </div>
  123. </div>
  124. <a class="carousel-control-prev" href="#carousel-slider-two" role="button" data-slide="prev">
  125. <span class="carousel-control carousel-control-prev-icon" aria-hidden="true"></span>
  126. <span class="sr-only">Previous</span>
  127. </a>
  128. <a class="carousel-control-next" href="#carousel-slider-two" role="button" data-slide="next">
  129. <span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
  130. <span class="sr-only">Next</span>
  131. </a>
  132. </div>
  133. </div>
  134. </div>
  135. </div>
  136. </div>
  137. <!-- End sliders -->
  138. <div class="mb-60"></div>
  139. <!-- img/slider slider -->
  140. <div id="img/slider-slider">
  141. <div class="container">
  142. <h4 class="sub-title">Image Only Slider</h4>
  143. <div id="image-slider" class="owl-carousel owl-theme">
  144. <div class="item">
  145. <img src="img/slider/large-slider1.jpg" alt="">
  146. </div>
  147. <div class="item">
  148. <img src="img/slider/large-slider2.jpg" alt="">
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. <div class="mb-60"></div>
  154. <!-- testimonials slider -->
  155. <div class="container">
  156. <h4 class="sub-title">Testimonial Carousel</h4>
  157. </div>
  158. <!-- testimonials slider -->
  159. <div class="single-testimonial-area">
  160. <div class="container">
  161. <div id="single-testimonial-item" class="owl-carousel">
  162. <!-- Single testimonial Item -->
  163. <div class="item">
  164. <div class="row justify-content-center">
  165. <div class="col-lg-8 col-md-12 col-xs-12">
  166. <div class="testimonial-inner text-center">
  167. <blockquote>
  168. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam, non ut molestiae rerum praesentium repellat debitis iure reiciendis, eius culpa beatae commodi facere ad numquam. Quisquam dignissimos similique sunt iure fugit, omnis vel cupiditate repellendus magni nihil molestiae quam, delectus
  169. </blockquote>
  170. <div class="testimonial-images">
  171. <img class="img-circle text-md-center" src="img/testimonial/img1.jpg" alt="">
  172. </div>
  173. <div class="testimonial-footer">
  174. <i class="fa fa-user"></i> Arman
  175. <a href="#"> UIdeck</a>
  176. </div>
  177. </div>
  178. </div>
  179. </div>
  180. </div>
  181. <!-- Single testimonial Item -->
  182. <div class="item">
  183. <div class="row justify-content-center">
  184. <div class="col-lg-8 col-md-12 col-xs-12">
  185. <div class="testimonial-inner text-center">
  186. <blockquote>
  187. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam, non ut molestiae rerum praesentium repellat debitis iure reiciendis, eius culpa beatae commodi facere ad numquam. Quisquam dignissimos similique sunt iure fugit, omnis vel cupiditate repellendus magni nihil molestiae quam, delectus
  188. </blockquote>
  189. <div class="testimonial-images">
  190. <img class="img-circle text-md-center" src="img/testimonial/img2.jpg" alt="">
  191. </div>
  192. <div class="testimonial-footer">
  193. <i class="fa fa-user"></i> Jeniffer
  194. <a href="#"> GrayGrids</a>
  195. </div>
  196. </div>
  197. </div>
  198. </div>
  199. </div>
  200. <!-- Single testimonial Item -->
  201. <div class="item">
  202. <div class="row justify-content-center">
  203. <div class="col-lg-8 col-md-12 col-xs-12">
  204. <div class="testimonial-inner text-center">
  205. <blockquote>
  206. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam, non ut molestiae rerum praesentium repellat debitis iure reiciendis, eius culpa beatae commodi facere ad numquam. Quisquam dignissimos similique sunt iure fugit, omnis vel cupiditate repellendus magni nihil molestiae quam, delectus
  207. </blockquote>
  208. <div class="testimonial-images">
  209. <img class="img-circle text-md-center" src="img/testimonial/img3.jpg" alt="">
  210. </div>
  211. <div class="testimonial-footer">
  212. <i class="fa fa-user"></i> Elon Musk<a href="#"> Tesla</a>
  213. </div>
  214. </div>
  215. </div>
  216. </div>
  217. </div>
  218. </div>
  219. </div>
  220. </div>
  221. <!-- end -->
  222. <div class="mb-60"></div>
  223. <!-- testimonials slider -->
  224. <div class="container">
  225. <h4 class="sub-title">Testimonial</h4>
  226. </div>
  227. <!-- testimonials slider -->
  228. <div class="testimonial-two">
  229. <div class="container">
  230. <div id="testimonial-item" class="owl-carousel">
  231. <!-- Single testimonial Item -->
  232. <div class="item">
  233. <div class="row justify-content-center">
  234. <div class="col-lg-7 col-md-12 col-xs-12">
  235. <div class="testimonial-inner text-center">
  236. <blockquote>
  237. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam, non ut molestiae rerum praesentium repellat debitis iure reiciendis, eius culpa beatae commodi facere ad numquam. Quisquam dignissimos similique sunt iure fugit, omnis vel cupiditate repellendus magni nihil molestiae quam, delectus
  238. </blockquote>
  239. <div class="testimonial-images">
  240. <img class="img-circle text-center" src="img/testimonial/img1.jpg" alt="">
  241. </div>
  242. <div class="testimonial-footer">
  243. <h4>Johnathan Doe</h4>
  244. <p>Marketing Head Matrix media</p>
  245. </div>
  246. </div>
  247. </div>
  248. </div>
  249. </div>
  250. <!-- Single testimonial Item -->
  251. <div class="item">
  252. <div class="row justify-content-center">
  253. <div class="col-lg-7 col-md-12 col-xs-12">
  254. <div class="testimonial-inner text-center">
  255. <blockquote>
  256. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam, non ut molestiae rerum praesentium repellat debitis iure reiciendis, eius culpa beatae commodi facere ad numquam. Quisquam dignissimos similique sunt iure fugit, omnis vel cupiditate repellendus magni nihil molestiae quam, delectus
  257. </blockquote>
  258. <div class="testimonial-images">
  259. <img class="img-circle text-center" src="img/testimonial/img2.jpg" alt="">
  260. </div>
  261. <div class="testimonial-footer">
  262. <h4>Oidila Matik</h4>
  263. <p>President Lexo Inc</p>
  264. </div>
  265. </div>
  266. </div>
  267. </div>
  268. </div>
  269. <!-- Single testimonial Item -->
  270. <div class="item">
  271. <div class="row justify-content-center">
  272. <div class="col-lg-7 col-md-12 col-xs-12">
  273. <div class="testimonial-inner text-center">
  274. <blockquote>
  275. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam, non ut molestiae rerum praesentium repellat debitis iure reiciendis, eius culpa beatae commodi facere ad numquam. Quisquam dignissimos similique sunt iure fugit, omnis vel cupiditate repellendus magni nihil molestiae quam, delectus
  276. </blockquote>
  277. <div class="testimonial-images">
  278. <img class="img-circle text-center" src="img/testimonial/img3.jpg" alt="">
  279. </div>
  280. <div class="testimonial-footer">
  281. <h4>Alex Dattilo</h4>
  282. <p>CEO Optima Inc</p>
  283. </div>
  284. </div>
  285. </div>
  286. </div>
  287. </div>
  288. </div>
  289. </div>
  290. </div>
  291. <!-- end -->
  292. <div class="mb-60"></div>
  293. <!-- cards carousel -->
  294. <div id="cards-carousel">
  295. <div class="container">
  296. <h4 class="sub-title">Grid Carousel</h4>
  297. <div id="card-carousel" class="owl-carousel">
  298. <div class="card">
  299. <div class="card-block">
  300. <img class="card-img-inside" src="img/slider/img-01.jpg" alt="">
  301. <h3 class="card-title">Item Title</h3>
  302. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  303. </div>
  304. </div>
  305. <div class="card">
  306. <div class="card-block">
  307. <img class="card-img-inside" src="img/slider/img-02.jpg" alt="">
  308. <h3 class="card-title">Item Title</h3>
  309. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  310. </div>
  311. </div>
  312. <div class="card">
  313. <div class="card-block">
  314. <img class="card-img-inside" src="img/slider/img-03.jpg" alt="">
  315. <h3 class="card-title">Item Title</h3>
  316. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  317. </div>
  318. </div>
  319. <div class="card">
  320. <div class="card-block">
  321. <img class="card-img-inside" src="img/slider/img-04.jpg" alt="">
  322. <h3 class="card-title">Item Title</h3>
  323. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  324. </div>
  325. </div>
  326. <div class="card">
  327. <div class="card-block">
  328. <img class="card-img-inside" src="img/slider/img-05.jpg" alt="">
  329. <h3 class="card-title">Item Title</h3>
  330. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  331. </div>
  332. </div>
  333. <div class="card">
  334. <div class="card-block">
  335. <img class="card-img-inside" src="img/slider/img-06.jpg" alt="">
  336. <h3 class="card-title">Item Title</h3>
  337. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  338. </div>
  339. </div>
  340. <div class="card">
  341. <div class="card-block">
  342. <img class="card-img-inside" src="img/slider/img-07.jpg" alt="">
  343. <h3 class="card-title">Item Title</h3>
  344. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  345. </div>
  346. </div>
  347. <div class="card">
  348. <div class="card-block">
  349. <img class="card-img-inside" src="img/slider/img-08.jpg" alt="">
  350. <h3 class="card-title">Item Title</h3>
  351. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  352. </div>
  353. </div>
  354. <div class="card">
  355. <div class="card-block">
  356. <img class="card-img-inside" src="img/slider/img-01.jpg" alt="">
  357. <h3 class="card-title">Item Title</h3>
  358. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  359. </div>
  360. </div>
  361. <div class="card">
  362. <div class="card-block">
  363. <img class="card-img-inside" src="img/slider/img-02.jpg" alt="">
  364. <h3 class="card-title">Item Title</h3>
  365. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  366. </div>
  367. </div>
  368. </div>
  369. </div>
  370. </div>
  371. <div class="mb-60"></div>
  372. <div id="img/slider-carousel">
  373. <div class="container">
  374. <h4 class="sub-title">Image Carousel</h4>
  375. <div id="image-carousel" class="owl-carousel">
  376. <div class="item"><img src="img/slider/img-1.jpg" alt=""></div>
  377. <div class="item"><img src="img/slider/img-2.jpg" alt=""></div>
  378. <div class="item"><img src="img/slider/img-3.jpg" alt=""></div>
  379. <div class="item"><img src="img/slider/img-4.jpg" alt=""></div>
  380. <div class="item"><img src="img/slider/img-1.jpg" alt=""></div>
  381. <div class="item"><img src="img/slider/img-2.jpg" alt=""></div>
  382. <div class="item"><img src="img/slider/img-3.jpg" alt=""></div>
  383. <div class="item"><img src="img/slider/img-4.jpg" alt=""></div>
  384. </div>
  385. </div>
  386. </div>
  387. <div class="mb-60"></div>
  388. <div class="container">
  389. <h4 class="sub-title space-left">Blog Carousels</h4>
  390. </div>
  391. <!-- posts carousel -->
  392. <section id="blog">
  393. <div class="container">
  394. <div id="posts-carousel" class="owl-carousel">
  395. <div class="blog block carousel-post">
  396. <img src="img/slider/blog/img1.jpg" alt="">
  397. <h5>Blog Title</h5>
  398. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet atque fugit vitae voluptatem...</p>
  399. <a href="#">Full Article <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
  400. </div>
  401. <div class="blog block carousel-post text-center">
  402. <img src="img/slider/blog/img2.jpg" alt="">
  403. <h5>Blog Title</h5>
  404. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet atque fugit vitae voluptatem...</p>
  405. <a href="#">Full Article <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
  406. </div>
  407. <div class="blog block carousel-post text-center">
  408. <img src="img/slider/blog/img3.jpg" alt="">
  409. <h5>Blog Title</h5>
  410. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet atque fugit vitae voluptatem...</p>
  411. <a href="#">Full Article <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
  412. </div>
  413. <div class="blog block carousel-post text-right">
  414. <img src="img/slider/blog/img4.jpg" alt="">
  415. <h5>Blog Title</h5>
  416. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet atque fugit vitae voluptatem...</p>
  417. <a href="#">Full Article <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
  418. </div>
  419. <div class="blog block carousel-post">
  420. <img src="img/slider/blog/img6.jpg" alt="">
  421. <h5>Blog Title</h5>
  422. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet atque fugit vitae voluptatem...</p>
  423. <a href="#">Full Article <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
  424. </div>
  425. <div class="blog block carousel-post text-center">
  426. <img src="img/slider/blog/img2.jpg" alt="">
  427. <h5>Blog Title</h5>
  428. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet atque fugit vitae voluptatem...</p>
  429. <a href="#">Full Article <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
  430. </div>
  431. <div class="blog block carousel-post text-center">
  432. <img src="img/slider/blog/img4.jpg" alt="">
  433. <h5>Blog Title</h5>
  434. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet atque fugit vitae voluptatem...</p>
  435. <a href="#">Full Article <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
  436. </div>
  437. <div class="blog block carousel-post text-right">
  438. <img src="img/slider/blog/img1.jpg" alt="">
  439. <h5>Blog Title</h5>
  440. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet atque fugit vitae voluptatem...</p>
  441. <a href="#">Full Article <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
  442. </div>
  443. </div>
  444. </div>
  445. </section>
  446. <div class="mb-60"></div>
  447. <!-- posts carousel -->
  448. <section class="blog">
  449. <div class="container">
  450. <div id="posts-carousel-3col" class="owl-carousel">
  451. <div class="blog block carousel-post text-center">
  452. <img src="img/slider/blog/img6.jpg" alt="">
  453. <h5>Blog Title</h5>
  454. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet atque fugit vitae voluptatem...</p>
  455. <a href="#">Full Article <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
  456. </div>
  457. <div class="blog block carousel-post text-center">
  458. <img src="img/slider/blog/img5.jpg" alt="">
  459. <h5>Blog Title</h5>
  460. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet atque fugit vitae voluptatem...</p>
  461. <a href="#">Full Article <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
  462. </div>
  463. <div class="blog block carousel-post text-center">
  464. <img src="img/slider/blog/img4.jpg" alt="">
  465. <h5>Blog Title</h5>
  466. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet atque fugit vitae voluptatem...</p>
  467. <a href="#">Full Article <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
  468. </div>
  469. <div class="blog block carousel-post text-center">
  470. <img src="img/slider/blog/img3.jpg" alt="">
  471. <h5>Blog Title</h5>
  472. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet atque fugit vitae voluptatem...</p>
  473. <a href="#">Full Article <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
  474. </div>
  475. <div class="blog block carousel-post text-center">
  476. <img src="img/slider/blog/img2.jpg" alt="">
  477. <h5>Blog Title</h5>
  478. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet atque fugit vitae voluptatem...</p>
  479. <a href="#">Full Article <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
  480. </div>
  481. <div class="blog block carousel-post text-center">
  482. <img src="img/slider/blog/img1.jpg" alt="">
  483. <h5>Blog Title</h5>
  484. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet atque fugit vitae voluptatem...</p>
  485. <a href="#">Full Article <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
  486. </div>
  487. </div>
  488. </div>
  489. </section>
  490. <!-- End posts carousel -->
  491. </div>
  492. <!-- Content Area End -->
  493. <div class="text-center">Love this UI Kit? Get more Free and Premium <a href="https://rebrand.ly/uideck-uikits">Bootstrap UI Kits</a> and <a href="https://rebrand.ly/uideck-themes">Bootstrap Templates</a></div>
  494. </div>
  495. <!-- Page Wrapper End -->
  496. <!-- jQuery first, then Tether, then Bootstrap JS. -->
  497. <script src="js/jquery.min.js"></script>
  498. <script src="js/popper.min.js"></script>
  499. <script src="js/bootstrap.min.js"></script>
  500. <script src="js/owl.carousel.min.js"></script>
  501. <script src="js/form-validator.min.js"></script>
  502. <script src="js/contact-form-script.js"></script>
  503. <script src="js/main.js"></script>
  504. <!-- cards carousel -->
  505. <script>
  506. $(document).ready(function($) {
  507. $("#card-carousel").owlCarousel();
  508. });
  509. $("body").data("page", "frontpage");
  510. </script>
  511. <!-- image carousel -->
  512. <script>
  513. $(document).ready(function() {
  514. $("#image-carousel").owlCarousel({
  515. items: 4,
  516. itemsDesktop: [1199, 3],
  517. itemsDesktopSmall: [979, 3]
  518. });
  519. });
  520. </script>
  521. <!-- posts carousel -->
  522. <script>
  523. $(document).ready(function() {
  524. $("#posts-carousel").owlCarousel({
  525. items: 4,
  526. itemsDesktop: [1199, 3],
  527. itemsDesktopSmall: [979, 3]
  528. });
  529. });
  530. </script>
  531. <!-- posts carousel 3col -->
  532. <script>
  533. $(document).ready(function() {
  534. $("#posts-carousel-3col").owlCarousel({
  535. items: 3,
  536. itemsDesktop: [1199, 3],
  537. itemsDesktopSmall: [979, 3]
  538. });
  539. });
  540. </script>
  541. <!-- image slider -->
  542. <script>
  543. $(document).ready(function() {
  544. $("#image-slider").owlCarousel({
  545. navigation: false, // Show next and prev buttons
  546. slideSpeed: 300,
  547. paginationSpeed: 400,
  548. singleItem: true
  549. });
  550. });
  551. </script>
  552. <!-- testimonial carousel -->
  553. <script>
  554. $(document).ready(function() {
  555. $("#single-testimonial-item").owlCarousel({
  556. items: 1,
  557. navigation: false, // Show next and prev buttons
  558. slideSpeed: 300,
  559. paginationSpeed: 400,
  560. singleItem: true
  561. });
  562. });
  563. </script>
  564. <!-- / javascript -->
  565. </body>
  566. </html>