index.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  1. <!DOCTYPE html>
  2. <!--
  3. Template Name: Pobabini
  4. Author: <a href="http://www.os-templates.com/">OS Templates</a>
  5. Author URI: http://www.os-templates.com/
  6. Licence: Free to use under our free template licence terms
  7. Licence URI: http://www.os-templates.com/template-terms
  8. -->
  9. <html>
  10. <head>
  11. <title>Pobabini</title>
  12. <meta charset="utf-8">
  13. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  14. <link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
  15. </head>
  16. <body id="top">
  17. <!-- ################################################################################################ -->
  18. <!-- ################################################################################################ -->
  19. <!-- ################################################################################################ -->
  20. <!-- Top Background Image Wrapper -->
  21. <div class="bgded overlay" style="background-image:url('images/demo/backgrounds/01.png');">
  22. <!-- ################################################################################################ -->
  23. <div class="wrapper row1">
  24. <header id="header" class="hoc clear">
  25. <!-- ################################################################################################ -->
  26. <div id="logo" class="fl_left">
  27. <h1><a href="index.html">Pobabini</a></h1>
  28. </div>
  29. <nav id="mainav" class="fl_right">
  30. <ul class="clear">
  31. <li class="active"><a href="index.html">Home</a></li>
  32. <li><a class="drop" href="#">Pages</a>
  33. <ul>
  34. <li><a href="pages/gallery.html">Gallery</a></li>
  35. <li><a href="pages/full-width.html">Full Width</a></li>
  36. <li><a href="pages/sidebar-left.html">Sidebar Left</a></li>
  37. <li><a href="pages/sidebar-right.html">Sidebar Right</a></li>
  38. <li><a href="pages/basic-grid.html">Basic Grid</a></li>
  39. </ul>
  40. </li>
  41. <li><a class="drop" href="#">Dropdown</a>
  42. <ul>
  43. <li><a href="#">Level 2</a></li>
  44. <li><a class="drop" href="#">Level 2 + Drop</a>
  45. <ul>
  46. <li><a href="#">Level 3</a></li>
  47. <li><a href="#">Level 3</a></li>
  48. <li><a href="#">Level 3</a></li>
  49. </ul>
  50. </li>
  51. <li><a href="#">Level 2</a></li>
  52. </ul>
  53. </li>
  54. <li><a href="#">Link Text</a></li>
  55. <li><a href="#">Link Text</a></li>
  56. </ul>
  57. </nav>
  58. <!-- ################################################################################################ -->
  59. </header>
  60. </div>
  61. <!-- ################################################################################################ -->
  62. <!-- ################################################################################################ -->
  63. <!-- ################################################################################################ -->
  64. <div id="pageintro" class="hoc clear">
  65. <!-- ################################################################################################ -->
  66. <article>
  67. <h2 class="heading">Condimentum pellentesque</h2>
  68. <p>integer condimentum sed nisl sed dictum vestibulum fringilla elementum mauris quis sagittis integer ornare feugiat lectus quis dictum vestibulum ante ipsum primis.</p>
  69. <footer>
  70. <ul class="nospace inline pushright">
  71. <li><a class="btn" href="#">Faucibus orci</a></li>
  72. <li><a class="btn inverse" href="#">Ultrices posuere</a></li>
  73. </ul>
  74. </footer>
  75. </article>
  76. <!-- ################################################################################################ -->
  77. </div>
  78. <!-- ################################################################################################ -->
  79. </div>
  80. <!-- End Top Background Image Wrapper -->
  81. <!-- ################################################################################################ -->
  82. <!-- ################################################################################################ -->
  83. <!-- ################################################################################################ -->
  84. <div class="wrapper row3">
  85. <main class="hoc container clear">
  86. <!-- main body -->
  87. <!-- ################################################################################################ -->
  88. <div class="center btmspace-50">
  89. <h3 class="font-x2 nospace">Cubilia curae proin ligula</h3>
  90. <p class="nospace">Leo dui a tincidunt euismod tellus vivamus facilisis lectus cursus <a href="#">laoreet auctor</a>.</p>
  91. </div>
  92. <ul class="nospace group services">
  93. <li class="one_third first">
  94. <article><a href="#"><i class="fa fa-paperclip"></i></a>
  95. <h6 class="heading">Duis dapibus lacus</h6>
  96. <p>Eu sem dignissim sed placerat ex rutrum phasellus at rhoncus quam mauris sit amet libero&hellip;</p>
  97. <footer><a href="#">View Details &raquo;</a></footer>
  98. </article>
  99. </li>
  100. <li class="one_third">
  101. <article><a href="#"><i class="fa fa-calculator"></i></a>
  102. <h6 class="heading">Ullamcorper ornare</h6>
  103. <p>Rhoncus nullam at varius augue nam fringilla nunc ac orci ornare posuere suspendisse dictum lacus&hellip;</p>
  104. <footer><a href="#">View Details &raquo;</a></footer>
  105. </article>
  106. </li>
  107. <li class="one_third">
  108. <article><a href="#"><i class="fa fa-pie-chart"></i></a>
  109. <h6 class="heading">Posuere fusce sit</h6>
  110. <p>Amet odio sit amet augue pharetra pulvinar at quis justo in lacinia pretium posuere nunc&hellip;</p>
  111. <footer><a href="#">View Details &raquo;</a></footer>
  112. </article>
  113. </li>
  114. <li class="one_third first">
  115. <article><a href="#"><i class="fa fa-recycle"></i></a>
  116. <h6 class="heading">Tempus vel risus</h6>
  117. <p>Mollis lobortis sapien nullam elementum dignissim eleifend nunc lobortis aliquet curabitur&hellip;</p>
  118. <footer><a href="#">View Details &raquo;</a></footer>
  119. </article>
  120. </li>
  121. <li class="one_third">
  122. <article><a href="#"><i class="fa fa-code-fork"></i></a>
  123. <h6 class="heading">Nec ultrices ipsum</h6>
  124. <p>Maximus ut in semper nibh at mattis condimentum odio dui neque sit amet vulputate arcu vitae nibh&hellip;</p>
  125. <footer><a href="#">View Details &raquo;</a></footer>
  126. </article>
  127. </li>
  128. <li class="one_third">
  129. <article><a href="#"><i class="fa fa-cogs"></i></a>
  130. <h6 class="heading">Fringilla viverra</h6>
  131. <p>Rutrum in gravida efficitur diam vel porta odio cursus eu aliquam amet nunc interdum malesuada&hellip;</p>
  132. <footer><a href="#">View Details &raquo;</a></footer>
  133. </article>
  134. </li>
  135. </ul>
  136. <!-- ################################################################################################ -->
  137. <!-- / main body -->
  138. <div class="clear"></div>
  139. </main>
  140. </div>
  141. <!-- ################################################################################################ -->
  142. <!-- ################################################################################################ -->
  143. <!-- ################################################################################################ -->
  144. <div class="wrapper">
  145. <div class="split clear" style="background-image:url('images/demo/backgrounds/02.png');">
  146. <section class="box">
  147. <!-- ################################################################################################ -->
  148. <div class="btmspace-50">
  149. <p class="nospace"><a href="#">Ipsum primis in faucibus</a></p>
  150. <h2 class="heading">Quisque venenatis eleifend</h2>
  151. </div>
  152. <div class="testimonial">
  153. <figure class="clear"><img src="images/demo/60x60.png" alt="">
  154. <figcaption><strong>A.Doe</strong><br>
  155. <em>Position, Company Name</em></figcaption>
  156. </figure>
  157. <blockquote>Enim eget aliquam ex porta in donec in turpis mollis ultricies risus quis varius velit aenean pretium consectetur finibus maecenas magna arcu consectetur sit amet nisi quis consectetur faucibus augue morbi iaculis elit vel dui viverra porta mauris.</blockquote>
  158. </div>
  159. <!-- ################################################################################################ -->
  160. </section>
  161. </div>
  162. </div>
  163. <!-- ################################################################################################ -->
  164. <!-- ################################################################################################ -->
  165. <!-- ################################################################################################ -->
  166. <div class="wrapper row3">
  167. <div class="hoc container clear">
  168. <!-- ################################################################################################ -->
  169. <div class="center btmspace-50">
  170. <h3 class="font-x2 nospace">Vitae diam pellentesque</h3>
  171. <p class="nospace">Fermentum nulla cursus porttitor imperdiet suspendisse vel diam dui mauris <a href="#">faucibus sed</a>.</p>
  172. </div>
  173. <ul class="nospace group elements">
  174. <li class="one_third first">
  175. <figure><img src="images/demo/320x240.png" alt="">
  176. <figcaption><a href="#">Gravida</a></figcaption>
  177. </figure>
  178. </li>
  179. <li class="one_third">
  180. <figure><img src="images/demo/320x240.png" alt="">
  181. <figcaption><a href="#">Elementum</a></figcaption>
  182. </figure>
  183. </li>
  184. <li class="one_third">
  185. <figure><img src="images/demo/320x240.png" alt="">
  186. <figcaption><a href="#">Vehicula</a></figcaption>
  187. </figure>
  188. </li>
  189. <li class="one_third first">
  190. <figure><img src="images/demo/320x240.png" alt="">
  191. <figcaption><a href="#">Scelerisque</a></figcaption>
  192. </figure>
  193. </li>
  194. <li class="one_third">
  195. <figure><img src="images/demo/320x240.png" alt="">
  196. <figcaption><a href="#">Pharetra</a></figcaption>
  197. </figure>
  198. </li>
  199. <li class="one_third">
  200. <figure><img src="images/demo/320x240.png" alt="">
  201. <figcaption><a href="#">Ullamcorper</a></figcaption>
  202. </figure>
  203. </li>
  204. </ul>
  205. <!-- ################################################################################################ -->
  206. <div class="clear"></div>
  207. </div>
  208. </div>
  209. <!-- ################################################################################################ -->
  210. <!-- ################################################################################################ -->
  211. <!-- ################################################################################################ -->
  212. <div class="wrapper coloured">
  213. <div id="social" class="hoc clear">
  214. <!-- ################################################################################################ -->
  215. <div class="one_half first">
  216. <h6 class="title">Social Media</h6>
  217. <ul class="faico clear">
  218. <li><a class="faicon-facebook" href="#"><i class="fa fa-facebook"></i></a></li>
  219. <li><a class="faicon-pinterest" href="#"><i class="fa fa-pinterest"></i></a></li>
  220. <li><a class="faicon-twitter" href="#"><i class="fa fa-twitter"></i></a></li>
  221. <li><a class="faicon-dribble" href="#"><i class="fa fa-dribbble"></i></a></li>
  222. <li><a class="faicon-linkedin" href="#"><i class="fa fa-linkedin"></i></a></li>
  223. <li><a class="faicon-google-plus" href="#"><i class="fa fa-google-plus"></i></a></li>
  224. <li><a class="faicon-vk" href="#"><i class="fa fa-vk"></i></a></li>
  225. <li><a class="faicon-youtube" href="#"><i class="fa fa-youtube"></i></a></li>
  226. <li><a class="faicon-rss" href="#"><i class="fa fa-rss"></i></a></li>
  227. </ul>
  228. </div>
  229. <div class="one_half">
  230. <h6 class="title">Newsletter sign-up</h6>
  231. <form class="clear" method="post" action="#">
  232. <fieldset>
  233. <legend>Newsletter:</legend>
  234. <input type="text" value="" placeholder="Type Email Here&hellip;">
  235. <button class="fa fa-share" type="submit" title="Submit"><em>Submit</em></button>
  236. </fieldset>
  237. </form>
  238. </div>
  239. <!-- ################################################################################################ -->
  240. </div>
  241. </div>
  242. <!-- ################################################################################################ -->
  243. <!-- ################################################################################################ -->
  244. <!-- ################################################################################################ -->
  245. <div class="wrapper row4">
  246. <footer id="footer" class="hoc clear">
  247. <!-- ################################################################################################ -->
  248. <div class="one_third first">
  249. <h6 class="title">Quam aliquam ac</h6>
  250. <p>Molestie metus non pharetra felis donec volutpat molestie ligula imperdiet laoreet dolor scelerisque eu nunc aliquet tortor erat ut tempus justo tristique.</p>
  251. <p>Condimentum vivamus tempus nisi et augue fringilla aliquet mauris scelerisque sollicitudin justo non posuere nunc mollis facilisis purus imperdiet aliquet nisi consectetur et phasellus.</p>
  252. </div>
  253. <div class="one_third">
  254. <h6 class="title">Morbi ullamcorper</h6>
  255. <ul class="nospace linklist contact">
  256. <li><i class="fa fa-map-marker"></i>
  257. <address>
  258. Street Name &amp; Number, Town, Postcode/Zip
  259. </address>
  260. </li>
  261. <li><i class="fa fa-phone"></i> +00 (123) 456 7890</li>
  262. <li><i class="fa fa-fax"></i> +00 (123) 456 7890</li>
  263. <li><i class="fa fa-envelope-o"></i> info@domain.com</li>
  264. </ul>
  265. </div>
  266. <div class="one_third">
  267. <h6 class="title">Finibus mauris</h6>
  268. <ul class="nospace linklist">
  269. <li>
  270. <article>
  271. <h2 class="nospace font-x1"><a href="#">Suscipit mauris nunc</a></h2>
  272. <time class="font-xs block btmspace-10" datetime="2045-04-06">Friday, 6<sup>th</sup> April 2045</time>
  273. <p class="nospace">Euismod leo pulvinar a aenean vehicula varius eros convallis sagittis integer&hellip;</p>
  274. </article>
  275. </li>
  276. <li>
  277. <article>
  278. <h2 class="nospace font-x1"><a href="#">Eros magna sed</a></h2>
  279. <time class="font-xs block btmspace-10" datetime="2045-04-05">Thursday, 5<sup>th</sup> April 2045</time>
  280. <p class="nospace">Posuere donec posuere elit condimentum aliquet eget eu elit sed eget massa&hellip;</p>
  281. </article>
  282. </li>
  283. </ul>
  284. </div>
  285. <!-- ################################################################################################ -->
  286. </footer>
  287. </div>
  288. <!-- ################################################################################################ -->
  289. <!-- ################################################################################################ -->
  290. <!-- ################################################################################################ -->
  291. <div class="wrapper row5">
  292. <div id="copyright" class="hoc clear">
  293. <!-- ################################################################################################ -->
  294. <p class="fl_left">Copyright &copy; 2016 - All Rights Reserved - <a href="#">Domain Name</a></p>
  295. <p class="fl_right">Template by <a target="_blank" href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
  296. <!-- ################################################################################################ -->
  297. </div>
  298. </div>
  299. <!-- ################################################################################################ -->
  300. <!-- ################################################################################################ -->
  301. <!-- ################################################################################################ -->
  302. <a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>
  303. <!-- JAVASCRIPTS -->
  304. <script src="layout/scripts/jquery.min.js"></script>
  305. <script src="layout/scripts/jquery.backtotop.js"></script>
  306. <script src="layout/scripts/jquery.mobilemenu.js"></script>
  307. </body>
  308. </html>