fddemora/boilerplate.html

## boilerplate.html
<!DOCTYPE html>
<!-- We use the HTML5 doctype as it's the most widely supported and our recommended doctype, for more on this visit  https://www.emailonacid.com/blog/article/email-development/doctype_-_the_black_sheep_of_html_email_design/

In our HTML tag we include a language for accessibility purposes and VML namespace declaration, for if we need to add specific Outlook VML code.-->
<html 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>
        <!-- This Outlook specific code helps alleviate the issues caused by high DPI versions of Outlook. -->
        <!--[if gte mso 9]><xml>
            <o:OfficeDocumentSettings>
                <o:AllowPNG />
                <o:PixelsPerInch>96</o:PixelsPerInch>
            </o:OfficeDocumentSettings>
        </xml><![endif]-->
        <!-- We always want to include a relevant title in our email, for if users open in a browser. -->
        <title>Your Message Subject or Title</title>

        <!-- These two meta tags are extremely important, the first is encoding our characters so we don't have any funky symbols when using special characters
        the second is telling the browser/email client to render the email in the device's native screen size

        Read more: https://www.emailonacid.com/blog/article/email-development/the_importance_of_content-type_character_encoding_in_html_emails/ -->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
        <meta name="x-apple-disable-message-reformatting">
        <meta name="color-scheme" content="light dark">
        <meta name="supported-color-schemes" content="light dark">


        <!--Now we'll get into a few basic pieces of CSS we include in every email, for clients that do support CSS in the head -->
        <style type="text/css">
            /* color-scheme and supported-color-schemes enables dark mode control via the dark mode media query */
            :root {
                color-scheme: light dark;
                supported-color-schemes: light dark;
            }

            /* By default we turn off hover effects on links, your design may have it differently */
            a:hover {
                text-decoration: none !important;
            }

            /* This snippet removed random blue links on Apple Devices */
            a[x-apple-data-detectors] {
                color: inherit !important;
                text-decoration: none !important;
            }

            /* This will stop email clients adding random styling to phone numbers */
            a[href^="tel"]:hover {
                text-decoration: none !important;
            }

            /* We want all our links and images to not have hidden borders, so they fit snugly in the design */
            a img {
                border: none;
            }

            /* Since we're using semantic HTML markup, we want to reset our paragraphs and headings to not have margins by default, if the design needs them we'll add them inline */
            p {
                margin: 0;
                padding: 0;
                margin-bottom: 0;
            }


            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                margin: 0;
                padding: 0;
                margin-bottom: 0;
            }

            /* Force Outlook to use our line-heights as an exact value rather than a minimum */
            table td {
                mso-line-height-rule: exactly;
            }

            /* Collapse borders on tables so there are no gaps in Outlook */
            table {
                border-collapse: collapse;
            }

            /* This snippet removed random blue links on Apple Devices */
            #emailBody #emailWrapper [x-apple-data-detectors] {
                color: inherit !important;
                text-decoration: inherit !important;
            }

            /* This is the most reliable way of utilizing Google Fonts (or other web fonts) in your email code.

            For a guide on how to find the URL of the webfont you want to use in this way, please visit: https://www.emailonacid.com/blog/article/email-development/web-fonts-google-fonts/ */


            /* Here we are including a few basic Media Queries, these CSS rules will only be applied when the device width is 640px or below.

            Feel free to adjust this value as your design permits/requires. */
            @font-face {
                font-family: 'Inter';
                font-style: normal;
                font-weight: 400;
                font-display: swap;
                src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2) format('woff2');
                unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
            }

            /* Simply setting our container tables to 100% width */
            @media only screen and (max-width:640px) {
                .wrapper {
                    width: 100% !important;
                    padding: 0 !important;
                }

                /* Here we use this to force our grid sections to expand out and stack on mobile devices */
                .tflex {
                    display: block !important;
                    width: 100% !important;
                }

                /* We use this if we need to hide elements on mobile */
                .hm {
                    display: none !important;
                    width: 0 !important;
                    height: 0 !important;
                    padding: 0 !important;
                    font-size: 0 !important;
                    line-height: 0 !important;
                }
            }
        </style>
    </head>

    <body id="emailBody" class="body" xml:lang="en" style="background:#EFEFEF; margin:0; padding:0; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;">
        <!-- Wrap your entire email in a div. For accessibility purposes, include a role, aria-roledescription, aria-label, lang, and dir attributes. -->
        <div role="article" aria-roledescription="email" aria-label="email name" lang="en" dir="ltr" style="font-size:medium; font-size:max(16px, 1rem)">
            <!-- Hidden Preheader Text.

        This is our preview text that displays in email clients, but we hide it so it doesn't effect our design. -->
            <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;">Get 10% off. Use offer code JUNE10 for 10% off or show this email in-restaurant.</div>

            <!-- This is where we open the email content, we use a few basic resets on the body and add our desired background color. -->

            <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#EFEFEF" class="wrapper" role="presentation">
                <tr>
                    <td align="center" valign="top" width="100%">
                        <!-- Responsive Grid:

                Below is the example code for a Responsive 2 column section. We're simply using our Media Queries above to tell the email client to replace our 300px wide table cells
                with 100% width, expanding and forcing a 2 column section.

                For more on Hybrid vs Responsive please visit https://www.emailonacid.com/blog/article/email-development/whats-the-difference-between-responsive-mobile-friendly-and/

                -->

                        <table width="600" cellpadding="0" cellspacing="0" border="0" class="wrapper" role="presentation">
                            <!-- Notice how the tables have role="presentation", this is for accessibility purposes.

                Read more about coding accessible emails: https://www.emailonacid.com/blog/article/email-development/how-to-code-accessible-emails -->

                            <tr>
                                <td width="300" class="tflex" align="center" valign="top" style="color:#333333; font-family: 'Inter', Arial, sans-serif; font-size: 16px;">

                                    <!-- Whenever we're adding copy, we're using semantic markup using paragraph and heading tags -->
                                    <h1>Section One</h1>

                                    <img src="https://placekitten.com/200/140" border="0" style="border:0; display:block;" alt="a cute kitten">
                                    <!-- When adding images, we want to make sure we're forcing border:0 and display:block so that there's no white spaces around the images

                            It's also crucial for accessibility purposes to include a descriptive alt text. -->

                                    <p>
                                        This is our first section
                                    </p>
                                </td>
                                <td width="300" class="tflex" align="center" valign="top" style="color:#333333; font-family: 'Inter', Arial, sans-serif; font-size: 16px;">
                                    <h1>Section Two</h1>

                                    <img src="https://placekitten.com/200/140" border="0" style="border:0; display:block;" alt="a cute kitten">

                                    <p>
                                        This is our second section
                                    </p>
                                </td>
                            </tr>
                        </table>


                        <!-- Hybrid Grid:

                Below is the example code for a Hybrid 2 column section. We use conditional Outlook code to set maximum widths on our table and cells while having them at
                100% width, this ensures that when you view this on a mobile device, the sections will expand out to create a stacking effect.

                For more on Hybrid vs Responsive please visit https://www.emailonacid.com/blog/article/email-development/whats-the-difference-between-responsive-mobile-friendly-and/

                -->

                        <!--[if true]>
                <table align="center" border="0" cellspacing="0" cellpadding="0" width="600" role="presentation">
                <tr>
                <td align="center" valign="top" width="600">
                <![endif]-->
                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" role="presentation">
                            <tr>
                                <td align="center" valign="top" style="font-size:0;">
                                    <!--[if true]>
                        <table align="center" border="0" cellspacing="0" cellpadding="0" width="600" role="presentation">
                        <tr>
                        <td align="left" valign="top" width="298">
                        <![endif]-->
                                    <div style="display:inline-block; max-width:298px; vertical-align:top; width:100%;">
                                        <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:298px;" role="presentation">
                                            <tr>
                                                <td align="center" valign="top" style="color:#333333; font-family: 'Inter', Arial, sans-serif; font-size: 16px;">

                                                    <h1>Section One</h1>

                                                    <img src="https://placekitten.com/200/140" border="0" style="border:0; display:block;" alt="a cute kitten">

                                                    <p>
                                                        This is our first section
                                                    </p>

                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <!--[if true]>
                        </td>
                        <td align="left" valign="top" width="298">
                        <![endif]-->
                                    <div style="display:inline-block; max-width:295px; vertical-align:top; width:100%;">
                                        <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:295px;" role="presentation">
                                            <tr>
                                                <td align="center" valign="top" style="color:#333333; font-family: 'Inter', Arial, sans-serif; font-size: 16px;">

                                                    <h1>Section Two</h1>
                                                    <img src="https://placekitten.com/200/140" border="0" style="border:0; display:block;" alt="a cute kitten">
                                                    <p>
                                                        This is our second section.
                                                    </p>

                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <!--[if true]>
                        </td>
                        </tr>
                        </table>
                        <![endif]-->
                                </td>
                            </tr>
                        </table>
                        <!--[if true]>
                </td>
                </tr>
                </table>
                <![endif]-->


                        <!-- Ghost tables + DIV method:

                        Since tables are only needed for Outlook, you may choose to use ghost tables and divs to code your emails.

                        Stacking columns will require using a media query.

                        Example code can be found from Mark Robbins at Good Email Code: https://www.goodemailcode.com/email-code/columns.html
                -->

                        <!--[if true]>
                    <table role="presentation" width="600" style="all:unset;opacity:0;">
                    <tr>
                    <![endif]-->
                        <!--[if false]></td>
                </tr>
            </table><![endif]-->
            <div style="display:table;width:100%;max-width:600px;">
                <!--[if true]>
                        <td width="50%">
                    <![endif]-->
                <!--[if !true]><!-->
                <div style="display:table-cell;width:50%;color:#333333; font-family: 'Inter', Arial, sans-serif; font-size: 16px;" class="tflex">
                    <!--<![endif]-->
                    <h1>Section One</h1>
                    <img src="https://placekitten.com/200/140" border="0" style="border:0; display:block;" alt="a cute kitten">
                    <p>
                        This is our first section
                    </p>
                    <!--[if !true]><!-->
                </div>
                <!--<![endif]-->
                <!--[if true]>
    </td>
  <![endif]-->
                <!--[if true]>
    <td width="50%">
  <![endif]-->
                <!--[if !true]><!-->
                <div style="display:table-cell;width:50%;color:#333333; font-family: 'Inter', Arial, sans-serif; font-size: 16px;" class="tflex">
                    <!--<![endif]-->
                    <h1>Section Two</h1>
                    <img src="https://placekitten.com/200/140" border="0" style="border:0; display:block;" alt="a cute kitten">
                    <p>
                        This is our second section.
                    </p>
                    <!--[if !true]><!-->
                </div>
                <!--<![endif]-->
                <!--[if true]>
    </td>
  <![endif]-->
            </div>
            <!--[if true]>
  </tr>
</table>
<![endif]-->
            </td>
            </tr>
            </table>
        </div>
    </body>
</html>
	<!DOCTYPE html>
	<!-- We use the HTML5 doctype as it's the most widely supported and our recommended doctype, for more on this visit https://www.emailonacid.com/blog/article/email-development/doctype_-_the_black_sheep_of_html_email_design/

	In our HTML tag we include a language for accessibility purposes and VML namespace declaration, for if we need to add specific Outlook VML code.-->
	<html 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>
	<!-- This Outlook specific code helps alleviate the issues caused by high DPI versions of Outlook. -->
	<!--[if gte mso 9]><xml>
	<o:OfficeDocumentSettings>
	<o:AllowPNG />
	<o:PixelsPerInch>96</o:PixelsPerInch>
	</o:OfficeDocumentSettings>
	</xml><![endif]-->
	<!-- We always want to include a relevant title in our email, for if users open in a browser. -->
	<title>Your Message Subject or Title</title>

	<!-- These two meta tags are extremely important, the first is encoding our characters so we don't have any funky symbols when using special characters
	the second is telling the browser/email client to render the email in the device's native screen size

	Read more: https://www.emailonacid.com/blog/article/email-development/the_importance_of_content-type_character_encoding_in_html_emails/ -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
	<meta name="x-apple-disable-message-reformatting">
	<meta name="color-scheme" content="light dark">
	<meta name="supported-color-schemes" content="light dark">


	<!--Now we'll get into a few basic pieces of CSS we include in every email, for clients that do support CSS in the head -->
	<style type="text/css">
	/* color-scheme and supported-color-schemes enables dark mode control via the dark mode media query */
	:root {
	color-scheme: light dark;
	supported-color-schemes: light dark;
	}

	/* By default we turn off hover effects on links, your design may have it differently */
	a:hover {
	text-decoration: none !important;
	}

	/* This snippet removed random blue links on Apple Devices */
	a[x-apple-data-detectors] {
	color: inherit !important;
	text-decoration: none !important;
	}

	/* This will stop email clients adding random styling to phone numbers */
	a[href^="tel"]:hover {
	text-decoration: none !important;
	}

	/* We want all our links and images to not have hidden borders, so they fit snugly in the design */
	a img {
	border: none;
	}

	/* Since we're using semantic HTML markup, we want to reset our paragraphs and headings to not have margins by default, if the design needs them we'll add them inline */
	p {
	margin: 0;
	padding: 0;
	margin-bottom: 0;
	}


	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
	margin: 0;
	padding: 0;
	margin-bottom: 0;
	}

	/* Force Outlook to use our line-heights as an exact value rather than a minimum */
	table td {
	mso-line-height-rule: exactly;
	}

	/* Collapse borders on tables so there are no gaps in Outlook */
	table {
	border-collapse: collapse;
	}

	/* This snippet removed random blue links on Apple Devices */
	#emailBody #emailWrapper [x-apple-data-detectors] {
	color: inherit !important;
	text-decoration: inherit !important;
	}

	/* This is the most reliable way of utilizing Google Fonts (or other web fonts) in your email code.

	For a guide on how to find the URL of the webfont you want to use in this way, please visit: https://www.emailonacid.com/blog/article/email-development/web-fonts-google-fonts/ */


	/* Here we are including a few basic Media Queries, these CSS rules will only be applied when the device width is 640px or below.

	Feel free to adjust this value as your design permits/requires. */
	@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

	/* Simply setting our container tables to 100% width */
	@media only screen and (max-width:640px) {
	.wrapper {
	width: 100% !important;
	padding: 0 !important;
	}

	/* Here we use this to force our grid sections to expand out and stack on mobile devices */
	.tflex {
	display: block !important;
	width: 100% !important;
	}

	/* We use this if we need to hide elements on mobile */
	.hm {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	padding: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	}
	}
	</style>
	</head>

	<body id="emailBody" class="body" xml:lang="en" style="background:#EFEFEF; margin:0; padding:0; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;">
	<!-- Wrap your entire email in a div. For accessibility purposes, include a role, aria-roledescription, aria-label, lang, and dir attributes. -->
	<div role="article" aria-roledescription="email" aria-label="email name" lang="en" dir="ltr" style="font-size:medium; font-size:max(16px, 1rem)">
	<!-- Hidden Preheader Text.

	This is our preview text that displays in email clients, but we hide it so it doesn't effect our design. -->
	<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;">Get 10% off. Use offer code JUNE10 for 10% off or show this email in-restaurant.</div>

	<!-- This is where we open the email content, we use a few basic resets on the body and add our desired background color. -->

	<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#EFEFEF" class="wrapper" role="presentation">
	<tr>
	<td align="center" valign="top" width="100%">
	<!-- Responsive Grid:

	Below is the example code for a Responsive 2 column section. We're simply using our Media Queries above to tell the email client to replace our 300px wide table cells
	with 100% width, expanding and forcing a 2 column section.

	For more on Hybrid vs Responsive please visit https://www.emailonacid.com/blog/article/email-development/whats-the-difference-between-responsive-mobile-friendly-and/

	-->

	<table width="600" cellpadding="0" cellspacing="0" border="0" class="wrapper" role="presentation">
	<!-- Notice how the tables have role="presentation", this is for accessibility purposes.

	Read more about coding accessible emails: https://www.emailonacid.com/blog/article/email-development/how-to-code-accessible-emails -->

	<tr>
	<td width="300" class="tflex" align="center" valign="top" style="color:#333333; font-family: 'Inter', Arial, sans-serif; font-size: 16px;">

	<!-- Whenever we're adding copy, we're using semantic markup using paragraph and heading tags -->
	<h1>Section One</h1>

	<img src="https://placekitten.com/200/140" border="0" style="border:0; display:block;" alt="a cute kitten">
	<!-- When adding images, we want to make sure we're forcing border:0 and display:block so that there's no white spaces around the images

	It's also crucial for accessibility purposes to include a descriptive alt text. -->

	<p>
	This is our first section
	</p>
	</td>
	<td width="300" class="tflex" align="center" valign="top" style="color:#333333; font-family: 'Inter', Arial, sans-serif; font-size: 16px;">
	<h1>Section Two</h1>

	<img src="https://placekitten.com/200/140" border="0" style="border:0; display:block;" alt="a cute kitten">

	<p>
	This is our second section
	</p>
	</td>
	</tr>
	</table>



	<!-- Hybrid Grid:

	Below is the example code for a Hybrid 2 column section. We use conditional Outlook code to set maximum widths on our table and cells while having them at
	100% width, this ensures that when you view this on a mobile device, the sections will expand out to create a stacking effect.

	For more on Hybrid vs Responsive please visit https://www.emailonacid.com/blog/article/email-development/whats-the-difference-between-responsive-mobile-friendly-and/

	-->

	<!--[if true]>
	<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" role="presentation">
	<tr>
	<td align="center" valign="top" width="600">
	<![endif]-->
	<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" role="presentation">
	<tr>
	<td align="center" valign="top" style="font-size:0;">
	<!--[if true]>
	<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" role="presentation">
	<tr>
	<td align="left" valign="top" width="298">
	<![endif]-->
	<div style="display:inline-block; max-width:298px; vertical-align:top; width:100%;">
	<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:298px;" role="presentation">
	<tr>
	<td align="center" valign="top" style="color:#333333; font-family: 'Inter', Arial, sans-serif; font-size: 16px;">

	<h1>Section One</h1>

	<img src="https://placekitten.com/200/140" border="0" style="border:0; display:block;" alt="a cute kitten">

	<p>
	This is our first section
	</p>

	</td>
	</tr>
	</table>
	</div>
	<!--[if true]>
	</td>
	<td align="left" valign="top" width="298">
	<![endif]-->
	<div style="display:inline-block; max-width:295px; vertical-align:top; width:100%;">
	<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:295px;" role="presentation">
	<tr>
	<td align="center" valign="top" style="color:#333333; font-family: 'Inter', Arial, sans-serif; font-size: 16px;">

	<h1>Section Two</h1>
	<img src="https://placekitten.com/200/140" border="0" style="border:0; display:block;" alt="a cute kitten">
	<p>
	This is our second section.
	</p>

	</td>
	</tr>
	</table>
	</div>
	<!--[if true]>
	</td>
	</tr>
	</table>
	<![endif]-->
	</td>
	</tr>
	</table>
	<!--[if true]>
	</td>
	</tr>
	</table>
	<![endif]-->


	<!-- Ghost tables + DIV method:

	Since tables are only needed for Outlook, you may choose to use ghost tables and divs to code your emails.

	Stacking columns will require using a media query.

	Example code can be found from Mark Robbins at Good Email Code: https://www.goodemailcode.com/email-code/columns.html
	-->

	<!--[if true]>
	<table role="presentation" width="600" style="all:unset;opacity:0;">
	<tr>
	<![endif]-->
	<!--[if false]></td>
	</tr>
	</table><![endif]-->
	<div style="display:table;width:100%;max-width:600px;">
	<!--[if true]>
	<td width="50%">
	<![endif]-->
	<!--[if !true]><!-->
	<div style="display:table-cell;width:50%;color:#333333; font-family: 'Inter', Arial, sans-serif; font-size: 16px;" class="tflex">
	<!--<![endif]-->
	<h1>Section One</h1>
	<img src="https://placekitten.com/200/140" border="0" style="border:0; display:block;" alt="a cute kitten">
	<p>
	This is our first section
	</p>
	<!--[if !true]><!-->
	</div>
	<!--<![endif]-->
	<!--[if true]>
	</td>
	<![endif]-->
	<!--[if true]>
	<td width="50%">
	<![endif]-->
	<!--[if !true]><!-->
	<div style="display:table-cell;width:50%;color:#333333; font-family: 'Inter', Arial, sans-serif; font-size: 16px;" class="tflex">
	<!--<![endif]-->
	<h1>Section Two</h1>
	<img src="https://placekitten.com/200/140" border="0" style="border:0; display:block;" alt="a cute kitten">
	<p>
	This is our second section.
	</p>
	<!--[if !true]><!-->
	</div>
	<!--<![endif]-->
	<!--[if true]>
	</td>
	<![endif]-->
	</div>
	<!--[if true]>
	</tr>
	</table>
	<![endif]-->
	</td>
	</tr>
	</table>
	</div>
	</body>
	</html>