<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
- <link rel="stylesheet" href="ink.css" />
<style>
-
/* Include ink.css */
-
- /* Custom styles go here*/
+ </style>
+ <style>
- a.facebook td {
+ .facebook table td {
background: #3b5998;
border-color: #2d4473;
}
- a:hover.facebook td {
+ .facebook:hover table td {
background: #2d4473 !important;
}
- a.twitter td {
+ .twitter table td {
background: #00acee;
border-color: #0087bb;
}
- a:hover.twitter td {
+ .twitter:hover table td {
background: #0087bb !important;
}
- a.google-plus td {
- background: #DB4A39 !important;
- border-color: #CC0000 !important;
+
+ .google-plus table td {
+ background-color: #DB4A39;
+ border-color: #CC0000;
}
- a:hover.google-plus td {
+
+ .google-plus:hover table td {
background: #CC0000 !important;
}
+ .template-label {
+ color: #ffffff;
+ font-weight: bold;
+ font-size: 11px;
+ }
+
+ .callout .wrapper {
+ padding-bottom: 20px;
+ }
+
+ .callout .panel {
+ background: #ECF8FF;
+ border-color: #b9e5ff;
+ }
+
+ .header {
+ background: #999999;
+ }
+
+ .footer .wrapper {
+ background: #ebebeb;
+ }
+
+ .footer h5 {
+ padding-bottom: 10px;
+ }
+
+ table.columns .text-pad {
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+
+ table.columns .left-text-pad {
+ padding-left: 10px;
+ }
+
+ table.columns .right-text-pad {
+ padding-right: 10px;
+ }
+
+ @media only screen and (max-width: 600px) {
+
+ table[class="body"] .right-text-pad {
+ padding-left: 10px !important;
+ }
+
+ table[class="body"] .left-text-pad {
+ padding-right: 10px !important;
+ }
+ }
+
</style>
</head>
<body>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
+ <center>
- <table class="row header" style="background:#999999;">
- <tr>
- <td>
-
- <table class="container">
- <tr>
- <td class="wrapper last">
-
- <table class="twelve columns">
- <tr>
- <td class="six sub-columns">
- <img src="http://placehold.it/200x50">
- </td>
- <td class="six sub-columns last" align="right" style="text-align:right; vertical-align:middle;">
- <span style="color:#ffffff;font-weight:bold;font-size:11px;">BASIC</span>
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- </tr>
- </table>
-
- </td>
- </tr>
- </table>
-
- <table class="container">
- <tr>
- <td>
-
- <table class="row">
- <tr>
- <td class="wrapper last">
-
- <table class="twelve columns">
- <tr>
- <td>
- <h3>Hi, Elijah Baily</h3>
- <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>
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- </tr>
- </table>
-
- <table class="row">
- <tr>
- <td class="wrapper last">
-
- <table class="twelve columns">
- <tr>
- <td class="panel callout">
- <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>
-
- </td>
- </tr>
- </table>
-
- <table class="row">
- <tr>
- <td class="wrapper last">
-
- <table>
- <tr>
- <td class="panel">
-
-
- <table class="twelve columns">
- <tr>
- <td class="six sub-columns">
-
- <h5>Connect With Us:</h5>
-
- <a class="tiny-button facebook" href="#">
- <table>
- <tr>
- <td>
- Facebook
- </td>
- </tr>
- </table>
- </a>
-
- <br>
-
- <a class="tiny-button twitter" href="#">
- <table>
- <tr>
- <td>
- Twitter
- </td>
- </tr>
- </table>
- </a>
-
- <br>
-
- <a class="tiny-button google-plus" href="#">
- <table>
- <tr>
- <td>
- Google +
- </td>
- </tr>
- </table>
- </a>
-
- </td>
- <td class="six sub-columns last">
- <h5>Contact Info:</h5>
- <p>Phone: 408.341.0600</p>
- <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
- </td>
- <td class="expander"></td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
+ <table class="row header">
+ <tr>
+ <td class="center" align="center">
+ <center>
+
+ <table class="container">
+ <tr>
+ <td class="wrapper last">
+ <table class="twelve columns">
+ <tr>
+ <td class="six sub-columns">
+ <img src="http://placehold.it/200x50">
+ </td>
+ <td class="six sub-columns last" style="text-align:right; vertical-align:middle;">
+ <span class="template-label">BASIC</span>
+ </td>
+
+ </tr>
+ </table>
- <table class="row">
- <tr>
- <td class="wrapper last">
-
- <table class="twelve 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>
- </td>
- </tr>
- </table>
+ </center>
+ </td>
+ </tr>
+ </table>
+
+ <table class="container">
+ <tr>
+ <td>
+
+ <table class="row">
+ <tr>
+ <td class="wrapper last">
+
+ <table class="twelve columns">
+ <tr>
+ <td>
+ <h3>Hi, Susan Calvin</h3>
+ <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>
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ </tr>
+ </table>
+
+ <table class="row callout">
+ <tr>
+ <td class="wrapper last">
+
+ <table class="twelve 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>
+
+ </td>
+ </tr>
+ </table>
+
+ <table class="row footer">
+ <tr>
+ <td class="wrapper">
+
+ <table class="six columns">
+ <tr>
+ <td class="left-text-pad">
+
+ <h5>Connect With Us:</h5>
+
+ <a class="tiny-button facebook" href="#">
+ <table>
+ <tr>
+ <td>
+ Facebook
+ </td>
+ </tr>
+ </table>
+ </a>
+
+ <br>
+
+ <a class="tiny-button twitter" href="#">
+ <table>
+ <tr>
+ <td>
+ Twitter
+ </td>
+ </tr>
+ </table>
+ </a>
+
+ <br>
+
+ <a class="tiny-button google-plus" href="#">
+ <table>
+ <tr>
+ <td>
+ Google +
+ </td>
+ </tr>
+ </table>
+ </a>
+
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ <td class="wrapper last">
+
+ <table class="six columns">
+ <tr>
+ <td class="last right-text-pad">
+ <h5>Contact Info:</h5>
+ <p>Phone: 408.341.0600</p>
+ <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ </tr>
+ </table>
+
+
+ <table class="row">
+ <tr>
+ <td class="wrapper last">
+
+ <table class="twelve 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>
- <!-- container end below -->
- </td>
- </tr>
- </table>
+ </td>
+ </tr>
+ </table>
+
+ <!-- container end below -->
+ </td>
+ </tr>
+ </table>
+ </center>
</td>
</tr>
</table>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
- <link rel="stylesheet" href="ink.css" />
<style>
-
- /* Ink styles go here*/
-
- /* Ink v0.7.0 - Copyright 2013 ZURB Inc */
-
- /**********************************************
- * Client-specific Styles & Reset *
- **********************************************/
-
- /* Force Outlook to provide a "view in browser" menu link. */
- #outlook a {
- padding:0;
- }
-
- body{
- width:100% !important;
- -webkit-text-size-adjust:100%;
- -ms-text-size-adjust:100%;
- margin:0;
- padding:0;
- }
-
- /* Force Hotmail to display emails at full width */
- .ExternalClass {
- width:100%;
- }
-
- /* Force Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/ */
- .ExternalClass,
- .ExternalClass p,
- .ExternalClass span,
- .ExternalClass font,
- .ExternalClass td,
- .ExternalClass div {
- line-height: 100%;
- }
-
- #backgroundTable {
- margin:0;
- padding:0;
- width:100% !important;
- line-height: 100% !important;
- }
-
- img {
- outline:none;
- text-decoration:none;
- -ms-interpolation-mode: bicubic;
- width: auto;
- max-width: 100%;
- float: left;
- clear: both;
- display: block;
- }
-
- center {
- width: 100%;
- }
-
- a img {
- border: none;
- }
-
- p {
- margin: 0 0 0 10px;
- }
-
- table {
- border-spacing: 0;
- border-collapse: collapse;
- }
-
- td {
- word-break: break-word;
- -webkit-hyphens: auto;
- -moz-hyphens: auto;
- hyphens: auto;
- border-collapse: collapse !important;
- }
-
- table, tr, td {
- padding: 0;
- vertical-align: top;
- text-align: left;
- }
-
- hr {
- color: #d9d9d9;
- background-color: #d9d9d9;
- height: 1px;
- border: none;
- }
-
- /**********************************************
- * Responsive Grid *
- **********************************************/
-
- table.body {
- height: 100%;
- width: 100%;
- }
-
- table.container {
- width: 580px;
- margin: 0 auto;
- text-align: inherit;
- }
-
- table.row {
- padding: 0px;
- width: 100%;
- position: relative;
- }
-
- table.container table.row {
- display: block;
- }
-
- td.wrapper {
- padding: 10px 20px 0px 0px;
- position: relative;
- }
-
- table.columns,
- table.column {
- margin: 0 auto;
- }
-
- table.columns td,
- table.column td {
- padding: 0px 0px 10px;
- }
-
- table.columns td.sub-columns,
- table.column td.sub-columns,
- table.columns td.sub-column,
- table.column td.sub-column {
- padding-right: 3.448276%;
- }
-
- table.row td.last,
- table.container td.last {
- padding-right: 0px;
- }
-
- table.one { width: 30px; }
- table.two { width: 80px; }
- table.three { width: 130px; }
- table.four { width: 180px; }
- table.five { width: 230px; }
- table.six { width: 280px; }
- table.seven { width: 330px; }
- table.eight { width: 380px; }
- table.nine { width: 430px; }
- table.ten { width: 480px; }
- table.eleven { width: 530px; }
- table.twelve { width: 580px; }
-
- td.one { width: 8.333333% !important; }
- td.two { width: 16.666666% !important; }
- td.three { width: 25% !important; }
- td.four { width: 33.333333% !important; }
- td.five { width: 41.666666% !important; }
- td.six { width: 50% !important; }
- td.seven { width: 58.333333% !important; }
- td.eight { width: 66.666666% !important; }
- td.nine { width: 75% !important; }
- td.ten { width: 83.333333% !important; }
- td.eleven { width: 91.666666% !important; }
- td.twelve { width: 100% !important; }
-
- td.offset-by-one { padding-left: 50px; }
- td.offset-by-two { padding-left: 100px; }
- td.offset-by-three { padding-left: 150px; }
- td.offset-by-four { padding-left: 200px; }
- td.offset-by-five { padding-left: 250px; }
- td.offset-by-six { padding-left: 300px; }
- td.offset-by-seven { padding-left: 350px; }
- td.offset-by-eight { padding-left: 400px; }
- td.offset-by-nine { padding-left: 450px; }
- td.offset-by-ten { padding-left: 500px; }
- td.offset-by-eleven { padding-left: 550px; }
-
- td.sub-offset-by-one { padding-left: 5.172413% !important; }
- td.sub-offset-by-two { padding-left: 13.793102% !important; }
- td.sub-offset-by-three { padding-left: 22.413791% !important; }
- td.sub-offset-by-four { padding-left: 31.034480% !important; }
- td.sub-offset-by-five { padding-left: 39.655169% !important; }
- td.sub-offset-by-six { padding-left: 48.275858% !important; }
- td.sub-offset-by-seven { padding-left: 56.896547% !important; }
- td.sub-offset-by-eight { padding-left: 65.517236% !important; }
- td.sub-offset-by-nine { padding-left: 74.137925% !important; }
- td.sub-offset-by-ten { padding-left: 82.758614% !important; }
- td.sub-offset-by-eleven { padding-left: 91.379303% !important; }
-
- td.expander {
- visibility: hidden;
- width: 0px;
- padding: 0 !important;
- }
-
- /**********************************************
- * Block Grid *
- **********************************************/
-
- .block-grid {
- width: 100%;
- max-width: 580px;
- }
-
- .block-grid td {
- display: inline-block;
- padding:10px;
- }
-
- .two-up td {
- width:270px;
- }
-
- .three-up td {
- width:173px;
- }
-
- .four-up td {
- width:125px;
- }
-
- .five-up td {
- width:96px;
- }
-
- .six-up td {
- width:76px;
- }
-
- .seven-up td {
- width:62px;
- }
+ /* Include ink.css */
+ </style>
+ <style>
- .eight-up td {
- width:52px;
- }
-
- /**********************************************
- * Alignment & Visibility Classes *
- **********************************************/
-
- table.center, td.center {
- text-align: center;
- }
-
- h1.center,
- h2.center,
- h3.center,
- h4.center,
- h5.center,
- h6.center {
- text-align: center;
- }
-
- span.center {
- display: block;
- width: 100%;
- text-align: center;
- }
-
- img.center {
- margin: 0 auto;
- float: none;
- }
-
- .show-for-small,
- .hide-for-desktop {
- display: none;
- }
-
- /**********************************************
- * Typography *
- **********************************************/
-
- body, h1, h2, h3, h4, h5, h6, p {
- color: #222222;
- display: block;
- font-family: "Helvetica", "Arial", sans-serif;
- font-weight: normal;
- padding:0;
- margin: 0;
- text-align: left;
- line-height: 1.3;
- }
-
- h1, h2, h3, h4, h5, h6 {
- word-break: normal;
- }
-
- h1 {font-size: 59px;}
- h2 {font-size: 45px;}
- h3 {font-size: 37px;}
- h4 {font-size: 28px;}
- h5 {font-size: 23px;}
- h6 {font-size: 17px;}
- body, p {font-size: 14px;line-height:19px;}
-
- p {
- padding-bottom: 10px;
- }
-
- small {
- font-size: 10px;
- }
-
- a {
- color: #2ba6cb;
- text-decoration: none !important;
- }
-
- a:hover {
- color: #2795b6 !important;
+ .facebook table td {
+ background: #3b5998;
+ border-color: #2d4473;
}
-
- a:active {
- color: #2795b6 !important;
+
+ .facebook:hover table td {
+ background: #2d4473 !important;
}
-
- a:visited {
- color: #2ba6cb !important;
+
+ .twitter table td {
+ background: #00acee;
+ border-color: #0087bb;
}
-
- h1 a,
- h2 a,
- h3 a,
- h4 a,
- h5 a,
- h6 a {
- color: #2ba6cb !important;
+
+ .twitter:hover table td {
+ background: #0087bb !important;
}
-
- h1 a:active,
- h2 a:active,
- h3 a:active,
- h4 a:active,
- h5 a:active,
- h6 a:active {
- color: #2ba6cb !important;
- }
-
- h1 a:visited,
- h2 a:visited,
- h3 a:visited,
- h4 a:visited,
- h5 a:visited,
- h6 a:visited {
- color: #2ba6cb !important;
- }
-
- /**********************************************
- * Panels *
- **********************************************/
-
- td.panel {
- background: #f2f2f2;
- border: 1px solid #d9d9d9;
- padding: 10px !important;
+
+ .google-plus table td {
+ background-color: #DB4A39;
+ border-color: #CC0000;
}
-
- /**********************************************
- * Buttons *
- **********************************************/
-
- a.button table,
- a.tiny-button table,
- a.small-button table,
- a.medium-button table,
- a.large-button table {
- width: 100%;
- overflow: hidden;
+
+ .google-plus:hover table td {
+ background: #CC0000 !important;
}
-
- a.button td,
- a.tiny-button td,
- a.small-button td,
- a.medium-button td,
- a.large-button td {
- display: block;
- width: auto !important;
- text-align: center;
- font-weight: bold;
- text-decoration: none;
- font-family: Helvetica, Arial, sans-serif;
+
+ .template-label {
color: #ffffff;
- background: #2ba6cb;
- border: 1px solid #2284a1;
- }
-
- a.tiny-button td {
- padding: 5px 10px;
- font-size: 12px;
- font-weight: normal;
- }
-
- a.button td,
- a.small-button td {
- padding: 8px 15px;
- font-size: 16px;
- }
-
- a.medium-button td {
- padding: 12px 24px;
- font-size: 20px;
- }
-
- a.large-button td {
- padding: 21px 30px;
- font-size: 24px;
- }
-
- a:hover.button td,
- a:hover.tiny-button td,
- a:hover.small-button td,
- a:hover.medium-button td,
- a:hover.large-button td {
- background: #2795b6 !important;
- }
-
- a.button,
- a:hover.button,
- a:active.button,
- a:visited.button,
- a.tiny-button,
- a:hover.tiny-button,
- a:active.tiny-button,
- a:visited.tiny-button,
- a.small-button,
- a:hover.small-button,
- a:active.small-button,
- a:visited.small-button,
- a.medium-button,
- a:hover.medium-button,
- a:active.medium-button,
- a:visited.medium-button,
- a.large-button,
- a:hover.large-button,
- a:active.large-button,
- a:visited.large-button {
- color: #ffffff !important;
- font-family: Helvetica, Arial, sans-serif;
- text-decoration: none;
- }
-
- a.secondary td {
- background: #e9e9e9;
- border-color: #d0d0d0;
- }
-
- a:hover.secondary td {
- background: #d0d0d0 !important;
- }
-
- a.success td {
- background: #5da423;
- border-color: #457a1a;
- }
-
- a:hover.success td {
- background: #457a1a !important;
- }
-
- a.alert td {
- background: #c60f13;
- border-color: #970b0e;
- }
-
- a:hover.alert td {
- background: #970b0e !important;
- }
-
- a.radius td {
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
- }
-
- a.rounded td {
- -webkit-border-radius: 500px;
- -moz-border-radius: 500px;
- border-radius: 500px;
+ font-weight: bold;
+ font-size: 11px;
}
-
- /**********************************************
- * Outlook First *
- **********************************************/
-
- body.outlook img {
- width: auto !important;
- max-width: none !important;
+
+ .callout .panel {
+ background: #ECF8FF;
+ border-color: #b9e5ff;
}
-
- /**********************************************
- * Media Queries *
- **********************************************/
-
- @media only screen and (max-width: 600px) {
-
- table[class="body"] .container {
- width: 95% !important;
- }
-
- table[class="body"] .row {
- width: 100% !important;
- display: block !important;
- }
-
- table[class="body"] .wrapper {
- display: block !important;
- padding-right: 0 !important;
- }
-
- table[class="body"] .columns,
- table[class="body"] .column {
- table-layout: fixed !important;
- float: none !important;
- width: 100% !important;
- padding-right: 0px !important;
- padding-left: 0px !important;
- display: block !important;
- }
-
- table[class="body"] .wrapper.first .columns,
- table[class="body"] .wrapper.first .column {
- display: table !important;
- }
-
- table[class="body"] table.columns td,
- table[class="body"] table.column td {
- width: 100%;
- }
-
- table[class="body"] td.offset-by-one,
- table[class="body"] td.offset-by-two,
- table[class="body"] td.offset-by-three,
- table[class="body"] td.offset-by-four,
- table[class="body"] td.offset-by-five,
- table[class="body"] td.offset-by-six,
- table[class="body"] td.offset-by-seven,
- table[class="body"] td.offset-by-eight,
- table[class="body"] td.offset-by-nine,
- table[class="body"] td.offset-by-ten,
- table[class="body"] td.offset-by-eleven {
- padding-left: 0 !important;
- }
-
- table[class="body"] .expander {
- width: 9999px !important;
- }
-
- table[class="body"] .hide-for-small,
- table[class="body"] .show-for-desktop {
- display: none !important;
- }
-
- table[class="body"] .show-for-small,
- table[class="body"] .hide-for-desktop {
- display: inherit !important;
- }
+
+ .header {
+ background: #999999;
}
- /* Custom styles go here*/
-
- a.facebook td {
- background: #3b5998;
- border-color: #2d4473;
+ .footer .wrapper {
+ background: #ebebeb;
}
- a:hover.facebook td {
- background: #2d4473 !important;
+ .footer h5 {
+ padding-bottom: 10px;
}
- a.twitter td {
- background: #00acee;
- border-color: #0087bb;
+ table.columns .text-pad {
+ padding-left: 10px;
+ padding-right: 10px;
}
- a:hover.twitter td {
- background: #0087bb !important;
+ table.columns .left-text-pad {
+ padding-left: 10px;
}
- a.google-plus td {
- background: #DB4A39 !important;
- border-color: #CC0000 !important;
+
+ table.columns .right-text-pad {
+ padding-right: 10px;
}
- a:hover.google-plus td {
- background: #cc0000 !important;
+
+ @media only screen and (max-width: 600px) {
+
+ table[class="body"] .right-text-pad {
+ padding-left: 10px !important;
+ }
+
+ table[class="body"] .left-text-pad {
+ padding-right: 10px !important;
+ }
}
- </style>
+ </style>
</head>
<body>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
+ <center>
- <table class="row header" style="background:#999999;">
- <tr>
- <td>
-
- <table class="container">
- <tr>
- <td class="wrapper last">
-
- <table class="twelve columns">
- <tr>
-
- <td class="six sub-columns">
- <img src="http://placehold.it/200x50">
- </td>
- <td class="six sub-columns last" align="right" style="text-align:right; vertical-align:middle;">
- <span style="color:#ffffff;font-weight:bold;font-size:11px;">BASIC</span>
- </td>
- <td class="expander"></td>
-
- </tr>
- </table>
-
- </td>
-
- </tr>
- </table>
-
- </td>
- </tr>
- </table>
- <br>
-
- <table class="container">
+ <table class="row header">
<tr>
- <td>
-
- <!-- content start -->
- <table class="row">
- <tr>
- <td class="wrapper last">
-
- <table class="twelve columns">
- <tr>
- <td>
- <h3>Hi, Elijah Baily</h3>
- <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
- <img src="http://placehold.it/580x300">
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- </tr>
- </table>
-
- <table class="row">
- <tr>
-
- <td class="wrapper last">
- <table class="twelve columns">
+ <td class="center" align="center">
+ <center>
+
+ <table class="container">
<tr>
- <td class="panel callout">
- <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! »</a></p>
+ <td class="wrapper last">
+
+ <table class="twelve columns">
+ <tr>
+
+ <td class="six sub-columns">
+ <img src="http://placehold.it/200x50">
+ </td>
+ <td class="six sub-columns last" align="right" style="text-align:right; vertical-align:middle;">
+ <span class="template-label">HERO</span>
+ </td>
+ <td class="expander"></td>
+
+ </tr>
+ </table>
+
</td>
- <td class="expander"></td>
</tr>
</table>
- </td>
+
+ </center>
+ </td>
+ </tr>
+ </table>
+ <br>
+
+ <table class="container">
+ <tr>
+ <td>
- </tr>
- </table>
-
- <table class="row">
- <tr>
+ <!-- content start -->
+ <table class="row">
+ <tr>
+ <td class="wrapper last">
- <td class="wrapper last">
- <table class="twelve columns">
- <tr>
- <td>
- <h3>Title Ipsum <small>This is a note.</small></h3>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- </td>
- <td class="expander"></td>
- </tr>
- </table>
- </td>
+ <table class="twelve columns">
+ <tr>
+ <td>
+
+ <h3>Hi, Elijah Baily</h3>
+ <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
+ <img width="580" height="300" src="http://placehold.it/580x300">
+
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
- </tr>
- </table>
-
-
- <table class="row">
- <tr>
+ </td>
+ </tr>
+ </table>
- <td class="wrapper last">
- <table class="three columns">
- <tr>
- <td>
- <a class="button" href="#">
- <table>
- <tr>
- <td>
- Click Me!
- </td>
- </tr>
- </table>
- </a>
- </td>
- <td class="expander"></td>
- </tr>
- </table>
- </td>
+ <table class="row callout">
+ <tr>
+ <td class="wrapper last">
+
+ <table class="twelve 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>
+
+ </td>
+ </tr>
+ </table>
- </tr>
- </table>
-
-
- <table class="row">
- <tr>
-
- <td class="wrapper last">
- <table class="twelve columns">
- <tr>
-
- <td class="panel">
- <table class="row">
+ <table class="row">
+ <tr>
+ <td class="wrapper last">
+
+ <table class="twelve columns">
<tr>
-
- <td class="wrapper last">
- <table class="twelve columns">
- <tr>
- <td class="six sub-columns">
- <h5>Connect With Us:</h5>
-
- <a class="tiny-button facebook" href="#">
- <table>
- <tr>
- <td>
- Facebook
- </td>
- </tr>
- </table>
- </a>
- <br>
- <a class="tiny-button twitter" href="#">
- <table>
- <tr>
- <td>
- Twitter
- </td>
- </tr>
- </table>
- </a>
- <br>
- <a class="tiny-button google-plus" href="#">
- <table>
- <tr>
- <td>
- Google +
- </td>
- </tr>
- </table>
- </a>
-
- </td>
- <td class="six sub-columns last">
- <h5>Contact Info:</h5>
- <p>Phone: 408.341.0600</p>
- <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
- </td>
- <td class="expander"></td>
- </tr>
- </table>
+ <td>
+
+ <h3>Title Ipsum <small>This is a note.</small></h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
</td>
-
+ <td class="expander"></td>
</tr>
- </table>
- </td>
- <td class="expander"></td>
-
- </tr>
- </table>
- </td>
+ </table>
+
+ </td>
+ </tr>
+ </table>
- </tr>
- </table>
-
-
- <table class="row">
- <tr>
- <td class="wrapper last">
-
- <table class="twelve columns">
- <tr>
- <td align="center">
- <center>
- <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#"><unsubscribe>Unsubscribe</unsubscribe></a></p>
- </center>
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- </tr>
- </table>
-
- <!-- container end below -->
+
+ <table class="row">
+ <tr>
+ <td class="wrapper last">
+
+ <table class="three columns">
+ <tr>
+ <td>
+
+ <a class="button" href="#">
+ <table>
+ <tr>
+ <td>
+ Click Me!
+ </td>
+ </tr>
+ </table>
+ </a>
+
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ </tr>
+ </table>
+
+
+ <table class="row footer">
+ <tr>
+ <td class="wrapper">
+
+ <table class="six columns">
+ <tr>
+ <td class="left-text-pad">
+
+ <h5>Connect With Us:</h5>
+
+ <a class="tiny-button facebook" href="#">
+ <table>
+ <tr>
+ <td>
+ Facebook
+ </td>
+ </tr>
+ </table>
+ </a>
+
+ <br>
+
+ <a class="tiny-button twitter" href="#">
+ <table>
+ <tr>
+ <td>
+ Twitter
+ </td>
+ </tr>
+ </table>
+ </a>
+
+ <br>
+
+ <a class="tiny-button google-plus" href="#">
+ <table>
+ <tr>
+ <td>
+ Google +
+ </td>
+ </tr>
+ </table>
+ </a>
+
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ <td class="wrapper last">
+
+ <table class="six columns">
+ <tr>
+ <td class="last right-text-pad">
+ <h5>Contact Info:</h5>
+ <p>Phone: 408.341.0600</p>
+ <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ </tr>
+ </table>
+
+
+ <table class="row">
+ <tr>
+ <td class="wrapper last">
+
+ <table class="twelve columns">
+ <tr>
+ <td align="center">
+ <center>
+ <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#"><unsubscribe>Unsubscribe</unsubscribe></a></p>
+ </center>
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ </tr>
+ </table>
+
+ <!-- container end below -->
</td>
</tr>
</table>
+ </center>
</td>
</tr>
</table>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
- <link rel="stylesheet" href="ink.css" />
<style>
-
- /* Ink styles go here*/
- /* Ink v0.7.0 - Copyright 2013 ZURB Inc */
-
- /**********************************************
- * Client-specific Styles & Reset *
- **********************************************/
-
- /* Force Outlook to provide a "view in browser" menu link. */
- #outlook a {
- padding:0;
- }
-
- body{
- width:100% !important;
- -webkit-text-size-adjust:100%;
- -ms-text-size-adjust:100%;
- margin:0;
- padding:0;
- }
-
- /* Force Hotmail to display emails at full width */
- .ExternalClass {
- width:100%;
- }
-
- /* Force Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/ */
- .ExternalClass,
- .ExternalClass p,
- .ExternalClass span,
- .ExternalClass font,
- .ExternalClass td,
- .ExternalClass div {
- line-height: 100%;
- }
-
- #backgroundTable {
- margin:0;
- padding:0;
- width:100% !important;
- line-height: 100% !important;
- }
-
- img {
- outline:none;
- text-decoration:none;
- -ms-interpolation-mode: bicubic;
- width: auto;
- max-width: 100%;
- float: left;
- clear: both;
- display: block;
- }
-
- center {
- width: 100%;
- }
-
- a img {
- border: none;
- }
-
- p {
- margin: 0 0 0 10px;
- }
-
- table {
- border-spacing: 0;
- border-collapse: collapse;
- }
-
- td {
- word-break: break-word;
- -webkit-hyphens: auto;
- -moz-hyphens: auto;
- hyphens: auto;
- border-collapse: collapse !important;
- }
-
- table, tr, td {
- padding: 0;
- vertical-align: top;
- text-align: left;
- }
-
- hr {
- color: #d9d9d9;
- background-color: #d9d9d9;
- height: 1px;
- border: none;
- }
-
- /**********************************************
- * Responsive Grid *
- **********************************************/
-
- table.body {
- height: 100%;
- width: 100%;
- }
-
- table.container {
- width: 580px;
- margin: 0 auto;
- text-align: inherit;
- }
-
- table.row {
- padding: 0px;
- width: 100%;
- position: relative;
- }
-
- table.container table.row {
- display: block;
- }
-
- td.wrapper {
- padding: 10px 20px 0px 0px;
- position: relative;
- }
-
- table.columns,
- table.column {
- margin: 0 auto;
- }
-
- table.columns td,
- table.column td {
- padding: 0px 0px 10px;
- }
+ /* Include ink.css */
+ </style>
+ <style>
- table.columns td.sub-columns,
- table.column td.sub-columns,
- table.columns td.sub-column,
- table.column td.sub-column {
- padding-right: 3.448276%;
- }
-
- table.row td.last,
- table.container td.last {
- padding-right: 0px;
- }
-
- table.one { width: 30px; }
- table.two { width: 80px; }
- table.three { width: 130px; }
- table.four { width: 180px; }
- table.five { width: 230px; }
- table.six { width: 280px; }
- table.seven { width: 330px; }
- table.eight { width: 380px; }
- table.nine { width: 430px; }
- table.ten { width: 480px; }
- table.eleven { width: 530px; }
- table.twelve { width: 580px; }
-
- td.one { width: 8.333333% !important; }
- td.two { width: 16.666666% !important; }
- td.three { width: 25% !important; }
- td.four { width: 33.333333% !important; }
- td.five { width: 41.666666% !important; }
- td.six { width: 50% !important; }
- td.seven { width: 58.333333% !important; }
- td.eight { width: 66.666666% !important; }
- td.nine { width: 75% !important; }
- td.ten { width: 83.333333% !important; }
- td.eleven { width: 91.666666% !important; }
- td.twelve { width: 100% !important; }
-
- td.offset-by-one { padding-left: 50px; }
- td.offset-by-two { padding-left: 100px; }
- td.offset-by-three { padding-left: 150px; }
- td.offset-by-four { padding-left: 200px; }
- td.offset-by-five { padding-left: 250px; }
- td.offset-by-six { padding-left: 300px; }
- td.offset-by-seven { padding-left: 350px; }
- td.offset-by-eight { padding-left: 400px; }
- td.offset-by-nine { padding-left: 450px; }
- td.offset-by-ten { padding-left: 500px; }
- td.offset-by-eleven { padding-left: 550px; }
-
- td.sub-offset-by-one { padding-left: 5.172413% !important; }
- td.sub-offset-by-two { padding-left: 13.793102% !important; }
- td.sub-offset-by-three { padding-left: 22.413791% !important; }
- td.sub-offset-by-four { padding-left: 31.034480% !important; }
- td.sub-offset-by-five { padding-left: 39.655169% !important; }
- td.sub-offset-by-six { padding-left: 48.275858% !important; }
- td.sub-offset-by-seven { padding-left: 56.896547% !important; }
- td.sub-offset-by-eight { padding-left: 65.517236% !important; }
- td.sub-offset-by-nine { padding-left: 74.137925% !important; }
- td.sub-offset-by-ten { padding-left: 82.758614% !important; }
- td.sub-offset-by-eleven { padding-left: 91.379303% !important; }
-
- td.expander {
- visibility: hidden;
- width: 0px;
- padding: 0 !important;
- }
-
- /**********************************************
- * Block Grid *
- **********************************************/
-
- .block-grid {
- width: 100%;
- max-width: 580px;
- }
-
- .block-grid td {
- display: inline-block;
- padding:10px;
- }
-
- .two-up td {
- width:270px;
- }
-
- .three-up td {
- width:173px;
- }
-
- .four-up td {
- width:125px;
- }
-
- .five-up td {
- width:96px;
- }
-
- .six-up td {
- width:76px;
- }
-
- .seven-up td {
- width:62px;
- }
-
- .eight-up td {
- width:52px;
- }
-
- /**********************************************
- * Alignment & Visibility Classes *
- **********************************************/
-
- table.center, td.center {
- text-align: center;
- }
-
- h1.center,
- h2.center,
- h3.center,
- h4.center,
- h5.center,
- h6.center {
- text-align: center;
- }
-
- span.center {
- display: block;
- width: 100%;
- text-align: center;
- }
-
- img.center {
- margin: 0 auto;
- float: none;
- }
-
- .show-for-small,
- .hide-for-desktop {
- display: none;
- }
-
- /**********************************************
- * Typography *
- **********************************************/
-
- body, h1, h2, h3, h4, h5, h6, p {
- color: #222222;
- display: block;
- font-family: "Helvetica", "Arial", sans-serif;
- font-weight: normal;
- padding:0;
- margin: 0;
- text-align: left;
- line-height: 1.3;
- }
-
- h1, h2, h3, h4, h5, h6 {
- word-break: normal;
- }
-
- h1 {font-size: 59px;}
- h2 {font-size: 45px;}
- h3 {font-size: 37px;}
- h4 {font-size: 28px;}
- h5 {font-size: 23px;}
- h6 {font-size: 17px;}
- body, p {font-size: 14px;line-height:19px;}
-
- p {
- padding-bottom: 10px;
- }
-
- small {
- font-size: 10px;
- }
-
- a {
- color: #2ba6cb;
- text-decoration: none !important;
- }
-
- a:hover {
- color: #2795b6 !important;
+ .facebook table td {
+ background: #3b5998;
+ border-color: #2d4473;
}
-
- a:active {
- color: #2795b6 !important;
+
+ .facebook:hover table td {
+ background: #2d4473 !important;
}
-
- a:visited {
- color: #2ba6cb !important;
+
+ .twitter table td {
+ background: #00acee;
+ border-color: #0087bb;
}
-
- h1 a,
- h2 a,
- h3 a,
- h4 a,
- h5 a,
- h6 a {
- color: #2ba6cb !important;
+
+ .twitter:hover table td {
+ background: #0087bb !important;
}
-
- h1 a:active,
- h2 a:active,
- h3 a:active,
- h4 a:active,
- h5 a:active,
- h6 a:active {
- color: #2ba6cb !important;
- }
-
- h1 a:visited,
- h2 a:visited,
- h3 a:visited,
- h4 a:visited,
- h5 a:visited,
- h6 a:visited {
- color: #2ba6cb !important;
- }
-
- /**********************************************
- * Panels *
- **********************************************/
-
- td.panel {
- background: #f2f2f2;
- border: 1px solid #d9d9d9;
- padding: 10px !important;
+
+ .google-plus table td {
+ background-color: #DB4A39;
+ border-color: #CC0000;
}
-
- /**********************************************
- * Buttons *
- **********************************************/
-
- a.button table,
- a.tiny-button table,
- a.small-button table,
- a.medium-button table,
- a.large-button table {
- width: 100%;
- overflow: hidden;
+
+ .google-plus:hover table td {
+ background: #CC0000 !important;
}
-
- a.button td,
- a.tiny-button td,
- a.small-button td,
- a.medium-button td,
- a.large-button td {
- display: block;
- width: auto !important;
- text-align: center;
- font-weight: bold;
- text-decoration: none;
- font-family: Helvetica, Arial, sans-serif;
+
+ .template-label {
color: #ffffff;
- background: #2ba6cb;
- border: 1px solid #2284a1;
- }
-
- a.tiny-button td {
- padding: 5px 10px;
- font-size: 12px;
- font-weight: normal;
- }
-
- a.button td,
- a.small-button td {
- padding: 8px 15px;
- font-size: 16px;
- }
-
- a.medium-button td {
- padding: 12px 24px;
- font-size: 20px;
- }
-
- a.large-button td {
- padding: 21px 30px;
- font-size: 24px;
- }
-
- a:hover.button td,
- a:hover.tiny-button td,
- a:hover.small-button td,
- a:hover.medium-button td,
- a:hover.large-button td {
- background: #2795b6 !important;
- }
-
- a.button,
- a:hover.button,
- a:active.button,
- a:visited.button,
- a.tiny-button,
- a:hover.tiny-button,
- a:active.tiny-button,
- a:visited.tiny-button,
- a.small-button,
- a:hover.small-button,
- a:active.small-button,
- a:visited.small-button,
- a.medium-button,
- a:hover.medium-button,
- a:active.medium-button,
- a:visited.medium-button,
- a.large-button,
- a:hover.large-button,
- a:active.large-button,
- a:visited.large-button {
- color: #ffffff !important;
- font-family: Helvetica, Arial, sans-serif;
- text-decoration: none;
- }
-
- a.secondary td {
- background: #e9e9e9;
- border-color: #d0d0d0;
- }
-
- a:hover.secondary td {
- background: #d0d0d0 !important;
- }
-
- a.success td {
- background: #5da423;
- border-color: #457a1a;
- }
-
- a:hover.success td {
- background: #457a1a !important;
- }
-
- a.alert td {
- background: #c60f13;
- border-color: #970b0e;
- }
-
- a:hover.alert td {
- background: #970b0e !important;
- }
-
- a.radius td {
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
- }
-
- a.rounded td {
- -webkit-border-radius: 500px;
- -moz-border-radius: 500px;
- border-radius: 500px;
+ font-weight: bold;
+ font-size: 11px;
}
-
- /**********************************************
- * Outlook First *
- **********************************************/
-
- body.outlook img {
- width: auto !important;
- max-width: none !important;
+
+ .callout .panel {
+ background: #ECF8FF;
+ border-color: #b9e5ff;
}
-
- /**********************************************
- * Media Queries *
- **********************************************/
-
- @media only screen and (max-width: 600px) {
-
- table[class="body"] .container {
- width: 95% !important;
- }
-
- table[class="body"] .row {
- width: 100% !important;
- display: block !important;
- }
-
- table[class="body"] .wrapper {
- display: block !important;
- padding-right: 0 !important;
- }
-
- table[class="body"] .columns,
- table[class="body"] .column {
- table-layout: fixed !important;
- float: none !important;
- width: 100% !important;
- padding-right: 0px !important;
- padding-left: 0px !important;
- display: block !important;
- }
-
- table[class="body"] .wrapper.first .columns,
- table[class="body"] .wrapper.first .column {
- display: table !important;
- }
-
- table[class="body"] table.columns td,
- table[class="body"] table.column td {
- width: 100%;
- }
-
- table[class="body"] td.offset-by-one,
- table[class="body"] td.offset-by-two,
- table[class="body"] td.offset-by-three,
- table[class="body"] td.offset-by-four,
- table[class="body"] td.offset-by-five,
- table[class="body"] td.offset-by-six,
- table[class="body"] td.offset-by-seven,
- table[class="body"] td.offset-by-eight,
- table[class="body"] td.offset-by-nine,
- table[class="body"] td.offset-by-ten,
- table[class="body"] td.offset-by-eleven {
- padding-left: 0 !important;
- }
-
- table[class="body"] .expander {
- width: 9999px !important;
- }
-
- table[class="body"] .hide-for-small,
- table[class="body"] .show-for-desktop {
- display: none !important;
- }
-
- table[class="body"] .show-for-small,
- table[class="body"] .hide-for-desktop {
- display: inherit !important;
- }
+
+ .header {
+ background: #999999;
}
- /* Custom styles go here*/
-
- a.facebook td {
- background: #3b5998;
- border-color: #2d4473;
+ .footer .wrapper {
+ background: #ebebeb;
}
- a:hover.facebook td {
- background: #2d4473 !important;
+ .footer h5 {
+ padding-bottom: 10px;
}
- a.twitter td {
- background: #00acee;
- border-color: #0087bb;
+ table.columns .text-pad {
+ padding-left: 10px;
+ padding-right: 10px;
}
- a:hover.twitter td {
- background: #0087bb !important;
+ table.columns .left-text-pad {
+ padding-left: 10px;
}
- a.google-plus td {
- background: #DB4A39 !important;
- border-color: #CC0000 !important;
+
+ table.columns .right-text-pad {
+ padding-right: 10px;
}
- a:hover.google-plus td {
- background: #cc0000 !important;
+
+ @media only screen and (max-width: 600px) {
+
+ table[class="body"] .right-text-pad {
+ padding-left: 10px !important;
+ }
+
+ table[class="body"] .left-text-pad {
+ padding-right: 10px !important;
+ }
}
- </style>
+ </style>
</head>
<body>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
+ <center>
-
- <table class="row header" style="background:#999999;">
- <tr>
- <td>
-
- <table class="container">
- <tr>
- <td class="wrapper">
-
- <table class="twelve columns">
+ <table class="row header">
+ <tr>
+ <td class="center" align="center">
+ <center>
+
+ <table class="container">
<tr>
-
- <td class="six sub-columns">
- <img src="http://placehold.it/200x50">
- </td>
- <td class="six sub-columns last" align="right" style="text-align:right; vertical-align:middle;">
- <span style="color:#ffffff;font-weight:bold;font-size:11px;">BASIC</span>
+ <td class="wrapper last">
+
+ <table class="twelve columns">
+ <tr>
+ <td class="six sub-columns">
+ <img src="http://placehold.it/200x50">
+ </td>
+ <td class="six sub-columns last" style="text-align:right; vertical-align:middle;">
+ <span class="template-label">NEWSLETTER</span>
+ </td>
+
+ </tr>
+ </table>
+
</td>
- <td class="expander"></td>
-
</tr>
- </table>
-
- </td>
-
- </tr>
- </table>
+ </table>
+
+ </center>
+ </td>
+ </tr>
+ </table>
- </td>
- </tr>
- </table>
- <br>
+ <br>
- <table class="container">
+
<table class="container">
<tr>
<td>
- <!-- content start -->
- <table class="row">
- <tr>
- <td class="wrapper last">
-
- <table class="twelve columns">
- <tr>
- <td>
- <h3>Great Scott!</h3>
- <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
- <img src="http://placehold.it/580x300">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- </tr>
- </table>
-
- <!-- Article List 1 -->
- <table class="row">
- <tr>
- <td class="wrapper">
-
- <table class="twelve columns">
- <tr>
- <td class="three sub-columns">
- <!-- Top Left sub-grid -->
- <img src="http://placehold.it/110x110">
- </td>
- <td class="nine sub-columns last">
- <!-- Top Right sub-grid -->
- <h5>Title Ipsum <small>This is a note.</small></h5>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-
- <!-- custom wrapped button -->
- <table width="150">
- <tr>
- <td>
- <a class="button" href="#">
- <table>
- <tr>
- <td>
- Clickity Click »
- </td>
- </tr>
- </table>
- </a>
- </td>
- </tr>
- </table>
-
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- <table class="twelve columns">
- <tr>
- <td class="three sub-columns">
- <!-- Top Left sub-grid -->
- <img src="http://placehold.it/110x110">
- </td>
- <td class="nine sub-columns last">
- <!-- Top Right sub-grid -->
- <h5>Title Ipsum <small>This is a note.</small></h5>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-
- <!-- custom wrapped button -->
- <table width="150">
- <tr>
- <td>
- <a class="button" href="#">
- <table>
- <tr>
- <td>
- Clickity Click »
- </td>
- </tr>
- </table>
- </a>
- </td>
- </tr>
- </table>
-
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- </tr>
- </table>
-
- <!-- Panel with call to action -->
- <table class="row">
- <tr>
-
- <td class="wrapper last">
- <table class="twelve columns">
- <tr>
- <td class="panel callout">
- <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>
- </td>
+ <!-- content start -->
+ <table class="row">
+ <tr>
+ <td class="wrapper last">
+
+ <table class="twelve columns">
+ <tr>
+ <td>
+ <h3>Great Scott!</h3>
+ <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
+ <img width="580" height="300" src="http://placehold.it/580x300">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ </tr>
+ </table>
- </tr>
- </table>
- <br>
- <!-- Article List 2 -->
- <table class="row">
- <tr>
- <td class="wrapper">
-
- <table class="twelve columns">
- <tr>
- <td class="three sub-columns">
- <!-- Top Left sub-grid -->
- <img src="http://placehold.it/110x110">
- </td>
- <td class="nine sub-columns last">
- <!-- Top Right sub-grid -->
- <h5>Title Ipsum <small>This is a note.</small></h5>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-
- <!-- custom wrapped button -->
- <table width="150">
- <tr>
- <td>
- <a class="button" href="#">
- <table>
- <tr>
- <td>
- Clickity Click »
- </td>
- </tr>
- </table>
- </a>
- </td>
- </tr>
- </table>
-
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- <table class="twelve columns">
- <tr>
- <td class="three sub-columns">
- <!-- Top Left sub-grid -->
- <img src="http://placehold.it/110x110">
- </td>
- <td class="nine sub-columns last">
- <!-- Top Right sub-grid -->
- <h5>Title Ipsum <small>This is a note.</small></h5>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-
- <!-- custom wrapped button -->
- <table width="150">
- <tr>
- <td>
- <a class="button" href="#">
- <table>
- <tr>
- <td>
- Clickity Click »
- </td>
- </tr>
- </table>
- </a>
- </td>
- </tr>
- </table>
-
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- </tr>
- </table>
-
-
-
- <table class="row">
- <tr>
-
- <td class="wrapper last">
- <table class="twelve columns">
- <tr>
-
- <td class="panel">
- <table class="row">
+ <!-- Article List 1 -->
+ <table class="row">
+ <tr>
+ <td class="wrapper">
+
+ <table class="twelve columns">
<tr>
-
- <td class="wrapper last">
- <table class="twelve columns">
- <tr>
- <td class="six sub-columns">
- <h5>Connect With Us:</h5>
-
- <a class="tiny-button facebook" href="#">
+ <td class="three sub-columns">
+ <!-- Top Left sub-grid -->
+ <img width="110" height="110" src="http://placehold.it/110x110">
+ </td>
+ <td class="nine sub-columns last">
+ <!-- Top Right sub-grid -->
+ <h5>Title Ipsum <small>This is a note.</small></h5>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
+ <!-- custom wrapped button -->
+ <table width="150">
+ <tr>
+ <td>
+
+ <a class="button" href="#">
<table>
<tr>
<td>
- Facebook
+ Clickity Click »
</td>
</tr>
</table>
</a>
- <br>
- <a class="tiny-button twitter" href="#">
+
+ </td>
+ </tr>
+ </table>
+
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ <table class="twelve columns">
+ <tr>
+ <td class="three sub-columns">
+ <!-- Top Left sub-grid -->
+ <img width="110" height="110" src="http://placehold.it/110x110">
+ </td>
+ <td class="nine sub-columns last">
+ <!-- Top Right sub-grid -->
+ <h5>Title Ipsum <small>This is a note.</small></h5>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
+ <!-- custom wrapped button -->
+ <table width="150">
+ <tr>
+ <td>
+
+ <a class="button" href="#">
<table>
<tr>
<td>
- Twitter
+ Clickity Click »
</td>
</tr>
</table>
</a>
- <br>
- <a class="tiny-button google-plus" href="#">
+
+ </td>
+ </tr>
+ </table>
+
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ </tr>
+ </table>
+
+ <!-- Panel with call to action -->
+ <table class="row callout">
+ <tr>
+
+ <td class="wrapper last">
+ <table class="twelve 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>
+ </td>
+
+ </tr>
+ </table>
+ <br>
+ <!-- Article List 2 -->
+ <table class="row">
+ <tr>
+ <td class="wrapper">
+
+ <table class="twelve columns">
+ <tr>
+ <td class="three sub-columns">
+ <!-- Top Left sub-grid -->
+ <img width="110" height="110" src="http://placehold.it/110x110">
+ </td>
+ <td class="nine sub-columns last">
+ <!-- Top Right sub-grid -->
+ <h5>Title Ipsum <small>This is a note.</small></h5>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
+ <!-- custom wrapped button -->
+ <table width="150">
+ <tr>
+ <td>
+
+ <a class="button" href="#">
<table>
<tr>
<td>
- Google +
+ Clickity Click »
</td>
</tr>
</table>
</a>
-
- </td>
- <td class="six sub-columns last">
- <h5>Contact Info:</h5>
- <p>Phone: 408.341.0600</p>
- <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
- </td>
- <td class="expander"></td>
- </tr>
+
+ </td>
+ </tr>
</table>
+
</td>
-
+ <td class="expander"></td>
</tr>
- </table>
- </td>
- <td class="expander"></td>
-
- </tr>
- </table>
- </td>
-
- </tr>
- </table>
-
-
- <table class="row">
- <tr>
- <td class="wrapper last">
+ </table>
- <table class="twelve columns">
- <tr>
- <td align="center">
- <center>
- <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#"><unsubscribe>Unsubscribe</unsubscribe></a></p>
- </center>
- </td>
- <td class="expander"></td>
- </tr>
- </table>
+ <table class="twelve columns">
+ <tr>
+ <td class="three sub-columns">
+ <!-- Top Left sub-grid -->
+ <img width="110" height="110" src="http://placehold.it/110x110">
+ </td>
+ <td class="nine sub-columns last">
+ <!-- Top Right sub-grid -->
+ <h5>Title Ipsum <small>This is a note.</small></h5>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
+ <!-- custom wrapped button -->
+ <table width="150">
+ <tr>
+ <td>
+
+ <a class="button" href="#">
+ <table>
+ <tr>
+ <td>
+ Clickity Click »
+ </td>
+ </tr>
+ </table>
+ </a>
+
+ </td>
+ </tr>
+ </table>
+
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
- </td>
- </tr>
- </table>
+ </td>
+ </tr>
+ </table>
+
+
+
+ <table class="row footer">
+ <tr>
+ <td class="wrapper">
+
+ <table class="six columns">
+ <tr>
+ <td class="left-text-pad">
+
+ <h5>Connect With Us:</h5>
+
+ <a class="tiny-button facebook" href="#">
+ <table>
+ <tr>
+ <td>
+ Facebook
+ </td>
+ </tr>
+ </table>
+ </a>
+
+ <br>
+
+ <a class="tiny-button twitter" href="#">
+ <table>
+ <tr>
+ <td>
+ Twitter
+ </td>
+ </tr>
+ </table>
+ </a>
+
+ <br>
+
+ <a class="tiny-button google-plus" href="#">
+ <table>
+ <tr>
+ <td>
+ Google +
+ </td>
+ </tr>
+ </table>
+ </a>
+
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ <td class="wrapper last">
+
+ <table class="six columns">
+ <tr>
+ <td class="last right-text-pad">
+ <h5>Contact Info:</h5>
+ <p>Phone: 408.341.0600</p>
+ <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ </tr>
+ </table>
+
+
+ <table class="row">
+ <tr>
+ <td class="wrapper last">
+
+ <table class="twelve columns">
+ <tr>
+ <td align="center">
+ <center>
+ <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#"><unsubscribe>Unsubscribe</unsubscribe></a></p>
+ </center>
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ </tr>
+ </table>
<!-- container end below -->
</td>
</tr>
</table>
+ </center>
</td>
</tr>
</table>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
- <link rel="stylesheet" href="ink.css" />
<style>
-
- /* Ink styles go here*/
-
- /* Ink v0.7.0 - Copyright 2013 ZURB Inc */
-
- /**********************************************
- * Client-specific Styles & Reset *
- **********************************************/
-
- /* Force Outlook to provide a "view in browser" menu link. */
- #outlook a {
- padding:0;
- }
-
- body{
- width:100% !important;
- -webkit-text-size-adjust:100%;
- -ms-text-size-adjust:100%;
- margin:0;
- padding:0;
- }
-
- /* Force Hotmail to display emails at full width */
- .ExternalClass {
- width:100%;
- }
-
- /* Force Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/ */
- .ExternalClass,
- .ExternalClass p,
- .ExternalClass span,
- .ExternalClass font,
- .ExternalClass td,
- .ExternalClass div {
- line-height: 100%;
- }
-
- #backgroundTable {
- margin:0;
- padding:0;
- width:100% !important;
- line-height: 100% !important;
- }
-
- img {
- outline:none;
- text-decoration:none;
- -ms-interpolation-mode: bicubic;
- width: auto;
- max-width: 100%;
- float: left;
- clear: both;
- display: block;
- }
-
- center {
- width: 100%;
- }
-
- a img {
- border: none;
- }
-
- p {
- margin: 0 0 0 10px;
- }
-
- table {
- border-spacing: 0;
- border-collapse: collapse;
- }
-
- td {
- word-break: break-word;
- -webkit-hyphens: auto;
- -moz-hyphens: auto;
- hyphens: auto;
- border-collapse: collapse !important;
- }
-
- table, tr, td {
- padding: 0;
- vertical-align: top;
- text-align: left;
- }
-
- hr {
- color: #d9d9d9;
- background-color: #d9d9d9;
- height: 1px;
- border: none;
- }
-
- /**********************************************
- * Responsive Grid *
- **********************************************/
-
- table.body {
- height: 100%;
- width: 100%;
- }
-
- table.container {
- width: 580px;
- margin: 0 auto;
- text-align: inherit;
- }
-
- table.row {
- padding: 0px;
- width: 100%;
- position: relative;
- }
-
- table.container table.row {
- display: block;
- }
-
- td.wrapper {
- padding: 10px 20px 0px 0px;
- position: relative;
- }
-
- table.columns,
- table.column {
- margin: 0 auto;
- }
-
- table.columns td,
- table.column td {
- padding: 0px 0px 10px;
- }
-
- table.columns td.sub-columns,
- table.column td.sub-columns,
- table.columns td.sub-column,
- table.column td.sub-column {
- padding-right: 3.448276%;
- }
-
- table.row td.last,
- table.container td.last {
- padding-right: 0px;
- }
-
- table.one { width: 30px; }
- table.two { width: 80px; }
- table.three { width: 130px; }
- table.four { width: 180px; }
- table.five { width: 230px; }
- table.six { width: 280px; }
- table.seven { width: 330px; }
- table.eight { width: 380px; }
- table.nine { width: 430px; }
- table.ten { width: 480px; }
- table.eleven { width: 530px; }
- table.twelve { width: 580px; }
-
- td.one { width: 8.333333% !important; }
- td.two { width: 16.666666% !important; }
- td.three { width: 25% !important; }
- td.four { width: 33.333333% !important; }
- td.five { width: 41.666666% !important; }
- td.six { width: 50% !important; }
- td.seven { width: 58.333333% !important; }
- td.eight { width: 66.666666% !important; }
- td.nine { width: 75% !important; }
- td.ten { width: 83.333333% !important; }
- td.eleven { width: 91.666666% !important; }
- td.twelve { width: 100% !important; }
-
- td.offset-by-one { padding-left: 50px; }
- td.offset-by-two { padding-left: 100px; }
- td.offset-by-three { padding-left: 150px; }
- td.offset-by-four { padding-left: 200px; }
- td.offset-by-five { padding-left: 250px; }
- td.offset-by-six { padding-left: 300px; }
- td.offset-by-seven { padding-left: 350px; }
- td.offset-by-eight { padding-left: 400px; }
- td.offset-by-nine { padding-left: 450px; }
- td.offset-by-ten { padding-left: 500px; }
- td.offset-by-eleven { padding-left: 550px; }
-
- td.sub-offset-by-one { padding-left: 5.172413% !important; }
- td.sub-offset-by-two { padding-left: 13.793102% !important; }
- td.sub-offset-by-three { padding-left: 22.413791% !important; }
- td.sub-offset-by-four { padding-left: 31.034480% !important; }
- td.sub-offset-by-five { padding-left: 39.655169% !important; }
- td.sub-offset-by-six { padding-left: 48.275858% !important; }
- td.sub-offset-by-seven { padding-left: 56.896547% !important; }
- td.sub-offset-by-eight { padding-left: 65.517236% !important; }
- td.sub-offset-by-nine { padding-left: 74.137925% !important; }
- td.sub-offset-by-ten { padding-left: 82.758614% !important; }
- td.sub-offset-by-eleven { padding-left: 91.379303% !important; }
-
- td.expander {
- visibility: hidden;
- width: 0px;
- padding: 0 !important;
- }
-
- /**********************************************
- * Block Grid *
- **********************************************/
-
- .block-grid {
- width: 100%;
- max-width: 580px;
- }
-
- .block-grid td {
- display: inline-block;
- padding:10px;
- }
-
- .two-up td {
- width:270px;
- }
-
- .three-up td {
- width:173px;
- }
-
- .four-up td {
- width:125px;
- }
-
- .five-up td {
- width:96px;
- }
-
- .six-up td {
- width:76px;
- }
-
- .seven-up td {
- width:62px;
- }
-
- .eight-up td {
- width:52px;
- }
-
- /**********************************************
- * Alignment & Visibility Classes *
- **********************************************/
+ /* Include ink.css */
+ </style>
+ <style>
- table.center, td.center {
- text-align: center;
- }
-
- h1.center,
- h2.center,
- h3.center,
- h4.center,
- h5.center,
- h6.center {
- text-align: center;
- }
-
- span.center {
- display: block;
- width: 100%;
- text-align: center;
- }
-
- img.center {
- margin: 0 auto;
- float: none;
- }
-
- .show-for-small,
- .hide-for-desktop {
- display: none;
- }
-
- /**********************************************
- * Typography *
- **********************************************/
-
- body, h1, h2, h3, h4, h5, h6, p {
- color: #222222;
- display: block;
- font-family: "Helvetica", "Arial", sans-serif;
- font-weight: normal;
- padding:0;
- margin: 0;
- text-align: left;
- line-height: 1.3;
- }
-
- h1, h2, h3, h4, h5, h6 {
- word-break: normal;
- }
-
- h1 {font-size: 59px;}
- h2 {font-size: 45px;}
- h3 {font-size: 37px;}
- h4 {font-size: 28px;}
- h5 {font-size: 23px;}
- h6 {font-size: 17px;}
- body, p {font-size: 14px;line-height:19px;}
-
- p {
- padding-bottom: 10px;
- }
-
- small {
- font-size: 10px;
- }
-
- a {
- color: #2ba6cb;
- text-decoration: none !important;
- }
-
- a:hover {
- color: #2795b6 !important;
+ .facebook table td {
+ background: #3b5998;
+ border-color: #2d4473;
}
-
- a:active {
- color: #2795b6 !important;
+
+ .facebook:hover table td {
+ background: #2d4473 !important;
}
-
- a:visited {
- color: #2ba6cb !important;
+
+ .twitter table td {
+ background: #00acee;
+ border-color: #0087bb;
}
-
- h1 a,
- h2 a,
- h3 a,
- h4 a,
- h5 a,
- h6 a {
- color: #2ba6cb !important;
+
+ .twitter:hover table td {
+ background: #0087bb !important;
}
-
- h1 a:active,
- h2 a:active,
- h3 a:active,
- h4 a:active,
- h5 a:active,
- h6 a:active {
- color: #2ba6cb !important;
- }
-
- h1 a:visited,
- h2 a:visited,
- h3 a:visited,
- h4 a:visited,
- h5 a:visited,
- h6 a:visited {
- color: #2ba6cb !important;
- }
-
- /**********************************************
- * Panels *
- **********************************************/
-
- td.panel {
- background: #f2f2f2;
- border: 1px solid #d9d9d9;
- padding: 10px !important;
+
+ .google-plus table td {
+ background-color: #DB4A39;
+ border-color: #CC0000;
}
-
- /**********************************************
- * Buttons *
- **********************************************/
-
- a.button table,
- a.tiny-button table,
- a.small-button table,
- a.medium-button table,
- a.large-button table {
- width: 100%;
- overflow: hidden;
+
+ .google-plus:hover table td {
+ background: #CC0000 !important;
}
-
- a.button td,
- a.tiny-button td,
- a.small-button td,
- a.medium-button td,
- a.large-button td {
- display: block;
- width: auto !important;
- text-align: center;
- font-weight: bold;
- text-decoration: none;
- font-family: Helvetica, Arial, sans-serif;
+
+ .template-label {
color: #ffffff;
- background: #2ba6cb;
- border: 1px solid #2284a1;
- }
-
- a.tiny-button td {
- padding: 5px 10px;
- font-size: 12px;
- font-weight: normal;
- }
-
- a.button td,
- a.small-button td {
- padding: 8px 15px;
- font-size: 16px;
- }
-
- a.medium-button td {
- padding: 12px 24px;
- font-size: 20px;
- }
-
- a.large-button td {
- padding: 21px 30px;
- font-size: 24px;
- }
-
- a:hover.button td,
- a:hover.tiny-button td,
- a:hover.small-button td,
- a:hover.medium-button td,
- a:hover.large-button td {
- background: #2795b6 !important;
- }
-
- a.button,
- a:hover.button,
- a:active.button,
- a:visited.button,
- a.tiny-button,
- a:hover.tiny-button,
- a:active.tiny-button,
- a:visited.tiny-button,
- a.small-button,
- a:hover.small-button,
- a:active.small-button,
- a:visited.small-button,
- a.medium-button,
- a:hover.medium-button,
- a:active.medium-button,
- a:visited.medium-button,
- a.large-button,
- a:hover.large-button,
- a:active.large-button,
- a:visited.large-button {
- color: #ffffff !important;
- font-family: Helvetica, Arial, sans-serif;
- text-decoration: none;
- }
-
- a.secondary td {
- background: #e9e9e9;
- border-color: #d0d0d0;
- }
-
- a:hover.secondary td {
- background: #d0d0d0 !important;
- }
-
- a.success td {
- background: #5da423;
- border-color: #457a1a;
- }
-
- a:hover.success td {
- background: #457a1a !important;
- }
-
- a.alert td {
- background: #c60f13;
- border-color: #970b0e;
- }
-
- a:hover.alert td {
- background: #970b0e !important;
- }
-
- a.radius td {
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
- }
-
- a.rounded td {
- -webkit-border-radius: 500px;
- -moz-border-radius: 500px;
- border-radius: 500px;
+ font-weight: bold;
+ font-size: 11px;
}
-
- /**********************************************
- * Outlook First *
- **********************************************/
-
- body.outlook img {
- width: auto !important;
- max-width: none !important;
+
+ .callout .panel {
+ background: #ECF8FF;
+ border-color: #b9e5ff;
}
-
- /**********************************************
- * Media Queries *
- **********************************************/
-
- @media only screen and (max-width: 600px) {
-
- table[class="body"] .container {
- width: 95% !important;
- }
-
- table[class="body"] .row {
- width: 100% !important;
- display: block !important;
- }
-
- table[class="body"] .wrapper {
- display: block !important;
- padding-right: 0 !important;
- }
-
- table[class="body"] .columns,
- table[class="body"] .column {
- table-layout: fixed !important;
- float: none !important;
- width: 100% !important;
- padding-right: 0px !important;
- padding-left: 0px !important;
- display: block !important;
- }
-
- table[class="body"] .wrapper.first .columns,
- table[class="body"] .wrapper.first .column {
- display: table !important;
- }
-
- table[class="body"] table.columns td,
- table[class="body"] table.column td {
- width: 100%;
- }
-
- table[class="body"] td.offset-by-one,
- table[class="body"] td.offset-by-two,
- table[class="body"] td.offset-by-three,
- table[class="body"] td.offset-by-four,
- table[class="body"] td.offset-by-five,
- table[class="body"] td.offset-by-six,
- table[class="body"] td.offset-by-seven,
- table[class="body"] td.offset-by-eight,
- table[class="body"] td.offset-by-nine,
- table[class="body"] td.offset-by-ten,
- table[class="body"] td.offset-by-eleven {
- padding-left: 0 !important;
- }
-
- table[class="body"] .expander {
- width: 9999px !important;
- }
-
- table[class="body"] .hide-for-small,
- table[class="body"] .show-for-desktop {
- display: none !important;
- }
-
- table[class="body"] .show-for-small,
- table[class="body"] .hide-for-desktop {
- display: inherit !important;
- }
+
+ .header {
+ background: #999999;
}
- /* Custom styles go here*/
-
- a.facebook td {
- background: #3b5998;
- border-color: #2d4473;
+ .footer .wrapper {
+ background: #ebebeb;
}
- a:hover.facebook td {
- background: #2d4473 !important;
+ .footer h5 {
+ padding-bottom: 10px;
}
- a.twitter td {
- background: #00acee;
- border-color: #0087bb;
+ table.columns .text-pad {
+ padding-left: 10px;
+ padding-right: 10px;
}
- a:hover.twitter td {
- background: #0087bb !important;
+ table.columns .left-text-pad {
+ padding-left: 10px;
}
- a.google-plus td {
- background: #DB4A39 !important;
- border-color: #CC0000 !important;
+
+ table.columns .right-text-pad {
+ padding-right: 10px;
}
- a:hover.google-plus td {
- background: #cc0000 !important;
+
+ @media only screen and (max-width: 600px) {
+
+ table[class="body"] .right-text-pad {
+ padding-left: 10px !important;
+ }
+
+ table[class="body"] .left-text-pad {
+ padding-right: 10px !important;
+ }
}
-
- a.link td { padding: 0 !important; }
-
- </style>
+
+ </style>
</head>
<body>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
+ <center>
-
- <table class="row" style="background:#999999;">
- <tr>
- <td>
-
- <table class="container">
- <tr>
- <td class="wrapper last">
-
- <table class="twelve columns">
+ <table class="row header">
+ <tr>
+ <td class="center" align="center">
+ <center>
+
+ <table class="container">
<tr>
-
- <td class="six sub-columns">
- <img src="http://placehold.it/200x50">
- </td>
- <td class="six sub-columns last" align="right" style="text-align:right; vertical-align:middle;">
- <span style="color:#ffffff;font-weight:bold;font-size:11px;">BASIC</span>
+ <td class="wrapper last">
+
+ <table class="twelve columns">
+ <tr>
+ <td class="six sub-columns">
+ <img src="http://placehold.it/200x50">
+ </td>
+ <td class="six sub-columns last" style="text-align:right; vertical-align:middle;">
+ <span class="template-label">SIDEBAR HERO</span>
+ </td>
+
+ </tr>
+ </table>
+
</td>
- <td class="expander"></td>
-
</tr>
- </table>
-
- </td>
-
- </tr>
- </table>
+ </table>
+
+ </center>
+ </td>
+ </tr>
+ </table>
- </td>
- </tr>
- </table>
-
- <br>
+ <br>
<table class="container">
<tr>
<!-- content start -->
<table class="row">
- <tr>
-
- <td class="wrapper last">
- <table class="twelve columns">
+ <tr>
+ <td class="wrapper last">
+
+
<table class="twelve columns">
<tr>
<td>
- <h2>Welcome, Hari Seldon</h2>
+ <h2>Welcome, Daneel Olivan</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
- <img src ="http://placehold.it/580x300">
+ <img width="580" height="300" src="http://placehold.it/580x300">
</td>
<td class="expander"></td>
</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>
- </td>
-
- </tr>
+
+ </td>
+ </tr>
</table>
<br> <!-- Break Tag for row -->
<table class="row">
<tr>
-
<td class="wrapper">
+
<table class="six columns">
<tr>
<td>
<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>
<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>
+
<a class="button" href="#">
<table>
<tr>
</tr>
</table>
</a>
+
</td>
<td class="expander"></td>
</tr>
</table>
+
</td>
-
<td class="wrapper last">
+
<table class="six columns">
<tr>
<td class="panel">
</tr>
</table>
+ </center>
</td>
</tr>
</table>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
- <link rel="stylesheet" href="ink.css" />
<style>
-
- /* Ink v0.7.0 - Copyright 2013 ZURB Inc */
-
- /**********************************************
- * Client-specific Styles & Reset *
- **********************************************/
-
- /* Force Outlook to provide a "view in browser" menu link. */
- #outlook a {
- padding:0;
- }
-
- body{
- width:100% !important;
- -webkit-text-size-adjust:100%;
- -ms-text-size-adjust:100%;
- margin:0;
- padding:0;
- }
-
- /* Force Hotmail to display emails at full width */
- .ExternalClass {
- width:100%;
- }
-
- /* Force Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/ */
- .ExternalClass,
- .ExternalClass p,
- .ExternalClass span,
- .ExternalClass font,
- .ExternalClass td,
- .ExternalClass div {
- line-height: 100%;
- }
-
- #backgroundTable {
- margin:0;
- padding:0;
- width:100% !important;
- line-height: 100% !important;
- }
-
- img {
- outline:none;
- text-decoration:none;
- -ms-interpolation-mode: bicubic;
- width: auto;
- max-width: 100%;
- float: left;
- clear: both;
- display: block;
- }
-
- center {
- width: 100%;
- }
-
- a img {
- border: none;
- }
-
- p {
- margin: 0 0 0 10px;
- }
-
- table {
- border-spacing: 0;
- border-collapse: collapse;
- }
-
- td {
- word-break: break-word;
- -webkit-hyphens: auto;
- -moz-hyphens: auto;
- hyphens: auto;
- border-collapse: collapse !important;
- }
+ /* Include ink.css */
+ </style>
+ <style>
- table, tr, td {
- padding: 0;
- vertical-align: top;
- text-align: left;
- }
-
- hr {
- color: #d9d9d9;
- background-color: #d9d9d9;
- height: 1px;
- border: none;
- }
-
- /**********************************************
- * Responsive Grid *
- **********************************************/
-
- table.body {
- height: 100%;
- width: 100%;
- }
-
- table.container {
- width: 580px;
- margin: 0 auto;
- text-align: inherit;
- }
-
- table.row {
- padding: 0px;
- width: 100%;
- position: relative;
- }
-
- table.container table.row {
- display: block;
- }
-
- td.wrapper {
- padding: 10px 20px 0px 0px;
- position: relative;
- }
-
- table.columns,
- table.column {
- margin: 0 auto;
- }
-
- table.columns td,
- table.column td {
- padding: 0px 0px 10px;
- }
-
- table.columns td.sub-columns,
- table.column td.sub-columns,
- table.columns td.sub-column,
- table.column td.sub-column {
- padding-right: 3.448276%;
- }
-
- table.row td.last,
- table.container td.last {
- padding-right: 0px;
- }
-
- table.one { width: 30px; }
- table.two { width: 80px; }
- table.three { width: 130px; }
- table.four { width: 180px; }
- table.five { width: 230px; }
- table.six { width: 280px; }
- table.seven { width: 330px; }
- table.eight { width: 380px; }
- table.nine { width: 430px; }
- table.ten { width: 480px; }
- table.eleven { width: 530px; }
- table.twelve { width: 580px; }
-
- td.one { width: 8.333333% !important; }
- td.two { width: 16.666666% !important; }
- td.three { width: 25% !important; }
- td.four { width: 33.333333% !important; }
- td.five { width: 41.666666% !important; }
- td.six { width: 50% !important; }
- td.seven { width: 58.333333% !important; }
- td.eight { width: 66.666666% !important; }
- td.nine { width: 75% !important; }
- td.ten { width: 83.333333% !important; }
- td.eleven { width: 91.666666% !important; }
- td.twelve { width: 100% !important; }
-
- td.offset-by-one { padding-left: 50px; }
- td.offset-by-two { padding-left: 100px; }
- td.offset-by-three { padding-left: 150px; }
- td.offset-by-four { padding-left: 200px; }
- td.offset-by-five { padding-left: 250px; }
- td.offset-by-six { padding-left: 300px; }
- td.offset-by-seven { padding-left: 350px; }
- td.offset-by-eight { padding-left: 400px; }
- td.offset-by-nine { padding-left: 450px; }
- td.offset-by-ten { padding-left: 500px; }
- td.offset-by-eleven { padding-left: 550px; }
-
- td.sub-offset-by-one { padding-left: 5.172413% !important; }
- td.sub-offset-by-two { padding-left: 13.793102% !important; }
- td.sub-offset-by-three { padding-left: 22.413791% !important; }
- td.sub-offset-by-four { padding-left: 31.034480% !important; }
- td.sub-offset-by-five { padding-left: 39.655169% !important; }
- td.sub-offset-by-six { padding-left: 48.275858% !important; }
- td.sub-offset-by-seven { padding-left: 56.896547% !important; }
- td.sub-offset-by-eight { padding-left: 65.517236% !important; }
- td.sub-offset-by-nine { padding-left: 74.137925% !important; }
- td.sub-offset-by-ten { padding-left: 82.758614% !important; }
- td.sub-offset-by-eleven { padding-left: 91.379303% !important; }
-
- td.expander {
- visibility: hidden;
- width: 0px;
- padding: 0 !important;
- }
-
- /**********************************************
- * Block Grid *
- **********************************************/
-
- .block-grid {
- width: 100%;
- max-width: 580px;
- }
-
- .block-grid td {
- display: inline-block;
- padding:10px;
- }
-
- .two-up td {
- width:270px;
- }
-
- .three-up td {
- width:173px;
- }
-
- .four-up td {
- width:125px;
- }
-
- .five-up td {
- width:96px;
- }
-
- .six-up td {
- width:76px;
- }
-
- .seven-up td {
- width:62px;
- }
-
- .eight-up td {
- width:52px;
- }
-
- /**********************************************
- * Alignment & Visibility Classes *
- **********************************************/
-
- table.center, td.center {
- text-align: center;
- }
-
- h1.center,
- h2.center,
- h3.center,
- h4.center,
- h5.center,
- h6.center {
- text-align: center;
- }
-
- span.center {
- display: block;
- width: 100%;
- text-align: center;
- }
-
- img.center {
- margin: 0 auto;
- float: none;
- }
-
- .show-for-small,
- .hide-for-desktop {
- display: none;
- }
-
- /**********************************************
- * Typography *
- **********************************************/
-
- body, h1, h2, h3, h4, h5, h6, p {
- color: #222222;
- display: block;
- font-family: "Helvetica", "Arial", sans-serif;
- font-weight: normal;
- padding:0;
- margin: 0;
- text-align: left;
- line-height: 1.3;
- }
-
- h1, h2, h3, h4, h5, h6 {
- word-break: normal;
- }
-
- h1 {font-size: 59px;}
- h2 {font-size: 45px;}
- h3 {font-size: 37px;}
- h4 {font-size: 28px;}
- h5 {font-size: 23px;}
- h6 {font-size: 17px;}
- body, p {font-size: 14px;line-height:19px;}
-
- p {
- padding-bottom: 10px;
- }
-
- small {
- font-size: 10px;
- }
-
- a {
- color: #2ba6cb;
- text-decoration: none !important;
- }
-
- a:hover {
- color: #2795b6 !important;
+ .facebook table td {
+ background: #3b5998;
+ border-color: #2d4473;
}
-
- a:active {
- color: #2795b6 !important;
+
+ .facebook:hover table td {
+ background: #2d4473 !important;
}
-
- a:visited {
- color: #2ba6cb !important;
+
+ .twitter table td {
+ background: #00acee;
+ border-color: #0087bb;
}
-
- h1 a,
- h2 a,
- h3 a,
- h4 a,
- h5 a,
- h6 a {
- color: #2ba6cb !important;
+
+ .twitter:hover table td {
+ background: #0087bb !important;
}
-
- h1 a:active,
- h2 a:active,
- h3 a:active,
- h4 a:active,
- h5 a:active,
- h6 a:active {
- color: #2ba6cb !important;
- }
-
- h1 a:visited,
- h2 a:visited,
- h3 a:visited,
- h4 a:visited,
- h5 a:visited,
- h6 a:visited {
- color: #2ba6cb !important;
- }
-
- /**********************************************
- * Panels *
- **********************************************/
-
- td.panel {
- background: #f2f2f2;
- border: 1px solid #d9d9d9;
- padding: 10px !important;
+
+ .google-plus table td {
+ background-color: #DB4A39;
+ border-color: #CC0000;
}
-
- /**********************************************
- * Buttons *
- **********************************************/
-
- a.button table,
- a.tiny-button table,
- a.small-button table,
- a.medium-button table,
- a.large-button table {
- width: 100%;
- overflow: hidden;
+
+ .google-plus:hover table td {
+ background: #CC0000 !important;
}
-
- a.button td,
- a.tiny-button td,
- a.small-button td,
- a.medium-button td,
- a.large-button td {
- display: block;
- width: auto !important;
- text-align: center;
- font-weight: bold;
- text-decoration: none;
- font-family: Helvetica, Arial, sans-serif;
+
+ .template-label {
color: #ffffff;
- background: #2ba6cb;
- border: 1px solid #2284a1;
- }
-
- a.tiny-button td {
- padding: 5px 10px;
- font-size: 12px;
- font-weight: normal;
- }
-
- a.button td,
- a.small-button td {
- padding: 8px 15px;
- font-size: 16px;
- }
-
- a.medium-button td {
- padding: 12px 24px;
- font-size: 20px;
- }
-
- a.large-button td {
- padding: 21px 30px;
- font-size: 24px;
- }
-
- a:hover.button td,
- a:hover.tiny-button td,
- a:hover.small-button td,
- a:hover.medium-button td,
- a:hover.large-button td {
- background: #2795b6 !important;
- }
-
- a.button,
- a:hover.button,
- a:active.button,
- a:visited.button,
- a.tiny-button,
- a:hover.tiny-button,
- a:active.tiny-button,
- a:visited.tiny-button,
- a.small-button,
- a:hover.small-button,
- a:active.small-button,
- a:visited.small-button,
- a.medium-button,
- a:hover.medium-button,
- a:active.medium-button,
- a:visited.medium-button,
- a.large-button,
- a:hover.large-button,
- a:active.large-button,
- a:visited.large-button {
- color: #ffffff !important;
- font-family: Helvetica, Arial, sans-serif;
- text-decoration: none;
- }
-
- a.secondary td {
- background: #e9e9e9;
- border-color: #d0d0d0;
- }
-
- a:hover.secondary td {
- background: #d0d0d0 !important;
- }
-
- a.success td {
- background: #5da423;
- border-color: #457a1a;
- }
-
- a:hover.success td {
- background: #457a1a !important;
- }
-
- a.alert td {
- background: #c60f13;
- border-color: #970b0e;
- }
-
- a:hover.alert td {
- background: #970b0e !important;
- }
-
- a.radius td {
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
- }
-
- a.rounded td {
- -webkit-border-radius: 500px;
- -moz-border-radius: 500px;
- border-radius: 500px;
+ font-weight: bold;
+ font-size: 11px;
}
-
- /**********************************************
- * Outlook First *
- **********************************************/
-
- body.outlook img {
- width: auto !important;
- max-width: none !important;
+
+ .callout .panel {
+ background: #ECF8FF;
+ border-color: #b9e5ff;
}
-
- /**********************************************
- * Media Queries *
- **********************************************/
-
- @media only screen and (max-width: 600px) {
-
- table[class="body"] .container {
- width: 95% !important;
- }
-
- table[class="body"] .row {
- width: 100% !important;
- display: block !important;
- }
-
- table[class="body"] .wrapper {
- display: block !important;
- padding-right: 0 !important;
- }
-
- table[class="body"] .columns,
- table[class="body"] .column {
- table-layout: fixed !important;
- float: none !important;
- width: 100% !important;
- padding-right: 0px !important;
- padding-left: 0px !important;
- display: block !important;
- }
-
- table[class="body"] .wrapper.first .columns,
- table[class="body"] .wrapper.first .column {
- display: table !important;
- }
-
- table[class="body"] table.columns td,
- table[class="body"] table.column td {
- width: 100%;
- }
-
- table[class="body"] td.offset-by-one,
- table[class="body"] td.offset-by-two,
- table[class="body"] td.offset-by-three,
- table[class="body"] td.offset-by-four,
- table[class="body"] td.offset-by-five,
- table[class="body"] td.offset-by-six,
- table[class="body"] td.offset-by-seven,
- table[class="body"] td.offset-by-eight,
- table[class="body"] td.offset-by-nine,
- table[class="body"] td.offset-by-ten,
- table[class="body"] td.offset-by-eleven {
- padding-left: 0 !important;
- }
-
- table[class="body"] .expander {
- width: 9999px !important;
- }
-
- table[class="body"] .hide-for-small,
- table[class="body"] .show-for-desktop {
- display: none !important;
- }
-
- table[class="body"] .show-for-small,
- table[class="body"] .hide-for-desktop {
- display: inherit !important;
- }
+
+ .header {
+ background: #999999;
}
- /* Custom styles go here*/
-
- a.facebook td {
- background: #3b5998;
- border-color: #2d4473;
+ .footer .wrapper {
+ background: #ebebeb;
}
- a:hover.facebook td {
- background: #2d4473 !important;
+ .footer h5 {
+ padding-bottom: 10px;
}
- a.twitter td {
- background: #00acee;
- border-color: #0087bb;
+ table.columns .text-pad {
+ padding-left: 10px;
+ padding-right: 10px;
}
- a:hover.twitter td {
- background: #0087bb !important;
+ table.columns .left-text-pad {
+ padding-left: 10px;
}
- a.google-plus td {
- background: #DB4A39 !important;
- border-color: #CC0000 !important;
+
+ table.columns .right-text-pad {
+ padding-right: 10px;
}
- a:hover.google-plus td {
- background: #cc0000 !important;
+
+ @media only screen and (max-width: 600px) {
+
+ table[class="body"] .right-text-pad {
+ padding-left: 10px !important;
+ }
+
+ table[class="body"] .left-text-pad {
+ padding-right: 10px !important;
+ }
}
-
- a.link td { padding: 0 !important; }
-
- </style>
+
+ </style>
</head>
<body>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
+ <center>
-
- <table class="row" style="background-color:#999999;">
- <tr>
- <td>
-
- <table class="container">
- <tr>
-
- <td class="wrapper last">
- <table class="twelve columns">
+ <table class="row header">
+ <tr>
+ <td class="center" align="center">
+ <center>
+
+ <table class="container">
<tr>
- <td class="six sub-columns">
- <img src="http://placehold.it/200x50">
- </td>
- <td class="six sub-columns last" align="right" style="text-align:right; vertical-align:middle;">
- <span style="color:#ffffff;font-weight:bold;font-size:11px;">BASIC</span>
+ <td class="wrapper last">
+
+ <table class="twelve columns">
+ <tr>
+ <td class="six sub-columns">
+ <img src="http://placehold.it/200x50">
+ </td>
+ <td class="six sub-columns last" style="text-align:right; vertical-align:middle;">
+ <span class="template-label">SIDEBAR HERO</span>
+ </td>
+
+ </tr>
+ </table>
+
</td>
- <td class="expander"></td>
</tr>
- </table>
- </td>
-
- </tr>
- </table>
-
- </td>
- </tr>
- </table>
+ </table>
+
+ </center>
+ </td>
+ </tr>
+ </table>
<br>
<!-- content start -->
- <table class="row">
- <tr>
- <td class="wrapper">
-
- <table class="six columns">
- <tr>
- <td>
- <h4>Hello, Hari Seldon</h4>
- <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="six 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="six columns">
- <tr>
- <td>
- <br>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
+ <tr>
+ <td class="wrapper">
+
+
<table class="six columns">
+ <tr>
+ <td>
+ <h4>Hello, Han Fastolfe</h4>
+
<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="six 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="six 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>
- <a class="button" href="#">
- <table>
- <tr>
- <td>
- Click Me!
- </td>
- </tr>
- </table>
- </a>
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- <td class="wrapper last">
-
- <table class="six columns">
- <tr>
- <td class="panel">
- <h6>Header Thing »</h6>
- <p>Sub-head or something</p>
- <a class="link" href="#">
- <table>
- <tr>
- <td>
- Just a Plain Link »
- </td>
- </tr>
- </table>
- </a>
- <hr>
- <a class="link" href="#">
- <table>
- <tr>
- <td>
- Just a Plain Link »
- </td>
- </tr>
- </table>
- </a>
- <hr>
- <a class="link" href="#">
- <table>
- <tr>
- <td>
- Just a Plain Link »
- </td>
- </tr>
- </table>
- </a>
- <hr>
- <a class="link" href="#">
- <table>
- <tr>
- <td>
- Just a Plain Link »
- </td>
- </tr>
- </table>
- </a>
- <hr>
- <a class="link" href="#">
- <table>
- <tr>
- <td>
- Just a Plain Link »
- </td>
- </tr>
- </table>
- </a>
- <hr>
- <a class="link" href="#">
- <table>
- <tr>
- <td>
- Just a Plain Link »
- </td>
- </tr>
- </table>
- </a>
- <hr>
- <a class="link" href="#">
- <table>
- <tr>
- <td>
- Just a Plain Link »
- </td>
- </tr>
- </table>
- </a>
- </td>
- <td class="expander"></td>
- </tr>
- </table>
- <br>
- <table class="six columns">
- <tr>
- <td class="panel">
- <h6 style="margin-bottom:5px;">Connect With Us:</h6>
- <a class="tiny-button facebook" href="#">
- <table>
- <tr>
- <td>
- Facebook
- </td>
- </tr>
- </table>
- </a>
- <hr>
- <a class="tiny-button twitter" href="#">
- <table>
- <tr>
- <td>
- Twitter
- </td>
- </tr>
- </table>
- </a>
- <hr>
- <a class="tiny-button google-plus" href="#">
- <table>
- <tr>
- <td>
- Google +
- </td>
- </tr>
- </table>
- </a>
- <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>
- <!-- Legal + Unsubscribe -->
- <table class="row">
- <tr>
- <td class="wrapper last">
+ <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>
+ <a class="button" href="#">
+ <table>
+ <tr>
+ <td>
+ Click Me!
+ </td>
+ </tr>
+ </table>
+ </a>
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ <td class="wrapper last">
- <table class="twelve columns">
- <tr>
- <td align="center">
- <center>
- <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#"><unsubscribe>Unsubscribe</unsubscribe></a></p>
- </center>
- </td>
- <td class="expander"></td>
- </tr>
- </table>
+ <table class="six columns">
+ <tr>
+ <td class="panel">
+ <h6>Header Thing »</h6>
+ <p>Sub-head or something</p>
+ <a class="link" href="#">
+ <table>
+ <tr>
+ <td>
+ Just a Plain Link »
+ </td>
+ </tr>
+ </table>
+ </a>
+ <hr>
+ <a class="link" href="#">
+ <table>
+ <tr>
+ <td>
+ Just a Plain Link »
+ </td>
+ </tr>
+ </table>
+ </a>
+ <hr>
+ <a class="link" href="#">
+ <table>
+ <tr>
+ <td>
+ Just a Plain Link »
+ </td>
+ </tr>
+ </table>
+ </a>
+ <hr>
+ <a class="link" href="#">
+ <table>
+ <tr>
+ <td>
+ Just a Plain Link »
+ </td>
+ </tr>
+ </table>
+ </a>
+ <hr>
+ <a class="link" href="#">
+ <table>
+ <tr>
+ <td>
+ Just a Plain Link »
+ </td>
+ </tr>
+ </table>
+ </a>
+ <hr>
+ <a class="link" href="#">
+ <table>
+ <tr>
+ <td>
+ Just a Plain Link »
+ </td>
+ </tr>
+ </table>
+ </a>
+ <hr>
+ <a class="link" href="#">
+ <table>
+ <tr>
+ <td>
+ Just a Plain Link »
+ </td>
+ </tr>
+ </table>
+ </a>
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ <br>
+
+ <table class="six columns">
+ <tr>
+ <td class="panel">
+ <h6 style="margin-bottom:5px;">Connect With Us:</h6>
+ <a class="tiny-button facebook" href="#">
+ <table>
+ <tr>
+ <td>
+ Facebook
+ </td>
+ </tr>
+ </table>
+ </a>
+ <hr>
+ <a class="tiny-button twitter" href="#">
+ <table>
+ <tr>
+ <td>
+ Twitter
+ </td>
+ </tr>
+ </table>
+ </a>
+ <hr>
+ <a class="tiny-button google-plus" href="#">
+ <table>
+ <tr>
+ <td>
+ Google +
+ </td>
+ </tr>
+ </table>
+ </a>
+ <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>
+ </td>
+ </tr>
+ </table>
+ <br>
+ <br>
+ <!-- Legal + Unsubscribe -->
+ <table class="row">
+ <tr>
+ <td class="wrapper last">
+
+ <table class="twelve columns">
+ <tr>
+ <td align="center">
+ <center>
+ <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#"><unsubscribe>Unsubscribe</unsubscribe></a></p>
+ </center>
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ </tr>
+ </table>
<!-- container end below -->
</td>
</tr>
</table>
+ </center>
</td>
</tr>
</table>
projects / thirdparty / foundation / foundation-emails.git / commitdiff
