elements.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
  1. <!-- /*
  2. * Template Name: Homespace
  3. * Template Author: Untree.co
  4. * Tempalte URI: https://untree.co/
  5. * License: https://creativecommons.org/licenses/by/3.0/
  6. */ -->
  7. <!doctype html>
  8. <html lang="en">
  9. <head>
  10. <meta charset="utf-8">
  11. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  12. <meta name="author" content="Untree.co">
  13. <link rel="shortcut icon" href="favicon.png">
  14. <meta name="description" content="" />
  15. <meta name="keywords" content="" />
  16. <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;900&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  17. <link rel="stylesheet" href="css/bootstrap.min.css">
  18. <link rel="stylesheet" href="css/owl.carousel.min.css">
  19. <link rel="stylesheet" href="css/owl.theme.default.min.css">
  20. <link rel="stylesheet" href="css/jquery.fancybox.min.css">
  21. <link rel="stylesheet" href="fonts/icomoon/style.css">
  22. <link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
  23. <link rel="stylesheet" href="css/aos.css">
  24. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
  25. <link rel="stylesheet" href="css/style.css">
  26. <title>Homespace Free HTML Template by Untree.co</title>
  27. </head>
  28. <body>
  29. <div class="lines-wrap">
  30. <div class="lines-inner">
  31. <div class="lines"></div>
  32. </div>
  33. </div>
  34. <!-- END lines -->
  35. <div class="site-mobile-menu site-navbar-target">
  36. <div class="site-mobile-menu-header">
  37. <div class="site-mobile-menu-close">
  38. <span class="icofont-close js-menu-toggle"></span>
  39. </div>
  40. </div>
  41. <div class="site-mobile-menu-body"></div>
  42. </div>
  43. <nav class="site-nav">
  44. <div class="container">
  45. <div class="site-navigation">
  46. <a href="index.html" class="logo m-0">Homespace <span class="text-primary">.</span></a>
  47. <ul class="js-clone-nav d-none d-lg-inline-block text-left float-right site-menu">
  48. <li><a href="index.html">Home</a></li>
  49. <li class="has-children">
  50. <a href="#">Dropdown</a>
  51. <ul class="dropdown">
  52. <li class="active"><a href="elements.html">Elements</a></li>
  53. <li class="has-children">
  54. <a href="#">Menu Two</a>
  55. <ul class="dropdown">
  56. <li><a href="#">Sub Menu One</a></li>
  57. <li><a href="#">Sub Menu Two</a></li>
  58. <li><a href="#">Sub Menu Three</a></li>
  59. </ul>
  60. </li>
  61. <li><a href="#">Menu Three</a></li>
  62. </ul>
  63. </li>
  64. <li><a href="buy.html">Buy</a></li>
  65. <li><a href="rent.html">Rent</a></li>
  66. <li><a href="about.html">About</a></li>
  67. <li><a href="contact.html">Contact Us</a></li>
  68. <li><a href="signup.html">Sign up</a></li>
  69. <li class="cta-button active"><a href="login.html">Login</a></li>
  70. </ul>
  71. <a href="#" class="burger ml-auto float-right site-menu-toggle js-menu-toggle d-inline-block d-lg-none" data-toggle="collapse" data-target="#main-navbar">
  72. <span></span>
  73. </a>
  74. </div>
  75. </div>
  76. </nav>
  77. <div class="untree_co-section bg-light">
  78. <div class="container">
  79. <div class="row justify-content-center text-center">
  80. <div class="col-lg-6">
  81. <h2 class="text-secondary heading-2">Elements</h2>
  82. <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
  83. </div>
  84. </div>
  85. </div>
  86. </div>
  87. <div class="untree_co-section">
  88. <div class="container">
  89. <div class="row">
  90. <div class="col-lg-6">
  91. <div class="custom-block" data-aos="fade-up">
  92. <h2 class="section-title">Accordion</h2>
  93. <div class="custom-accordion" id="accordion_1">
  94. <div class="accordion-item">
  95. <h2 class="mb-0">
  96. <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">How to download and register?</button>
  97. </h2>
  98. <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion_1">
  99. <div class="accordion-body">
  100. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
  101. </div>
  102. </div>
  103. </div> <!-- .accordion-item -->
  104. <div class="accordion-item">
  105. <h2 class="mb-0">
  106. <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">How to create your paypal account?</button>
  107. </h2>
  108. <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion_1">
  109. <div class="accordion-body">
  110. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
  111. </div>
  112. </div>
  113. </div> <!-- .accordion-item -->
  114. <div class="accordion-item">
  115. <h2 class="mb-0">
  116. <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">How to link your paypal and bank account?</button>
  117. </h2>
  118. <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion_1">
  119. <div class="accordion-body">
  120. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she continued her way.
  121. </div>
  122. </div>
  123. </div> <!-- .accordion-item -->
  124. </div>
  125. </div> <!-- END .custom-block -->
  126. <div class="custom-block" data-aos="fade-up">
  127. <h2 class="section-title">Gallery</h2>
  128. <div class="row gutter-v2 gallery">
  129. <div class="col-4">
  130. <a href="images/gal_1.jpg" class="gal-item" data-fancybox="gal"><img src="images/gal_1.jpg" alt="Image" class="img-fluid"></a>
  131. </div>
  132. <div class="col-4">
  133. <a href="images/gal_2.jpg" class="gal-item" data-fancybox="gal"><img src="images/gal_2.jpg" alt="Image" class="img-fluid"></a>
  134. </div>
  135. <div class="col-4">
  136. <a href="images/gal_3.jpg" class="gal-item" data-fancybox="gal"><img src="images/gal_3.jpg" alt="Image" class="img-fluid"></a>
  137. </div>
  138. <div class="col-4">
  139. <a href="images/gal_4.jpg" class="gal-item" data-fancybox="gal"><img src="images/gal_4.jpg" alt="Image" class="img-fluid"></a>
  140. </div>
  141. <div class="col-4">
  142. <a href="images/gal_5.jpg" class="gal-item" data-fancybox="gal"><img src="images/gal_5.jpg" alt="Image" class="img-fluid"></a>
  143. </div>
  144. <div class="col-4">
  145. <a href="images/gal_6.jpg" class="gal-item" data-fancybox="gal"><img src="images/gal_6.jpg" alt="Image" class="img-fluid"></a>
  146. </div>
  147. </div>
  148. </div> <!-- END .custom-block -->
  149. <div class="custom-block" data-aos="fade-up">
  150. <h2 class="section-title">Video</h2>
  151. <a href="https://vimeo.com/342333493" data-fancybox class="video-wrap">
  152. <span class="play-wrap"><span class="icon-play"></span></span>
  153. <img src="images/gal_2.jpg" alt="Image" class="img-fluid rounded">
  154. </a>
  155. </div> <!-- END .custom-block -->
  156. </div> <!-- /.col-lg-6 -->
  157. <div class="col-lg-6">
  158. <div class="custom-block" data-aos="fade-up" data-aos-delay="100">
  159. <h2 class="section-title">Form</h2>
  160. <form class="contact-form bg-white">
  161. <div class="row">
  162. <div class="col-md-6">
  163. <div class="form-group">
  164. <label class="text-black" for="fname">First name</label>
  165. <input type="text" class="form-control" id="fname">
  166. </div>
  167. </div>
  168. <div class="col-md-6">
  169. <div class="form-group">
  170. <label class="text-black" for="lname">Last name</label>
  171. <input type="text" class="form-control" id="lname">
  172. </div>
  173. </div>
  174. </div>
  175. <div class="form-group">
  176. <label class="text-black" for="email">Email address</label>
  177. <input type="email" class="form-control" id="email" aria-describedby="emailHelp">
  178. <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  179. </div>
  180. <div class="form-group">
  181. <label class="text-black" for="password">Password</label>
  182. <input type="password" class="form-control" id="password">
  183. </div>
  184. <div class="form-group">
  185. <label class="text-black" for="message">Message</label>
  186. <textarea name="" class="form-control" id="message" cols="30" rows="5"></textarea>
  187. </div>
  188. <div class="form-group">
  189. <label class="text-black" for="select">Select</label>
  190. <select name="" id="select" class="custom-select">
  191. <option value="">Untree.co</option>
  192. <option value="">Offers high quality free template</option>
  193. </select>
  194. </div>
  195. <div class="form-group">
  196. <label class="control control--checkbox">
  197. <span class="caption">Custom checkbox</span>
  198. <input type="checkbox" checked="checked" />
  199. <div class="control__indicator"></div>
  200. </label>
  201. </div>
  202. <button type="submit" class="btn btn-primary">Submit</button>
  203. </form>
  204. </div>
  205. <div class="custom-block" data-aos="fade-up">
  206. <h2 class="section-title">Social Icons</h2>
  207. <ul class="list-unstyled social-icons light">
  208. <li><a href="#"><span class="icon-facebook"></span></a></li>
  209. <li><a href="#"><span class="icon-twitter"></span></a></li>
  210. <li><a href="#"><span class="icon-linkedin"></span></a></li>
  211. <li><a href="#"><span class="icon-google"></span></a></li>
  212. <li><a href="#"><span class="icon-play"></span></a></li>
  213. </ul>
  214. </div> <!-- END .custom-block -->
  215. <div class="custom-block" data-aos="fade-up" data-aos-delay="100">
  216. <h2 class="section-title text-center">Slider</h2>
  217. <div class="owl-single owl-carousel no-nav">
  218. <div class="testimonial mx-auto">
  219. <figure class="img-wrap">
  220. <img src="images/person_2.jpg" alt="Image" class="img-fluid">
  221. </figure>
  222. <h3 class="name">Adam Aderson</h3>
  223. <blockquote>
  224. <p>&ldquo;There live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.&rdquo;</p>
  225. </blockquote>
  226. </div>
  227. <div class="testimonial mx-auto">
  228. <figure class="img-wrap">
  229. <img src="images/person_3.jpg" alt="Image" class="img-fluid">
  230. </figure>
  231. <h3 class="name">Lukas Devlin</h3>
  232. <blockquote>
  233. <p>&ldquo;There live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.&rdquo;</p>
  234. </blockquote>
  235. </div>
  236. <div class="testimonial mx-auto">
  237. <figure class="img-wrap">
  238. <img src="images/person_4.jpg" alt="Image" class="img-fluid">
  239. </figure>
  240. <h3 class="name">Kayla Bryant</h3>
  241. <blockquote>
  242. <p>&ldquo;There live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.&rdquo;</p>
  243. </blockquote>
  244. </div>
  245. </div>
  246. </div>
  247. </div> <!-- /.col-lg-6 -->
  248. </div> <!-- /.row -->
  249. </div> <!-- /.container -->
  250. </div> <!-- /.untree_co-section -->
  251. <div class="site-footer">
  252. <div class="inner first">
  253. <div class="container">
  254. <div class="row">
  255. <div class="col-md-6 col-lg-4">
  256. <div class="widget">
  257. <h3 class="heading">About Untree.co</h3>
  258. <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
  259. </div>
  260. <div class="widget">
  261. <ul class="list-unstyled social">
  262. <li><a href="#"><span class="icon-dribbble"></span></a></li>
  263. <li><a href="#"><span class="icon-linkedin"></span></a></li>
  264. <li><a href="#"><span class="icon-twitter"></span></a></li>
  265. <li><a href="#"><span class="icon-instagram"></span></a></li>
  266. <li><a href="#"><span class="icon-facebook"></span></a></li>
  267. </ul>
  268. </div>
  269. </div>
  270. <div class="col-md-6 col-lg-2 pl-lg-5">
  271. <div class="widget">
  272. <h3 class="heading">Pages</h3>
  273. <ul class="links list-unstyled">
  274. <li><a href="#">Services</a></li>
  275. <li><a href="#">Terms</a></li>
  276. <li><a href="#">Privacy</a></li>
  277. <li><a href="#">Buy</a></li>
  278. <li><a href="#">Sell</a></li>
  279. </ul>
  280. </div>
  281. </div>
  282. <div class="col-md-6 col-lg-2">
  283. <div class="widget">
  284. <h3 class="heading">Resources</h3>
  285. <ul class="links list-unstyled">
  286. <li><a href="#">Blog</a></li>
  287. <li><a href="#">About</a></li>
  288. <li><a href="#">Contact</a></li>
  289. </ul>
  290. </div>
  291. </div>
  292. <div class="col-md-6 col-lg-4">
  293. <div class="widget">
  294. <h3 class="heading">Contact</h3>
  295. <ul class="list-unstyled quick-info links">
  296. <li class="email"><a href="#">info@untree.co</a></li>
  297. <li class="phone"><a href="#">+1 222 212 3819</a></li>
  298. <li class="address"><a href="#">43 Raymouth Rd. Baltemoer, London 3910</a></li>
  299. </ul>
  300. </div>
  301. </div>
  302. </div>
  303. </div>
  304. </div>
  305. <div class="inner dark">
  306. <div class="container">
  307. <div class="row text-center text-md-left">
  308. <div class="col-md-6 mb-3 mb-md-0">
  309. <p>Copyright &copy;<script>document.write(new Date().getFullYear());</script>. All Rights Reserved. &mdash; Designed with love by <a href="https://untree.co">Untree.co</a> <!-- License information: https://untree.co/license/ -->
  310. </p>
  311. </div>
  312. <div class="col-md-6 text-md-right">
  313. <a href="#" class="mx-2">Terms</a>
  314. <a href="#" class="mx-2">Privacy</a>
  315. </div>
  316. </div>
  317. </div>
  318. </div>
  319. </div>
  320. <div id="overlayer"></div>
  321. <div class="loader">
  322. <div class="spinner-border" role="status">
  323. <span class="sr-only">Loading...</span>
  324. </div>
  325. </div>
  326. <script src="js/jquery-3.4.1.min.js"></script>
  327. <script src="js/popper.min.js"></script>
  328. <script src="js/bootstrap.min.js"></script>
  329. <script src="js/owl.carousel.min.js"></script>
  330. <script src="js/jquery.animateNumber.min.js"></script>
  331. <script src="js/jquery.waypoints.min.js"></script>
  332. <script src="js/jquery.fancybox.min.js"></script>
  333. <script src="js/aos.js"></script>
  334. <script src="js/jarallax.min.js"></script>
  335. <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  336. <script src="js/custom.js"></script>
  337. <!-- Global site tag (gtag.js) - Google Analytics -->
  338. </body>
  339. </html>