basic-grid.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  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 | Basic Grid</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. <style type="text/css">
  16. /* DEMO ONLY */
  17. .container .demo{text-align:center;}
  18. .container .demo div{padding:8px 0;}
  19. .container .demo div:nth-child(odd){color:#FFFFFF; background:#CCCCCC;}
  20. .container .demo div:nth-child(even){color:#FFFFFF; background:#979797;}
  21. @media screen and (max-width:900px){.container .demo div{margin-bottom:0;}}
  22. /* DEMO ONLY */
  23. </style>
  24. </head>
  25. <body id="top">
  26. <!-- ################################################################################################ -->
  27. <!-- ################################################################################################ -->
  28. <!-- ################################################################################################ -->
  29. <!-- Top Background Image Wrapper -->
  30. <div class="bgded overlay" style="background-image:url('../images/demo/backgrounds/01.png');">
  31. <!-- ################################################################################################ -->
  32. <div class="wrapper row1">
  33. <header id="header" class="hoc clear">
  34. <!-- ################################################################################################ -->
  35. <div id="logo" class="fl_left">
  36. <h1><a href="../index.html">Pobabini</a></h1>
  37. </div>
  38. <nav id="mainav" class="fl_right">
  39. <ul class="clear">
  40. <li><a href="../index.html">Home</a></li>
  41. <li class="active"><a class="drop" href="#">Pages</a>
  42. <ul>
  43. <li><a href="gallery.html">Gallery</a></li>
  44. <li><a href="full-width.html">Full Width</a></li>
  45. <li><a href="sidebar-left.html">Sidebar Left</a></li>
  46. <li><a href="sidebar-right.html">Sidebar Right</a></li>
  47. <li class="active"><a href="basic-grid.html">Basic Grid</a></li>
  48. </ul>
  49. </li>
  50. <li><a class="drop" href="#">Dropdown</a>
  51. <ul>
  52. <li><a href="#">Level 2</a></li>
  53. <li><a class="drop" href="#">Level 2 + Drop</a>
  54. <ul>
  55. <li><a href="#">Level 3</a></li>
  56. <li><a href="#">Level 3</a></li>
  57. <li><a href="#">Level 3</a></li>
  58. </ul>
  59. </li>
  60. <li><a href="#">Level 2</a></li>
  61. </ul>
  62. </li>
  63. <li><a href="#">Link Text</a></li>
  64. <li><a href="#">Link Text</a></li>
  65. </ul>
  66. </nav>
  67. <!-- ################################################################################################ -->
  68. </header>
  69. </div>
  70. <!-- ################################################################################################ -->
  71. <!-- ################################################################################################ -->
  72. <!-- ################################################################################################ -->
  73. <div class="wrapper row2">
  74. <div id="breadcrumb" class="hoc clear">
  75. <!-- ################################################################################################ -->
  76. <ul>
  77. <li><a href="#">Home</a></li>
  78. <li><a href="#">Lorem</a></li>
  79. <li><a href="#">Ipsum</a></li>
  80. <li><a href="#">Dolor</a></li>
  81. </ul>
  82. <!-- ################################################################################################ -->
  83. </div>
  84. </div>
  85. <!-- ################################################################################################ -->
  86. </div>
  87. <!-- End Top Background Image Wrapper -->
  88. <!-- ################################################################################################ -->
  89. <!-- ################################################################################################ -->
  90. <!-- ################################################################################################ -->
  91. <div class="wrapper row3">
  92. <main class="hoc container clear">
  93. <!-- main body -->
  94. <!-- ################################################################################################ -->
  95. <div class="content">
  96. <!-- ################################################################################################ -->
  97. <h2>Half</h2>
  98. <!-- ################################################################################################ -->
  99. <div class="group btmspace-50 demo">
  100. <div class="one_half first">1/2</div>
  101. <div class="one_half">1/2</div>
  102. </div>
  103. <!-- ################################################################################################ -->
  104. <h2>Quarter</h2>
  105. <!-- ################################################################################################ -->
  106. <div class="group btmspace-50 demo">
  107. <div class="one_quarter first">1/4</div>
  108. <div class="one_quarter">1/4</div>
  109. <div class="one_quarter">1/4</div>
  110. <div class="one_quarter">1/4</div>
  111. </div>
  112. <div class="group btmspace-50 demo">
  113. <div class="one_quarter first">1/4</div>
  114. <div class="one_quarter">1/4</div>
  115. <div class="two_quarter">2/4 or 1/2</div>
  116. </div>
  117. <div class="group btmspace-50 demo">
  118. <div class="one_quarter first">1/4</div>
  119. <div class="three_quarter">3/4</div>
  120. </div>
  121. <!-- ################################################################################################ -->
  122. <h2>Third</h2>
  123. <!-- ################################################################################################ -->
  124. <div class="group btmspace-50 demo">
  125. <div class="one_third first">1/3</div>
  126. <div class="one_third">1/3</div>
  127. <div class="one_third">1/3</div>
  128. </div>
  129. <div class="group demo">
  130. <div class="one_third first">1/3</div>
  131. <div class="two_third">2/3</div>
  132. </div>
  133. <!-- ################################################################################################ -->
  134. </div>
  135. <!-- ################################################################################################ -->
  136. <!-- / main body -->
  137. <div class="clear"></div>
  138. </main>
  139. </div>
  140. <!-- ################################################################################################ -->
  141. <!-- ################################################################################################ -->
  142. <!-- ################################################################################################ -->
  143. <div class="wrapper coloured">
  144. <div id="social" class="hoc clear">
  145. <!-- ################################################################################################ -->
  146. <div class="one_half first">
  147. <h6 class="title">Social Media</h6>
  148. <ul class="faico clear">
  149. <li><a class="faicon-facebook" href="#"><i class="fa fa-facebook"></i></a></li>
  150. <li><a class="faicon-pinterest" href="#"><i class="fa fa-pinterest"></i></a></li>
  151. <li><a class="faicon-twitter" href="#"><i class="fa fa-twitter"></i></a></li>
  152. <li><a class="faicon-dribble" href="#"><i class="fa fa-dribbble"></i></a></li>
  153. <li><a class="faicon-linkedin" href="#"><i class="fa fa-linkedin"></i></a></li>
  154. <li><a class="faicon-google-plus" href="#"><i class="fa fa-google-plus"></i></a></li>
  155. <li><a class="faicon-vk" href="#"><i class="fa fa-vk"></i></a></li>
  156. <li><a class="faicon-youtube" href="#"><i class="fa fa-youtube"></i></a></li>
  157. <li><a class="faicon-rss" href="#"><i class="fa fa-rss"></i></a></li>
  158. </ul>
  159. </div>
  160. <div class="one_half">
  161. <h6 class="title">Newsletter sign-up</h6>
  162. <form class="clear" method="post" action="#">
  163. <fieldset>
  164. <legend>Newsletter:</legend>
  165. <input type="text" value="" placeholder="Type Email Here&hellip;">
  166. <button class="fa fa-share" type="submit" title="Submit"><em>Submit</em></button>
  167. </fieldset>
  168. </form>
  169. </div>
  170. <!-- ################################################################################################ -->
  171. </div>
  172. </div>
  173. <!-- ################################################################################################ -->
  174. <!-- ################################################################################################ -->
  175. <!-- ################################################################################################ -->
  176. <div class="wrapper row4">
  177. <footer id="footer" class="hoc clear">
  178. <!-- ################################################################################################ -->
  179. <div class="one_third first">
  180. <h6 class="title">Quam aliquam ac</h6>
  181. <p>Molestie metus non pharetra felis donec volutpat molestie ligula imperdiet laoreet dolor scelerisque eu nunc aliquet tortor erat ut tempus justo tristique.</p>
  182. <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>
  183. </div>
  184. <div class="one_third">
  185. <h6 class="title">Morbi ullamcorper</h6>
  186. <ul class="nospace linklist contact">
  187. <li><i class="fa fa-map-marker"></i>
  188. <address>
  189. Street Name &amp; Number, Town, Postcode/Zip
  190. </address>
  191. </li>
  192. <li><i class="fa fa-phone"></i> +00 (123) 456 7890</li>
  193. <li><i class="fa fa-fax"></i> +00 (123) 456 7890</li>
  194. <li><i class="fa fa-envelope-o"></i> info@domain.com</li>
  195. </ul>
  196. </div>
  197. <div class="one_third">
  198. <h6 class="title">Finibus mauris</h6>
  199. <ul class="nospace linklist">
  200. <li>
  201. <article>
  202. <h2 class="nospace font-x1"><a href="#">Suscipit mauris nunc</a></h2>
  203. <time class="font-xs block btmspace-10" datetime="2045-04-06">Friday, 6<sup>th</sup> April 2045</time>
  204. <p class="nospace">Euismod leo pulvinar a aenean vehicula varius eros convallis sagittis integer&hellip;</p>
  205. </article>
  206. </li>
  207. <li>
  208. <article>
  209. <h2 class="nospace font-x1"><a href="#">Eros magna sed</a></h2>
  210. <time class="font-xs block btmspace-10" datetime="2045-04-05">Thursday, 5<sup>th</sup> April 2045</time>
  211. <p class="nospace">Posuere donec posuere elit condimentum aliquet eget eu elit sed eget massa&hellip;</p>
  212. </article>
  213. </li>
  214. </ul>
  215. </div>
  216. <!-- ################################################################################################ -->
  217. </footer>
  218. </div>
  219. <!-- ################################################################################################ -->
  220. <!-- ################################################################################################ -->
  221. <!-- ################################################################################################ -->
  222. <div class="wrapper row5">
  223. <div id="copyright" class="hoc clear">
  224. <!-- ################################################################################################ -->
  225. <p class="fl_left">Copyright &copy; 2016 - All Rights Reserved - <a href="#">Domain Name</a></p>
  226. <p class="fl_right">Template by <a target="_blank" href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
  227. <!-- ################################################################################################ -->
  228. </div>
  229. </div>
  230. <!-- ################################################################################################ -->
  231. <!-- ################################################################################################ -->
  232. <!-- ################################################################################################ -->
  233. <a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>
  234. <!-- JAVASCRIPTS -->
  235. <script src="../layout/scripts/jquery.min.js"></script>
  236. <script src="../layout/scripts/jquery.backtotop.js"></script>
  237. <script src="../layout/scripts/jquery.mobilemenu.js"></script>
  238. </body>
  239. </html>