]> git.ipfire.org Git - thirdparty/foundation/foundation-emails.git/commitdiff
added sidebar.html to illustrate syntax. it's not the prettiest, but it'll do.
authorTim Hartwick <tdhartwick2@gmail.com>
Mon, 26 Jan 2015 20:07:40 +0000 (12:07 -0800)
committerTim Hartwick <tdhartwick2@gmail.com>
Mon, 26 Jan 2015 20:07:40 +0000 (12:07 -0800)
html/sidebar.html [new file with mode: 0644]

diff --git a/html/sidebar.html b/html/sidebar.html
new file mode 100644 (file)
index 0000000..9ecf8de
--- /dev/null
@@ -0,0 +1,255 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="viewport" content="width=device-width"/>
+  <link rel="stylesheet" type="text/css" href="../css/ink.css">
+  
+</head>
+<body>
+  <table class="body">
+    <tr>
+      <td class="center" align="center" valign="top">
+        <center>
+
+          <table class="row header">
+            <tr>
+              <td class="center" align="center">
+                <center>
+
+                  <table class="container">
+                    <tr>
+                      <td class="wrapper last">
+
+                        <table class="large-12 columns">
+                          <tr>
+                            <td class="large-6 small-8" style="background:red;">
+                              <img src="http://placehold.it/200x50">
+                            </td>
+                            <td class="large-6 small-4 last" style="text-align:right; vertical-align:middle;">SIDEBAR</td>
+                            <td class="expander"></td>
+                          </tr>
+                        </table>
+
+                      </td>
+                    </tr>
+                  </table>
+
+                </center>
+              </td>
+            </tr>
+          </table>
+
+         <br>
+
+          <table class="container">
+            <tr>
+              <td>
+
+              <!-- content start -->
+
+                <table class="row">
+                  <tr>
+                    <td class="wrapper">
+
+                      <table class="large-8 small-4 columns">
+                        <tr>
+                          <td>
+                            <h2>Hello,<br> Han Fastolfe</h2>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>
+                          </td>
+                          <td class="expander"></td>
+                        </tr>
+                      </table><table class="large-8 small-4 columns">
+                        <tr>
+                          <td class="panel">
+                            <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! ยป</a></p>
+                          </td>
+
+                          <td class="expander"></td>
+                        </tr>
+                      </table><table class="large-8 small-4 columns">
+                        <tr>
+                          <td>
+                            <br>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
+
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>
+
+                            <table class="button">
+                              <tr>
+                                <td>
+                                  <a href="#">Click Me!</a>
+                                </td>
+                              </tr>
+                            </table>
+
+                          </td>
+                          <td class="expander"></td>
+                        </tr>
+                      </table>
+
+                    </td>
+                    <td class="wrapper last"><table class="large-4 small-8 columns">
+                        <tr>
+                          <td class="panel">
+                            <h6>Header Thing</h6>
+                            <p>Sub-head or something</p>
+                            <table>
+                              <tr>
+                                <td>
+                                  <a href="#">Just a Plain Link &raquo;</a>
+                                </td>
+                              </tr>
+                            </table>
+                            <hr>
+                            <table>
+                              <tr>
+                                <td>
+                                  <a href="#">Just a Plain Link &raquo;</a>
+                                </td>
+                              </tr>
+                            </table>
+                            <hr>
+                            <table>
+                              <tr>
+                                <td>
+                                  <a href="#">Just a Plain Link &raquo;</a>
+                                </td>
+                              </tr>
+                            </table>
+                            <hr>
+                            <table>
+                              <tr>
+                                <td>
+                                  <a href="#">Just a Plain Link &raquo;</a>
+                                </td>
+                              </tr>
+                            </table>
+                            <hr>
+                            <table>
+                              <tr>
+                                <td>
+                                  <a href="#">Just a Plain Link &raquo;</a>
+                                </td>
+                              </tr>
+                            </table>
+                            <hr>
+                            <table>
+                              <tr>
+                                <td>
+                                  <a href="#">Just a Plain Link &raquo;</a>
+                                </td>
+                              </tr>
+                            </table>
+                            <hr>
+                            <table>
+                              <tr>
+                                <td>
+                                  <a href="#">Just a Plain Link &raquo;</a>
+                                </td>
+                              </tr>
+                            </table>
+                          </td>
+                          <td class="expander"></td>
+                        </tr>
+                      </table>
+
+                      <br>
+
+                      <table class="large-4 small-12 columns">
+                        <tr>
+                          <td class="panel">
+                            <h6 style="margin-bottom:5px;">Connect With Us:</h6>
+                            <table class="tiny-button facebook">
+                              <tr>
+                                <td>
+                                  <a href="#">Facebook</a>
+                                </td>
+                              </tr>
+                            </table>
+
+                            <hr>
+
+                            <table class="tiny-button twitter">
+                              <tr>
+                                <td>
+                                  <a href="#">Twitter</a>
+                                </td>
+                              </tr>
+                            </table>
+
+                            <hr>
+
+                            <table class="tiny-button google-plus">
+                              <tr>
+                                <td>
+                                  <a href="#">Google +</a>
+                                </td>
+                              </tr>
+                            </table>
+                            <br>
+                            <h6 style="margin-bottom:5px;">Contact Info:</h6>
+                            <p>Phone: <b>408.341.0600</b></p>
+                            <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
+                          </td>
+                          <td class="expander"></td>
+                        </tr>
+                      </table>
+
+                    </td>
+                  </tr>
+                </table>
+                <br>
+                <br>
+                <table class="block-grid block-grid-3">
+                  <tr>
+                    <td>
+                      <p style="text-align: center">
+                        one block
+                      </p>
+                    </td>
+                    <td>
+                      <p style="text-align: center">
+                        two block
+                      </p>
+                    </td>
+                    <td>
+                      <p style="text-align: center">
+                        three block
+                      </p>
+                    </td>
+                  </tr>
+                </table>
+                <!-- Legal + Unsubscribe -->
+                <table class="row">
+                  <tr>
+                    <td class="wrapper last">
+
+                      <table class="large-12 columns">
+                        <tr>
+                          <td align="center">
+                            <center>
+                              <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#">Unsubscribe</a></p>
+                            </center>
+                          </td>
+                          <td class="expander"></td>
+                        </tr>
+                      </table>
+
+                    </td>
+                  </tr>
+                </table>
+
+              <!-- container end below -->
+              </td>
+            </tr>
+          </table>
+
+        </center>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>
\ No newline at end of file