-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstandard_base_demos.html
311 lines (245 loc) · 20.3 KB
/
standard_base_demos.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head xmlns:xi="http://www.w3.org/2001/XInclude">
<title>NCBI Base test page</title>
<!--<meta http-equiv="X-UA-Compatible" content="IE=7"> -->
<link href="normalize.css" media="screen" rel="stylesheet" type="text/css"/>
<link href="standard_base.css" media="screen" rel="stylesheet" type="text/css"/>
<link href="standard_grid.css" media="screen" rel="stylesheet" type="text/css"/>
<link href="standard_optional_helpers.css" media="screen" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="grid whole_rhythm">
<div class="col twelve_col">
<h1>Heading One, 18px font-size, with 27px line-height, and 9px margin on top/bottom</h1>
<!-- <h1>Another H1, with 27px line-height</h1> -->
<h2>Heading Two, 16px font-size, with 18px line-height, and 9px margin top/bottom</h2>
<!-- <h2>Another H2, with 18px line-height</h2> -->
<h3>Heading Three, 14px font-size, with 18px line-height, 9px margin top/bottom</h3>
<!-- <h3>Another H3, with 18px line-height</h3> -->
<h4>Heading Four, 13px font-size, 18px line-height, 9px margin top/bottom</h4>
<h5>Heading Five, 13px font-size, 18px line-height, 9px margin top/bottom</h5>
<h6>Heading Six, 13px font-size, 18px line-height, 9px margin top/bottom. Yes, this looks the same as regular text, but will always be separate from <p/> text.</h6>
<p>This is a paragraph of text. Here are some more.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id libero eros. Cras aliquam mauris vel neque lacinia bibendum. Sed a lorem lectus, ac lacinia tellus. Fusce imperdiet justo vel metus blandit suscipit. Maecenas aliquet ornare enim, vel elementum metus faucibus sit amet. Vivamus accumsan imperdiet metus non facilisis. Donec et quam nec leo vulputate posuere ut vel enim. Donec accumsan cursus ligula quis dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam id mauris justo, vel luctus arcu. Suspendisse non molestie sapien. Sed sed rhoncus nunc. Ut in erat feugiat tortor fermentum scelerisque eget quis purus. Aenean vestibulum pellentesque consequat. Nulla facilisi.</p>
<p>Fusce et risus eget nibh iaculis consequat. Vivamus feugiat pretium adipiscing. Mauris aliquam leo dignissim nulla pretium eu varius urna ultrices. Nulla fermentum mi eget nisl mattis a sollicitudin elit semper. Morbi eu dui in nibh iaculis pharetra. Sed molestie odio eget magna congue ut laoreet elit auctor. Suspendisse ullamcorper aliquam sollicitudin. Etiam vestibulum sapien sit amet mi ullamcorper suscipit pretium erat malesuada. Quisque dolor est, laoreet et malesuada eu, auctor in mi. Ut sem est, laoreet at volutpat feugiat, varius et mi. Nullam at ipsum ac est congue aliquet non vitae risus. Phasellus porttitor placerat mauris tincidunt consequat.</p>
<p>Phasellus quis nulla non mauris luctus luctus. In tempor dolor a odio egestas ut sodales neque mollis. Donec suscipit erat eu diam mattis fermentum. Aenean ullamcorper congue mauris placerat posuere. Maecenas quis cursus dui. Nulla a leo in arcu imperdiet elementum eget at magna. Etiam dictum aliquet arcu ultricies convallis. Praesent metus mauris, imperdiet et accumsan a, tempus non sem. Nam eu nisi magna. Vestibulum enim lacus, semper id interdum ac, ornare id felis. Maecenas placerat tincidunt metus, at ultrices lorem malesuada eu. Phasellus laoreet lacinia rhoncus. Mauris arcu elit, suscipit non viverra quis, varius at arcu.</p>
<p><strong>This is a paragraph of some strong text</strong></p>
<p><em>This is is a paragraph of some em text</em></p>
<blockquote>This is a blockquote, and should have a margin around it<p>here is a paragraph nested in the block quote</p></blockquote>
<ul>
<li>one, a really long sentence with a latin ending. Phasellus quis nulla non mauris luctus luctus. In tempor dolor a odio egestas ut sodales neque mollis. Donec suscipit erat eu diam mattis fermentum. Aenean ullamcorper congue mauris placerat posuere. Maecenas quis cursus dui. Nulla a leo in arcu imperdiet elementum eget at magna. Etiam dictum aliquet arcu ultricies convallis. Praesent metus mauris, imperdiet et accumsan a, tempus non sem. Nam eu nisi magna. Vestibulum enim lacus, semper id interdum ac, ornare id felis. Maecenas placerat tincidunt metus, at ultrices lorem malesuada eu. Phasellus laoreet lacinia rhoncus. Mauris arcu elit, suscipit non viverra quis, varius at arcu.</li>
<li>two</li>
</ul>
<ol>
<li>one</li>
<li>two</li>
</ol>
<dl>
<dt>Term</dt>
<dd>Definition</dd>
</dl>
<h2>A very simple standard table example</h2>
<table>
<tr><th>One</th><th>Two</th></tr>
<tr><td>a</td><td>b</td></tr>
</table>
<h2>Custom/Helper Classes</h2>
<div class="uppercase">This is uppercase text</div>
<div class="caps">This is simply title text caps</div>
<div class="small-caps">These are some small caps</div>
<div class="overline">This is overline</div>
<div class="sans-serif">This is sans-serif</div>
<div>First, regular text, and then... <sub>Hello, subscript</sub></div>
<div>Again, regular text, and then... <sup>Hello, now superscript</sup></div>
<h3>Text sizes</h3>
<div>Here is an Author name</div>
<div class="small">While here is an affiliation</div>
<!-- to be added to the docs: <h1>, <h2> should never be used inline -->
<!-- note: to use, you need a nonbreaking space at the beginning of the paragraph. Ideally it'd be a en space, but that doesn't seem to work -->
<h2>Inline Headers</h2>
<h3 class="inline">This is an inline header:</h3>
<p>and here is the rest of the boring paragraph. But what happens if the sentance or paragraph is really long and you keep going and it happens to wrap around the window? What happens in that case... is everything going to drop down and go to the next inline header?</p>
<h4 class="inline">This is an inline header:</h4>
<p>and here is the rest of the boring paragraph.</p>
<h5 class="inline">This is an inline header:</h5>
<p>and here is the rest of the boring paragraph.</p>
<h6 class="inline">This is an inline header:</h6>
<p>and here is the rest of the boring paragraph.</p>
<h2>Link Colors</h2>
<div class="content">
<p>Must be wrapped in a "content" class for now</p>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Nunc id libero eros. Cras aliquam mauris vel neque lacinia bibendum. Sed a lorem lectus, ac lacinia tellus. Fusce imperdiet justo vel metus blandit suscipit. Maecenas aliquet ornare enim, vel elementum metus faucibus sit amet. Vivamus accumsan imperdiet metus non facilisis. Donec et quam nec leo <a href="#bc">vulputate posuere ut vel enim</a>. Donec accumsan cursus ligula quis dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam id mauris justo, vel luctus arcu. Suspendisse non molestie sapien. Sed sed rhoncus nunc. Ut in erat feugiat tortor fermentum scelerisque eget quis purus. <a href="#ab">Aenean vestibulum pellentesque consequat</a>. Nulla facilisi.</p>
</div>
<!-- at the bottom, since the monospace font stuff throws the vertical rhythm off for whatever reason -->
<pre>This is a <pre>, and it has a margin-bottom</pre>
<p>
Here is an inline code element: <code>This is a <code> element, and it also has a margin-bottom</code>
Followed by an inline kbd element: <kbd>This is a <kbd> element, with a margin-bottom</kbd>
Followed by an inline samp element: <samp>This is a <samp> element, with a margin-bottom</samp>
And finally a inline tt element: <tt>This is a <tt> element, with a margin-bottom</tt>
</p>
</div>
<div class="col twelve_col">
<h2>Standard Max and Min page width values</h2>
</div>
<div style="width: 1200px; background-color: #ddf;">Max Width</div>
<div style="width: 800px; background-color: #dfd;">Min Width</div>
</div>
<div class="grid">
<div class="col twelve_col">
<h2>Standard grid examples. With the lack of background on these columns, the gray areas represent the right-margins.</h2>
</div>
</div>
<div class="grid">
<div class="col one_col">1 col</div>
<div class="col two_col">two col</div>
<div class="col three_col">three col</div>
<div class="col four_col">four col</div>
<div class="col two_col">again, two col</div>
</div>
<div class="grid">
<div class="col one_col">1</div>
<div class="col one_col">1</div>
<div class="col one_col">1</div>
<div class="col one_col">1</div>
<div class="col one_col">1</div>
<div class="col one_col">1</div>
<div class="col one_col">1</div>
<div class="col one_col">1</div>
<div class="col one_col">1</div>
<div class="col one_col">1</div>
<div class="col one_col">1</div>
<div class="col one_col">1</div>
</div>
<div class="grid">
<div class="col two_col">2</div>
<div class="col two_col">2</div>
<div class="col two_col">2</div>
<div class="col two_col">2</div>
<div class="col two_col">2</div>
<div class="col two_col">2</div>
</div>
<div class="grid">
<div class="col three_col">3</div>
<div class="col three_col">3</div>
<div class="col three_col">3</div>
<div class="col three_col">3</div>
</div>
<div class="grid">
<div class="col four_col">4</div>
<div class="col four_col">4</div>
<div class="col four_col">4</div>
</div>
<div class="grid">
<div class="col five_col">5</div>
<div class="col seven_col">7</div>
</div>
<div class="grid">
<div class="col six_col">6</div>
<div class="col six_col">6</div>
</div>
<div class="grid">
<div class="col seven_col">7</div>
<div class="col four_col">4</div>
<div class="col one_col">1</div>
</div>
<div class="grid">
<div class="col eight_col">8</div>
<div class="col one_col">1</div>
<div class="col one_col">1</div>
<div class="col two_col">2</div>
</div>
<div class="grid">
<div class="col nine_col">9</div>
<div class="col three_col">3</div>
</div>
<div class="grid">
<div class="col ten_col">10</div>
<div class="col two_col">2</div>
</div>
<div class="grid">
<div class="col eleven_col">11</div>
<div class='col one_col'>1</div>
</div>
<div class="grid">
<div class="col twelve_col">12</div>
</div>
<div class="grid">
<div class="col twelve_col">
<h2>Standard grid examples with content that's longer than the width of grid columns. Everything should wrap.</h2>
</div>
</div>
<div class="grid">
<div class="col one_col"> <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col one_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col one_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col one_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col one_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col one_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col one_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col one_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col one_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col one_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col one_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col one_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
</div>
<div class="grid">
<div class="col two_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col two_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col two_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col two_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col two_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col two_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
</div>
<div class="grid">
<div class="col three_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col three_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col three_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col three_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
</div>
<div class="grid">
<div class="col four_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col four_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col four_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
</div>
<div class="grid">
<div class="col five_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col seven_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
</div>
<div class="grid">
<div class="col six_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col six_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
</div>
<div class="grid">
<div class="col seven_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col four_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col one_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
</div>
<div class="grid">
<div class="col eight_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col one_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col one_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col two_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
</div>
<div class="grid">
<div class="col nine_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col three_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
</div>
<div class="grid">
<div class="col ten_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class="col two_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
</div>
<div class="grid">
<div class="col eleven_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
<div class='col one_col'><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
</div>
<div class="grid">
<div class="col twelve_col"><p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>
</div>
<div class="grid">
<p>And those were your columnar grid examples/test cases</p>
</div>
</body>
</html>