Starter Email Frame
Copy to clipboard
<!DOCTYPE html>
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<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">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
<meta name="x-apple-disable-message-reformatting">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark only">
<!-- Allow for better image rendering on Windows hi-DPI displays. -->
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!-- CSS BLOCKS -->
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
</style>
<style type="text/css">
.body-fix,table,td{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
#MessageViewBody a,u+#body a{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}
#MessageViewBody a,img,u+#body a{text-decoration:none}
.inventory-button:hover,.link:hover,a[x-apple-data-detectors]{text-decoration:none!important}
body,html{background:#fff;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;mso-hyphenate:none}
.body-fix{height:100%!important;margin:0 auto!important;padding:0!important;width:100%!important;-webkit-font-smoothing:antialiased;word-spacing:normal}
div[style*="margin:16px 0"]{margin:0!important}
table,td{border-collapse:collapse!important;mso-table-lspace:0pt;mso-table-rspace:0pt}
img{border:0;display:block;line-height:100%;outline:0}
.inventory-button,.inventory-button:hover{border-radius:0 0 12px 12px!important;background:#061d49!important}
a,h1,h2,h3,h4,h5,img,li,ol,p,span,ul{font-family:'Roboto',Arial,Helvetica,sans-serif!important}
h1,h2,h3,p{padding:0;margin:0}
a[x-apple-data-detectors],#converted-body #body a[x-apple-data-detectors]{color:inherit!important;font-size:inherit!important;font-family:inherit!important;font-weight:inherit!important;line-height:inherit!important}
</style>
<style type="text/css">
.link{color:#005d91!important;text-decoration:underline!important}
.stack-column-1{padding-bottom:20px!important;padding-left:0!important;padding-right:10px!important}
.stack-column-2{padding-bottom:20px!important;padding-left:10px!important;padding-right:0!important}
.three-column .stack-column{direction:ltr!important;display:inline-block!important;max-width:33%!important;width:205px!important}
.three-column .stack-column-1{padding-bottom:12px!important;padding-left:0!important;padding-right:6px!important}
.three-column .stack-column-2{padding-bottom:12px!important;padding-left:6px!important;padding-right:6px!important}
.three-column .stack-column-3{padding-bottom:12px!important;padding-left:6px!important;padding-right:0!important}
.inventory-button{padding:0 30px 12px!important}
.buttonstyles{-webkit-transition:background .3s ease-in-out!important;-moz-transition:background .3s ease-in-out!important;-ms-transition:background .3s ease-in-out!important;-o-transition:background .3s ease-in-out!important;transition:background .3s ease-in-out!important}
.buttonstyles:hover{background:#005d91!important;color:#fff!important;-webkit-transition:background .3s ease-in-out!important;-moz-transition:background .3s ease-in-out!important;-ms-transition:background .3s ease-in-out!important;-o-transition:background .3s ease-in-out!important;transition:background .3s ease-in-out!important}
.fadeimg,.fadeimg:hover{transition:.3s!important}
.fadeimg{opacity:1!important}
.fadeimg:hover{opacity:.5!important}
.cta:hover{background-color:#005d91!important;color:#fff!important}
.cta-border:hover{border-bottom:3px solid transparent!important}
.mobile{display:none}
@media screen and (max-width:600px){
.imgFull,.w100p{width:100%!important}
.imgFull{height:auto!important}
.desktop{width:0!important;display:none!important}
.mobile{display:block!important}
}
</style>
<style type="text/css">
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
@media (prefers-color-scheme:dark){
.dark-img{display:block!important;width:auto!important;overflow:visible!important;float:none!important;max-height:inherit!important;max-width:inherit!important;line-height:auto!important;margin-top:0!important;visibility:inherit!important}
.light-img{display:none!important}
.darkmode{background-color:#040d10!important}
.darkmode2{background-color:#337ab7!important}
.darkmode3{background-color:#222023!important}
.buttonstyles{color:#ffffff!important}
.footer a.link,.rev,.white,a,p,span{color:#fdfdfd!important}
.rev2{color:#009180!important}
.link,h1,h2,h3{color:#337ab7!important}
.lt-blue{color:#d9edf7!important}
.footer p,.footer p span{color:#91969d!important}
}
[data-ogsc] .dark-img{display:block!important;width:auto!important;overflow:visible!important;float:none!important;max-height:inherit!important;max-width:inherit!important;line-height:auto!important;margin-top:0!important;visibility:inherit!important}
[data-ogsc] .light-img{display:none!important}
[data-ogsc] .darkmode{background-color:#040d10!important}
[data-ogsc] .darkmode2{background-color:#337ab7!important}
[data-ogsc] .darkmode3{background-color:#222023!important}
[data-ogsc] .footer a.link,[data-ogsc] .white,[data-ogsc] a,[data-ogsc] h1,[data-ogsc] h3,[data-ogsc] p,[data-ogsc] span{color:#fdfdfd!important}
[data-ogsc] .link{color:#337ab7!important}
</style>
<title>Client name</title>
</head>
<body id="body" class="darkmode body body-fix" style="background: #FFFFFF;">
<custom name="opencounter" type="tracking" />
<div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;">
<!-- Preheader text : START --><!-- Preheader text : END -->
</div>
<div role="article" aria-roledescription="email" aria-label="Email from Client Name" xml:lang="en" lang="en">
<table class="darkmode" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; background: #FFFFFF;">
<tr>
<td class="container" align="center" valign="top" style="padding: 0 0 40px;">
<div style="max-width: 640px; margin: 0 auto;" class="email-container">
<!--[if mso]> <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center"><tr><td width="640"><![endif]-->
<table class="w100p darkmode" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; max-width:640px !important;background-color: #FFFFFF;">
<!-- SFMC CONTENT BLOCKS : START -->
<tr>
<td valign="top" style="padding: 0px;">
<div data-type="slot" data-key="email_header_area" data-label="Content Section: Drop Content blocks here."></div>
</td>
</tr>
<!-- SFMC CONTENT BLOCKS : END -->
</table>
<!--[if mso]></td></tr></table><![endif]-->
</div>
</td>
</tr>
</table>
</div>
</body>
</html>