about.html 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  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>About Us - 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="row">
  28. <div class="col-md-12">
  29. <div class="page-header-title">
  30. <h2 class="heading-title text-center">About Us</h2>
  31. </div>
  32. </div>
  33. </div>
  34. <div class="sub-title">
  35. <span>About</span>
  36. </div>
  37. <div class="row">
  38. <div class="col-lg-3 col-md-6 col-xs-12">
  39. <div class="about block text-center">
  40. <img src="img/about/img1.png" alt="">
  41. <h5><a href="#">About Title</a></h5>
  42. <p>Quisque sit amet libero purus. Nulla a dignissim quam. In hac habitasse platea dictumst.</p>
  43. </div>
  44. </div>
  45. <div class="col-lg-3 col-md-6 col-xs-12">
  46. <div class="about block text-center">
  47. <img src="img/about/img2.png" alt="">
  48. <h5><a href="#">About Title</a></h5>
  49. <p>Quisque sit amet libero purus. Nulla a dignissim quam. In hac habitasse platea dictumst.</p>
  50. </div>
  51. </div>
  52. <div class="col-lg-3 col-md-6 col-xs-12">
  53. <div class="about block text-center">
  54. <img src="img/about/img3.png" alt="">
  55. <h5><a href="#">About Title</a></h5>
  56. <p>Quisque sit amet libero purus. Nulla a dignissim quam. In hac habitasse platea dictumst.</p>
  57. </div>
  58. </div>
  59. <div class="col-lg-3 col-md-6 col-xs-12">
  60. <div class="about block text-center">
  61. <img src="img/about/img4.png" alt="">
  62. <h5><a href="#">About Title</a></h5>
  63. <p>Quisque sit amet libero purus. Nulla a dignissim quam. In hac habitasse platea dictumst.</p>
  64. </div>
  65. </div>
  66. </div>
  67. <div class="mb-60"></div>
  68. </div>
  69. </div>
  70. <!-- Content Area End -->
  71. <!-- testimonials slider -->
  72. <div class="container">
  73. <h4 class="sub-title">Testimonials</h4>
  74. </div>
  75. <div class="single-testimonial-area">
  76. <div class="container">
  77. <div id="single-testimonial-item" class="owl-carousel">
  78. <!-- Single testimonial Item -->
  79. <div class="item">
  80. <div class="row justify-content-md-center">
  81. <div class="col-lg-8 col-md-12 col-xs-12">
  82. <div class="testimonial-inner text-center">
  83. <blockquote>
  84. 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 consequuntur blanditiis modi nostrum?
  85. </blockquote>
  86. <div class="testimonial-images">
  87. <img class="img-circle text-center" src="img/testimonial/img1.jpg" alt="">
  88. </div>
  89. <div class="testimonial-footer">
  90. <i class="fa fa-user"></i> Arman
  91. <a href="#"> UIdeck</a>
  92. </div>
  93. </div>
  94. </div>
  95. </div>
  96. </div>
  97. <!-- Single testimonial Item -->
  98. <div class="item">
  99. <div class="row justify-content-md-center">
  100. <div class="col-lg-8 col-md-12 col-xs-12">
  101. <div class="testimonial-inner text-center">
  102. <blockquote>
  103. 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 consequuntur blanditiis modi nostrum?
  104. </blockquote>
  105. <div class="testimonial-images">
  106. <img class="img-circle text-center" src="img/testimonial/img2.jpg" alt="">
  107. </div>
  108. <div class="testimonial-footer">
  109. <i class="fa fa-user"></i> Jeniffer
  110. <a href="#"> GrayGrids</a>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115. </div>
  116. <!-- Single testimonial Item -->
  117. <div class="item">
  118. <div class="row justify-content-md-center">
  119. <div class="col-lg-8 col-md-12 col-xs-12">
  120. <div class="testimonial-inner text-center">
  121. <blockquote>
  122. 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 consequuntur blanditiis modi nostrum?
  123. </blockquote>
  124. <div class="testimonial-images">
  125. <img class="img-circle text-center" src="img/testimonial/img3.jpg" alt="">
  126. </div>
  127. <div class="testimonial-footer">
  128. <i class="fa fa-user"></i> Elon Musk<a href="#"> Tesla</a>
  129. </div>
  130. </div>
  131. </div>
  132. </div>
  133. </div>
  134. </div>
  135. </div>
  136. </div>
  137. <!-- end -->
  138. <div class="mb-60"></div>
  139. <div class="container">
  140. <h4 class="sub-title">Facts</h4>
  141. </div>
  142. <!-- facts 4col -->
  143. <section id="facts">
  144. <div class="container">
  145. <div class="row">
  146. <div class="col-lg-3 col-md-6 col-xs-12 text-center">
  147. <i class="fact-icon fa fa-user"></i>
  148. <h3 class="timer" id="websites" data-to="560" data-speed="1000">560</h3>
  149. <h5 class="fact-title">Happy Clients</h5>
  150. </div>
  151. <div class="col-lg-3 col-md-6 col-xs-12 text-center">
  152. <i class="fact-icon fa fa-rocket"></i>
  153. <h3 class="timer" id="code" data-to="2700" data-speed="1500">2700</h3>
  154. <h5 class="fact-title">Project Lanched</h5>
  155. </div>
  156. <div class="col-lg-3 col-md-6 col-xs-12 text-center">
  157. <i class="fact-icon fa fa-coffee"></i>
  158. <h3 class="timer" id="coffee" data-to="234" data-speed="2000">234</h3>
  159. <h5 class="fact-title">Cup of Coffee</h5>
  160. </div>
  161. <div class="col-lg-3 col-md-6 col-xs-12 text-center">
  162. <i class="fact-icon fa fa-heart"></i>
  163. <h3 class="timer" id="emails" data-to="234" data-speed="2500">970</h3>
  164. <h5 class="fact-title">Peoples Love</h5>
  165. </div>
  166. </div>
  167. </div>
  168. </section>
  169. <!-- / facts 4 col -->
  170. <div class="mb-60"></div>
  171. <div class="container">
  172. <h4 class="sub-title">Call To Action</h4>
  173. </div>
  174. <section class="cta-section">
  175. <div class="container">
  176. <div class="row">
  177. <div class="col-12">
  178. <div class="cta-area">
  179. <div class="cta-content text-center">
  180. <h2>Super Powerful UI Kit with hundereds <br> of amazing designed components.</h2>
  181. <a href="#" class="btn btn-common"><i class="fa fa-download"></i> Download Now</a>
  182. </div>
  183. </div>
  184. </div>
  185. </div>
  186. </div>
  187. </section>
  188. <div class="mb-60"></div>
  189. <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>
  190. </div>
  191. <!-- Page Wrapper End -->
  192. <!-- jQuery first, then Tether, then Bootstrap JS. -->
  193. <script src="js/jquery.min.js"></script>
  194. <script src="js/popper.min.js"></script>
  195. <script src="js/bootstrap.min.js"></script>
  196. <script src="js/owl.carousel.min.js"></script>
  197. <script src="js/jquery.countTo.js"></script>
  198. <script src="js/form-validator.min.js"></script>
  199. <script src="js/contact-form-script.js"></script>
  200. <script src="js/main.js"></script>
  201. <script type="text/javascript">
  202. $('.timer').countTo({
  203. refreshInterval: 60,
  204. formatter: function(value, options) {
  205. return value.toFixed(options.decimals);
  206. },
  207. });
  208. </script>
  209. </body>
  210. </html>