1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111 |
- <!doctype html>
- <!--[if lt IE 7 ]> <html lang="en-us" class="no-js ie6"> <![endif]-->
- <!--[if IE 7 ]> <html lang="en-us" class="no-js ie7"> <![endif]-->
- <!--[if IE 8 ]> <html lang="en-us" class="no-js ie8"> <![endif]-->
- <!--[if IE 9 ]> <html lang="en-us" class="no-js ie9"> <![endif]-->
- <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->
- <head>
- <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
- <meta charset="utf-8">
- <title>Columnal Demo Page</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!-- The Columnal Grid (1140px wide base, load first), Type and image presets, and mobile stylesheet -->
- <link rel="stylesheet" href="css/columnal.css" type="text/css" media="screen" />
- <!-- Fixes for IE -->
- <!--[if lt IE 9]>
- <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
- <![endif]-->
- <!-- use "fixed-984px-ie.css" or "fixed-960px-ie.css for a 984px or 960px fixed width for IE6 and 7 -->
- <!--[if lte IE 7]>
- <link rel="stylesheet" href="css/fixed-984px-ie.css" type="text/css" media="screen" />
- <![endif]-->
- <!-- Fixes for IE6, only needed if IE 6 will be supported - width must match 984px or 960px of css file used above -->
- <!-- 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) -->
- <!--[if lte IE 6]>
- <link rel="stylesheet" href="css/ie6-984px.css" type="text/css" media="screen" />
- <![endif]-->
- <!-- End fixes for IE -->
- <!-- Customizations here -->
- <link rel="stylesheet" href="css/custom.css" type="text/css" media="screen" />
- <!-- Page build tools - only needed while creating a site, remove when launching - Gray box colors and page debugging tools -->
- <link rel="stylesheet" href="css/build.css" type="text/css" media="screen" />
-
- <style>
- <!--
- /* These are just styles for the demo, you do not need them for your project */
- body {padding-bottom: 40px;}
- .col_12.title {background-color: white !important; border-bottom: none;}
- -->
- </style>
-
- </head>
- <body>
- <div class="container test">
- <div class="row">
- <div class="col_12">
- <h1>Demo page for Columnal system (12-column grid)</h1>
- </div>
- </div>
- </div><!--class="container" -->
- <!-- -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>prefixes & 1-column</h4></div>
- <div class="pre_1 col_1">pre_1</div>
- <div class="pre_2 col_1">pre_2</div>
- <div class="pre_3 col_1">pre_3</div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1 omega"> </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>prefixes & 1-column</h4></div>
- <div class="pre_4 col_1">pre_4</div>
- <div class="pre_5 col_1">pre_5</div>
- <div class="col_1 omega"> </div>
-
- </div>
- </div><!--class="container" -->
- <!-- -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>1-column</h4></div>
- <div class="col_1 clearleft"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1 omega"> </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>2-column</h4></div>
- <div class="col_2 clearleft"> </div>
- <div class="col_2"> </div>
- <div class="col_2"> </div>
- <div class="col_2"> </div>
- <div class="col_2"> </div>
- <div class="col_2 omega"> </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>3-column</h4></div>
- <div class="col_3 clearleft"> </div>
- <div class="col_3"> </div>
- <div class="col_3"> </div>
- <div class="col_3 omega"> </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>4-column</h4></div>
- <div class="col_4 clearleft"> </div>
- <div class="col_4"> </div>
- <div class="col_4 omega"> </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>5-column + 2-column middle filler (to equal 12)</h4></div>
- <div class="col_5 clearleft"> </div>
- <div class="col_2"> </div>
- <div class="col_5 omega"> </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>6-column</h4></div>
- <div class="col_6 clearleft"> </div>
- <div class="col_6 omega"> </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>7-column + 5-column</h4></div>
- <div class="col_7 clearleft"> </div>
- <div class="col_5 omega"> </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>8-column + 4-column</h4></div>
- <div class="col_8 clearleft"> </div>
- <div class="col_4 omega"> </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>9-column + 3-column</h4></div>
- <div class="col_9 clearleft"> </div>
- <div class="col_3 omega"> </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>10-column + 2-column</h4></div>
- <div class="col_10 clearleft"> </div>
- <div class="col_2 omega"> </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>11-column + 1-column</h4></div>
- <div class="col_11 clearleft"> </div>
- <div class="col_1 omega"> </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>12-column</h4></div>
- <div class="col_12"> </div>
- </div>
- </div><!--class="container" -->
- <div class="container test spaceabove_1">
- <div class="row">
- <div class="col_12">
- <h2>Sub columns (columns within columns), unique to Columnal</h2>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>2-column (1-column inside)</h4></div>
- <div class="col_2">
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_2">
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_2">
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_2">
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_2">
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_2 last">
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>3-column (1-column inside)</h4></div>
- <div class="col_3">
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_3">
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_3">
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_3 last">
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>3-column (2-column & 1-column inside)</h4></div>
- <div class="col_3">
- <div class="col_2"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_3">
- <div class="col_2"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_3">
- <div class="col_1"> </div>
- <div class="col_2 last"> </div>
- </div>
- <div class="col_3 last">
- <div class="col_1"> </div>
- <div class="col_2 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>4-column (1-column inside)</h4></div>
- <div class="col_4">
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_4">
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_4 last">
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>4-column (3-column & 1-column inside)</h4></div>
- <div class="col_4">
- <div class="col_3"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_4">
- <div class="col_3"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_4 last">
- <div class="col_1"> </div>
- <div class="col_3 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>4-column (2-column & 2-column inside)</h4></div>
- <div class="col_4">
- <div class="col_2"> </div>
- <div class="col_2 last"> </div>
- </div>
- <div class="col_4">
- <div class="col_2"> </div>
- <div class="col_2 last"> </div>
- </div>
- <div class="col_4 last">
- <div class="col_2"> </div>
- <div class="col_2 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>5-column (1-column inside) & 2-column @ end</h4></div>
- <div class="col_5">
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_5">
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_2 last">
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>5-column (2-column inside) & 2-column @ end</h4></div>
- <div class="col_5">
- <div class="col_2"> </div>
- <div class="col_2"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_5">
- <div class="col_1"> </div>
- <div class="col_2"> </div>
- <div class="col_2 last"> </div>
- </div>
- <div class="col_2 last">
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>5-column (3-column inside) & 2-column @ end</h4></div>
- <div class="col_5">
- <div class="col_3"> </div>
- <div class="col_2 last"> </div>
- </div>
- <div class="col_5">
- <div class="col_2"> </div>
- <div class="col_3 last"> </div>
- </div>
- <div class="col_2 last">
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>6-column (1-column inside)</h4></div>
- <div class="col_6">
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_6 last">
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>6-column (2-column inside)</h4></div>
- <div class="col_6">
- <div class="col_2"> </div>
- <div class="col_2"> </div>
- <div class="col_2 last"> </div>
- </div>
- <div class="col_6 last">
- <div class="col_2"> </div>
- <div class="col_2"> </div>
- <div class="col_2 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>6-column (3-column inside)</h4></div>
- <div class="col_6">
- <div class="col_3"> </div>
- <div class="col_3 last"> </div>
- </div>
- <div class="col_6 last">
- <div class="col_3"> </div>
- <div class="col_3 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>6-column (4-column inside)</h4></div>
- <div class="col_6">
- <div class="col_4"> </div>
- <div class="col_2 last"> </div>
- </div>
- <div class="col_6 last">
- <div class="col_2"> </div>
- <div class="col_4 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>6-column (5-column inside)</h4></div>
- <div class="col_6">
- <div class="col_5"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_6 last">
- <div class="col_1"> </div>
- <div class="col_5 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>6-column (5-column inside)</h4></div>
- <div class="col_6">
- <div class="col_5"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_6 last">
- <div class="col_1"> </div>
- <div class="col_5 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>7-column (1-column inside) & 5-column @ end</h4></div>
- <div class="col_7">
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_5 last">
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>7-column (2-column inside) & 5-column @ end</h4></div>
- <div class="col_7">
- <div class="col_2"> </div>
- <div class="col_2"> </div>
- <div class="col_2"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_5 last">
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>7-column (3-column inside) & 5-column @ end</h4></div>
- <div class="col_7">
- <div class="col_3"> </div>
- <div class="col_3"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_5 last">
- <div class="col_3"> </div>
- <div class="col_2 last"> </div>
- </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>7-column (4-column inside) & 5-column @ end</h4></div>
- <div class="col_7">
- <div class="col_4"> </div>
- <div class="col_3 last"> </div>
- </div>
- <div class="col_5 last">
- <div class="col_3"> </div>
- <div class="col_2 last"> </div>
- </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>7-column (5-column inside) & 5-column @ end</h4></div>
- <div class="col_7">
- <div class="col_5"> </div>
- <div class="col_2 last"> </div>
- </div>
- <div class="col_5 last">
- <div class="col_3"> </div>
- <div class="col_2 last"> </div>
- </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>7-column (6-column inside) & 5-column @ end</h4></div>
- <div class="col_7">
- <div class="col_6"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_5 last">
- <div class="col_3"> </div>
- <div class="col_2 last"> </div>
- </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>8-column (1-column inside) & 4-column @ end</h4></div>
- <div class="col_8">
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_4 last">
- <div class="col_2"> </div>
- <div class="col_2 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>8-column (2-column inside) & 4-column @ end</h4></div>
- <div class="col_8">
- <div class="col_2"> </div>
- <div class="col_2"> </div>
- <div class="col_2"> </div>
- <div class="col_2 last"> </div>
- </div>
- <div class="col_4 last">
- <div class="col_2"> </div>
- <div class="col_2 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>8-column (3-column inside) & 4-column @ end</h4></div>
- <div class="col_8">
- <div class="col_3"> </div>
- <div class="col_3"> </div>
- <div class="col_2 last"> </div>
- </div>
- <div class="col_4 last">
- <div class="col_2"> </div>
- <div class="col_2 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>8-column (4-column inside) & 4-column @ end</h4></div>
- <div class="col_8">
- <div class="col_4"> </div>
- <div class="col_4 last"> </div>
- </div>
- <div class="col_4 last">
- <div class="col_2"> </div>
- <div class="col_2 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>8-column (5-column inside) & 4-column @ end</h4></div>
- <div class="col_8">
- <div class="col_5"> </div>
- <div class="col_3 last"> </div>
- </div>
- <div class="col_4 last">
- <div class="col_2"> </div>
- <div class="col_2 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>8-column (6-column inside) & 4-column @ end</h4></div>
- <div class="col_8">
- <div class="col_6"> </div>
- <div class="col_2 last"> </div>
- </div>
- <div class="col_4 last">
- <div class="col_2"> </div>
- <div class="col_2 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>8-column (7-column inside) & 4-column @ end</h4></div>
- <div class="col_8">
- <div class="col_7"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_4 last">
- <div class="col_2"> </div>
- <div class="col_2 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>9-column (1-column inside) & 3-column @ end</h4></div>
- <div class="col_9">
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_3 last">
- <div class="col_2"> </div>
- <div class="col_1 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>9-column (2-column inside) & 3-column @ end</h4></div>
- <div class="col_9">
- <div class="col_2"> </div>
- <div class="col_2"> </div>
- <div class="col_2"> </div>
- <div class="col_2"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_3 last">
- <div class="col_2"> </div>
- <div class="col_1 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>9-column (3-column inside) & 3-column @ end</h4></div>
- <div class="col_9">
- <div class="col_3"> </div>
- <div class="col_3"> </div>
- <div class="col_3 last"> </div>
- </div>
- <div class="col_3 last">
- <div class="col_2"> </div>
- <div class="col_1 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>9-column (4-column inside) & 3-column @ end</h4></div>
- <div class="col_9">
- <div class="col_4"> </div>
- <div class="col_4"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_3 last">
- <div class="col_2"> </div>
- <div class="col_1 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>9-column (5-column inside) & 3-column @ end</h4></div>
- <div class="col_9">
- <div class="col_5"> </div>
- <div class="col_4 last"> </div>
- </div>
- <div class="col_3 last">
- <div class="col_2"> </div>
- <div class="col_1 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>9-column (6-column inside) & 3-column @ end</h4></div>
- <div class="col_9">
- <div class="col_6"> </div>
- <div class="col_3 last"> </div>
- </div>
- <div class="col_3 last">
- <div class="col_2"> </div>
- <div class="col_1 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>9-column (7-column inside) & 2-column @ end</h4></div>
- <div class="col_9">
- <div class="col_7"> </div>
- <div class="col_2 last"> </div>
- </div>
- <div class="col_3 last">
- <div class="col_2"> </div>
- <div class="col_1 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>9-column (8-column inside) & 2-column @ end</h4></div>
- <div class="col_9">
- <div class="col_8"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_3 last">
- <div class="col_2"> </div>
- <div class="col_1 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>10-column (1-column inside) & 2-column @ end</h4></div>
- <div class="col_10">
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_2 last">
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>10-column (2-column inside) & 2-column @ end</h4></div>
- <div class="col_10">
- <div class="col_2"> </div>
- <div class="col_2"> </div>
- <div class="col_2"> </div>
- <div class="col_2"> </div>
- <div class="col_2 last"> </div>
- </div>
- <div class="col_2 last">
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>10-column (3-column inside) & 2-column @ end</h4></div>
- <div class="col_10">
- <div class="col_3"> </div>
- <div class="col_3"> </div>
- <div class="col_3"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_2 last">
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>10-column (4-column inside) & 2-column @ end</h4></div>
- <div class="col_10">
- <div class="col_4"> </div>
- <div class="col_4"> </div>
- <div class="col_2 last"> </div>
- </div>
- <div class="col_2 last">
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>10-column (5-column inside) & 2-column @ end</h4></div>
- <div class="col_10">
- <div class="col_5"> </div>
- <div class="col_5 last"> </div>
- </div>
- <div class="col_2 last">
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>10-column (6-column inside) & 2-column @ end</h4></div>
- <div class="col_10">
- <div class="col_6"> </div>
- <div class="col_4 last"> </div>
- </div>
- <div class="col_2 last">
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>10-column (7-column inside) & 2-column @ end</h4></div>
- <div class="col_10">
- <div class="col_7"> </div>
- <div class="col_3 last"> </div>
- </div>
- <div class="col_2 last">
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>10-column (8-column inside) & 2-column @ end</h4></div>
- <div class="col_10">
- <div class="col_8"> </div>
- <div class="col_2 last"> </div>
- </div>
- <div class="col_2 last">
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>10-column (9-column inside) & 2-column @ end</h4></div>
- <div class="col_10">
- <div class="col_9"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_2 last">
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>11-column (1-column inside) & 1-column @ end</h4></div>
- <div class="col_11">
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_1 last"> </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>11-column (2-column inside) & 1-column @ end</h4></div>
- <div class="col_11">
- <div class="col_2"> </div>
- <div class="col_2"> </div>
- <div class="col_2"> </div>
- <div class="col_2"> </div>
- <div class="col_2"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_1 last"> </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>11-column (3-column inside) & 1-column @ end</h4></div>
- <div class="col_11">
- <div class="col_3"> </div>
- <div class="col_3"> </div>
- <div class="col_3"> </div>
- <div class="col_2 last"> </div>
- </div>
- <div class="col_1 last"> </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>11-column (4-column inside) & 1-column @ end</h4></div>
- <div class="col_11">
- <div class="col_4"> </div>
- <div class="col_4"> </div>
- <div class="col_3 last"> </div>
- </div>
- <div class="col_1 last"> </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>11-column (5-column inside) & 1-column @ end</h4></div>
- <div class="col_11">
- <div class="col_5"> </div>
- <div class="col_5"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_1 last"> </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>11-column (6-column inside) & 1-column @ end</h4></div>
- <div class="col_11">
- <div class="col_6"> </div>
- <div class="col_5 last"> </div>
- </div>
- <div class="col_1 last"> </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>11-column (7-column inside) & 1-column @ end</h4></div>
- <div class="col_11">
- <div class="col_7"> </div>
- <div class="col_4 last"> </div>
- </div>
- <div class="col_1 last"> </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>11-column (8-column inside) & 1-column @ end</h4></div>
- <div class="col_11">
- <div class="col_8"> </div>
- <div class="col_3 last"> </div>
- </div>
- <div class="col_1 last"> </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>11-column (9-column inside) & 1-column @ end</h4></div>
- <div class="col_11">
- <div class="col_9"> </div>
- <div class="col_2 last"> </div>
- </div>
- <div class="col_1 last"> </div>
- </div>
- </div><!--class="container" -->
- <div class="container test">
- <div class="row">
- <div class="col_12 title"><h4>11-column (10-column inside) & 1-column @ end</h4></div>
- <div class="col_11">
- <div class="col_10"> </div>
- <div class="col_1 last"> </div>
- </div>
- <div class="col_1 last"> </div>
- </div>
- </div><!--class="container" -->
- </body>
- </html>
|