PDF rausgenommen
This commit is contained in:
aschwarz
5
msd2/myoos/templates/email-templates/.gitignore
vendored
Normal file
5
msd2/myoos/templates/email-templates/.gitignore
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
.DS_Store
|
||||
*.sass-cache
|
||||
server
|
||||
build
|
||||
/.bundle
|
||||
8
msd2/myoos/templates/email-templates/LICENSE.md
Normal file
8
msd2/myoos/templates/email-templates/LICENSE.md
Normal file
@ -0,0 +1,8 @@
|
||||
Copyright (c) 2012-2013 InterNations GmbH
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
||||
111
msd2/myoos/templates/email-templates/README.md
Normal file
111
msd2/myoos/templates/email-templates/README.md
Normal file
@ -0,0 +1,111 @@
|
||||
# [Antwort](http://internations.github.com/antwort)
|
||||
|
||||
### Responsive Layouts for Email
|
||||
|
||||
|
||||
Antwort offers responsive layouts for Email that both fits _and_ adapts to client widths. Don't underwhelm desktop users with single column layouts that work for mobile. Antwort offers columns on desktop that automatically become rows on mobile.
|
||||
|
||||
Author: Julie Ng ([@jng5](http://twitter.com/jng5))
|
||||
Date: October 2014
|
||||
Version: 1.0.0
|
||||
|
||||
## Features
|
||||
|
||||
* Works on mobile: Mail on iOS and Email on Android.
|
||||
* Works in major clients like AOL, gmail, outlook.com and Yahoo.
|
||||
* Even works in Outlook (2000+).
|
||||
* Bulletproof layouts: made with dynamic content in mind.
|
||||
* Minimalist in design for maximum customizability.
|
||||
|
||||
### NEW since v1.0
|
||||
|
||||
* __Source templates__
|
||||
Antwort now includes the source templates (pre inlined CSS) for your reference. This lets you easily customize the template for your own use. Each template has a `build.html` with inlined CSS as well as the original source files in a `source` folder.
|
||||
|
||||
* __Support for Android 4.3+__
|
||||
Antwort v0 relied on applying `display: block;` to `<td>` to force columns into rows. Starting with Android 4.3, that is no longer possible, i.e. columns remain columns.
|
||||
|
||||
Antwort v1 relies on conditional wrapper tables to support Microsoft Outlook desktop clients. The columns themselves are no longer `<td>`s but `<table>`s, whose width expand to 100% on mobile devices.
|
||||
|
||||
## Included Templates
|
||||
|
||||
Included templates as of v1.0.0 release (14 October 2014):
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="center" valign="top">
|
||||
<strong>Single Column</strong><br><br>
|
||||
<img src="http://internations.github.io/antwort/images/v1-previews/1-col.png" style="max-width: 95%;">
|
||||
</td>
|
||||
<td align="center" valign="top">
|
||||
<strong>Two Columns (text)</strong><br><br>
|
||||
<img src="http://internations.github.io/antwort/images/v1-previews/2-cols.png" style="max-width: 95%;">
|
||||
</td>
|
||||
<td align="center" valign="top">
|
||||
<strong>Three Columns (images)</strong><br><br>
|
||||
<img src="http://internations.github.io/antwort/images/v1-previews/3-cols-images.png" style="max-width: 95%;">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center"><a href="https://litmus.com/pub/23497a4" target="_blank" rel="noopener">Litmus Previews</a></td>
|
||||
<td align="center"><a href="https://litmus.com/pub/2e0aaa0" target="_blank" rel="noopener">Litmus Previews</a></td>
|
||||
<td align="center"><a href="https://litmus.com/pub/de912ba" target="_blank" rel="noopener">Litmus Previews</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
## How to use Antwort
|
||||
|
||||
Antwort is **not** a framework. Antwort is meant to teach you how to do responsive layouts for Email. That's why source pre-lined HTML is now included for you to learn from.
|
||||
|
||||
#### Need help?
|
||||
|
||||
Before [posting an issue](https://github.com/InterNations/antwort/issues), please
|
||||
|
||||
1. Make sure you are sending the email from an Email Service Provider (ESP), for example MailChimp **not** your Email client e.g. Outlook.
|
||||
2. Double check any code changes you might have made
|
||||
3. Do a test send to yourself and view the source. Did your ESP change the code?
|
||||
|
||||
|
||||
|
||||
## Changelog
|
||||
|
||||
### 1.0.0
|
||||
|
||||
14 October 2014
|
||||
|
||||
* Complete re-write of code, to reflect latest email development challenges, especially with Android 4.3+
|
||||
* New: include source folders before inlining CSS.
|
||||
* New: single column fluid layout
|
||||
* Footer now includes example address, which has an example for removing blue iOS links.
|
||||
|
||||
|
||||
### 0.1.2
|
||||
|
||||
April 2013
|
||||
|
||||
* Fixed issue #8 - headlines no longer centered in Outlook.com and older Outlook.
|
||||
* Fixed issue #7 - moved padding overrides to parent `<td>` in mobile styles.
|
||||
|
||||
### 0.1.1
|
||||
|
||||
26 March 2013
|
||||
|
||||
* Fixed column margin issue after [Hotmail/Outlook dropped margin support](https://litmus.com/blog/hotmail-and-outlook-com-drop-support-for-margin).
|
||||
* Issue #5 fixed - Outlook.com parses HTML tags in comments.
|
||||
* Issue #3 fixed - control characters removed from template.
|
||||
* Added screenshots of current version from Litmus test.
|
||||
|
||||
|
||||
### 0.1.0
|
||||
|
||||
4 Jan 2013
|
||||
|
||||
* Hello open source world.
|
||||
|
||||
|
||||
## License
|
||||
Antwort is provided under the MIT License - see LICENSE.md for full details.
|
||||
139
msd2/myoos/templates/email-templates/single-column/build.html
Normal file
139
msd2/myoos/templates/email-templates/single-column/build.html
Normal file
@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1.0"> <!-- So that mobile webkit will display zoomed in -->
|
||||
<meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS -->
|
||||
<title>Single Column</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
table td {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.ExternalClass {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ExternalClass,
|
||||
.ExternalClass p,
|
||||
.ExternalClass span,
|
||||
.ExternalClass font,
|
||||
.ExternalClass td,
|
||||
.ExternalClass div {
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
.ReadMsgBody {
|
||||
width: 100%;
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
|
||||
table {
|
||||
mso-table-lspace: 0pt;
|
||||
mso-table-rspace: 0pt;
|
||||
}
|
||||
|
||||
img {
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
|
||||
.yshortcuts a {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
table[class="force-row"],
|
||||
table[class="container"] {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 400px) {
|
||||
td[class*="container-padding"] {
|
||||
padding-left: 12px !important;
|
||||
padding-right: 12px !important;
|
||||
}
|
||||
}
|
||||
.ios-footer a {
|
||||
color: #aaaaaa !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body style="margin:0; padding:0;" bgcolor="#F0F0F0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
|
||||
|
||||
<!-- 100% background wrapper (grey background) -->
|
||||
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#F0F0F0">
|
||||
<tr>
|
||||
<td align="center" valign="top" bgcolor="#F0F0F0" style="background-color: #F0F0F0;">
|
||||
|
||||
<br>
|
||||
|
||||
<!-- 600px container (white background) -->
|
||||
<table border="0" width="600" cellpadding="0" cellspacing="0" class="container" style="width:600px;max-width:600px">
|
||||
<tr>
|
||||
<td class="container-padding header" align="left" style="font-family:Helvetica, Arial, sans-serif;font-size:24px;font-weight:bold;padding-bottom:12px;color:#DF4726;padding-left:24px;padding-right:24px">
|
||||
Antwort v1.0
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="container-padding content" align="left" style="padding-left:24px;padding-right:24px;padding-top:12px;padding-bottom:12px;background-color:#ffffff">
|
||||
<br>
|
||||
|
||||
<div class="title" style="font-family:Helvetica, Arial, sans-serif;font-size:18px;font-weight:600;color:#374550">Single Column Fluid Layout</div>
|
||||
<br>
|
||||
|
||||
<div class="body-text" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;text-align:left;color:#333333">
|
||||
This is an example of a single column fluid layout. There are no columns. Because the container table width is set to 100%, it automatically resizes itself to all devices. The magic of good old fashioned HTML.
|
||||
<br><br>
|
||||
|
||||
The media query change we make is to decrease the content margin from 24px to 12px for devices up to max width of 400px.
|
||||
<br><br>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="container-padding footer-text" align="left" style="font-family:Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;color:#aaaaaa;padding-left:24px;padding-right:24px">
|
||||
<br><br>
|
||||
Sample Footer text: © 2014 Acme, Inc.
|
||||
<br><br>
|
||||
|
||||
You are receiving this email because you opted in on our website. Update your <a href="#" style="color:#aaaaaa">email preferences</a> or <a href="#" style="color:#aaaaaa">unsubscribe</a>.
|
||||
<br><br>
|
||||
|
||||
<strong>Acme, Inc.</strong><br>
|
||||
<span class="ios-footer">
|
||||
123 Main St.<br>
|
||||
Springfield, MA 12345<br>
|
||||
</span>
|
||||
<a href="http://www.acme-inc.com" style="color:#aaaaaa">www.acme-inc.com</a><br>
|
||||
|
||||
<br><br>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!--/600px container -->
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!--/100% background wrapper-->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,63 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
table td {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.ExternalClass {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ExternalClass,
|
||||
.ExternalClass p,
|
||||
.ExternalClass span,
|
||||
.ExternalClass font,
|
||||
.ExternalClass td,
|
||||
.ExternalClass div {
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
.ReadMsgBody {
|
||||
width: 100%;
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
|
||||
table {
|
||||
mso-table-lspace: 0pt;
|
||||
mso-table-rspace: 0pt;
|
||||
}
|
||||
|
||||
img {
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
|
||||
.yshortcuts a {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
table[class="force-row"],
|
||||
table[class="container"] {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 400px) {
|
||||
td[class*="container-padding"] {
|
||||
padding-left: 12px !important;
|
||||
padding-right: 12px !important;
|
||||
}
|
||||
}
|
||||
.ios-footer a {
|
||||
color: #aaaaaa !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1.0"> <!-- So that mobile webkit will display zoomed in -->
|
||||
<meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS -->
|
||||
<title>Single Column</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
<link rel="stylesheet" type="text/css" href="responsive.css">
|
||||
</head>
|
||||
<body style="margin:0; padding:0;" bgcolor="#F0F0F0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
|
||||
|
||||
<!-- 100% background wrapper (grey background) -->
|
||||
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#F0F0F0">
|
||||
<tr>
|
||||
<td align="center" valign="top" bgcolor="#F0F0F0" style="background-color: #F0F0F0;">
|
||||
|
||||
<br>
|
||||
|
||||
<!-- 600px container (white background) -->
|
||||
<table border="0" width="600" cellpadding="0" cellspacing="0" class="container">
|
||||
<tr>
|
||||
<td class="container-padding header" align="left">
|
||||
Antwort v1.0
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="container-padding content" align="left">
|
||||
<br>
|
||||
|
||||
<div class="title">Single Column Fluid Layout</div>
|
||||
<br>
|
||||
|
||||
<div class="body-text">
|
||||
This is an example of a single column fluid layout. There are no columns. Because the container table width is set to 100%, it automatically resizes itself to all devices. The magic of good old fashioned HTML.
|
||||
<br><br>
|
||||
|
||||
The media query change we make is to decrease the content margin from 24px to 12px for devices up to max width of 400px.
|
||||
<br><br>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="container-padding footer-text" align="left">
|
||||
<br><br>
|
||||
Sample Footer text: © 2014 Acme, Inc.
|
||||
<br><br>
|
||||
|
||||
You are receiving this email because you opted in on our website. Update your <a href="#">email preferences</a> or <a href="#">unsubscribe</a>.
|
||||
<br><br>
|
||||
|
||||
<strong>Acme, Inc.</strong><br>
|
||||
<span class="ios-footer">
|
||||
123 Main St.<br>
|
||||
Springfield, MA 12345<br>
|
||||
</span>
|
||||
<a href="http://www.acme-inc.com">www.acme-inc.com</a><br>
|
||||
|
||||
<br><br>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table><!--/600px container -->
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table><!--/100% background wrapper-->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,79 @@
|
||||
.header,
|
||||
.title,
|
||||
.subtitle,
|
||||
.footer-text {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.header {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 12px;
|
||||
color: #DF4726;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
.footer-text a {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 600px;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.container-padding {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #eee;
|
||||
padding: 0 4px;
|
||||
font-family: Menlo, Courier, monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
}
|
||||
|
||||
.hr {
|
||||
height: 1px;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #374550;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #2469A0;
|
||||
}
|
||||
.subtitle span {
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.body-text {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
color: #333333;
|
||||
}
|
||||
@ -0,0 +1,225 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1.0"> <!-- So that mobile webkit will display zoomed in -->
|
||||
<meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS -->
|
||||
<title>Three columns with images</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
table td {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.ExternalClass {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ExternalClass,
|
||||
.ExternalClass p,
|
||||
.ExternalClass span,
|
||||
.ExternalClass font,
|
||||
.ExternalClass td,
|
||||
.ExternalClass div {
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
.ReadMsgBody {
|
||||
width: 100%;
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
|
||||
table {
|
||||
mso-table-lspace: 0pt;
|
||||
mso-table-rspace: 0pt;
|
||||
}
|
||||
|
||||
img {
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
|
||||
.yshortcuts a {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
table[class="force-row"],
|
||||
table[class="container"] {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 400px) {
|
||||
td[class*="container-padding"] {
|
||||
padding-left: 12px !important;
|
||||
padding-right: 12px !important;
|
||||
}
|
||||
}
|
||||
.ios-footer a {
|
||||
color: #aaaaaa !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
td[class="col"] {
|
||||
width: 100% !important;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
td[class="cols-wrapper"] {
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
img[class="image"] {
|
||||
float: right;
|
||||
max-width: 40% !important;
|
||||
height: auto !important;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
div[class="subtitle"] {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 400px) {
|
||||
td[class="cols-wrapper"] {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
td[class="content-wrapper"] {
|
||||
padding-left: 12px !important;
|
||||
padding-right: 12px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body style="margin:0; padding:0;" bgcolor="#F0F0F0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
|
||||
|
||||
<!-- 100% background wrapper (grey background) -->
|
||||
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#F0F0F0">
|
||||
<tr>
|
||||
<td align="center" valign="top" bgcolor="#F0F0F0" style="background-color: #F0F0F0;">
|
||||
|
||||
<br>
|
||||
|
||||
<!-- 600px container (white background) -->
|
||||
<table border="0" width="600" cellpadding="0" cellspacing="0" class="container" style="width:600px;max-width:600px">
|
||||
<tr>
|
||||
<td class="container-padding header" align="left" style="font-family:Helvetica, Arial, sans-serif;font-size:24px;font-weight:bold;padding-bottom:12px;color:#DF4726;padding-left:24px;padding-right:24px">
|
||||
Antwort v1.0
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="content" align="left" style="padding-top:12px;padding-bottom:12px;background-color:#ffffff">
|
||||
|
||||
<table width="600" border="0" cellpadding="0" cellspacing="0" class="force-row" style="width: 600px;">
|
||||
<tr>
|
||||
<td class="content-wrapper" style="padding-left:24px;padding-right:24px">
|
||||
<br>
|
||||
<div class="title" style="font-family:Helvetica, Arial, sans-serif;font-size:18px;font-weight:600;color:#374550">Three Columns</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cols-wrapper" style="padding-left:12px;padding-right:12px">
|
||||
|
||||
<!--[if mso]>
|
||||
<table border="0" width="576" cellpadding="0" cellspacing="0" style="width: 576px;">
|
||||
<tr><td width="192" style="width: 192px;" valign="top"><![endif]-->
|
||||
|
||||
|
||||
<table width="192" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row" style="width: 192px;">
|
||||
<tr>
|
||||
<td class="col" valign="top" style="padding-left:12px;padding-right:12px;padding-top:18px;padding-bottom:12px">
|
||||
<img src="https://antwort-assets.s3.amazonaws.com/three-cols-images/ph-192x125@2x.png" border="0" alt="The White Whale" width="168" height="110" hspace="0" vspace="0" style="max-width:100%; " class="image">
|
||||
<div class="subtitle" style="font-family:Helvetica, Arial, sans-serif;font-size:16px;font-weight:600;color:#2469A0;margin-top:18px">The White Whale</div>
|
||||
<div class="col-copy" style="font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;text-align:left;color:#333333;margin-top:12px">I take the good old fashioned ground that the whale is a fish, and call upon holy Jonah to back me. This fundamental thing settled, the next point is, in what internal respect does the whale differ from other fish.</div>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<!--[if mso]></td><td width="192" style="width: 192px;" valign="top"><![endif]-->
|
||||
|
||||
|
||||
<table width="192" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row" style="width: 192px;">
|
||||
<tr>
|
||||
<td class="col" valign="top" style="padding-left:12px;padding-right:12px;padding-top:18px;padding-bottom:12px">
|
||||
<img src="https://antwort-assets.s3.amazonaws.com/three-cols-images/ph-192x125@2x.png" border="0" alt="I am Ishmael" width="168" height="110" hspace="0" vspace="0" style="max-width:100%; " class="image">
|
||||
<div class="subtitle" style="font-family:Helvetica, Arial, sans-serif;font-size:16px;font-weight:600;color:#2469A0;margin-top:18px">I am Ishmael</div>
|
||||
<div class="col-copy" style="font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;text-align:left;color:#333333;margin-top:12px">Here upon the very point of starting for the voyage, Captain Peleg and Captain Bildad were going it with a high hand on the quarter-deck, just as if they were to be joint-commanders at sea, as well as to all appearances in port.</div>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<!--[if mso]></td><td width="192" style="width: 192px;" valign="top"><![endif]-->
|
||||
|
||||
|
||||
<table width="192" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row" style="width: 192px;">
|
||||
<tr>
|
||||
<td class="col" valign="top" style="padding-left:12px;padding-right:12px;padding-top:18px;padding-bottom:12px">
|
||||
<img src="https://antwort-assets.s3.amazonaws.com/three-cols-images/ph-192x125@2x.png" border="0" alt="The Albatross" width="168" height="110" hspace="0" vspace="0" style="max-width:100%; " class="image">
|
||||
<div class="subtitle" style="font-family:Helvetica, Arial, sans-serif;font-size:16px;font-weight:600;color:#2469A0;margin-top:18px">The Albatross</div>
|
||||
<div class="col-copy" style="font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;text-align:left;color:#333333;margin-top:12px">And somehow, at the time, I felt a sympathy and a sorrow for him, but for I don't know what, unless it was the cruel loss of his leg. And yet I also felt a strange awe of him; but that sort of awe, which I cannot at all describe.</div>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
|
||||
<!--[if mso]></td></tr></table><![endif]-->
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="container-padding footer-text" align="left" style="font-family:Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;color:#aaaaaa;padding-left:24px;padding-right:24px">
|
||||
<br><br>
|
||||
Sample Footer text: © 2014 Acme, Inc.
|
||||
<br><br>
|
||||
|
||||
You are receiving this email because you opted in on our website. Update your <a href="#" style="color:#aaaaaa">email preferences</a> or <a href="#" style="color:#aaaaaa">unsubscribe</a>.
|
||||
<br><br>
|
||||
|
||||
<strong>Acme, Inc.</strong><br>
|
||||
<span class="ios-footer">
|
||||
123 Main St.<br>
|
||||
Springfield, MA 12345<br>
|
||||
</span>
|
||||
<a href="http://www.acme-inc.com" style="color:#aaaaaa">www.acme-inc.com</a><br>
|
||||
|
||||
<br><br>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!--/600px container -->
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!--/100% background wrapper-->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,96 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
table td {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.ExternalClass {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ExternalClass,
|
||||
.ExternalClass p,
|
||||
.ExternalClass span,
|
||||
.ExternalClass font,
|
||||
.ExternalClass td,
|
||||
.ExternalClass div {
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
.ReadMsgBody {
|
||||
width: 100%;
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
|
||||
table {
|
||||
mso-table-lspace: 0pt;
|
||||
mso-table-rspace: 0pt;
|
||||
}
|
||||
|
||||
img {
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
|
||||
.yshortcuts a {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
table[class="force-row"],
|
||||
table[class="container"] {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 400px) {
|
||||
td[class*="container-padding"] {
|
||||
padding-left: 12px !important;
|
||||
padding-right: 12px !important;
|
||||
}
|
||||
}
|
||||
.ios-footer a {
|
||||
color: #aaaaaa !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
td[class="col"] {
|
||||
width: 100% !important;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
td[class="cols-wrapper"] {
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
img[class="image"] {
|
||||
float: right;
|
||||
max-width: 40% !important;
|
||||
height: auto !important;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
div[class="subtitle"] {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 400px) {
|
||||
td[class="cols-wrapper"] {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
td[class="content-wrapper"] {
|
||||
padding-left: 12px !important;
|
||||
padding-right: 12px !important;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,108 @@
|
||||
.header,
|
||||
.title,
|
||||
.subtitle,
|
||||
.footer-text {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.header {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 12px;
|
||||
color: #DF4726;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
.footer-text a {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 600px;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.container-padding {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #eee;
|
||||
padding: 0 4px;
|
||||
font-family: Menlo, Courier, monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
}
|
||||
|
||||
.hr {
|
||||
height: 1px;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #374550;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #2469A0;
|
||||
}
|
||||
.subtitle span {
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.body-text {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.col,
|
||||
.cols-wrapper {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.col {
|
||||
padding-top: 18px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.col-copy {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
color: #333333;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 18px;
|
||||
}
|
||||
@ -0,0 +1,126 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1.0"> <!-- So that mobile webkit will display zoomed in -->
|
||||
<meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS -->
|
||||
<title>Three columns with images</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
<link rel="stylesheet" type="text/css" href="responsive.css">
|
||||
</head>
|
||||
<body style="margin:0; padding:0;" bgcolor="#F0F0F0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
|
||||
|
||||
<!-- 100% background wrapper (grey background) -->
|
||||
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#F0F0F0">
|
||||
<tr>
|
||||
<td align="center" valign="top" bgcolor="#F0F0F0" style="background-color: #F0F0F0;">
|
||||
|
||||
<br>
|
||||
|
||||
<!-- 600px container (white background) -->
|
||||
<table border="0" width="600" cellpadding="0" cellspacing="0" class="container">
|
||||
<tr>
|
||||
<td class="container-padding header" align="left">
|
||||
Antwort v1.0
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="content" align="left">
|
||||
|
||||
<table width="600" border="0" cellpadding="0" cellspacing="0" class="force-row" style="width: 600px;">
|
||||
<tr>
|
||||
<td class="content-wrapper">
|
||||
<br>
|
||||
<div class="title">Three Columns</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cols-wrapper">
|
||||
|
||||
<!--[if mso]>
|
||||
<table border="0" width="576" cellpadding="0" cellspacing="0" style="width: 576px;">
|
||||
<tr><td width="192" style="width: 192px;" valign="top"><![endif]-->
|
||||
|
||||
|
||||
<table width="192" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row" style="width: 192px;">
|
||||
<tr>
|
||||
<td class="col" valign="top">
|
||||
<img src="https://antwort-assets.s3.amazonaws.com/three-cols-images/ph-192x125@2x.png" border="0" alt="The White Whale" width="168" height="110" hspace="0" vspace="0" style="max-width:100%; " class="image">
|
||||
<div class="subtitle">The White Whale</div>
|
||||
<div class="col-copy">I take the good old fashioned ground that the whale is a fish, and call upon holy Jonah to back me. This fundamental thing settled, the next point is, in what internal respect does the whale differ from other fish.</div>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<!--[if mso]></td><td width="192" style="width: 192px;" valign="top"><![endif]-->
|
||||
|
||||
|
||||
<table width="192" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row" style="width: 192px;">
|
||||
<tr>
|
||||
<td class="col" valign="top">
|
||||
<img src="https://antwort-assets.s3.amazonaws.com/three-cols-images/ph-192x125@2x.png" border="0" alt="I am Ishmael" width="168" height="110" hspace="0" vspace="0" style="max-width:100%; " class="image">
|
||||
<div class="subtitle">I am Ishmael</div>
|
||||
<div class="col-copy">Here upon the very point of starting for the voyage, Captain Peleg and Captain Bildad were going it with a high hand on the quarter-deck, just as if they were to be joint-commanders at sea, as well as to all appearances in port.</div>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<!--[if mso]></td><td width="192" style="width: 192px;" valign="top"><![endif]-->
|
||||
|
||||
|
||||
<table width="192" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row" style="width: 192px;">
|
||||
<tr>
|
||||
<td class="col" valign="top">
|
||||
<img src="https://antwort-assets.s3.amazonaws.com/three-cols-images/ph-192x125@2x.png" border="0" alt="The Albatross" width="168" height="110" hspace="0" vspace="0" style="max-width:100%; " class="image">
|
||||
<div class="subtitle">The Albatross</div>
|
||||
<div class="col-copy">And somehow, at the time, I felt a sympathy and a sorrow for him, but for I don't know what, unless it was the cruel loss of his leg. And yet I also felt a strange awe of him; but that sort of awe, which I cannot at all describe.</div>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
|
||||
<!--[if mso]></td></tr></table><![endif]-->
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="container-padding footer-text" align="left">
|
||||
<br><br>
|
||||
Sample Footer text: © 2014 Acme, Inc.
|
||||
<br><br>
|
||||
|
||||
You are receiving this email because you opted in on our website. Update your <a href="#">email preferences</a> or <a href="#">unsubscribe</a>.
|
||||
<br><br>
|
||||
|
||||
<strong>Acme, Inc.</strong><br>
|
||||
<span class="ios-footer">
|
||||
123 Main St.<br>
|
||||
Springfield, MA 12345<br>
|
||||
</span>
|
||||
<a href="http://www.acme-inc.com">www.acme-inc.com</a><br>
|
||||
|
||||
<br><br>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table><!--/600px container -->
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table><!--/100% background wrapper-->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
212
msd2/myoos/templates/email-templates/two-cols-simple/build.html
Normal file
212
msd2/myoos/templates/email-templates/two-cols-simple/build.html
Normal file
@ -0,0 +1,212 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1.0"> <!-- So that mobile webkit will display zoomed in -->
|
||||
<meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS -->
|
||||
<title>Two Columns to Rows (Simple)</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
table td {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.ExternalClass {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ExternalClass,
|
||||
.ExternalClass p,
|
||||
.ExternalClass span,
|
||||
.ExternalClass font,
|
||||
.ExternalClass td,
|
||||
.ExternalClass div {
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
.ReadMsgBody {
|
||||
width: 100%;
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
|
||||
table {
|
||||
mso-table-lspace: 0pt;
|
||||
mso-table-rspace: 0pt;
|
||||
}
|
||||
|
||||
img {
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
|
||||
.yshortcuts a {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
table[class="force-row"],
|
||||
table[class="container"] {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 400px) {
|
||||
td[class*="container-padding"] {
|
||||
padding-left: 12px !important;
|
||||
padding-right: 12px !important;
|
||||
}
|
||||
}
|
||||
.ios-footer a {
|
||||
color: #aaaaaa !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body style="margin:0; padding:0;" bgcolor="#F0F0F0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
|
||||
|
||||
<!-- 100% background wrapper (grey background) -->
|
||||
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#F0F0F0">
|
||||
<tr>
|
||||
<td align="center" valign="top" bgcolor="#F0F0F0" style="background-color: #F0F0F0;">
|
||||
|
||||
<br>
|
||||
|
||||
<!-- 600px container (white background) -->
|
||||
<table border="0" width="600" cellpadding="0" cellspacing="0" class="container" style="width:600px;max-width:600px">
|
||||
<tr>
|
||||
<td class="container-padding header" align="left" style="font-family:Helvetica, Arial, sans-serif;font-size:24px;font-weight:bold;padding-bottom:12px;color:#DF4726;padding-left:24px;padding-right:24px">
|
||||
Antwort v1.0
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="container-padding content" align="left" style="padding-left:24px;padding-right:24px;padding-top:12px;padding-bottom:12px;background-color:#ffffff">
|
||||
<br>
|
||||
<div class="title" style="font-family:Helvetica, Arial, sans-serif;font-size:18px;font-weight:600;color:#374550">Two Columns (simple)</div>
|
||||
<br>
|
||||
|
||||
<div class="body-text" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;text-align:left;color:#333333">
|
||||
This is an example of transforming two columns on desktop into rows on mobile.
|
||||
<br><br>
|
||||
</div>
|
||||
|
||||
<div class="hr" style="height:1px;border-bottom:1px solid #cccccc"> </div>
|
||||
<br>
|
||||
|
||||
<!-- example: two columns (simple) -->
|
||||
|
||||
<!--[if mso]>
|
||||
<table border="0" cellpadding="0" cellspacing="0" width="100%">
|
||||
<tr><td width="50%" valign="top"><![endif]-->
|
||||
|
||||
<table width="264" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row">
|
||||
<tr>
|
||||
<td class="col" valign="top" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;text-align:left;color:#333333;width:100%">
|
||||
<strong>Herman Melville</strong>
|
||||
<br><br>
|
||||
It's worse than being in the whirled woods, the last day of the year! Who'd go climbing after chestnuts now? But there they go, all cursing, and here I don't.
|
||||
<br><br>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!--[if mso]></td><td width="50%" valign="top"><![endif]-->
|
||||
|
||||
<table width="264" border="0" cellpadding="0" cellspacing="0" align="right" class="force-row">
|
||||
<tr>
|
||||
<td class="col" valign="top" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;text-align:left;color:#333333;width:100%">
|
||||
<strong>I am Ishmael</strong>
|
||||
<br><br>
|
||||
White squalls? white whale, shirr! shirr! Here have I heard all their chat just now, and the white whale—shirr! shirr!—but spoken of once! and…
|
||||
<br><br>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!--[if mso]></td></tr></table><![endif]-->
|
||||
|
||||
|
||||
<!--/ end example -->
|
||||
|
||||
<div class="hr" style="height:1px;border-bottom:1px solid #cccccc;clear: both;"> </div>
|
||||
<br>
|
||||
|
||||
<div class="subtitle" style="font-family:Helvetica, Arial, sans-serif;font-size:16px;font-weight:600;color:#2469A0">
|
||||
Code Walkthrough
|
||||
</div>
|
||||
|
||||
<div class="body-text" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;text-align:left;color:#333333">
|
||||
<ol>
|
||||
<li>
|
||||
Create a columns container <code style="background-color:#eee;padding:0 4px;font-family:Menlo, Courier, monospace;font-size:12px"><table></code> just for Outlook using <code style="background-color:#eee;padding:0 4px;font-family:Menlo, Courier, monospace;font-size:12px">if mso</code> conditionals.<br>
|
||||
The container's <code style="background-color:#eee;padding:0 4px;font-family:Menlo, Courier, monospace;font-size:12px"><td></code>'s have a width of <code style="background-color:#eee;padding:0 4px;font-family:Menlo, Courier, monospace;font-size:12px">50%.</code>
|
||||
<br><br>
|
||||
</li>
|
||||
<li>
|
||||
Wrap our columns in a <code style="background-color:#eee;padding:0 4px;font-family:Menlo, Courier, monospace;font-size:12px"><table></code> with a <strong>fixed width</strong> of <code style="background-color:#eee;padding:0 4px;font-family:Menlo, Courier, monospace;font-size:12px">264px</code>.
|
||||
<ul>
|
||||
<li>
|
||||
264px = (600 - 24*3) / 2 - container width minus margins divided by number of columns
|
||||
</li>
|
||||
<li>
|
||||
First table is aligned left.
|
||||
</li>
|
||||
<li>
|
||||
Second table is aligned right.
|
||||
</li>
|
||||
</ul>
|
||||
<br>
|
||||
</li>
|
||||
<li>
|
||||
Apply <code style="background-color:#eee;padding:0 4px;font-family:Menlo, Courier, monospace;font-size:12px">clear: both;</code> to first element after our wrapper table.
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<br>
|
||||
<em><small>Last updated: 10 October 2014</small></em>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="container-padding footer-text" align="left" style="font-family:Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;color:#aaaaaa;padding-left:24px;padding-right:24px">
|
||||
<br><br>
|
||||
Sample Footer text: © 2014 Acme, Inc.
|
||||
<br><br>
|
||||
|
||||
You are receiving this email because you opted in on our website. Update your <a href="#" style="color:#aaaaaa">email preferences</a> or <a href="#" style="color:#aaaaaa">unsubscribe</a>.
|
||||
<br><br>
|
||||
|
||||
<strong>Acme, Inc.</strong><br>
|
||||
<span class="ios-footer">
|
||||
123 Main St.<br>
|
||||
Springfield, MA 12345<br>
|
||||
</span>
|
||||
<a href="http://www.acme-inc.com" style="color:#aaaaaa">www.acme-inc.com</a><br>
|
||||
|
||||
<br><br>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!--/600px container -->
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!--/100% background wrapper-->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,63 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
table td {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.ExternalClass {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ExternalClass,
|
||||
.ExternalClass p,
|
||||
.ExternalClass span,
|
||||
.ExternalClass font,
|
||||
.ExternalClass td,
|
||||
.ExternalClass div {
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
.ReadMsgBody {
|
||||
width: 100%;
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
|
||||
table {
|
||||
mso-table-lspace: 0pt;
|
||||
mso-table-rspace: 0pt;
|
||||
}
|
||||
|
||||
img {
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
|
||||
.yshortcuts a {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
table[class="force-row"],
|
||||
table[class="container"] {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 400px) {
|
||||
td[class*="container-padding"] {
|
||||
padding-left: 12px !important;
|
||||
padding-right: 12px !important;
|
||||
}
|
||||
}
|
||||
.ios-footer a {
|
||||
color: #aaaaaa !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@ -0,0 +1,88 @@
|
||||
.header,
|
||||
.title,
|
||||
.subtitle,
|
||||
.footer-text {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.header {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 12px;
|
||||
color: #DF4726;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
.footer-text a {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 600px;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.container-padding {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #eee;
|
||||
padding: 0 4px;
|
||||
font-family: Menlo, Courier, monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
}
|
||||
|
||||
.hr {
|
||||
height: 1px;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #374550;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #2469A0;
|
||||
}
|
||||
.subtitle span {
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.body-text {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.col {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
color: #333333;
|
||||
width: 100%;
|
||||
}
|
||||
@ -0,0 +1,146 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1.0"> <!-- So that mobile webkit will display zoomed in -->
|
||||
<meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS -->
|
||||
<title>Two Columns to Rows (Simple)</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
<link rel="stylesheet" type="text/css" href="responsive.css">
|
||||
</head>
|
||||
<body style="margin:0; padding:0;" bgcolor="#F0F0F0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
|
||||
|
||||
<!-- 100% background wrapper (grey background) -->
|
||||
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#F0F0F0">
|
||||
<tr>
|
||||
<td align="center" valign="top" bgcolor="#F0F0F0" style="background-color: #F0F0F0;">
|
||||
|
||||
<br>
|
||||
|
||||
<!-- 600px container (white background) -->
|
||||
<table border="0" width="600" cellpadding="0" cellspacing="0" class="container">
|
||||
<tr>
|
||||
<td class="container-padding header" align="left">
|
||||
Antwort v1.0
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="container-padding content" align="left">
|
||||
<br>
|
||||
<div class="title">Two Columns (simple)</div>
|
||||
<br>
|
||||
|
||||
<div class="body-text">
|
||||
This is an example of transforming two columns on desktop into rows on mobile.
|
||||
<br><br>
|
||||
</div>
|
||||
|
||||
<div class="hr"> </div>
|
||||
<br>
|
||||
|
||||
<!-- example: two columns (simple) -->
|
||||
|
||||
<!--[if mso]>
|
||||
<table border="0" cellpadding="0" cellspacing="0" width="100%">
|
||||
<tr><td width="50%" valign="top"><![endif]-->
|
||||
|
||||
<table width="264" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row">
|
||||
<tr>
|
||||
<td class="col" valign="top">
|
||||
<strong>Herman Melville</strong>
|
||||
<br><br>
|
||||
It's worse than being in the whirled woods, the last day of the year! Who'd go climbing after chestnuts now? But there they go, all cursing, and here I don't.
|
||||
<br><br>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!--[if mso]></td><td width="50%" valign="top"><![endif]-->
|
||||
|
||||
<table width="264" border="0" cellpadding="0" cellspacing="0" align="right" class="force-row">
|
||||
<tr>
|
||||
<td class="col" valign="top">
|
||||
<strong>I am Ishmael</strong>
|
||||
<br><br>
|
||||
White squalls? white whale, shirr! shirr! Here have I heard all their chat just now, and the white whale—shirr! shirr!—but spoken of once! and…
|
||||
<br><br>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!--[if mso]></td></tr></table><![endif]-->
|
||||
|
||||
|
||||
<!--/ end example -->
|
||||
|
||||
<div class="hr" style="clear: both;"> </div>
|
||||
<br>
|
||||
|
||||
<div class="subtitle">
|
||||
Code Walkthrough
|
||||
</div>
|
||||
|
||||
<div class="body-text">
|
||||
<ol>
|
||||
<li>
|
||||
Create a columns container <code><table></code> just for Outlook using <code>if mso</code> conditionals.<br>
|
||||
The container's <code><td></code>'s have a width of <code>50%.</code>
|
||||
<br><br>
|
||||
</li>
|
||||
<li>
|
||||
Wrap our columns in a <code><table></code> with a <strong>fixed width</strong> of <code>264px</code>.
|
||||
<ul>
|
||||
<li>
|
||||
264px = (600 - 24*3) / 2 - container width minus margins divided by number of columns
|
||||
</li>
|
||||
<li>
|
||||
First table is aligned left.
|
||||
</li>
|
||||
<li>
|
||||
Second table is aligned right.
|
||||
</li>
|
||||
</ul>
|
||||
<br>
|
||||
</li>
|
||||
<li>
|
||||
Apply <code>clear: both;</code> to first element after our wrapper table.
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<br>
|
||||
<em><small>Last updated: 10 October 2014</small></em>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="container-padding footer-text" align="left">
|
||||
<br><br>
|
||||
Sample Footer text: © 2014 Acme, Inc.
|
||||
<br><br>
|
||||
|
||||
You are receiving this email because you opted in on our website. Update your <a href="#">email preferences</a> or <a href="#">unsubscribe</a>.
|
||||
<br><br>
|
||||
|
||||
<strong>Acme, Inc.</strong><br>
|
||||
<span class="ios-footer">
|
||||
123 Main St.<br>
|
||||
Springfield, MA 12345<br>
|
||||
</span>
|
||||
<a href="http://www.acme-inc.com">www.acme-inc.com</a><br>
|
||||
|
||||
<br><br>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table><!--/600px container -->
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table><!--/100% background wrapper-->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user