html 电子邮件代码段

Posted 2021-05-11

<!--Signature Start-->
<br><br>
<p style="font-family: 'Open Sans', Helvetica, sans-serif; font-size: 16px; line-height: 28px; color: #727e83; text-align: center;">Best of luck on your campaign!</p>
<p><img style="max-width: 240px; height: auto; display: block; margin: 0 auto;" src="//cdn2.hubspot.net/hubfs/190333/emails/yourfriendsatclassy.png" alt="Your Friends at Classy"></p>
<!--Signature End-->

<!--Signature Start-->
<p style="font-family: 'Open Sans', Helvetica, sans-serif; font-size: 16px; line-height: 28px; color: #727e83; text-align: center;">Until next time!</p>
<p><img style="max-width: 240px; height: auto; display: block; margin: 0 auto; border: 0; outline: 0;" src="//cdn2.hubspot.net/hubfs/190333/emails/yourfriendsatclassy.png" alt="Your Friends at Classy"></p>
<p style="text-align: center;"><a href="tel://1-619-961-1892" style="text-align: center; border: 0; outline: 0;"><img src="http://cdn2.hubspot.net/hubfs/190333/classy-fundraising-phone-number.png" alt="[phone]" style="max-width: 180px; margin: 0 auto;"></a></p>
<img src="http://cdn2.hubspot.net/hub/190333/file-2073664964-png/Misc_Resources/footer-terri.png" alt="Classy-Team-Photo" style="width: 100%; max-width: 600px; height: auto; display: block; border-bottom: 1px solid #edf1f2;" title="Classy-Team-Photo">
<!--Signature End-->

<!--Headshot signature start -->
<br>
<p><img style="max-width: 100%; height: auto; display: block; width: 100px;" src="http://cdn2.hubspot.net/hubfs/190333/_emails/weekly-roundup/headshots/chung-liz.png" alt="Liz Chung headshot"></p>
<p style="font-family: 'Open Sans', Helvetica, sans-serif; font-size: 16px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; line-height: 20px; color: #444b55;">Elizabeth Chung</p>
<p style="font-family: 'Open Sans', Helvetica, sans-serif; font-size: 16px; line-height: 18px; color: #727e83; font-style: italic;">Title</p>
<br><br>
<!--Headshot signature end -->

<!--Headline-->
<p class="h1" style="margin: 0; font-weight: normal; margin-bottom: 18px; color: #444b55; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif!important; font-size: 28px; line-height: 1.4; text-align: center;">Good stuff is worth sharing</p>
<!--Sharing link-->
<p style="margin: 0; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif!important; color: #828b94; font-weight: 400; line-height: 32px; font-size: 16px; margin-bottom: 10px; text-align: center;"><a href="/cdn-cgi/l/email-protection#013e756e3c27606c713a636e65783c5a424e4f55444f555e4e475e444c40484d5c27606c713a7274636b6462753c482433317569686f6a243331786e742444332439X0%99ll%20appreciate%20this%20content%20from%20Classy%21" target="_blank" style="color: #36bff7; text-decoration: none; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;">Forward this to your team →</a></p>

<!--Image with Browser Start-->
<div style="margin-top: 40px; margin-bottom: 40px;"><img width="600" style="width: 100%; max-width: 600px; height: auto; display: block; outline: 0;" src="https://cdn2.hubspot.net/hubfs/190333/_emails/email_browser-bar.png" alt="browser bar"> <img width="600" style="width: 100%; max-width: 600px; height: auto; display: block; outline: 0;" src="INSERT_URL_SCREENSHOT_HERE" alt="Describe screenshot here"></div>
<!--Image with Browser End-->

<!--Inline Link Start-->
<a style="color: #36bff7; text-decoration: none; font-family: 'Open Sans',Helvetica, arial, sans-serif;" href="LINK URL" target="_blank">LINK TEXT</a>
<!--Inline Linke End-->

<!--Full Width Image Start-->
<p><img style="width: 100%; max-width: 600px; height: auto; display: block; outline: 0;" src="IMAGE URL" alt="IMAGE ALT TEXT"></p>
<!--Full Width Image End-->

<!--Button Start-->
<a href="[LINK_URL]" style="outline: 0; border: 0;"><img src="[BUTTON_IMG_URL]" alt="Connect Now" style="border: 0; display: block; text-align: center; margin: 0 auto;"></a>
<!--Button End-->

<!--Start Button-->
<p style="margin: 25px auto; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif!important; color: rgba(255,255,255,.3); font-weight: 600; line-height: 24px; font-size: 14px; margin-bottom: 20px; text-align: center; max-width: 360px;"><a href="INSERT_URL_HERE" target="_blank" style="color: white; background: #f77462; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif!important; text-decoration: none; padding: 15px 42px; border-radius: 1000px;">Button Text</a></p>
<!--End Button-->

<!--***Article AD Start***-->
<div style="background-color: rgba(54,191,247,0.2); padding: 15px 23px;">
<p style="font-family: 'Open Sans', Helvetica, sans-serif; font-size: 24px; line-height: 1.2; font-weight: 400; color: #44505d !important; text-align: left;"><a style="text-decoration: none; color: #44505d;" href="link url">Article Title</a></p>
<p style="font-family: 'Open Sans', Helvetica, sans-serif; font-size: 16px; line-height: 28px; color: #727e83; text-align: left;">Paragraph description. <a style="color: #36bff7; text-decoration: none; font-family: 'Open Sans',Helvetica, arial, sans-serif;" href="#LINK-URL">Link url text →</a></p>
</div>
<br><hr style="border: 1px solid #edf1f2; color: #edf1f2;"><br> <!--***Article AD End***-->

<!--***Article Start***-->
<p style="font-family: 'Open Sans', Helvetica, sans-serif; font-size: 24px; line-height: 1.2; font-weight: 400; color: #44505d !important; text-align: left;"><a style="text-decoration: none; color: #44505d;" href="link url">Article Title</a></p>
<p style="font-family: 'Open Sans', Helvetica, sans-serif; font-size: 16px; line-height: 28px; color: #727e83; text-align: left;">Paragraph description. <a style="color: #36bff7; text-decoration: none; font-family: 'Open Sans',Helvetica, arial, sans-serif;" href="#LINK-URL">Link url text →</a></p>
<br><hr style="border: 1px solid #edf1f2; color: #edf1f2;"><br> <!--***Article End***-->

<!--List Numbered Start-->
<ol>
<li style="font-family: 'Open Sans', Helvetica, sans-serif; font-size: 16px; line-height: 28px; color: #727e83; text-align: left;">List Item #1</li>
<li style="font-family: 'Open Sans', Helvetica, sans-serif; font-size: 16px; line-height: 28px; color: #727e83; text-align: left;">List Item #2</li>
</ol>
<!--List Numbered End-->

<!--List Bulleted Start-->
<ul>
<li style="font-family: 'Open Sans', Helvetica, sans-serif; font-size: 16px; line-height: 28px; color: #828b94; text-align: left;">List Item #1</li>
<li style="font-family: 'Open Sans', Helvetica, sans-serif; font-size: 16px; line-height: 28px; color: #828b94; text-align: left;">List Item #2</li>
</ul>
<!--List Bulleted End-->

<!--Horizontal Rule Start--><hr style="border-top: 1px solid #cccccc; margin-bottom: 50px; margin-top: 50px;"><!--Horizontal Rule End-->

<!--Body Paragraph Start-->
<p class="body" style="margin: 0; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif!important; color: #828b94; font-weight: 400; line-height: 32px; font-size: 16px; margin-bottom: 25px;">Body paragraph copy with a <a href="LINK_URL" target="_blank" style="color: #36bff7; text-decoration: underline; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;">text link</a> included. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<!--Body Paragraph End-->

<!--Headline 3 Start-->
<p class="h3" style="font-family: 'Open Sans', Helvetica, sans-serif; font-size: 16px; line-height: 1.2; font-weight: bold; color: #44505d !important; text-transform: uppercase; letter-spacing: 1px; margin-top: 20px; margin-bottom: 15px;">Headline 3</p>
<!--Headline 3 End-->

<!--Headline H2 Start-->
<p class="h2" style="font-family: 'Open Sans', Helvetica, sans-serif; font-size: 24px; line-height: 1.43; font-weight: 400; color: #44505d !important; text-align: center;">Headline 2</p>
<!--Headline H2 End-->

<!--Headline H1 Start-->
<p class="h1" style="font-family: 'Open Sans', Helvetica, sans-serif; font-size: 2em; font-weight: 400; color: #44505d !important; text-align: center; margin-bottom: 25px;">Headline 1</p>
<!--Headline H1 End-->