-<container>
- <row class="header">
- <columns large='6' small='6'>
- <img src="http://placehold.it/200x50"/>
- </columns>
- <columns large='6' small='6'>
- <span class="template-label">Basic</span>
- </columns>
- </row>
- <row>
- <columns large='12' small='12'>
- <h1>Hi, Susan Calvin</h1>
- <p class="lead">Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.</p>
- <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. consequat vel lacus. Sed iaculis pulvinar ligula, ornare fringilla ante viverra et. In hac habitasse platea dictumst. Donec vel orci mi, eu congue justo. Integer eget odio est, eget malesuada lorem. Aenean sed tellus dui, vitae viverra risus. Nullam massa sapien, pulvinar eleifend fringilla id, convallis eget nisi. Mauris a sagittis dui. Pellentesque non lacinia mi. Fusce sit amet libero sit amet erat venenatis sollicitudin vitae vel eros. Cras nunc sapien, interdum sit amet porttitor ut, congue quis urna.</p>
- </columns>
- </row>
- <row>
- <columns large='12' small='12'>
- <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! ยป</a></p>
- </columns>
- </row>
- <row>
- <columns large='6' small='12'>
- <h5>Connect With Us:</h5>
- <a href="#">Facebook</a>
- <br>
- <a href="#">Twitter</a>
- <br>
- <a href="#">Google +</a>
+<table class="container">
+ <tr>
+ <td>
- </columns>
- <columns large='6' small='12'>
- <h5>Contact Info:</h5>
- <p>Phone: 408.341.0600</p>
- <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
- </columns>
- </row>
- <row>
- <columns large='12' small='12'>
- <center>
- <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#">Unsubscribe</a></p>
- </center>
- </columns>
- </row>
-</container>
+ <table class="block-grid up-2" cellspacing="0">
+ <tr>
+ <td style="background:red">
+ <p style="text-align: center;">one</p>
+ </td><td style="background: pink;">
+ <p style="text-align: center;">two</p>
+ </td>
+ </tr>
+ </table>
+
+ <table class="block-grid up-3">
+ <tr>
+ <td style="background:red">
+ <p style="text-align: center;">one</p>
+ </td><td style="background: pink;">
+ <p style="text-align: center;">two</p>
+ </td><td style="background:red">
+ <p style="text-align: center;">three</p>
+ </td>
+ </tr>
+ </table>
+
+ <table class="block-grid up-4">
+ <tr>
+ <td style="background:red">
+ <p style="text-align: center;">one</p>
+ </td><td style="background: pink;">
+ <p style="text-align: center;">two</p>
+ </td><td style="background:red">
+ <p style="text-align: center;">three</p>
+ </td><td style="background: pink;">
+ <p style="text-align: center;">four</p>
+ </td>
+ </tr>
+ </table>
+
+ <table class="block-grid up-5">
+ <tr>
+ <td style="background:red">
+ <p style="text-align: center;">one</p>
+ </td><td style="background: pink;">
+ <p style="text-align: center;">two</p>
+ </td><td style="background:red">
+ <p style="text-align: center;">three</p>
+ </td><td style="background: pink;">
+ <p style="text-align: center;">four</p>
+ </td><td style="background:red">
+ <p style="text-align: center;">five</p>
+ </td>
+ </tr>
+ </table>
+
+
+ </td>
+ </tr>
+</table>
\ No newline at end of file