demo.html 32 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111
  1. <!doctype html>
  2. <!--[if lt IE 7 ]> <html lang="en-us" class="no-js ie6"> <![endif]-->
  3. <!--[if IE 7 ]> <html lang="en-us" class="no-js ie7"> <![endif]-->
  4. <!--[if IE 8 ]> <html lang="en-us" class="no-js ie8"> <![endif]-->
  5. <!--[if IE 9 ]> <html lang="en-us" class="no-js ie9"> <![endif]-->
  6. <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->
  7. <head>
  8. <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
  9. <meta charset="utf-8">
  10. <title>Columnal Demo Page</title>
  11. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  12. <!-- The Columnal Grid (1140px wide base, load first), Type and image presets, and mobile stylesheet -->
  13. <link rel="stylesheet" href="css/columnal.css" type="text/css" media="screen" />
  14. <!-- Fixes for IE -->
  15. <!--[if lt IE 9]>
  16. <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
  17. <![endif]-->
  18. <!-- use "fixed-984px-ie.css" or "fixed-960px-ie.css for a 984px or 960px fixed width for IE6 and 7 -->
  19. <!--[if lte IE 7]>
  20. <link rel="stylesheet" href="css/fixed-984px-ie.css" type="text/css" media="screen" />
  21. <![endif]-->
  22. <!-- Fixes for IE6, only needed if IE 6 will be supported - width must match 984px or 960px of css file used above -->
  23. <!-- Use .imagescale to fix IE6 issues with full-column width images (class must be added to any image wider than the column it is placed into) -->
  24. <!--[if lte IE 6]>
  25. <link rel="stylesheet" href="css/ie6-984px.css" type="text/css" media="screen" />
  26. <![endif]-->
  27. <!-- End fixes for IE -->
  28. <!-- Customizations here -->
  29. <link rel="stylesheet" href="css/custom.css" type="text/css" media="screen" />
  30. <!-- Page build tools - only needed while creating a site, remove when launching - Gray box colors and page debugging tools -->
  31. <link rel="stylesheet" href="css/build.css" type="text/css" media="screen" />
  32. <style>
  33. <!--
  34. /* These are just styles for the demo, you do not need them for your project */
  35. body {padding-bottom: 40px;}
  36. .col_12.title {background-color: white !important; border-bottom: none;}
  37. -->
  38. </style>
  39. </head>
  40. <body>
  41. <div class="container test">
  42. <div class="row">
  43. <div class="col_12">
  44. <h1>Demo page for Columnal system (12-column grid)</h1>
  45. </div>
  46. </div>
  47. </div><!--class="container" -->
  48. <!-- -->
  49. <div class="container test">
  50. <div class="row">
  51. <div class="col_12 title"><h4>prefixes & 1-column</h4></div>
  52. <div class="pre_1 col_1">pre_1</div>
  53. <div class="pre_2 col_1">pre_2</div>
  54. <div class="pre_3 col_1">pre_3</div>
  55. <div class="col_1">&nbsp;</div>
  56. <div class="col_1">&nbsp;</div>
  57. <div class="col_1 omega">&nbsp;</div>
  58. </div>
  59. </div><!--class="container" -->
  60. <div class="container test">
  61. <div class="row">
  62. <div class="col_12 title"><h4>prefixes & 1-column</h4></div>
  63. <div class="pre_4 col_1">pre_4</div>
  64. <div class="pre_5 col_1">pre_5</div>
  65. <div class="col_1 omega">&nbsp;</div>
  66. </div>
  67. </div><!--class="container" -->
  68. <!-- -->
  69. <div class="container test">
  70. <div class="row">
  71. <div class="col_12 title"><h4>1-column</h4></div>
  72. <div class="col_1 clearleft">&nbsp;</div>
  73. <div class="col_1">&nbsp;</div>
  74. <div class="col_1">&nbsp;</div>
  75. <div class="col_1">&nbsp;</div>
  76. <div class="col_1">&nbsp;</div>
  77. <div class="col_1">&nbsp;</div>
  78. <div class="col_1">&nbsp;</div>
  79. <div class="col_1">&nbsp;</div>
  80. <div class="col_1">&nbsp;</div>
  81. <div class="col_1">&nbsp;</div>
  82. <div class="col_1">&nbsp;</div>
  83. <div class="col_1 omega">&nbsp;</div>
  84. </div>
  85. </div><!--class="container" -->
  86. <div class="container test">
  87. <div class="row">
  88. <div class="col_12 title"><h4>2-column</h4></div>
  89. <div class="col_2 clearleft">&nbsp;</div>
  90. <div class="col_2">&nbsp;</div>
  91. <div class="col_2">&nbsp;</div>
  92. <div class="col_2">&nbsp;</div>
  93. <div class="col_2">&nbsp;</div>
  94. <div class="col_2 omega">&nbsp;</div>
  95. </div>
  96. </div><!--class="container" -->
  97. <div class="container test">
  98. <div class="row">
  99. <div class="col_12 title"><h4>3-column</h4></div>
  100. <div class="col_3 clearleft">&nbsp;</div>
  101. <div class="col_3">&nbsp;</div>
  102. <div class="col_3">&nbsp;</div>
  103. <div class="col_3 omega">&nbsp;</div>
  104. </div>
  105. </div><!--class="container" -->
  106. <div class="container test">
  107. <div class="row">
  108. <div class="col_12 title"><h4>4-column</h4></div>
  109. <div class="col_4 clearleft">&nbsp;</div>
  110. <div class="col_4">&nbsp;</div>
  111. <div class="col_4 omega">&nbsp;</div>
  112. </div>
  113. </div><!--class="container" -->
  114. <div class="container test">
  115. <div class="row">
  116. <div class="col_12 title"><h4>5-column + 2-column middle filler (to equal 12)</h4></div>
  117. <div class="col_5 clearleft">&nbsp;</div>
  118. <div class="col_2">&nbsp;</div>
  119. <div class="col_5 omega">&nbsp;</div>
  120. </div>
  121. </div><!--class="container" -->
  122. <div class="container test">
  123. <div class="row">
  124. <div class="col_12 title"><h4>6-column</h4></div>
  125. <div class="col_6 clearleft">&nbsp;</div>
  126. <div class="col_6 omega">&nbsp;</div>
  127. </div>
  128. </div><!--class="container" -->
  129. <div class="container test">
  130. <div class="row">
  131. <div class="col_12 title"><h4>7-column + 5-column</h4></div>
  132. <div class="col_7 clearleft">&nbsp;</div>
  133. <div class="col_5 omega">&nbsp;</div>
  134. </div>
  135. </div><!--class="container" -->
  136. <div class="container test">
  137. <div class="row">
  138. <div class="col_12 title"><h4>8-column + 4-column</h4></div>
  139. <div class="col_8 clearleft">&nbsp;</div>
  140. <div class="col_4 omega">&nbsp;</div>
  141. </div>
  142. </div><!--class="container" -->
  143. <div class="container test">
  144. <div class="row">
  145. <div class="col_12 title"><h4>9-column + 3-column</h4></div>
  146. <div class="col_9 clearleft">&nbsp;</div>
  147. <div class="col_3 omega">&nbsp;</div>
  148. </div>
  149. </div><!--class="container" -->
  150. <div class="container test">
  151. <div class="row">
  152. <div class="col_12 title"><h4>10-column + 2-column</h4></div>
  153. <div class="col_10 clearleft">&nbsp;</div>
  154. <div class="col_2 omega">&nbsp;</div>
  155. </div>
  156. </div><!--class="container" -->
  157. <div class="container test">
  158. <div class="row">
  159. <div class="col_12 title"><h4>11-column + 1-column</h4></div>
  160. <div class="col_11 clearleft">&nbsp;</div>
  161. <div class="col_1 omega">&nbsp;</div>
  162. </div>
  163. </div><!--class="container" -->
  164. <div class="container test">
  165. <div class="row">
  166. <div class="col_12 title"><h4>12-column</h4></div>
  167. <div class="col_12">&nbsp;</div>
  168. </div>
  169. </div><!--class="container" -->
  170. <div class="container test spaceabove_1">
  171. <div class="row">
  172. <div class="col_12">
  173. <h2>Sub columns (columns within columns), unique to Columnal</h2>
  174. </div>
  175. </div>
  176. </div><!--class="container" -->
  177. <div class="container test">
  178. <div class="row">
  179. <div class="col_12 title"><h4>2-column (1-column inside)</h4></div>
  180. <div class="col_2">
  181. <div class="col_1">&nbsp;</div>
  182. <div class="col_1 last">&nbsp;</div>
  183. </div>
  184. <div class="col_2">
  185. <div class="col_1">&nbsp;</div>
  186. <div class="col_1 last">&nbsp;</div>
  187. </div>
  188. <div class="col_2">
  189. <div class="col_1">&nbsp;</div>
  190. <div class="col_1 last">&nbsp;</div>
  191. </div>
  192. <div class="col_2">
  193. <div class="col_1">&nbsp;</div>
  194. <div class="col_1 last">&nbsp;</div>
  195. </div>
  196. <div class="col_2">
  197. <div class="col_1">&nbsp;</div>
  198. <div class="col_1 last">&nbsp;</div>
  199. </div>
  200. <div class="col_2 last">
  201. <div class="col_1">&nbsp;</div>
  202. <div class="col_1 last">&nbsp;</div>
  203. </div>
  204. </div>
  205. </div><!--class="container" -->
  206. <div class="container test">
  207. <div class="row">
  208. <div class="col_12 title"><h4>3-column (1-column inside)</h4></div>
  209. <div class="col_3">
  210. <div class="col_1">&nbsp;</div>
  211. <div class="col_1">&nbsp;</div>
  212. <div class="col_1 last">&nbsp;</div>
  213. </div>
  214. <div class="col_3">
  215. <div class="col_1">&nbsp;</div>
  216. <div class="col_1">&nbsp;</div>
  217. <div class="col_1 last">&nbsp;</div>
  218. </div>
  219. <div class="col_3">
  220. <div class="col_1">&nbsp;</div>
  221. <div class="col_1">&nbsp;</div>
  222. <div class="col_1 last">&nbsp;</div>
  223. </div>
  224. <div class="col_3 last">
  225. <div class="col_1">&nbsp;</div>
  226. <div class="col_1">&nbsp;</div>
  227. <div class="col_1 last">&nbsp;</div>
  228. </div>
  229. </div>
  230. </div><!--class="container" -->
  231. <div class="container test">
  232. <div class="row">
  233. <div class="col_12 title"><h4>3-column (2-column & 1-column inside)</h4></div>
  234. <div class="col_3">
  235. <div class="col_2">&nbsp;</div>
  236. <div class="col_1 last">&nbsp;</div>
  237. </div>
  238. <div class="col_3">
  239. <div class="col_2">&nbsp;</div>
  240. <div class="col_1 last">&nbsp;</div>
  241. </div>
  242. <div class="col_3">
  243. <div class="col_1">&nbsp;</div>
  244. <div class="col_2 last">&nbsp;</div>
  245. </div>
  246. <div class="col_3 last">
  247. <div class="col_1">&nbsp;</div>
  248. <div class="col_2 last">&nbsp;</div>
  249. </div>
  250. </div>
  251. </div><!--class="container" -->
  252. <div class="container test">
  253. <div class="row">
  254. <div class="col_12 title"><h4>4-column (1-column inside)</h4></div>
  255. <div class="col_4">
  256. <div class="col_1">&nbsp;</div>
  257. <div class="col_1">&nbsp;</div>
  258. <div class="col_1">&nbsp;</div>
  259. <div class="col_1 last">&nbsp;</div>
  260. </div>
  261. <div class="col_4">
  262. <div class="col_1">&nbsp;</div>
  263. <div class="col_1">&nbsp;</div>
  264. <div class="col_1">&nbsp;</div>
  265. <div class="col_1 last">&nbsp;</div>
  266. </div>
  267. <div class="col_4 last">
  268. <div class="col_1">&nbsp;</div>
  269. <div class="col_1">&nbsp;</div>
  270. <div class="col_1">&nbsp;</div>
  271. <div class="col_1 last">&nbsp;</div>
  272. </div>
  273. </div>
  274. </div><!--class="container" -->
  275. <div class="container test">
  276. <div class="row">
  277. <div class="col_12 title"><h4>4-column (3-column & 1-column inside)</h4></div>
  278. <div class="col_4">
  279. <div class="col_3">&nbsp;</div>
  280. <div class="col_1 last">&nbsp;</div>
  281. </div>
  282. <div class="col_4">
  283. <div class="col_3">&nbsp;</div>
  284. <div class="col_1 last">&nbsp;</div>
  285. </div>
  286. <div class="col_4 last">
  287. <div class="col_1">&nbsp;</div>
  288. <div class="col_3 last">&nbsp;</div>
  289. </div>
  290. </div>
  291. </div><!--class="container" -->
  292. <div class="container test">
  293. <div class="row">
  294. <div class="col_12 title"><h4>4-column (2-column & 2-column inside)</h4></div>
  295. <div class="col_4">
  296. <div class="col_2">&nbsp;</div>
  297. <div class="col_2 last">&nbsp;</div>
  298. </div>
  299. <div class="col_4">
  300. <div class="col_2">&nbsp;</div>
  301. <div class="col_2 last">&nbsp;</div>
  302. </div>
  303. <div class="col_4 last">
  304. <div class="col_2">&nbsp;</div>
  305. <div class="col_2 last">&nbsp;</div>
  306. </div>
  307. </div>
  308. </div><!--class="container" -->
  309. <div class="container test">
  310. <div class="row">
  311. <div class="col_12 title"><h4>5-column (1-column inside) & 2-column @ end</h4></div>
  312. <div class="col_5">
  313. <div class="col_1">&nbsp;</div>
  314. <div class="col_1">&nbsp;</div>
  315. <div class="col_1">&nbsp;</div>
  316. <div class="col_1">&nbsp;</div>
  317. <div class="col_1 last">&nbsp;</div>
  318. </div>
  319. <div class="col_5">
  320. <div class="col_1">&nbsp;</div>
  321. <div class="col_1">&nbsp;</div>
  322. <div class="col_1">&nbsp;</div>
  323. <div class="col_1">&nbsp;</div>
  324. <div class="col_1 last">&nbsp;</div>
  325. </div>
  326. <div class="col_2 last">
  327. <div class="col_1">&nbsp;</div>
  328. <div class="col_1 last">&nbsp;</div>
  329. </div>
  330. </div>
  331. </div>
  332. </div><!--class="container" -->
  333. <div class="container test">
  334. <div class="row">
  335. <div class="col_12 title"><h4>5-column (2-column inside) & 2-column @ end</h4></div>
  336. <div class="col_5">
  337. <div class="col_2">&nbsp;</div>
  338. <div class="col_2">&nbsp;</div>
  339. <div class="col_1 last">&nbsp;</div>
  340. </div>
  341. <div class="col_5">
  342. <div class="col_1">&nbsp;</div>
  343. <div class="col_2">&nbsp;</div>
  344. <div class="col_2 last">&nbsp;</div>
  345. </div>
  346. <div class="col_2 last">
  347. <div class="col_1">&nbsp;</div>
  348. <div class="col_1 last">&nbsp;</div>
  349. </div>
  350. </div>
  351. </div>
  352. </div><!--class="container" -->
  353. <div class="container test">
  354. <div class="row">
  355. <div class="col_12 title"><h4>5-column (3-column inside) & 2-column @ end</h4></div>
  356. <div class="col_5">
  357. <div class="col_3">&nbsp;</div>
  358. <div class="col_2 last">&nbsp;</div>
  359. </div>
  360. <div class="col_5">
  361. <div class="col_2">&nbsp;</div>
  362. <div class="col_3 last">&nbsp;</div>
  363. </div>
  364. <div class="col_2 last">
  365. <div class="col_1">&nbsp;</div>
  366. <div class="col_1 last">&nbsp;</div>
  367. </div>
  368. </div>
  369. </div>
  370. </div><!--class="container" -->
  371. <div class="container test">
  372. <div class="row">
  373. <div class="col_12 title"><h4>6-column (1-column inside)</h4></div>
  374. <div class="col_6">
  375. <div class="col_1">&nbsp;</div>
  376. <div class="col_1">&nbsp;</div>
  377. <div class="col_1">&nbsp;</div>
  378. <div class="col_1">&nbsp;</div>
  379. <div class="col_1">&nbsp;</div>
  380. <div class="col_1 last">&nbsp;</div>
  381. </div>
  382. <div class="col_6 last">
  383. <div class="col_1">&nbsp;</div>
  384. <div class="col_1">&nbsp;</div>
  385. <div class="col_1">&nbsp;</div>
  386. <div class="col_1">&nbsp;</div>
  387. <div class="col_1">&nbsp;</div>
  388. <div class="col_1 last">&nbsp;</div>
  389. </div>
  390. </div>
  391. </div><!--class="container" -->
  392. <div class="container test">
  393. <div class="row">
  394. <div class="col_12 title"><h4>6-column (2-column inside)</h4></div>
  395. <div class="col_6">
  396. <div class="col_2">&nbsp;</div>
  397. <div class="col_2">&nbsp;</div>
  398. <div class="col_2 last">&nbsp;</div>
  399. </div>
  400. <div class="col_6 last">
  401. <div class="col_2">&nbsp;</div>
  402. <div class="col_2">&nbsp;</div>
  403. <div class="col_2 last">&nbsp;</div>
  404. </div>
  405. </div>
  406. </div><!--class="container" -->
  407. <div class="container test">
  408. <div class="row">
  409. <div class="col_12 title"><h4>6-column (3-column inside)</h4></div>
  410. <div class="col_6">
  411. <div class="col_3">&nbsp;</div>
  412. <div class="col_3 last">&nbsp;</div>
  413. </div>
  414. <div class="col_6 last">
  415. <div class="col_3">&nbsp;</div>
  416. <div class="col_3 last">&nbsp;</div>
  417. </div>
  418. </div>
  419. </div><!--class="container" -->
  420. <div class="container test">
  421. <div class="row">
  422. <div class="col_12 title"><h4>6-column (4-column inside)</h4></div>
  423. <div class="col_6">
  424. <div class="col_4">&nbsp;</div>
  425. <div class="col_2 last">&nbsp;</div>
  426. </div>
  427. <div class="col_6 last">
  428. <div class="col_2">&nbsp;</div>
  429. <div class="col_4 last">&nbsp;</div>
  430. </div>
  431. </div>
  432. </div><!--class="container" -->
  433. <div class="container test">
  434. <div class="row">
  435. <div class="col_12 title"><h4>6-column (5-column inside)</h4></div>
  436. <div class="col_6">
  437. <div class="col_5">&nbsp;</div>
  438. <div class="col_1 last">&nbsp;</div>
  439. </div>
  440. <div class="col_6 last">
  441. <div class="col_1">&nbsp;</div>
  442. <div class="col_5 last">&nbsp;</div>
  443. </div>
  444. </div>
  445. </div><!--class="container" -->
  446. <div class="container test">
  447. <div class="row">
  448. <div class="col_12 title"><h4>6-column (5-column inside)</h4></div>
  449. <div class="col_6">
  450. <div class="col_5">&nbsp;</div>
  451. <div class="col_1 last">&nbsp;</div>
  452. </div>
  453. <div class="col_6 last">
  454. <div class="col_1">&nbsp;</div>
  455. <div class="col_5 last">&nbsp;</div>
  456. </div>
  457. </div>
  458. </div><!--class="container" -->
  459. <div class="container test">
  460. <div class="row">
  461. <div class="col_12 title"><h4>7-column (1-column inside) & 5-column @ end</h4></div>
  462. <div class="col_7">
  463. <div class="col_1">&nbsp;</div>
  464. <div class="col_1">&nbsp;</div>
  465. <div class="col_1">&nbsp;</div>
  466. <div class="col_1">&nbsp;</div>
  467. <div class="col_1">&nbsp;</div>
  468. <div class="col_1">&nbsp;</div>
  469. <div class="col_1 last">&nbsp;</div>
  470. </div>
  471. <div class="col_5 last">
  472. <div class="col_1">&nbsp;</div>
  473. <div class="col_1">&nbsp;</div>
  474. <div class="col_1">&nbsp;</div>
  475. <div class="col_1">&nbsp;</div>
  476. <div class="col_1 last">&nbsp;</div>
  477. </div>
  478. </div>
  479. </div>
  480. </div><!--class="container" -->
  481. <div class="container test">
  482. <div class="row">
  483. <div class="col_12 title"><h4>7-column (2-column inside) & 5-column @ end</h4></div>
  484. <div class="col_7">
  485. <div class="col_2">&nbsp;</div>
  486. <div class="col_2">&nbsp;</div>
  487. <div class="col_2">&nbsp;</div>
  488. <div class="col_1 last">&nbsp;</div>
  489. </div>
  490. <div class="col_5 last">
  491. <div class="col_1">&nbsp;</div>
  492. <div class="col_1">&nbsp;</div>
  493. <div class="col_1">&nbsp;</div>
  494. <div class="col_1">&nbsp;</div>
  495. <div class="col_1 last">&nbsp;</div>
  496. </div>
  497. </div>
  498. </div>
  499. </div><!--class="container" -->
  500. <div class="container test">
  501. <div class="row">
  502. <div class="col_12 title"><h4>7-column (3-column inside) & 5-column @ end</h4></div>
  503. <div class="col_7">
  504. <div class="col_3">&nbsp;</div>
  505. <div class="col_3">&nbsp;</div>
  506. <div class="col_1 last">&nbsp;</div>
  507. </div>
  508. <div class="col_5 last">
  509. <div class="col_3">&nbsp;</div>
  510. <div class="col_2 last">&nbsp;</div>
  511. </div>
  512. </div>
  513. </div>
  514. </div><!--class="container" -->
  515. <div class="container test">
  516. <div class="row">
  517. <div class="col_12 title"><h4>7-column (4-column inside) & 5-column @ end</h4></div>
  518. <div class="col_7">
  519. <div class="col_4">&nbsp;</div>
  520. <div class="col_3 last">&nbsp;</div>
  521. </div>
  522. <div class="col_5 last">
  523. <div class="col_3">&nbsp;</div>
  524. <div class="col_2 last">&nbsp;</div>
  525. </div>
  526. </div>
  527. </div>
  528. </div><!--class="container" -->
  529. <div class="container test">
  530. <div class="row">
  531. <div class="col_12 title"><h4>7-column (5-column inside) & 5-column @ end</h4></div>
  532. <div class="col_7">
  533. <div class="col_5">&nbsp;</div>
  534. <div class="col_2 last">&nbsp;</div>
  535. </div>
  536. <div class="col_5 last">
  537. <div class="col_3">&nbsp;</div>
  538. <div class="col_2 last">&nbsp;</div>
  539. </div>
  540. </div>
  541. </div>
  542. </div><!--class="container" -->
  543. <div class="container test">
  544. <div class="row">
  545. <div class="col_12 title"><h4>7-column (6-column inside) & 5-column @ end</h4></div>
  546. <div class="col_7">
  547. <div class="col_6">&nbsp;</div>
  548. <div class="col_1 last">&nbsp;</div>
  549. </div>
  550. <div class="col_5 last">
  551. <div class="col_3">&nbsp;</div>
  552. <div class="col_2 last">&nbsp;</div>
  553. </div>
  554. </div>
  555. </div>
  556. </div><!--class="container" -->
  557. <div class="container test">
  558. <div class="row">
  559. <div class="col_12 title"><h4>8-column (1-column inside) & 4-column @ end</h4></div>
  560. <div class="col_8">
  561. <div class="col_1">&nbsp;</div>
  562. <div class="col_1">&nbsp;</div>
  563. <div class="col_1">&nbsp;</div>
  564. <div class="col_1">&nbsp;</div>
  565. <div class="col_1">&nbsp;</div>
  566. <div class="col_1">&nbsp;</div>
  567. <div class="col_1">&nbsp;</div>
  568. <div class="col_1 last">&nbsp;</div>
  569. </div>
  570. <div class="col_4 last">
  571. <div class="col_2">&nbsp;</div>
  572. <div class="col_2 last">&nbsp;</div>
  573. </div>
  574. </div>
  575. </div><!--class="container" -->
  576. <div class="container test">
  577. <div class="row">
  578. <div class="col_12 title"><h4>8-column (2-column inside) & 4-column @ end</h4></div>
  579. <div class="col_8">
  580. <div class="col_2">&nbsp;</div>
  581. <div class="col_2">&nbsp;</div>
  582. <div class="col_2">&nbsp;</div>
  583. <div class="col_2 last">&nbsp;</div>
  584. </div>
  585. <div class="col_4 last">
  586. <div class="col_2">&nbsp;</div>
  587. <div class="col_2 last">&nbsp;</div>
  588. </div>
  589. </div>
  590. </div><!--class="container" -->
  591. <div class="container test">
  592. <div class="row">
  593. <div class="col_12 title"><h4>8-column (3-column inside) & 4-column @ end</h4></div>
  594. <div class="col_8">
  595. <div class="col_3">&nbsp;</div>
  596. <div class="col_3">&nbsp;</div>
  597. <div class="col_2 last">&nbsp;</div>
  598. </div>
  599. <div class="col_4 last">
  600. <div class="col_2">&nbsp;</div>
  601. <div class="col_2 last">&nbsp;</div>
  602. </div>
  603. </div>
  604. </div><!--class="container" -->
  605. <div class="container test">
  606. <div class="row">
  607. <div class="col_12 title"><h4>8-column (4-column inside) & 4-column @ end</h4></div>
  608. <div class="col_8">
  609. <div class="col_4">&nbsp;</div>
  610. <div class="col_4 last">&nbsp;</div>
  611. </div>
  612. <div class="col_4 last">
  613. <div class="col_2">&nbsp;</div>
  614. <div class="col_2 last">&nbsp;</div>
  615. </div>
  616. </div>
  617. </div><!--class="container" -->
  618. <div class="container test">
  619. <div class="row">
  620. <div class="col_12 title"><h4>8-column (5-column inside) & 4-column @ end</h4></div>
  621. <div class="col_8">
  622. <div class="col_5">&nbsp;</div>
  623. <div class="col_3 last">&nbsp;</div>
  624. </div>
  625. <div class="col_4 last">
  626. <div class="col_2">&nbsp;</div>
  627. <div class="col_2 last">&nbsp;</div>
  628. </div>
  629. </div>
  630. </div><!--class="container" -->
  631. <div class="container test">
  632. <div class="row">
  633. <div class="col_12 title"><h4>8-column (6-column inside) & 4-column @ end</h4></div>
  634. <div class="col_8">
  635. <div class="col_6">&nbsp;</div>
  636. <div class="col_2 last">&nbsp;</div>
  637. </div>
  638. <div class="col_4 last">
  639. <div class="col_2">&nbsp;</div>
  640. <div class="col_2 last">&nbsp;</div>
  641. </div>
  642. </div>
  643. </div><!--class="container" -->
  644. <div class="container test">
  645. <div class="row">
  646. <div class="col_12 title"><h4>8-column (7-column inside) & 4-column @ end</h4></div>
  647. <div class="col_8">
  648. <div class="col_7">&nbsp;</div>
  649. <div class="col_1 last">&nbsp;</div>
  650. </div>
  651. <div class="col_4 last">
  652. <div class="col_2">&nbsp;</div>
  653. <div class="col_2 last">&nbsp;</div>
  654. </div>
  655. </div>
  656. </div><!--class="container" -->
  657. <div class="container test">
  658. <div class="row">
  659. <div class="col_12 title"><h4>9-column (1-column inside) & 3-column @ end</h4></div>
  660. <div class="col_9">
  661. <div class="col_1">&nbsp;</div>
  662. <div class="col_1">&nbsp;</div>
  663. <div class="col_1">&nbsp;</div>
  664. <div class="col_1">&nbsp;</div>
  665. <div class="col_1">&nbsp;</div>
  666. <div class="col_1">&nbsp;</div>
  667. <div class="col_1">&nbsp;</div>
  668. <div class="col_1">&nbsp;</div>
  669. <div class="col_1 last">&nbsp;</div>
  670. </div>
  671. <div class="col_3 last">
  672. <div class="col_2">&nbsp;</div>
  673. <div class="col_1 last">&nbsp;</div>
  674. </div>
  675. </div>
  676. </div><!--class="container" -->
  677. <div class="container test">
  678. <div class="row">
  679. <div class="col_12 title"><h4>9-column (2-column inside) & 3-column @ end</h4></div>
  680. <div class="col_9">
  681. <div class="col_2">&nbsp;</div>
  682. <div class="col_2">&nbsp;</div>
  683. <div class="col_2">&nbsp;</div>
  684. <div class="col_2">&nbsp;</div>
  685. <div class="col_1 last">&nbsp;</div>
  686. </div>
  687. <div class="col_3 last">
  688. <div class="col_2">&nbsp;</div>
  689. <div class="col_1 last">&nbsp;</div>
  690. </div>
  691. </div>
  692. </div><!--class="container" -->
  693. <div class="container test">
  694. <div class="row">
  695. <div class="col_12 title"><h4>9-column (3-column inside) & 3-column @ end</h4></div>
  696. <div class="col_9">
  697. <div class="col_3">&nbsp;</div>
  698. <div class="col_3">&nbsp;</div>
  699. <div class="col_3 last">&nbsp;</div>
  700. </div>
  701. <div class="col_3 last">
  702. <div class="col_2">&nbsp;</div>
  703. <div class="col_1 last">&nbsp;</div>
  704. </div>
  705. </div>
  706. </div><!--class="container" -->
  707. <div class="container test">
  708. <div class="row">
  709. <div class="col_12 title"><h4>9-column (4-column inside) & 3-column @ end</h4></div>
  710. <div class="col_9">
  711. <div class="col_4">&nbsp;</div>
  712. <div class="col_4">&nbsp;</div>
  713. <div class="col_1 last">&nbsp;</div>
  714. </div>
  715. <div class="col_3 last">
  716. <div class="col_2">&nbsp;</div>
  717. <div class="col_1 last">&nbsp;</div>
  718. </div>
  719. </div>
  720. </div><!--class="container" -->
  721. <div class="container test">
  722. <div class="row">
  723. <div class="col_12 title"><h4>9-column (5-column inside) & 3-column @ end</h4></div>
  724. <div class="col_9">
  725. <div class="col_5">&nbsp;</div>
  726. <div class="col_4 last">&nbsp;</div>
  727. </div>
  728. <div class="col_3 last">
  729. <div class="col_2">&nbsp;</div>
  730. <div class="col_1 last">&nbsp;</div>
  731. </div>
  732. </div>
  733. </div><!--class="container" -->
  734. <div class="container test">
  735. <div class="row">
  736. <div class="col_12 title"><h4>9-column (6-column inside) & 3-column @ end</h4></div>
  737. <div class="col_9">
  738. <div class="col_6">&nbsp;</div>
  739. <div class="col_3 last">&nbsp;</div>
  740. </div>
  741. <div class="col_3 last">
  742. <div class="col_2">&nbsp;</div>
  743. <div class="col_1 last">&nbsp;</div>
  744. </div>
  745. </div>
  746. </div><!--class="container" -->
  747. <div class="container test">
  748. <div class="row">
  749. <div class="col_12 title"><h4>9-column (7-column inside) & 2-column @ end</h4></div>
  750. <div class="col_9">
  751. <div class="col_7">&nbsp;</div>
  752. <div class="col_2 last">&nbsp;</div>
  753. </div>
  754. <div class="col_3 last">
  755. <div class="col_2">&nbsp;</div>
  756. <div class="col_1 last">&nbsp;</div>
  757. </div>
  758. </div>
  759. </div><!--class="container" -->
  760. <div class="container test">
  761. <div class="row">
  762. <div class="col_12 title"><h4>9-column (8-column inside) & 2-column @ end</h4></div>
  763. <div class="col_9">
  764. <div class="col_8">&nbsp;</div>
  765. <div class="col_1 last">&nbsp;</div>
  766. </div>
  767. <div class="col_3 last">
  768. <div class="col_2">&nbsp;</div>
  769. <div class="col_1 last">&nbsp;</div>
  770. </div>
  771. </div>
  772. </div><!--class="container" -->
  773. <div class="container test">
  774. <div class="row">
  775. <div class="col_12 title"><h4>10-column (1-column inside) & 2-column @ end</h4></div>
  776. <div class="col_10">
  777. <div class="col_1">&nbsp;</div>
  778. <div class="col_1">&nbsp;</div>
  779. <div class="col_1">&nbsp;</div>
  780. <div class="col_1">&nbsp;</div>
  781. <div class="col_1">&nbsp;</div>
  782. <div class="col_1">&nbsp;</div>
  783. <div class="col_1">&nbsp;</div>
  784. <div class="col_1">&nbsp;</div>
  785. <div class="col_1">&nbsp;</div>
  786. <div class="col_1 last">&nbsp;</div>
  787. </div>
  788. <div class="col_2 last">
  789. <div class="col_1">&nbsp;</div>
  790. <div class="col_1 last">&nbsp;</div>
  791. </div>
  792. </div>
  793. </div><!--class="container" -->
  794. <div class="container test">
  795. <div class="row">
  796. <div class="col_12 title"><h4>10-column (2-column inside) & 2-column @ end</h4></div>
  797. <div class="col_10">
  798. <div class="col_2">&nbsp;</div>
  799. <div class="col_2">&nbsp;</div>
  800. <div class="col_2">&nbsp;</div>
  801. <div class="col_2">&nbsp;</div>
  802. <div class="col_2 last">&nbsp;</div>
  803. </div>
  804. <div class="col_2 last">
  805. <div class="col_1">&nbsp;</div>
  806. <div class="col_1 last">&nbsp;</div>
  807. </div>
  808. </div>
  809. </div><!--class="container" -->
  810. <div class="container test">
  811. <div class="row">
  812. <div class="col_12 title"><h4>10-column (3-column inside) & 2-column @ end</h4></div>
  813. <div class="col_10">
  814. <div class="col_3">&nbsp;</div>
  815. <div class="col_3">&nbsp;</div>
  816. <div class="col_3">&nbsp;</div>
  817. <div class="col_1 last">&nbsp;</div>
  818. </div>
  819. <div class="col_2 last">
  820. <div class="col_1">&nbsp;</div>
  821. <div class="col_1 last">&nbsp;</div>
  822. </div>
  823. </div>
  824. </div><!--class="container" -->
  825. <div class="container test">
  826. <div class="row">
  827. <div class="col_12 title"><h4>10-column (4-column inside) & 2-column @ end</h4></div>
  828. <div class="col_10">
  829. <div class="col_4">&nbsp;</div>
  830. <div class="col_4">&nbsp;</div>
  831. <div class="col_2 last">&nbsp;</div>
  832. </div>
  833. <div class="col_2 last">
  834. <div class="col_1">&nbsp;</div>
  835. <div class="col_1 last">&nbsp;</div>
  836. </div>
  837. </div>
  838. </div><!--class="container" -->
  839. <div class="container test">
  840. <div class="row">
  841. <div class="col_12 title"><h4>10-column (5-column inside) & 2-column @ end</h4></div>
  842. <div class="col_10">
  843. <div class="col_5">&nbsp;</div>
  844. <div class="col_5 last">&nbsp;</div>
  845. </div>
  846. <div class="col_2 last">
  847. <div class="col_1">&nbsp;</div>
  848. <div class="col_1 last">&nbsp;</div>
  849. </div>
  850. </div>
  851. </div><!--class="container" -->
  852. <div class="container test">
  853. <div class="row">
  854. <div class="col_12 title"><h4>10-column (6-column inside) & 2-column @ end</h4></div>
  855. <div class="col_10">
  856. <div class="col_6">&nbsp;</div>
  857. <div class="col_4 last">&nbsp;</div>
  858. </div>
  859. <div class="col_2 last">
  860. <div class="col_1">&nbsp;</div>
  861. <div class="col_1 last">&nbsp;</div>
  862. </div>
  863. </div>
  864. </div><!--class="container" -->
  865. <div class="container test">
  866. <div class="row">
  867. <div class="col_12 title"><h4>10-column (7-column inside) & 2-column @ end</h4></div>
  868. <div class="col_10">
  869. <div class="col_7">&nbsp;</div>
  870. <div class="col_3 last">&nbsp;</div>
  871. </div>
  872. <div class="col_2 last">
  873. <div class="col_1">&nbsp;</div>
  874. <div class="col_1 last">&nbsp;</div>
  875. </div>
  876. </div>
  877. </div><!--class="container" -->
  878. <div class="container test">
  879. <div class="row">
  880. <div class="col_12 title"><h4>10-column (8-column inside) & 2-column @ end</h4></div>
  881. <div class="col_10">
  882. <div class="col_8">&nbsp;</div>
  883. <div class="col_2 last">&nbsp;</div>
  884. </div>
  885. <div class="col_2 last">
  886. <div class="col_1">&nbsp;</div>
  887. <div class="col_1 last">&nbsp;</div>
  888. </div>
  889. </div>
  890. </div><!--class="container" -->
  891. <div class="container test">
  892. <div class="row">
  893. <div class="col_12 title"><h4>10-column (9-column inside) & 2-column @ end</h4></div>
  894. <div class="col_10">
  895. <div class="col_9">&nbsp;</div>
  896. <div class="col_1 last">&nbsp;</div>
  897. </div>
  898. <div class="col_2 last">
  899. <div class="col_1">&nbsp;</div>
  900. <div class="col_1 last">&nbsp;</div>
  901. </div>
  902. </div>
  903. </div><!--class="container" -->
  904. <div class="container test">
  905. <div class="row">
  906. <div class="col_12 title"><h4>11-column (1-column inside) & 1-column @ end</h4></div>
  907. <div class="col_11">
  908. <div class="col_1">&nbsp;</div>
  909. <div class="col_1">&nbsp;</div>
  910. <div class="col_1">&nbsp;</div>
  911. <div class="col_1">&nbsp;</div>
  912. <div class="col_1">&nbsp;</div>
  913. <div class="col_1">&nbsp;</div>
  914. <div class="col_1">&nbsp;</div>
  915. <div class="col_1">&nbsp;</div>
  916. <div class="col_1">&nbsp;</div>
  917. <div class="col_1">&nbsp;</div>
  918. <div class="col_1 last">&nbsp;</div>
  919. </div>
  920. <div class="col_1 last">&nbsp;</div>
  921. </div>
  922. </div><!--class="container" -->
  923. <div class="container test">
  924. <div class="row">
  925. <div class="col_12 title"><h4>11-column (2-column inside) & 1-column @ end</h4></div>
  926. <div class="col_11">
  927. <div class="col_2">&nbsp;</div>
  928. <div class="col_2">&nbsp;</div>
  929. <div class="col_2">&nbsp;</div>
  930. <div class="col_2">&nbsp;</div>
  931. <div class="col_2">&nbsp;</div>
  932. <div class="col_1 last">&nbsp;</div>
  933. </div>
  934. <div class="col_1 last">&nbsp;</div>
  935. </div>
  936. </div><!--class="container" -->
  937. <div class="container test">
  938. <div class="row">
  939. <div class="col_12 title"><h4>11-column (3-column inside) & 1-column @ end</h4></div>
  940. <div class="col_11">
  941. <div class="col_3">&nbsp;</div>
  942. <div class="col_3">&nbsp;</div>
  943. <div class="col_3">&nbsp;</div>
  944. <div class="col_2 last">&nbsp;</div>
  945. </div>
  946. <div class="col_1 last">&nbsp;</div>
  947. </div>
  948. </div><!--class="container" -->
  949. <div class="container test">
  950. <div class="row">
  951. <div class="col_12 title"><h4>11-column (4-column inside) & 1-column @ end</h4></div>
  952. <div class="col_11">
  953. <div class="col_4">&nbsp;</div>
  954. <div class="col_4">&nbsp;</div>
  955. <div class="col_3 last">&nbsp;</div>
  956. </div>
  957. <div class="col_1 last">&nbsp;</div>
  958. </div>
  959. </div><!--class="container" -->
  960. <div class="container test">
  961. <div class="row">
  962. <div class="col_12 title"><h4>11-column (5-column inside) & 1-column @ end</h4></div>
  963. <div class="col_11">
  964. <div class="col_5">&nbsp;</div>
  965. <div class="col_5">&nbsp;</div>
  966. <div class="col_1 last">&nbsp;</div>
  967. </div>
  968. <div class="col_1 last">&nbsp;</div>
  969. </div>
  970. </div><!--class="container" -->
  971. <div class="container test">
  972. <div class="row">
  973. <div class="col_12 title"><h4>11-column (6-column inside) & 1-column @ end</h4></div>
  974. <div class="col_11">
  975. <div class="col_6">&nbsp;</div>
  976. <div class="col_5 last">&nbsp;</div>
  977. </div>
  978. <div class="col_1 last">&nbsp;</div>
  979. </div>
  980. </div><!--class="container" -->
  981. <div class="container test">
  982. <div class="row">
  983. <div class="col_12 title"><h4>11-column (7-column inside) & 1-column @ end</h4></div>
  984. <div class="col_11">
  985. <div class="col_7">&nbsp;</div>
  986. <div class="col_4 last">&nbsp;</div>
  987. </div>
  988. <div class="col_1 last">&nbsp;</div>
  989. </div>
  990. </div><!--class="container" -->
  991. <div class="container test">
  992. <div class="row">
  993. <div class="col_12 title"><h4>11-column (8-column inside) & 1-column @ end</h4></div>
  994. <div class="col_11">
  995. <div class="col_8">&nbsp;</div>
  996. <div class="col_3 last">&nbsp;</div>
  997. </div>
  998. <div class="col_1 last">&nbsp;</div>
  999. </div>
  1000. </div><!--class="container" -->
  1001. <div class="container test">
  1002. <div class="row">
  1003. <div class="col_12 title"><h4>11-column (9-column inside) & 1-column @ end</h4></div>
  1004. <div class="col_11">
  1005. <div class="col_9">&nbsp;</div>
  1006. <div class="col_2 last">&nbsp;</div>
  1007. </div>
  1008. <div class="col_1 last">&nbsp;</div>
  1009. </div>
  1010. </div><!--class="container" -->
  1011. <div class="container test">
  1012. <div class="row">
  1013. <div class="col_12 title"><h4>11-column (10-column inside) & 1-column @ end</h4></div>
  1014. <div class="col_11">
  1015. <div class="col_10">&nbsp;</div>
  1016. <div class="col_1 last">&nbsp;</div>
  1017. </div>
  1018. <div class="col_1 last">&nbsp;</div>
  1019. </div>
  1020. </div><!--class="container" -->
  1021. </body>
  1022. </html>