Skip to content

Instantly share code, notes, and snippets.

@wemakefuture

wemakefuture/Example mail

Created April 2, 2022 14:30
Show Gist options
  • Save wemakefuture/7e3510310d8d3aa7fd6fd8a9481d0316 to your computer and use it in GitHub Desktop.
Save wemakefuture/7e3510310d8d3aa7fd6fd8a9481d0316 to your computer and use it in GitHub Desktop.
Download ZIP
Task 1.8.
Raw
Example mail
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="format-detection" content="date=no" />
<meta name="format-detection" content="address=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="x-apple-disable-message-reformatting" />
<title>Email Template</title>
<!--[if gte mso 9]>
<style type="text/css" media="all">
sup { font-size: 100% !important; }
</style>
<![endif]-->
<style type="text/css" media="screen">
/* Linked Styles */
body { padding:0 !important; margin:0 !important; display:block !important; min-width:100% !important; width:100% !important; background:#ffffff; -webkit-text-size-adjust:none }
a { color:#66c7ff; text-decoration:none }
p { padding:0 !important; margin:0 !important }
img { -ms-interpolation-mode: bicubic; /* Allow smoother rendering of resized image in Internet Explorer */ }
.mcnPreviewText { display: none !important; }
/* Mobile styles */
@media only screen and (max-device-width: 480px), only screen and (max-width: 480px) {
.mobile-shell { width: 100% !important; min-width: 100% !important; }
.bg { background-size: 100% auto !important; -webkit-background-size: 100% auto !important; }
.text-header,
.m-center { text-align: center !important; }
.center { margin: 0 auto !important; }
.container { padding: 0px 10px 10px 10px !important }
.td { width: 100% !important; min-width: 100% !important; }
.text-nav { line-height: 28px !important; }
.p30 { padding: 15px !important; }
.m-br-15 { height: 15px !important; }
.p30-15 { padding: 30px 15px !important; }
.p40 { padding: 20px !important; }
.m-td,
.m-hide { display: none !important; width: 0 !important; height: 0 !important; font-size: 0 !important; line-height: 0 !important; min-height: 0 !important; }
.m-block { display: block !important; }
.fluid-img img { width: 100% !important; max-width: 100% !important; height: auto !important; }
.column,
.column-top,
.column-empty,
.column-empty2,
.column-dir-top { float: left !important; width: 100% !important; display: block !important; }
.column-empty { padding-bottom: 10px !important; }
.column-empty2 { padding-bottom: 20px !important; }
.content-spacing { width: 15px !important; }
.c-img{text-align: center !important; padding-bottom: 10px !important;}
}
</style>
</head>
<body class="body" style="padding:0 !important; margin:0 !important; display:block !important; min-width:100% !important; width:100% !important; background:#ffffff; -webkit-text-size-adjust:none;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td align="center" valign="top">
<table width="650" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">
<tr>
<td class="td container" style="width:650px; min-width:650px; font-size:0pt; line-height:0pt; margin:0; font-weight:normal; padding:0px;">
<!-- Logo and button -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding-bottom: 0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e4eaed">
<tr>
<td class="p30-15" style="padding: 20px 30px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th class="column" width="330" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="c-img" style="font-size:0pt; line-height:0pt; text-align:left;"><img src="https://i.ibb.co/pnHNkRm/EDU4.png" width="60" style="max-width: 60px; height: auto;" border="0" alt="" /></td>
</tr>
</table>
</th>
<th class="column-empty" width="50" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; vertical-align:top;"></th>
<th class="column" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<!-- Button -->
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="text-button" style="background:#f6ae28; border-radius: 5px; color:#ffffff; font-family: Arial,sans-serif; font-size:14px; line-height:18px; padding:12px 30px; text-align:center;"><a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none;"><span class="link-white" style="color:#ffffff; text-decoration:none;">JETZT ENTDECKEN </span></a></td>
</tr>
</table>
</td>
</tr>
<!-- END Button -->
</table>
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Text and Image -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="pb10" style="padding-bottom:30px; background-color: #e4eaed;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<!-- Columns -->
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th class="column-top" width="300" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; vertical-align:top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="p30" style="padding:30px; padding-bottom: 0px; padding-right: 10px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="h3 pb25" style="color:#050505; font-family:'Arial Black', Arial,sans-serif; font-size:24px; line-height:34px; text-align:left; padding-bottom:25px;">Die ultimative Make Masterclass</td>
</tr>
<tr>
<td class="text pb25" style="color:#1c2c36; font-family:Arial,sans-serif; font-size:16px; line-height:28px; text-align:left; padding-bottom:25px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</td>
</tr>
<!-- Button -->
<tr>
<td align="left">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="text-button" style="background:#f6ae28; border-radius: 5px; color:#ffffff; font-family:Arial,sans-serif; font-size:14px; line-height:18px; padding:12px 30px; text-align:center;"><a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none;"><span class="link-white" style="color:#ffffff; text-decoration:none;">Mehr erfahren </span></a></td>
</tr>
</table>
</td>
</tr>
<!-- END Button -->
</table>
</td>
</tr>
</table>
</th>
<th class="column-empty" width="0" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; vertical-align:top;"></th>
<th class="column-top" width="350" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; vertical-align:bottom;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="fluid-img" style="font-size:0pt; line-height:0pt; text-align:left;"><img src="https://i.ibb.co/H7Sh9XM/img1.png" width="320" style="max-width: 320px; height: auto;" border="0" alt="" /></td>
</tr>
</table>
</th>
</tr>
</table>
</td>
</tr>
<!-- END Columns -->
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment