PDF rausgenommen
This commit is contained in:
aschwarz
@ -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>
|
||||
Reference in New Issue
Block a user