API tools faq
paste
Advertisement
virtualideaz

grid template in plain html

virtualideaz
Oct 21st, 2014
142
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.07 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>grid template in plain html</title>
  4. </head>
  5.  
  6. <body>
  7.  
  8. <nav class="top-bar" data-topbar>
  9. <ul class="title-area">
  10.  
  11. <li class="name">
  12. <h1>
  13. <a href="#">
  14. Top Bar Title
  15. </a>
  16. </h1>
  17. </li>
  18. <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  19. </ul>
  20.  
  21. <section class="top-bar-section">
  22.  
  23. <ul class="left">
  24. <li class="divider"></li>
  25. <li class="has-dropdown">
  26. <a class="active" href="#">Main Item 1</a>
  27. <ul class="dropdown">
  28. <li><label>Section Name</label></li>
  29. <li><a href="#" class="">Dropdown Level 1</a></li>
  30. <li><a href="#">Dropdown Option</a></li>
  31. <li><a href="#">Dropdown Option</a></li>
  32. <li class="divider"></li>
  33. <li><label>Section Name</label></li>
  34. <li><a href="#">Dropdown Option</a></li>
  35. <li><a href="#">Dropdown Option</a></li>
  36. <li><a href="#">Dropdown Option</a></li>
  37. <li class="divider"></li>
  38. <li><a href="#">See all →</a></li>
  39. </ul>
  40. </li>
  41. <li class="divider"></li>
  42. <li><a href="#">Main Item 2</a></li>
  43. <li class="divider"></li>
  44. <li class="has-dropdown">
  45. <a href="#">Main Item 3</a>
  46. <ul class="dropdown">
  47. <li><a href="#">Dropdown Option</a></li>
  48. <li><a href="#">Dropdown Option</a></li>
  49. <li><a href="#">Dropdown Option</a></li>
  50. <li class="divider"></li>
  51. <li><a href="#">See all →</a></li>
  52. </ul>
  53. </li>
  54.  
  55. </ul>
  56.  
  57.  
  58. <ul class="right">
  59. <li class="divider"></li>
  60. <li class="has-dropdown">
  61. <a href="#">Main Item 4</a>
  62. <ul class="dropdown">
  63. <li><label>Section Name</label></li>
  64. <li class="has-dropdown">
  65. <a href="#" class="">Has Dropdown, Level 1</a>
  66. <ul class="dropdown">
  67. <li><a href="#">Dropdown Options</a></li>
  68. <li><a href="#">Dropdown Options</a></li>
  69. <li class="has-dropdown">
  70. <a href="#">Has Dropdown, Level 2</a>
  71. <ul class="dropdown test">
  72. <li><a href="#">Subdropdown Option</a></li>
  73. <li><a href="#">Subdropdown Option</a></li>
  74. <li><a href="#">Subdropdown Option</a></li>
  75. </ul>
  76. </li>
  77. <li><a href="#">Subdropdown Option</a></li>
  78. <li><a href="#">Subdropdown Option</a></li>
  79. <li><a href="#">Subdropdown Option</a></li>
  80. </ul>
  81. </li>
  82. <li><a href="#">Dropdown Option</a></li>
  83. <li><a href="#">Dropdown Option</a></li>
  84. <li class="divider"></li>
  85. <li><label>Section Name</label></li>
  86. <li><a href="#">Dropdown Option</a></li>
  87. <li><a href="#">Dropdown Option</a></li>
  88. <li><a href="#">Dropdown Option</a></li>
  89. <li class="divider"></li>
  90. <li><a href="#">See all →</a></li>
  91. </ul>
  92. </li>
  93. <li class="divider"></li>
  94. <li><a href="#">Main Item 5</a></li>
  95. <li class="divider"></li>
  96. <li class="has-dropdown">
  97. <a href="#">Main Item 6</a>
  98. <ul class="dropdown">
  99. <li><a href="#">Dropdown Option</a></li>
  100. <li><a href="#">Dropdown Option</a></li>
  101. <li><a href="#">Dropdown Option</a></li>
  102. <li class="divider"></li>
  103. <li><a href="#">See all →</a></li>
  104. </ul>
  105. </li>
  106. </ul>
  107. </section>
  108. </nav>
  109.  
  110.  
  111.  
  112.  
  113.  
  114.  
  115. <div class="row">
  116.  
  117. <div class="large-3 columns">
  118. <div class="panel">
  119. <h5>Panel Title</h5>
  120. <p>This is a three columns grid panel with an arbitrary height.</p>
  121. </div>
  122. </div>
  123. <div class="large-6 columns">
  124. <div class="panel">
  125. <h5>Panel Title</h5>
  126. <p>This is a six columns grid panel with an arbitrary height. Bacon ipsum dolor sit amet salami ham hock biltong ball tip drumstick sirloin pancetta meatball short loin.</p>
  127. </div>
  128. </div>
  129. <div class="large-3 columns">
  130. <div class="panel">
  131. <h5>Panel Title</h5>
  132. <p>This is a three columns grid panel with an arbitrary height.</p>
  133. </div>
  134. </div>
  135.  
  136. </div>
  137.  
  138.  
  139.  
  140. <div class="row">
  141.  
  142. <div class="large-6 columns">
  143. <div class="panel">
  144. <h5>Panel Title</h5>
  145. <p>This is a six columns grid panel with an arbitrary height. Bacon ipsum dolor sit amet salami ham hock biltong ball tip drumstick sirloin pancetta meatball short loin.</p>
  146. </div>
  147. </div>
  148. <div class="large-2 columns">
  149. <div class="panel">
  150. <p>
  151. <img src="http://placehold.it/200x200"/>
  152. </p>
  153. </div>
  154. </div>
  155. <div class="large-4 columns">
  156. <div class="panel">
  157. <h5>Panel Title</h5>
  158. <p>This is a four columns grid panel with an arbitrary height. Bacon ipsum dolor sit amet salami.</p>
  159. </div>
  160. </div>
  161.  
  162. </div>
  163.  
  164.  
  165. <div class="row">
  166.  
  167. <div class="large-4 columns">
  168. <div class="panel">
  169. <p>
  170. <img src="http://placehold.it/400x300"/>
  171. </p>
  172. </div>
  173. </div>
  174. <div class="large-4 columns">
  175. <div class="panel">
  176. <p>
  177. <img src="http://placehold.it/400x300"/>
  178. </p>
  179. </div>
  180. </div>
  181. <div class="large-4 columns">
  182. <div class="panel">
  183. <p>
  184. <img src="http://placehold.it/400x300"/>
  185. </p>
  186. </div>
  187. </div>
  188.  
  189. </div>
  190.  
  191.  
  192. <div class="row">
  193.  
  194. <div class="large-6 columns">
  195. <div class="panel">
  196. <h5>Panel Title</h5>
  197. <p>This is a six columns grid panel with an arbitrary height. Bacon ipsum dolor sit amet salami ham hock biltong ball tip drumstick sirloin pancetta meatball short loin.</p>
  198. </div>
  199. </div>
  200. <div class="large-3 columns">
  201. <div class="panel">
  202. <h5>Panel Title</h5>
  203. <p>This is a three columns grid panel with an arbitrary height.</p>
  204. </div>
  205. </div>
  206. <div class="large-3 columns">
  207. <div class="panel">
  208. <h5>Panel Title</h5>
  209. <p>This is a three columns grid panel with an arbitrary height.</p>
  210. </div>
  211. </div>
  212.  
  213. </div>
  214.  
  215.  
  216.  
  217.  
  218.  
  219.  
  220.  
  221. <footer class="row">
  222. <div class="large-12 columns">
  223. <hr/>
  224. <div class="row">
  225. <div class="large-6 columns">
  226. <p>© Copyright no one at all. Go to town.</p>
  227. </div>
  228. <div class="large-6 columns">
  229. <ul class="inline-list right">
  230. <li><a href="#">Section 1</a></li>
  231. <li><a href="#">Section 2</a></li>
  232. <li><a href="#">Section 3</a></li>
  233. <li><a href="#">Section 4</a></li>
  234. </ul>
  235. </div>
  236. </div>
  237. </div>
  238. </footer>
  239.  
  240. </body>
  241. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!