You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

630 lines
26 KiB

2 years ago
  1. <!DOCTYPE html>
  2. <html lang="zxx">
  3. <head>
  4. <title>Animated Tabs</title>
  5. <meta charset="UTF-8">
  6. <link rel="shortcut icon" href="img/logos/logo-shortcut.png"/>
  7. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  8. <!-- Bootstrap CSS-->
  9. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  10. <!-- Font-Awesome -->
  11. <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
  12. <!-- Icomoon -->
  13. <link rel="stylesheet" type="text/css" href="css/icomoon.css">
  14. <!-- Animate.css -->
  15. <link rel="stylesheet" href="css/animate.css">
  16. <!-- Color Switcher -->
  17. <link rel="stylesheet" type="text/css" href="css/switcher.css">
  18. <!-- Owl Carousel -->
  19. <link rel="stylesheet" href="css/owl.carousel.css">
  20. <!-- Main Styles -->
  21. <link rel="stylesheet" type="text/css" href="css/default.css">
  22. <link rel="stylesheet" type="text/css" href="css/styles.css" id="colors">
  23. <!-- Fonts Google -->
  24. <link href="https://fonts.googleapis.com/css?family=Fira+Sans:100,200,300,400,500,600,700,800,900" rel="stylesheet">
  25. </head>
  26. <body>
  27. <!-- Preloader Start-->
  28. <div id="preloader">
  29. <div class="row loader">
  30. <div class="loader-icon"></div>
  31. </div>
  32. </div>
  33. <!-- Preloader End -->
  34. <!-- Top-Bar START -->
  35. <div id="top-bar" class="hidden-sm-down">
  36. <div class="container">
  37. <div class="row">
  38. <div class="col-md-9 col-12">
  39. <div class="top-bar-welcome">
  40. <ul>
  41. <li>Welcome to Professional Consulting Agency</li>
  42. </ul>
  43. </div>
  44. <div class="top-bar-info">
  45. <ul>
  46. <li><i class="fa fa-phone"></i>(+123) 456 7890
  47. <li>
  48. <li><i class="fa fa-envelope"></i>example@gmail.com
  49. <li>
  50. </ul>
  51. </div>
  52. </div>
  53. <div class="col-md-3 col-12">
  54. <ul class="social-icons hidden-md-down">
  55. <li><a href="#"><i class="fa fa-facebook"></i></a></li>
  56. <li><a href="#"><i class="fa fa-twitter"></i></a></li>
  57. <li><a href="#"><i class="fa fa-instagram"></i></a></li>
  58. <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
  59. </ul>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. <!-- Top-Bar END -->
  65. <!-- Navbar START -->
  66. <header>
  67. <nav id="navigation4" class="container navigation">
  68. <div class="nav-header">
  69. <a class="nav-brand" href="index.html">
  70. <img src="img/logos/logo.png" class="main-logo" alt="logo" id="main_logo">
  71. </a>
  72. <div class="nav-toggle"></div>
  73. </div>
  74. <div class="nav-menus-wrapper">
  75. <ul class="nav-menu align-to-right">
  76. <li><a href="#">Home</a>
  77. <div class="megamenu-panel">
  78. <div class="megamenu-lists">
  79. <ul class="megamenu-list list-col-4">
  80. <li class="megamenu-list-title"><a href="#">Multi Purpose 01</a></li>
  81. <li><a href="index.html">Home Page 01</a></li>
  82. <li><a href="home-2.html">Home Page 02</a></li>
  83. <li><a href="home-3.html">Home Page 03</a></li>
  84. </ul>
  85. <ul class="megamenu-list list-col-4">
  86. <li class="megamenu-list-title"><a href="#">Multi Purpose 02</a></li>
  87. <li><a href="home-4.html">Home Page 04</a></li>
  88. <li><a href="home-5.html">Home Page 05</a></li>
  89. <li><a href="home-6.html">Home Page 06</a></li>
  90. </ul>
  91. <ul class="megamenu-list list-col-4">
  92. <li class="megamenu-list-title"><a href="#">Multi Purpose 03</a></li>
  93. <li><a href="home-7.html">Home Page 07</a></li>
  94. <li><a href="home-8.html">Home Page 08</a></li>
  95. <li><a href="home-9.html">Home Page 09</a></li>
  96. </ul>
  97. <ul class="megamenu-list list-col-4">
  98. <li class="megamenu-list-title"><a href="#">Multi Purpose 04</a></li>
  99. <li><a href="home-10.html">Home Page 10 <span class="menu-tag">NEW</span><span class="menu-tag">HOT</span></a></li>
  100. <li><a href="home-11.html">Home Page 11 <span class="menu-tag">NEW</span></a></li>
  101. <li><a href="home-12.html">Home Page 12 <span class="menu-tag">NEW</span></a></li>
  102. </ul>
  103. </div>
  104. </div>
  105. </li>
  106. <li><a href="#">About</a>
  107. <ul class="nav-dropdown">
  108. <li><a href="about.html">About Us 01</a></li>
  109. <li><a href="about-2.html">About Us 02</a></li>
  110. <li><a href="team.html">Our Team 01</a></li>
  111. <li><a href="team-2.html">Our Team 02</a></li>
  112. <li><a href="team-3.html">Our Team 03</a></li>
  113. <li><a href="team-single.html">Team Single</a></li>
  114. <li><a href="partners.html">Our Partners</a></li>
  115. </ul>
  116. </li>
  117. <li><a href="#">Services</a>
  118. <ul class="nav-dropdown">
  119. <li><a href="services.html">Services 01</a></li>
  120. <li><a href="services-2.html">Services 02</a></li>
  121. <li><a href="services-3.html">Services 03</a></li>
  122. <li><a href="service-detail.html">Service Detail</a></li>
  123. <li><a href="cases.html">Cases</a></li>
  124. </ul>
  125. </li>
  126. <li><a href="#">Projects</a>
  127. <ul class="nav-dropdown">
  128. <li><a href="projects-grid.html">Grid Style</a></li>
  129. <li><a href="projects-masonry-3-column.html">Masonry Style 01</a></li>
  130. <li><a href="projects-masonry-4-column.html">Masonry Style 02</a></li>
  131. <li><a href="project-detail.html">Projects Detail 01</a></li>
  132. <li><a href="project-detail-2.html">Projects Detail 02</a></li>
  133. </ul>
  134. </li>
  135. <li><a href="#">Blog</a>
  136. <ul class="nav-dropdown">
  137. <li><a href="blog-grid.html">Blog Grid</a></li>
  138. <li><a href="blog-grid-classic.html">Blog Grid Classic</a></li>
  139. <li><a href="blog-grid-sidebar.html">Blog Grid Sidebar</a></li>
  140. <li><a href="blog-list.html">Blog List</a></li>
  141. <li><a href="blog-list-sidebar.html">Blog List Sidebar</a></li>
  142. <li><a href="blog-post.html">Blog Post</a></li>
  143. </ul>
  144. </li>
  145. <li><a href="#">Shop</a>
  146. <ul class="nav-dropdown">
  147. <li><a href="shop-grid.html">Grid Style 3 Col</a></li>
  148. <li><a href="shop-grid-4-col.html">Grid Style 4 Col</a></li>
  149. <li><a href="shop-grid-classic.html">Classic Style 3 Col</a></li>
  150. <li><a href="shop-grid-classic-4-col.html">Classic Style 4 Col</a></li>
  151. <li><a href="shop-single.html">Shop Single</a></li>
  152. <li><a href="shopping-cart.html">Shopping Cart</a></li>
  153. </ul>
  154. </li>
  155. <li><a href="#">Pages</a>
  156. <ul class="nav-dropdown">
  157. <li><a href="faq.html">FAQ 01</a></li>
  158. <li><a href="faq-2.html">FAQ 02</a></li>
  159. <li><a href="404.html">Error 404</a></li>
  160. <li><a href="under-construction.html">Under Construction</a></li>
  161. </ul>
  162. </li>
  163. <li><a href="#">Elements</a>
  164. <ul class="nav-dropdown">
  165. <li><a href="feature-boxes.html">Feature Boxes</a></li>
  166. <li><a href="pricing-lists.html">Pricing Lists</a></li>
  167. <li><a href="testmonials.html">Testmonials</a></li>
  168. <li><a href="progress-bars.html">Progress Bars</a></li>
  169. <li><a href="accordions.html">Accordions</a></li>
  170. <li><a href="animated-tabs.html">Animated Tabs</a></li>
  171. <li><a href="countups.html">Countups</a></li>
  172. <li><a href="responsive-videos.html">Responsive Videos</a></li>
  173. </ul>
  174. </li>
  175. <li><a href="#">Contact</a>
  176. <ul class="nav-dropdown">
  177. <li><a href="contact.html">Contact Us 01</a></li>
  178. <li><a href="contact-2.html">Contact Us 02</a></li>
  179. <li><a href="contact-3.html">Contact Us 03</a></li>
  180. <li><a href="contact-4.html">Contact Us 04</a></li>
  181. </ul>
  182. </li>
  183. </ul>
  184. </div>
  185. </nav>
  186. </header>
  187. <!-- Navbar END -->
  188. <!-- Page Title START -->
  189. <div class="page-title-section" style="background-image: url(http://via.placeholder.com/1730x300);">
  190. <div class="container">
  191. <h1>Animated Tabs</h1>
  192. <ul>
  193. <li><a href="index.html">Home</a></li>
  194. <li><a href="animated-tabs.html">Animated Tabs</a></li>
  195. </ul>
  196. </div>
  197. </div>
  198. <!-- Page Title END -->
  199. <!-- Tabs (Hortizonal Left) START -->
  200. <div class="section-block">
  201. <div class="container">
  202. <div class="section-heading">
  203. <h4>Horizontal Tabs</h4>
  204. <div class="section-heading-line-left"></div>
  205. </div>
  206. <!-- Tabs Start -->
  207. <div class="default-tabs">
  208. <div class='tabs tabs_animate mt-50'>
  209. <ul class="tab-menu left-holder">
  210. <li><a href="#tab-1">International Trade</a></li>
  211. <li><a href="#tab-2">Business Solutions</a></li>
  212. <li><a href="#tab-3">Professional Advisors</a></li>
  213. </ul>
  214. <!-- Tab 1 Start -->
  215. <div id='tab-1' class="clearfix tab-body">
  216. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  217. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  218. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  219. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  220. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  221. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  222. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  223. </div>
  224. <!-- Tab 1 End -->
  225. <!-- Tab 2 Start -->
  226. <div id='tab-2' class="clearfix tab-body">
  227. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  228. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  229. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  230. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  231. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  232. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  233. </div>
  234. <!-- Tab 2 End -->
  235. <!-- Tab 3 Start -->
  236. <div id='tab-3' class="clearfix tab-body">
  237. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  238. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  239. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  240. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  241. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  242. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  243. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  244. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  245. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  246. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  247. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  248. </div>
  249. <!-- Tab 3 End -->
  250. </div>
  251. </div>
  252. <!-- Tabs End -->
  253. </div>
  254. </div>
  255. <!-- Tabs (Hortizonal Left) END -->
  256. <!-- Tabs (Hortizonal Center) START -->
  257. <div class="section-block">
  258. <div class="container">
  259. <div class="section-heading">
  260. <h4>Horizontal Tabs Centered</h4>
  261. <div class="section-heading-line-left"></div>
  262. </div>
  263. <!-- Tabs Start -->
  264. <div class="default-tabs">
  265. <div class='tabs tabs_animate mt-50'>
  266. <ul class="tab-menu center-holder">
  267. <li><a href="#tab-s-1">International Trade</a></li>
  268. <li><a href="#tab-s-2">Business Solutions</a></li>
  269. <li><a href="#tab-s-3">Professional Advisors</a></li>
  270. </ul>
  271. <!-- Tab 1 Start -->
  272. <div id='tab-s-1' class="clearfix tab-body">
  273. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  274. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  275. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  276. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  277. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  278. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  279. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  280. </div>
  281. <!-- Tab 1 End -->
  282. <!-- Tab 2 Start -->
  283. <div id='tab-s-2' class="clearfix tab-body">
  284. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  285. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  286. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  287. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  288. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  289. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  290. </div>
  291. <!-- Tab 2 End -->
  292. <!-- Tab 3 Start -->
  293. <div id='tab-s-3' class="clearfix tab-body">
  294. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  295. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  296. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  297. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  298. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  299. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  300. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  301. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  302. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  303. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  304. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  305. </div>
  306. <!-- Tab 3 End -->
  307. </div>
  308. </div>
  309. <!-- Tabs End -->
  310. </div>
  311. </div>
  312. <!-- Tabs (Hortizonal Center) END -->
  313. <!-- Tabs icon (Hortizonal Left) START -->
  314. <div class="section-block">
  315. <div class="container">
  316. <div class="section-heading">
  317. <h4>Horizontal Tabs With Icon</h4>
  318. <div class="section-heading-line-left"></div>
  319. </div>
  320. <!-- Tabs Start -->
  321. <div class="default-tabs">
  322. <div class='tabs tabs_animate mt-50'>
  323. <ul class="tab-menu left-holder">
  324. <li><a href="#tab-t-1"><i class="fa fa-paperclip"></i> International Trade</a></li>
  325. <li><a href="#tab-t-2"><i class="fa fa-graduation-cap"></i> Business Solutions</a></li>
  326. <li><a href="#tab-t-3"><i class="fa fa-cogs"></i> Professional Advisors</a></li>
  327. </ul>
  328. <!-- Tab 1 Start -->
  329. <div id='tab-t-1' class="clearfix tab-body">
  330. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  331. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  332. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  333. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  334. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  335. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  336. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  337. </div>
  338. <!-- Tab 1 End -->
  339. <!-- Tab 2 Start -->
  340. <div id='tab-t-2' class="clearfix tab-body">
  341. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  342. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  343. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  344. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  345. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  346. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  347. </div>
  348. <!-- Tab 2 End -->
  349. <!-- Tab 3 Start -->
  350. <div id='tab-t-3' class="clearfix tab-body">
  351. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  352. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  353. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  354. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  355. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  356. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  357. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  358. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  359. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  360. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  361. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  362. </div>
  363. <!-- Tab 3 End -->
  364. </div>
  365. </div>
  366. <!-- Tabs End -->
  367. </div>
  368. </div>
  369. <!-- Tabs icon (Hortizonal Left) END -->
  370. <!-- Tabs icon (Hortizonal Left) START -->
  371. <div class="section-block">
  372. <div class="container">
  373. <div class="section-heading">
  374. <h4>Horizontal Tabs With Big Icon</h4>
  375. <div class="section-heading-line-left"></div>
  376. </div>
  377. <!-- Tabs Start -->
  378. <div class="big-icon-tabs">
  379. <div class='tabs tabs_animate mt-50'>
  380. <ul class="tab-menu left-holder">
  381. <li><a href="#tab-f-1"><i class="icon-diamond"></i> International Trade</a></li>
  382. <li><a href="#tab-f-2"><i class="icon-target"></i> Business Solutions</a></li>
  383. <li><a href="#tab-f-3"><i class="icon-startup"></i> Professional Advisors</a></li>
  384. </ul>
  385. <!-- Tab 1 Start -->
  386. <div id='tab-f-1' class="clearfix tab-body">
  387. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  388. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  389. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  390. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  391. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  392. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  393. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  394. </div>
  395. <!-- Tab 1 End -->
  396. <!-- Tab 2 Start -->
  397. <div id='tab-f-2' class="clearfix tab-body">
  398. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  399. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  400. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  401. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  402. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  403. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  404. </div>
  405. <!-- Tab 2 End -->
  406. <!-- Tab 3 Start -->
  407. <div id='tab-f-3' class="clearfix tab-body">
  408. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  409. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  410. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  411. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  412. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  413. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  414. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  415. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  416. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  417. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  418. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  419. </div>
  420. <!-- Tab 3 End -->
  421. </div>
  422. </div>
  423. <!-- Tabs End -->
  424. </div>
  425. </div>
  426. <!-- Tabs icon (Hortizonal Left) END -->
  427. <!-- Footer START -->
  428. <footer>
  429. <div class="container">
  430. <div class="row">
  431. <!-- Column 1 Start -->
  432. <div class="col-md-4 col-sm-6 col-12">
  433. <h3>About Us</h3>
  434. <div class="mt-25">
  435. <img src="img/logos/logo-footer.png" alt="footer-logo">
  436. <p class="mt-25">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
  437. ad minim veniam.</p>
  438. <div class="footer-social-icons mt-25">
  439. <ul>
  440. <li><a href="#"><i class="fa fa-facebook-square"></i></a></li>
  441. <li><a href="#"><i class="fa fa-instagram"></i></a></li>
  442. <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
  443. <li><a href="#"><i class="fa fa-skype"></i></a></li>
  444. <li><a href="#"><i class="fa fa-youtube"></i></a></li>
  445. </ul>
  446. </div>
  447. </div>
  448. </div>
  449. <!-- Column 1 End -->
  450. <!-- Column 2 Start -->
  451. <div class="col-md-3 col-sm-6 col-12">
  452. <h3>Quick Links</h3>
  453. <ul class="footer-list">
  454. <li><a href="#">Strategic Consulting</a></li>
  455. <li><a href="#">Sales Services</a></li>
  456. <li><a href="#">Market Research</a></li>
  457. <li><a href="#">Online Reputation</a></li>
  458. <li><a href="#">Strategic Consulting</a></li>
  459. <li><a href="#">Sales Services</a></li>
  460. <li><a href="#">Market Research</a></li>
  461. </ul>
  462. </div>
  463. <!-- Column 2 End -->
  464. <!-- Column 3 Start -->
  465. <div class="col-md-3 col-sm-6 col-12">
  466. <h3>Recent Posts</h3>
  467. <div class="mt-25">
  468. <!-- Post Start -->
  469. <div class="footer-recent-post clearfix">
  470. <div class="footer-recent-post-thumb">
  471. <img src="http://via.placeholder.com/65x65" alt="img">
  472. </div>
  473. <div class="footer-recent-post-content">
  474. <span>February 7, 2018</span>
  475. <a href="#">Advices for young designers</a>
  476. </div>
  477. </div>
  478. <!-- Post End -->
  479. <!-- Post Start -->
  480. <div class="footer-recent-post clearfix">
  481. <div class="footer-recent-post-thumb">
  482. <img src="http://via.placeholder.com/65x65" alt="img">
  483. </div>
  484. <div class="footer-recent-post-content">
  485. <span>February 7, 2018</span>
  486. <a href="#">What Planning Process Needs?</a>
  487. </div>
  488. </div>
  489. <!-- Post End -->
  490. <!-- Post Start -->
  491. <div class="footer-recent-post clearfix">
  492. <div class="footer-recent-post-thumb">
  493. <img src="http://via.placeholder.com/65x65" alt="img">
  494. </div>
  495. <div class="footer-recent-post-content">
  496. <span>February 7, 2018</span>
  497. <a href="#">Lorem ipsum dolor sit amet.</a>
  498. </div>
  499. </div>
  500. <!-- Post End -->
  501. </div>
  502. </div>
  503. <!-- Column 3 End -->
  504. <!-- Column 4 Start -->
  505. <div class="col-md-2 col-sm-6 col-12">
  506. <h3>Tags</h3>
  507. <div class="footer-tags mt-25">
  508. <a href="#">Business</a>
  509. <a href="#">Conusltant</a>
  510. <a href="#">Coach</a>
  511. <a href="#">UX</a>
  512. <a href="#">API</a>
  513. <a href="#">Reputation</a>
  514. <a href="#">Research</a>
  515. <a href="#">Sale</a>
  516. <a href="#">Service</a>
  517. <a href="#">UI</a>
  518. <a href="#">Web</a>
  519. <a href="#">WebDesign</a>
  520. </div>
  521. </div>
  522. <!-- Column 4 End -->
  523. </div>
  524. <!-- Footer Bar Start -->
  525. <div class="footer-bar">
  526. <p><span class="primary-color">SpecThemes</span> © 2018. All Rights Reserved.</p>
  527. </div>
  528. <!-- Footer Bar End -->
  529. </div>
  530. </footer>
  531. <!-- Footer END -->
  532. <!-- Scroll to top button Start -->
  533. <a href="#" class="scroll-to-top"><i class="fa fa-angle-up" aria-hidden="true"></i></a>
  534. <!-- Scroll to top button End -->
  535. <!-- Jquery -->
  536. <script src="js/jquery.min.js"></script>
  537. <!--Popper JS-->
  538. <script src="js/popper.min.js"></script>
  539. <!-- Bootstrap JS-->
  540. <script src="js/bootstrap.min.js"></script>
  541. <!-- Owl Carousel-->
  542. <script src="js/owl.carousel.js"></script>
  543. <!-- Navbar JS -->
  544. <script src="js/navigation.js"></script>
  545. <script src="js/navigation.fixed.js"></script>
  546. <!-- Wow JS -->
  547. <script src="js/wow.min.js"></script>
  548. <!-- Countup -->
  549. <script src="js/jquery.counterup.min.js"></script>
  550. <script src="js/waypoints.min.js"></script>
  551. <!-- Tabs -->
  552. <script src="js/tabs.min.js"></script>
  553. <!-- Yotube Video Player -->
  554. <script src="js/jquery.mb.YTPlayer.min.js"></script>
  555. <!-- Isotop -->
  556. <script src="js/isotope.pkgd.min.js"></script>
  557. <!-- Modernizr -->
  558. <script src="js/modernizr.js"></script>
  559. <!-- Switcher JS -->
  560. <script src="js/switcher.js"></script>
  561. <!-- Google Map -->
  562. <script src="js/map.js"></script>
  563. <!-- Main JS -->
  564. <script src="js/main.js"></script>
  565. </body>
  566. </html>