gallery.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  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 | Pages | Gallery</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><a href="../index.html">Home</a></li>
  32. <li class="active"><a class="drop" href="#">Pages</a>
  33. <ul>
  34. <li class="active"><a href="gallery.html">Gallery</a></li>
  35. <li><a href="full-width.html">Full Width</a></li>
  36. <li><a href="sidebar-left.html">Sidebar Left</a></li>
  37. <li><a href="sidebar-right.html">Sidebar Right</a></li>
  38. <li><a href="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 class="wrapper row2">
  65. <div id="breadcrumb" class="hoc clear">
  66. <!-- ################################################################################################ -->
  67. <ul>
  68. <li><a href="#">Home</a></li>
  69. <li><a href="#">Lorem</a></li>
  70. <li><a href="#">Ipsum</a></li>
  71. <li><a href="#">Dolor</a></li>
  72. </ul>
  73. <!-- ################################################################################################ -->
  74. </div>
  75. </div>
  76. <!-- ################################################################################################ -->
  77. </div>
  78. <!-- End Top Background Image Wrapper -->
  79. <!-- ################################################################################################ -->
  80. <!-- ################################################################################################ -->
  81. <!-- ################################################################################################ -->
  82. <div class="wrapper row3">
  83. <main class="hoc container clear">
  84. <!-- main body -->
  85. <!-- ################################################################################################ -->
  86. <div class="content">
  87. <!-- ################################################################################################ -->
  88. <div id="gallery">
  89. <figure>
  90. <header class="heading">Gallery Title Goes Here</header>
  91. <ul class="nospace clear">
  92. <li class="one_quarter first"><a href="#"><img src="../images/demo/gallery/01.png" alt=""></a></li>
  93. <li class="one_quarter"><a href="#"><img src="../images/demo/gallery/01.png" alt=""></a></li>
  94. <li class="one_quarter"><a href="#"><img src="../images/demo/gallery/01.png" alt=""></a></li>
  95. <li class="one_quarter"><a href="#"><img src="../images/demo/gallery/01.png" alt=""></a></li>
  96. <li class="one_quarter first"><a href="#"><img src="../images/demo/gallery/01.png" alt=""></a></li>
  97. <li class="one_quarter"><a href="#"><img src="../images/demo/gallery/01.png" alt=""></a></li>
  98. <li class="one_quarter"><a href="#"><img src="../images/demo/gallery/01.png" alt=""></a></li>
  99. <li class="one_quarter"><a href="#"><img src="../images/demo/gallery/01.png" alt=""></a></li>
  100. <li class="one_quarter first"><a href="#"><img src="../images/demo/gallery/01.png" alt=""></a></li>
  101. <li class="one_quarter"><a href="#"><img src="../images/demo/gallery/01.png" alt=""></a></li>
  102. <li class="one_quarter"><a href="#"><img src="../images/demo/gallery/01.png" alt=""></a></li>
  103. <li class="one_quarter"><a href="#"><img src="../images/demo/gallery/01.png" alt=""></a></li>
  104. </ul>
  105. <figcaption>Gallery Description Goes Here</figcaption>
  106. </figure>
  107. </div>
  108. <!-- ################################################################################################ -->
  109. <!-- ################################################################################################ -->
  110. <nav class="pagination">
  111. <ul>
  112. <li><a href="#">&laquo; Previous</a></li>
  113. <li><a href="#">1</a></li>
  114. <li><a href="#">2</a></li>
  115. <li><strong>&hellip;</strong></li>
  116. <li><a href="#">6</a></li>
  117. <li class="current"><strong>7</strong></li>
  118. <li><a href="#">8</a></li>
  119. <li><a href="#">9</a></li>
  120. <li><strong>&hellip;</strong></li>
  121. <li><a href="#">14</a></li>
  122. <li><a href="#">15</a></li>
  123. <li><a href="#">Next &raquo;</a></li>
  124. </ul>
  125. </nav>
  126. <!-- ################################################################################################ -->
  127. </div>
  128. <!-- ################################################################################################ -->
  129. <!-- / main body -->
  130. <div class="clear"></div>
  131. </main>
  132. </div>
  133. <!-- ################################################################################################ -->
  134. <!-- ################################################################################################ -->
  135. <!-- ################################################################################################ -->
  136. <div class="wrapper coloured">
  137. <div id="social" class="hoc clear">
  138. <!-- ################################################################################################ -->
  139. <div class="one_half first">
  140. <h6 class="title">Social Media</h6>
  141. <ul class="faico clear">
  142. <li><a class="faicon-facebook" href="#"><i class="fa fa-facebook"></i></a></li>
  143. <li><a class="faicon-pinterest" href="#"><i class="fa fa-pinterest"></i></a></li>
  144. <li><a class="faicon-twitter" href="#"><i class="fa fa-twitter"></i></a></li>
  145. <li><a class="faicon-dribble" href="#"><i class="fa fa-dribbble"></i></a></li>
  146. <li><a class="faicon-linkedin" href="#"><i class="fa fa-linkedin"></i></a></li>
  147. <li><a class="faicon-google-plus" href="#"><i class="fa fa-google-plus"></i></a></li>
  148. <li><a class="faicon-vk" href="#"><i class="fa fa-vk"></i></a></li>
  149. <li><a class="faicon-youtube" href="#"><i class="fa fa-youtube"></i></a></li>
  150. <li><a class="faicon-rss" href="#"><i class="fa fa-rss"></i></a></li>
  151. </ul>
  152. </div>
  153. <div class="one_half">
  154. <h6 class="title">Newsletter sign-up</h6>
  155. <form class="clear" method="post" action="#">
  156. <fieldset>
  157. <legend>Newsletter:</legend>
  158. <input type="text" value="" placeholder="Type Email Here&hellip;">
  159. <button class="fa fa-share" type="submit" title="Submit"><em>Submit</em></button>
  160. </fieldset>
  161. </form>
  162. </div>
  163. <!-- ################################################################################################ -->
  164. </div>
  165. </div>
  166. <!-- ################################################################################################ -->
  167. <!-- ################################################################################################ -->
  168. <!-- ################################################################################################ -->
  169. <div class="wrapper row4">
  170. <footer id="footer" class="hoc clear">
  171. <!-- ################################################################################################ -->
  172. <div class="one_third first">
  173. <h6 class="title">Quam aliquam ac</h6>
  174. <p>Molestie metus non pharetra felis donec volutpat molestie ligula imperdiet laoreet dolor scelerisque eu nunc aliquet tortor erat ut tempus justo tristique.</p>
  175. <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>
  176. </div>
  177. <div class="one_third">
  178. <h6 class="title">Morbi ullamcorper</h6>
  179. <ul class="nospace linklist contact">
  180. <li><i class="fa fa-map-marker"></i>
  181. <address>
  182. Street Name &amp; Number, Town, Postcode/Zip
  183. </address>
  184. </li>
  185. <li><i class="fa fa-phone"></i> +00 (123) 456 7890</li>
  186. <li><i class="fa fa-fax"></i> +00 (123) 456 7890</li>
  187. <li><i class="fa fa-envelope-o"></i> info@domain.com</li>
  188. </ul>
  189. </div>
  190. <div class="one_third">
  191. <h6 class="title">Finibus mauris</h6>
  192. <ul class="nospace linklist">
  193. <li>
  194. <article>
  195. <h2 class="nospace font-x1"><a href="#">Suscipit mauris nunc</a></h2>
  196. <time class="font-xs block btmspace-10" datetime="2045-04-06">Friday, 6<sup>th</sup> April 2045</time>
  197. <p class="nospace">Euismod leo pulvinar a aenean vehicula varius eros convallis sagittis integer&hellip;</p>
  198. </article>
  199. </li>
  200. <li>
  201. <article>
  202. <h2 class="nospace font-x1"><a href="#">Eros magna sed</a></h2>
  203. <time class="font-xs block btmspace-10" datetime="2045-04-05">Thursday, 5<sup>th</sup> April 2045</time>
  204. <p class="nospace">Posuere donec posuere elit condimentum aliquet eget eu elit sed eget massa&hellip;</p>
  205. </article>
  206. </li>
  207. </ul>
  208. </div>
  209. <!-- ################################################################################################ -->
  210. </footer>
  211. </div>
  212. <!-- ################################################################################################ -->
  213. <!-- ################################################################################################ -->
  214. <!-- ################################################################################################ -->
  215. <div class="wrapper row5">
  216. <div id="copyright" class="hoc clear">
  217. <!-- ################################################################################################ -->
  218. <p class="fl_left">Copyright &copy; 2016 - All Rights Reserved - <a href="#">Domain Name</a></p>
  219. <p class="fl_right">Template by <a target="_blank" href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
  220. <!-- ################################################################################################ -->
  221. </div>
  222. </div>
  223. <!-- ################################################################################################ -->
  224. <!-- ################################################################################################ -->
  225. <!-- ################################################################################################ -->
  226. <a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>
  227. <!-- JAVASCRIPTS -->
  228. <script src="../layout/scripts/jquery.min.js"></script>
  229. <script src="../layout/scripts/jquery.backtotop.js"></script>
  230. <script src="../layout/scripts/jquery.mobilemenu.js"></script>
  231. </body>
  232. </html>