services.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Services</title>
  5. <meta charset="utf-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="description" content="AerobicsFit template project">
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <link rel="stylesheet" type="text/css" href="styles/bootstrap-4.1.2/bootstrap.min.css">
  10. <link href="plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  11. <link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/owl.carousel.css">
  12. <link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/owl.theme.default.css">
  13. <link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/animate.css">
  14. <link rel="stylesheet" type="text/css" href="styles/services.css">
  15. <link rel="stylesheet" type="text/css" href="styles/services_responsive.css">
  16. </head>
  17. <body>
  18. <div class="super_container">
  19. <!-- Header -->
  20. <header class="header">
  21. <div class="container">
  22. <div class="row">
  23. <div class="col">
  24. <div class="header_content d-flex flex-row align-items-center justify-content-start">
  25. <div class="logo">Aerobics<span>Fit</span></div>
  26. <nav class="main_nav">
  27. <ul class="d-flex flex-row align-items-center justify-content-start">
  28. <li><a href="index.html">Home</a></li>
  29. <li><a href="about.html">About us</a></li>
  30. <li class="active"><a href="#">Services</a></li>
  31. <li><a href="blog.html">News</a></li>
  32. <li><a href="contact.html">Contact</a></li>
  33. </ul>
  34. </nav>
  35. <div class="join_button ml-auto"><a href="#">Join Now!</a></div>
  36. <div class="social header_social">
  37. <ul class="d-flex flex-row align-items-center justify-content-start">
  38. <li><a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
  39. <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
  40. <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
  41. <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
  42. <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
  43. </ul>
  44. </div>
  45. <div class="hamburger ml-auto"><i class="fa fa-bars" aria-hidden="true"></i></div>
  46. </div>
  47. </div>
  48. </div>
  49. </div>
  50. </header>
  51. <!-- Menu -->
  52. <div class="menu">
  53. <div class="menu_content d-flex flex-column align-items-center justify-content-center">
  54. <ul class="menu_nav_list text-center">
  55. <li><a href="index.html">Home</a></li>
  56. <li><a href="about.html">About us</a></li>
  57. <li><a href="services.html">Services</a></li>
  58. <li><a href="blog.html">News</a></li>
  59. <li><a href="contact.html">Contact</a></li>
  60. </ul>
  61. <div class="menu_join"><a href="#">Join Now!</a></div>
  62. <div class="menu_social social">
  63. <ul class="d-flex flex-row align-items-center justify-content-start">
  64. <li><a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
  65. <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
  66. <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
  67. <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
  68. <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
  69. </ul>
  70. </div>
  71. </div>
  72. </div>
  73. <!-- Home -->
  74. <div class="home">
  75. <div class="parallax_background parallax-window" data-parallax="scroll" data-image-src="images/services.jpg" data-speed="0.8"></div>
  76. <div class="home_container">
  77. <div class="container">
  78. <div class="row">
  79. <div class="col">
  80. <div class="home_content">
  81. <div class="home_title">Services</div>
  82. <div class="breadcrumbs">
  83. <ul class="d-flex flex-row align-items-center justify-content-start">
  84. <li><a href="index.html">Home</a></li>
  85. <li>Services</li>
  86. </ul>
  87. </div>
  88. </div>
  89. </div>
  90. </div>
  91. </div>
  92. </div>
  93. </div>
  94. <!-- Classes -->
  95. <div class="classes">
  96. <div class="container">
  97. <div class="row">
  98. <div class="col">
  99. <div class="section_title_container text-center">
  100. <div class="section_title"><h1>Choose from our <span>Classes</span></h1></div>
  101. <div class="section_text ml-auto mr-auto">
  102. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada lorem maximus mauris scelerisque, at rutrum nulla dictum. Ut ac ligula sapien. Suspendisse cursu.</p>
  103. </div>
  104. </div>
  105. </div>
  106. </div>
  107. <div class="row classes_row">
  108. <!-- Class -->
  109. <div class="col-xl-4 col-md-6 classes_col">
  110. <div class="classes_item c_item_1">
  111. <div class="classes_title_container d-flex flex-row align-items-center justify-content-start">
  112. <div class="classes_icon d-flex flex-column align-items-center justify-content-center">
  113. <div><img src="images/icon_1.svg" alt="https://www.flaticon.com/authors/freepik"></div>
  114. </div>
  115. <div class="classes_title">Weight Loss Class</div>
  116. </div>
  117. <div class="classes_item_text">
  118. <p>Lorem ipsum dolor sit amet, consectetur elit. Donec malesuada lorem maximus mauris scelerisque, at rutrum.</p>
  119. </div>
  120. </div>
  121. </div>
  122. <!-- Class -->
  123. <div class="col-xl-4 col-md-6 classes_col">
  124. <div class="classes_item c_item_2">
  125. <div class="classes_title_container d-flex flex-row align-items-center justify-content-start">
  126. <div class="classes_icon d-flex flex-column align-items-center justify-content-center">
  127. <div><img src="images/icon_2.svg" alt="https://www.flaticon.com/authors/freepik"></div>
  128. </div>
  129. <div class="classes_title">Yoga Classes</div>
  130. </div>
  131. <div class="classes_item_text">
  132. <p>Ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada lorem maximus mauris scelerisque, at rutrum nulla dictum.</p>
  133. </div>
  134. </div>
  135. </div>
  136. <!-- Class -->
  137. <div class="col-xl-4 col-md-6 classes_col">
  138. <div class="classes_item c_item_3">
  139. <div class="classes_title_container d-flex flex-row align-items-center justify-content-start">
  140. <div class="classes_icon d-flex flex-column align-items-center justify-content-center">
  141. <div><img src="images/icon_3.svg" alt="https://www.flaticon.com/authors/freepik"></div>
  142. </div>
  143. <div class="classes_title">Spinning Class</div>
  144. </div>
  145. <div class="classes_item_text">
  146. <p>Sit amet, consectetur adipiscing elit. Donec malesuada lorem maximus mauris scelerisque, at rutrum nulla dictum.</p>
  147. </div>
  148. </div>
  149. </div>
  150. <!-- Class -->
  151. <div class="col-xl-4 col-md-6 classes_col">
  152. <div class="classes_item c_item_4">
  153. <div class="classes_title_container d-flex flex-row align-items-center justify-content-start">
  154. <div class="classes_icon d-flex flex-column align-items-center justify-content-center">
  155. <div><img src="images/icon_4.svg" alt="https://www.flaticon.com/authors/freepik"></div>
  156. </div>
  157. <div class="classes_title">Private Fit Class</div>
  158. </div>
  159. <div class="classes_item_text">
  160. <p>Lorem ipsum dolor sit amet, consectetur elit. Donec malesuada lorem maximus mauris scelerisque, at rutrum.</p>
  161. </div>
  162. </div>
  163. </div>
  164. <!-- Class -->
  165. <div class="col-xl-4 col-md-6 classes_col">
  166. <div class="classes_item c_item_5">
  167. <div class="classes_title_container d-flex flex-row align-items-center justify-content-start">
  168. <div class="classes_icon d-flex flex-column align-items-center justify-content-center">
  169. <div><img src="images/icon_5.svg" alt="https://www.flaticon.com/authors/freepik"></div>
  170. </div>
  171. <div class="classes_title">Nutrition Classes</div>
  172. </div>
  173. <div class="classes_item_text">
  174. <p>Ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada lorem maximus mauris scelerisque, at rutrum nulla dictum.</p>
  175. </div>
  176. </div>
  177. </div>
  178. <!-- Class -->
  179. <div class="col-xl-4 col-md-6 classes_col">
  180. <div class="classes_item c_item_6">
  181. <div class="classes_title_container d-flex flex-row align-items-center justify-content-start">
  182. <div class="classes_icon d-flex flex-column align-items-center justify-content-center">
  183. <div><img src="images/icon_6.svg" alt="https://www.flaticon.com/authors/freepik"></div>
  184. </div>
  185. <div class="classes_title">Pillates Class</div>
  186. </div>
  187. <div class="classes_item_text">
  188. <p>Sit amet, consectetur adipiscing elit. Donec malesuada lorem maximus mauris scelerisque, at rutrum nulla dictum.</p>
  189. </div>
  190. </div>
  191. </div>
  192. </div>
  193. </div>
  194. </div>
  195. <!-- Featured -->
  196. <div class="featured">
  197. <div class="parallax_background parallax-window" data-parallax="scroll" data-image-src="images/featured.jpg" data-speed="0.8"></div>
  198. <div class="featured_overlay"></div>
  199. <div class="container">
  200. <div class="row row-eq-height">
  201. <!-- Featured Content -->
  202. <div class="col-lg-6">
  203. <div class="featured_content">
  204. <!-- Featured Item -->
  205. <div class="featured_item">
  206. <div class="featured_title"><h2>Fitness</h2></div>
  207. <div class="featured_text">
  208. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada lorem maximus mauris scelerisque, at rutrum. Integer fringilla eros quis eros aliquam tincidunt. Integer consectetur urna et mi aliquam, non malesuada.</p>
  209. </div>
  210. </div>
  211. <!-- Featured Item -->
  212. <div class="featured_item">
  213. <div class="featured_title"><h2>Yoga</h2></div>
  214. <div class="featured_text">
  215. <p>Nullam pulvinar massa nec lorem fermentum molestie. Mauris vestibulum nisl sed orci semper luctus. Aliquam erat volutpat. Praesent hendrerit facilisis viverra. In sit amet euismod nibh. Ut in malesuada risus, sit amet.</p>
  216. </div>
  217. </div>
  218. <!-- Featured Item -->
  219. <div class="featured_item">
  220. <div class="featured_title"><h2>Bodybuilding</h2></div>
  221. <div class="featured_text">
  222. <p>Lorem fermentum molestie. Mauris vestibulum nisl sed orci semper luctus. Aliquam erat volutpat. Praesent hendrerit facilisis viverra. In sit amet euismod nibh. Ut in malesuada risus, sit amet.</p>
  223. </div>
  224. </div>
  225. </div>
  226. </div>
  227. <!-- Featured Image -->
  228. <div class="col-lg-6">
  229. <div class="featured_image"><img src="images/featured_1.png" alt=""></div>
  230. </div>
  231. </div>
  232. </div>
  233. </div>
  234. <!-- Pricing -->
  235. <div class="pricing">
  236. <div class="container">
  237. <div class="row">
  238. <div class="col">
  239. <div class="section_title_container text-center">
  240. <div class="section_title"><h1>Training Packages</h1></div>
  241. <div class="section_text ml-auto mr-auto">
  242. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada lorem maximus mauris scelerisque, at rutrum nulla dictum. Ut ac ligula sapien. Suspendisse cursu.</p>
  243. </div>
  244. </div>
  245. </div>
  246. </div>
  247. <div class="row pricing_row">
  248. <!-- Package -->
  249. <div class="col-lg-4 package_col">
  250. <div class="package">
  251. <div class="package_title_container trans_200">
  252. <div class="package_title">Beginner Package</div>
  253. <div class="package_price_container">
  254. <div class="package_price">$50<span>/ Month</span></div>
  255. <div>.90</div>
  256. </div>
  257. </div>
  258. <div class="pricing_image"><img src="images/pricing_1.jpg" alt=""></div>
  259. <div class="pricing_content text-center trans_200">
  260. <ul>
  261. <li><span><img src="images/check.png" alt=""></span>15 days/month</li>
  262. <li><span><img src="images/check.png" alt=""></span>Personal Trainer</li>
  263. <li><span><img src="images/x.png" alt=""></span>Pool Access</li>
  264. <li><span><img src="images/x.png" alt=""></span>Sauna Access</li>
  265. </ul>
  266. </div>
  267. <div class="button pricing_button"><a href="#">Enroll Now!</a></div>
  268. </div>
  269. </div>
  270. <!-- Package -->
  271. <div class="col-lg-4 package_col">
  272. <div class="package">
  273. <div class="package_title_container trans_200">
  274. <div class="package_title">Advanced Package</div>
  275. <div class="package_price_container">
  276. <div class="package_price">$70<span>/ Month</span></div>
  277. <div>.90</div>
  278. </div>
  279. </div>
  280. <div class="pricing_image"><img src="images/pricing_2.jpg" alt=""></div>
  281. <div class="pricing_content text-center trans_200">
  282. <ul>
  283. <li><span><img src="images/check.png" alt=""></span>15 days/month</li>
  284. <li><span><img src="images/check.png" alt=""></span>Personal Trainer</li>
  285. <li><span><img src="images/check.png" alt=""></span>Pool Access</li>
  286. <li><span><img src="images/x.png" alt=""></span>Sauna Access</li>
  287. </ul>
  288. </div>
  289. <div class="button pricing_button"><a href="#">Enroll Now!</a></div>
  290. </div>
  291. </div>
  292. <!-- Package -->
  293. <div class="col-lg-4 package_col">
  294. <div class="package">
  295. <div class="package_title_container trans_200">
  296. <div class="package_title">Pro Package</div>
  297. <div class="package_price_container">
  298. <div class="package_price">$90<span>/ Month</span></div>
  299. <div>.90</div>
  300. </div>
  301. </div>
  302. <div class="pricing_image"><img src="images/pricing_3.jpg" alt=""></div>
  303. <div class="pricing_content text-center trans_200">
  304. <ul>
  305. <li><span><img src="images/check.png" alt=""></span>15 days/month</li>
  306. <li><span><img src="images/check.png" alt=""></span>Personal Trainer</li>
  307. <li><span><img src="images/check.png" alt=""></span>Pool Access</li>
  308. <li><span><img src="images/check.png" alt=""></span>Sauna Access</li>
  309. </ul>
  310. </div>
  311. <div class="button pricing_button"><a href="#">Enroll Now!</a></div>
  312. </div>
  313. </div>
  314. </div>
  315. </div>
  316. </div>
  317. <!-- Footer -->
  318. <footer class="footer">
  319. <div class="parallax_background parallax-window" data-parallax="scroll" data-image-src="images/footer.jpg" data-speed="0.8"></div>
  320. <div class="footer_overlay"></div>
  321. <div class="container">
  322. <div class="row">
  323. <div class="col">
  324. <div class="footer_content text-center d-flex flex-column align-items-center justify-content-center">
  325. <div class="footer_logo"><a href="#">Aerobics<span>Fit</span></a></div>
  326. <div class="footer_contact">
  327. <ul>
  328. <li>
  329. <div class="footer_contact_title">Address:</div>
  330. <div class="footer_contact_text">481 Creekside Lane Avila CA 93424</div>
  331. </li>
  332. <li>
  333. <div class="footer_contact_title">Phone:</div>
  334. <div class="footer_contact_text">+53 345 7953 32453</div>
  335. </li>
  336. <li>
  337. <div class="footer_contact_title">Email:</div>
  338. <div class="footer_contact_text">yourmail@gmail.com</div>
  339. </li>
  340. </ul>
  341. </div>
  342. <div class="social footer_social">
  343. <ul class="d-flex flex-row align-items-center justify-content-start">
  344. <li><a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
  345. <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
  346. <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
  347. <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
  348. <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
  349. </ul>
  350. </div>
  351. <nav class="footer_nav">
  352. <ul class="d-flex flex-row align-items-center justify-content-start">
  353. <li><a href="index.html">Home</a></li>
  354. <li><a href="about.html">About us</a></li>
  355. <li><a href="services.html">Services</a></li>
  356. <li><a href="blog.html">News</a></li>
  357. <li><a href="contact.html">Contact</a></li>
  358. </ul>
  359. </nav>
  360. </div>
  361. <div class="copyright d-flex flex-row align-items-center justify-content-center">
  362. Copyright &copy;<script>document.write(new Date().getFullYear());</script> Colorlib All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://shop194286523.taobao.com/" target="_blank">狮王网页模板下载</a>
  363. </div>
  364. </div>
  365. </div>
  366. </div>
  367. </footer>
  368. </div>
  369. <script src="js/jquery-3.2.1.min.js"></script>
  370. <script src="styles/bootstrap-4.1.2/popper.js"></script>
  371. <script src="styles/bootstrap-4.1.2/bootstrap.min.js"></script>
  372. <script src="plugins/OwlCarousel2-2.2.1/owl.carousel.js"></script>
  373. <script src="plugins/easing/easing.js"></script>
  374. <script src="plugins/parallax-js-master/parallax.min.js"></script>
  375. <script src="js/services.js"></script>
  376. </body>
  377. </html>