<!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="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Apple Watch Responsive Email Mockup</title>
<style type="text/css">
/* Reset styles */
img {
border: 0 none;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
a img {
border: 0 none;
}
table {
border-collapse: collapse !important;
}
body {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
.mobile-image {
width: 100% !important;
}
body,
table,
td,
a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
/* Ban Blue Links on iOS Devices */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* Android center fix */
div[style*="margin: 16px 0;"] {
margin: 0 !important;
}
/* Media queries */
@media all and (max-width:639px) {
.wrapper {
width: 320px !important;
padding: 0 !important;
}
.container {
width: 300px !important;
padding: 0 !important;
}
.mobile {
width: 300px !important;
display: block !important;
padding: 0 !important;
}
.img {
width: 100% !important;
height: auto !important;
}
.logo {
width: 100% !important;
}
*[class="mobileOff"] {
width: 0px !important;
display: none !important;
}
*[class*="mobileOn"] {
display: block !important;
max-height: none !important;
}
}
</style>
</head>
<body style="margin:0; padding:0; background-color:#F2F2F2;">
<span style="display: block; width: 640px !important; max-width: 640px; height: 1px" class="mobileOff"> </span>
<p style="text-align: center; margin: 0; padding-top: 20px; padding-bottom: 20px; color: #333333; font-weight: 300; text-decoration:none; font-size:14px; font-family: 'Helvetica Neue', Helvetica, sans-serif; line-height:28px" align="center">If you have problems viewing this e-mail please visit our website at <a style="color: #cc2836 !important; margin: 0;" href="https://www.website.com">www.website.com</a></p>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F2F2F2">
<tr>
<td align="center" valign="top">
<table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#212121">
<tr>
<td height="10" style="font-size:10px; line-height:10px;"> </td>
</tr>
<tr>
<td align="center" valign="top">
<table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
<tr>
<td align="center" valign="top">
<img alt="logo" class="logo" src="https://portfolio.redcitrusdesign.co.uk/mostrar/wp-content/uploads/sites/2/2018/11/Redcitrus-design-logo-Dark.png" />
</td>
</tr>
<tr>
<td style="text-align: center; padding-top: 20px; padding-bottom: 20px; color:#ffffff; font-weight: 500; text-decoration:none; font-size:32px; font-family: 'Helvetica Neue', Helvetica, Open sans, Arial, sans-serif; line-height:42px">
Apple Watch is the ultimate <br />device for a healthy life
</td>
</tr>
<tr>
<td style="text-align: center; padding-top: 0px; color:#ffffff; font-weight: 500; text-decoration:none; font-size:20px; font-family: Helvetica, Open sans, Arial, sans-serif; line-height:32px">
Apple <span style="color: #D2372B">Watch</span>
</td>
</tr>
</table>
<table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
<tr>
<td align="center" valign="top">
<img style="width: 100%" alt="Apple watch closeup image" src="https://portfolio.redcitrusdesign.co.uk/wp-content/uploads/email-img/apple-watch.jpg" class="mobile-image" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10" style="font-size:10px; line-height:10px;"> </td>
</tr>
</table>
<table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#212121">
<tr>
<td height="10" style="font-size:10px; line-height:10px;"> </td>
</tr>
<tr>
<td align="center" valign="top">
<table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
<tr>
<td width="300" class="mobile" align="center" valign="top">
<p style="text-align: center; padding-bottom: 20px; padding-top: 20px; ; margin: 0; color: #ffffff; font-weight: 300; text-decoration:none; font-size:16px; font-family: 'Helvetica Neue', Helvetica, sans-serif; line-height:28px" align="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<a href="#" style="font-size:18px;font-family: 'Helvetica Neue', Helvetica, sans-serif; width: 160px; font-weight:normal;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #ffffff !important;text-decoration: none !important;border:1px solid #ffffff; padding:16px 28px;display:block"
target="_blank">Read our Story →
</a>
</td>
<td width="300" class="mobile" align="center" valign="top">
<img alt="Apple watch image" src="https://portfolio.redcitrusdesign.co.uk/wp-content/uploads/email-img/apple-watch-2.jpg" class="mobile-image" style="width: 100%" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10" style="font-size:10px; line-height:10px;"> </td>
</tr>
</table>
<table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#212121">
<tr>
<td height="10" style="font-size:10px; line-height:10px;"> </td>
</tr>
<tr>
<td align="center" valign="top">
<table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
<tr>
<td width="300" class="mobile" align="center" valign="top">
<p style="text-align: center; padding-bottom: 20px; margin: 0; padding-top: 20px; color: #ffffff; font-weight: 300; text-decoration:none; font-size:16px; font-family: 'Helvetica Neue', Helvetica, sans-serif; line-height:28px" align="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</td>
<td width="300" class="mobile" align="center" valign="top">
<h2 style="text-align: center; padding-bottom: 20px; padding-top: 20px; color: #ffffff; font-weight: 300; text-decoration:none; font-size:24px; font-family: 'Helvetica Neue', Helvetica, sans-serif; line-height:28px" align="center">
Lorem ipsum dolor sit amet.
</h2>
<a href="#" style="font-size:18px;font-family: 'Helvetica Neue', Helvetica, sans-serif; width: 220px; font-weight:normal;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #ffffff !important;text-decoration: none !important;background: #D2372B ;border:1px solid #ffffff; padding:16px 28px;display:block"
target="_blank">Explore the Collection →</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10" style="font-size:10px; line-height:10px;"> </td>
</tr>
</table>
<table width="640" cellpadding="0" cellspacing="0" border="0" class="container">
<tr>
<td class="mobile" align="center" valign="bottom">
<p align="center" style="text-align: center; padding-top: 40px; margin: 0; color: #333333; font-size:16px; font-family: 'Helvetica Neue', Helvetica, sans-serif; line-height:28px">
<a href="#" style="font-family: 'Helvetica Neue', Helvetica, sans-serif; font-weight:normal;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #333333 !important;text-decoration: underline !important;display:block"
target="_blank">Unsubscribe from this email</a>.
</p>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10" style="font-size:10px; line-height:10px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
!
