I made a quick video on how to edit simple HTML emails.

See the video below and see the HTML sample to mess around with beneath the video on this page.

 

Copy all the below to give this a go:

<!--[if gte mso 15]> <xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml> <![endif]--> <title></title> <meta content="width=device-width, initial-scale=1" name="viewport" /> <meta content="IE=edge" http-equiv="X-UA-Compatible" /> <style type="text/css">/* CLIENT-SPECIFIC STYLES */ 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; } sup { font-size: 66%; line-height: 1; vertical-align: top; mso-text-raise: 30%; } .contact a { color: #787878 !important; text-decoration: underline !important; } /* RESET STYLES */ img { border: 0; line-height: 100%; outline: none; text-decoration: none; } table { border-collapse: collapse !important; } body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } a[x-apple-data-detectors] { color: inherit !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } /* GOOGLE STYLES */ u+#body a { color: inherit; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; } .buttonstyles-prim:hover { color: #ffffff !important; background-color: #281BBA !important; transition: .25s !important; } .buttonstyles-sec:hover { color: #412dff !important; background-color: #D5D2EF !important; border: 1px solid #D5D2EF !important; transition: .25s !important; } .css-display { mso-hide: none !important; max-height: 57px !important; } .css-display-bg { background-color: transparent !important; } .mob-typ { font-size: 28px !important; line-height: 34px !important; } @media screen and (max-width: 480px) { u~div { min-width: 100vw; } u+.body { min-width: 100vw; width: 100% !important; width: 100vw !important; } u+.full-wrap { min-width: 100vw; width: 100% !important; width: 100vw !important; } .body { min-width: 100vw; width: 100% !important; width: 100vw !important; } .full-wrap { min-width: 100vw; width: 100% !important; width: 100vw !important; } .mob-trim { height: 470px !important; } } @media screen and (max-width: 540px) { .mob-box { padding: 0px 0px 0px 0px !important; max-width: 600px !important; width: 100% !important; border-radius: 0px 0px 0px 0px !important; } .mob-box-bg { background: url(https://image.e.clearme.com/lib/fe9313727667027a75/m/2/7cf519bf-70df-4d20-9b1b-9d1c1bdf4dc0.png) no-repeat top center / 600px !important; width: 100% !important; height: 100% !important; background-size: contain !important; } } @media screen and (max-width: 600px) { .bg-hero-mob { width: 100% !important; max-width: 400px !important; } .box-shrink-mob { width: 100% !important; max-width: 275px !important; } .mob-pad-remove { padding: 0px 0px 0px 0px !important; } } /* BRAND STYLES */ h1 { font-family: Gerogia, serif; color: #000000; font-weight: normal; padding: 0; margin: 0; } p, h2 { font-family: Helvetica, sans-serif; color: #000000; font-weight: normal; padding: 0; margin: 0; } sup { font-size: 66%; line-height: 1; vertical-align: top; mso-text-raise: 30%; } /* FONT IMPORTS */ @font-face { font-family: 'LyonText-RegularNo2'; src: url("https://img.clearme.com/fonts/LyonText-RegularNo2.woff") format("woff"), url("https://img.clearme.com/fonts/LyonText-RegularNo2.ttf") format("truetype"); font-weight: 400; font-style: normal; } @font-face { font-family: 'PostGrotesk-Book'; src: url("https://img.clearme.com/fonts/PostGrotesk-Book.woff") format("woff"), url("https://img.clearme.com/fonts/PostGrotesk-Book.ttf") format("truetype"); font-weight: 400; font-style: normal; } @media screen { .LyonText { font-family: 'LyonText-RegularNo2', Georgia, serif !important; } .PostGrotesk-Book { font-family: 'PostGrotesk-Book', Helvetica, sans-serif !important; } } </style> <!-- footer styles --> <style type="text/css">.footer-hov-nav:hover { color: #ffffff !important; transition: 0.3s !important; } .footer-hov-leg:hover { color: #BABABA !important; transition: 0.3s !important; } </style> <!-- samsung --> <style type="text/css">@media screen and (max-width: 480px) { #MessageViewBody, #MessageWebViewDiv { min-width: 100vw; margin: 0 !important; zoom: 1 !important; } } </style> <!-- windows mail --><!--[if (mso)|(mso 16)]> <style type="text/css"> a {text-decoration: none;} </style> <![endif]--> <style type="text/css">div.preheader { display: none !important; } </style> <div class="preheader" style="font-size: 1px; display: none !important;">Don't miss out on a year of CLEAR Premium for only $119.</div> <!-- begin preheader --> <div style="display: none; width: 0px; height: 0px; max-height: 0px; overflow: hidden;">&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp; ‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;</div> <!-- PREHEADER CLOSE --><!-- GMAIL PROMO --><!-- PromotionCard --> <div itemscope="" itemtype="http://schema.org/PromotionCard">&nbsp;</div> <meta content="$80 OFF" itemprop="description" /> <meta content="" itemprop="discountCode" /> <meta content="" itemprop="availabilityStarts" /> <meta content="" itemprop="availabilityEnds" /><!-- GMAIL PROMO --> <center> <table align="center" bgcolor="#A0AFC8" border="0" cellpadding="0" cellspacing="0" class="full-wrap" role="presentation" style="background-color:#A0AFC8;" width="100%"> <tbody> <tr> <td align="center" class="mob-pad-remove" style="padding: 0px 0px 0px 0px;" valign="top"><!-- hero --><!--[if (gte mso 9)|(IE)]> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="600"> <tr> <td align="center" valign="top"> <![endif]--> <table align="center" bgcolor="#BBE8F8" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px; background-color: #BBE8F8; background: linear-gradient(to bottom right, #E9F6FC 0%, #BBE8F8 80%);" width="100%"> <tbody> <tr> <td align="center" style="padding: 60px 20px 0px 20px;" valign="top"><!--[if (gte mso 9)|(IE)]> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="500"> <tr> <td align="center" valign="top"> <![endif]--> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 500px;" width="100%"> <tbody> <tr> <td align="center" valign="top"><a href="https://chasedimond.com/"><img alt="CLEAR®" border="0" src="https://static1.squarespace.com/static/5d9ea71df3f124742d604f08/t/5eea721649ee291ea2b7fe0d/1592422936542/chase-dimond-transparent.png?format=1000w" style="font-family: Helvetica, sans-serif; color: #412dff; font-size: 14px;" title="CLEAR®" width="150" /></a></td> </tr> <tr> <td align="center" style="padding: 40px 0px 0px 0px;" valign="top"><!--[if (gte mso 9)|(IE)]> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="440"> <tr> <td align="center" valign="top"> <![endif]--> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 440px;" width="100%"> <tbody> <tr> <td align="center" valign="top"><!--[if (gte mso 9)|(IE)]> <table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="420"> <tr> <td align="center" valign="top"> <![endif]--> <table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 420px;" width="100%"><!-- copy --> <tbody> <tr> <td> <p><span style="font-family:helvetica,sans-serifhelvetica neue;"><span style="font-size:18px;">Hey {{ first_name|default:'you' }}!</span></span><br /> &nbsp;</p> </td> </tr> <tr> <td> <p><span style="font-family:helvetica,sans-serifhelvetica neue;"><span style="font-size:18px;"><b><br /> Welcome! I'm super pumped&nbsp;to have you here.</b></span></span></p> </td> </tr> <tr> <td align="left" style="padding: 10px 0px 20px 0px;" valign="top"> <p class="PostGrotesk-Book" style="padding:0; margin:0; color:#4A4A4A; font-family: Helvetica,sans-serif; font-size:18px; line-height: 26px; font-weight: normal;"><span style="font-family:helvetica,sans-serifhelvetica neue;"><span style="font-size:18px;"><br /> You've come to the right place to learn email marketing.&nbsp;</span></span><br /> <br /> <span style="background-color: initial; font-family: helvetica, &quot;sans-serifhelvetica neue&quot;;">Every Monday I share content to help you improve your email game. Stay tuned!<br /> <br /> In the meantime, check out one of the guides I recently featured by clicking the Start Here button below.</span></p> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--></td> </tr> <!-- dont miss out --> </tbody> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--></td> </tr> <!-- hybrid --> <tr> <td background="https://image.e.clearme.com/lib/fe9313727667027a75/m/2/377391d0-8bfa-4a5b-81d1-3622692a882f.png" height="239" style="background:url(https://image.e.clearme.com/lib/fe9313727667027a75/m/2/377391d0-8bfa-4a5b-81d1-3622692a882f.png) no-repeat bottom center / 600px 239px; width: 600px; height: 239px; background-position: bottom center; background-size: initial;" valign="top" width="600"> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"> <tbody> <tr> <td align="center" style="padding: 0px 20px 0px 20px;" valign="top"><!--[if (gte mso 9)|(IE)]> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="440"> <tr> <td align="center" valign="top"> <![endif]--> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 440px;" width="100%"> <tbody> <tr> <td align="left" valign="top"><!-- button --> <div style="display:inline-block; text-align:center; font-size:0; vertical-align: top;"> <table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="210"> <tbody> <tr> <td align="left" style="padding: 20px 0px 20px 0px;" valign="top"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"> <tbody> <tr> <td align="left" style="padding: 0px 0px 0px 0px;" valign="top"> <table border="0" cellpadding="0" cellspacing="0" role="presentation"> <tbody> <tr> <td align="center" bgcolor="#412dff" style=" -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; background-color: #412dff;"><a class="PostGrotesk-Book buttonstyles-prim" href="https://chasedimond.com/welcome-series-guide-for-nonbuyers" style=" font-size: 18px; font-family: Helvetica, sans-serif; color: #FFFFFF; text-decoration: none; display: block; text-align: center; text-transform: uppercase; background-color: #412dff; border: 1px solid #412dff; padding: 12px 30px; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px;" target="_blank" title="Don't miss out"><b>Start here</b></a></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> <!-- button --><!-- walking --> <div style="display:inline-block; text-align:center; vertical-align:top; font-size:0;"> <table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" width="220"> <tbody> <tr> <td align="center" style="padding: 10px 0px 40px 0px;" valign="top"><a href="https://twitter.com/ecomchasedimond"><img alt="" src="https://static1.squarespace.com/static/5d9ea71df3f124742d604f08/t/5eea7909c8a32c76f83919d5/1592424726155/chase-dimond-photo-1.JPG?format=2500w" style="max-width: 220px; display: block; width: 249px;" title="" /></a></td> </tr> </tbody> </table> </div> <!-- walking --></td> </tr> <!-- dont miss out --> </tbody> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--></td> </tr> </tbody> </table> </td> </tr> <!-- hybrid --> </tbody> </table> <!-- hero --><!-- footer begin --></td> </tr> </tbody> </table> </center>