Anonymous Anonymous - 4 months ago
302 0

Code for birthday card in dotmailer

HTML

Birthday Card

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>$title</title>
 </head>
<body><!-- Easy Editor -->
<style type="text/css" id="editor_required_block">body,html{Margin:0!important;padding:0!important;width:100%!important}
*{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
div[style*="margin: 16px 0"]{margin:0!important}
table,td{mso-table-lspace:0!important;mso-table-rspace:0!important}
table{border-spacing:0!important;border-collapse:collapse!important;table-layout:auto!important}
img{-ms-interpolation-mode:bicubic}
.yshortcuts a{border-bottom:none!important}
.mobile-link--footer a,a[x-apple-data-detectors]{color:inherit!important;text-decoration:underline!important}
.email-width,.row{Margin:0 auto!important}
@media only screen and (min-device-width:768px) and (max-device-width:1024px){.stack-column{Margin:0 -2px}
}
@media screen and (max-width:480px){.fluid,.fluid-centered{Margin-left:auto!important;Margin-right:auto!important}
.fluid,.fluid-centered,.row .stack-column{width:100%!important;max-width:100%!important}
.break-word{word-break:break-word}
.fluid,.fluid-centered{height:auto!important}
.row .stack-column{display:block!important;direction:ltr!important;min-width:100%!important}
}</style>
<style type="text/css" id="editor_required_inline" ee-render="inline">.visually-hidden{display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all;font-family:sans-serif}
.break-word,.no-stack-column,.stack-column,.stack-column-row{display:inline-block}
.banner-img{border:0;width:100%;max-width:100%;height:auto;vertical-align:bottom}
.background-image-txt{background-position:center center!important;background-size:cover!important}
td.row-container{padding:0;text-align:center;height:100%;vertical-align:top;width:100%}
.stack-column{width:600px;vertical-align:top}
.no-stack-column{vertical-align:top;float:left}
.col-font-reset{font-size:14px;text-align:left}
.break-word{word-wrap:break-word!important;word-break:break-word;word-break:break-all!important}
.text-center{text-align:center}
.margin-0-auto{margin:0 auto}
.border-0{border:0}
.border-collapse{border-collapse:collapse}
.width-100{width:100%}
.margin-auto{Margin:auto}
.mso-height-rule-exactly{mso-height-rule:exactly}
.f-size-0{font-size:0}
.ee_externaldccontent{font-size:initial}
.table-layout-fixed{table-layout:fixed!important}
ul li{margin:0}</style>
<!--[if mso]>
       <style>
           * {font-family: sans-serif !important;}
           .button-wrapper { padding: 12px 16px 12px 16px; }
       </style>
   <![endif]--> 
<!--[if gte mso 9]>
   <style type="text/css">
       .stack-column{
           width:100%!important;
       }
       .no-stack-column{
           width:100%!important;
       }
   </style>
   <![endif]--> 
<!--[if mso]>
       <style>
       .no-stack-column{
           width:100%!important;
       }
       .stack-column{
          width:100%!important;
       }
       </style>
   <![endif]--> 
<!--[if mso]>
       <style>
       .banner{
           width:900 !important;
       }
       </style>
   <![endif]-->
<style type="text/css" id="editor_required_emailwidth" ee-render="inline">.element-bord,.row-inner{border-width:0}
.email-full-width{width:100%}
.email-body{min-width:100%}
.email-width,.row{max-width:660px}
.row.one-cols{max-width:auto}
.col-inner,.row .row .row-inner,.sub-sub-col-inner{border-width:0;padding:0}
.element-pad{padding:10px}
.element-pad.root-element-pad{padding:10px 20px}
.row-inner{padding:0 10px}
.banner-padding,.bg-img-txt-text,.hero-image-padding{padding:0}
.one-cols>tbody>tr>td>.stack-column-width{width:100%;max-width:100%;min-width:100%}
.root.one-cols>tbody>tr>td>.stack-column-width{width:600px}
.one-cols>tbody>tr>td>.no-stack-column-width{min-width:100%;max-width:100%;width:100%}
.two-cols>tbody>tr>td>.stack-column-width{max-width:50%;min-width:320px}
.two-cols>tbody>tr>td>.no-stack-column-width{min-width:50%;max-width:320px;width:50%}
.three-cols>tbody>tr>td>.stack-column-width{max-width:33.333%;min-width:213.33px}
.three-cols>tbody>tr>td>.no-stack-column-width{min-width:33.333%;max-width:213.33px;width:33.333%}
.four-cols>tbody>tr>td>.stack-column-width{max-width:25%;min-width:160px}
.four-cols>tbody>tr>td>.no-stack-column-width{min-width:25%;max-width:160px;width:25%}
.five-cols>tbody>tr>td>.stack-column-width{max-width:20%;min-width:128px}
.five-cols>tbody>tr>td>.no-stack-column-width{min-width:20%;max-width:128px;width:20%}
.six-cols>tbody>tr>td>.stack-column-width{max-width:16.667%;min-width:106.67px}
.six-cols>tbody>tr>td>.no-stack-column-width{min-width:16.667%;max-width:106.67px;width:16.667%}
.seven-cols>tbody>tr>td>.stack-column-width{max-width:14.286%;min-width:91.43px}
.seven-cols>tbody>tr>td>.no-stack-column-width{min-width:14.286%;max-width:91.43px;width:14.286%}
.eight-cols>tbody>tr>td>.stack-column-width{max-width:12.5%;min-width:80px}
.eight-cols>tbody>tr>td>.no-stack-column-width{min-width:12.5%;max-width:80px;width:12.5%}
.background-image-txt-mso{width:680px;height:175px;background-position:center center!important}
.bg-img-txt-width{max-width:500px}
.col-font-reset,.ee_element{min-width:100%}
.button-wrapper{min-width:auto}</style>
<style ee-render="block"><!--
.ExternalClass p{ MARGIN: 0px; }
.button-td:hover .button-a { transition: all 100ms ease-in; background: rgba(255, 255, 255, 0.2) !important; }

--></style>
<style type="text/css" ee-render="inline" ee-base="">
.ExternalClass p { MARGIN: 0px; }
.ee_editable p, .ee_editable li, .ee_editable td, .ee_editable a, .ee_editable font { word-wrap: break-word; word-break: break-word; }
.ee_element .button-container.button-left { text-align: left; }
.ee_element .button-container.button-left .button-wrapper { float: left; }
.ee_element .button-container.button-right { text-align: right; }
.ee_element .button-container.button-right .button-wrapper { float: right; }
.ee_element .button-container.button-center { text-align: center; }
.ee_element .button-container.button-center .button-wrapper { float: none; margin: 0 auto; }
.ee_element .button-container.button-full-width { text-align: center; }
.ee_element .button-container.button-full-width .button-wrapper { width: 100%; display: table; }
.button-wrapper { text-align: center; display: inline-block; }
.button-td .button-a, .button-td .ee_editable.button-a {color: #fff; margin-bottom: 0; }
.button-td .button-a a, .button-td .ee_editable.button-a a {color:inherit; text-align: inherit; display: block; height: 100%; }
.button-td .button-a a font, .button-td .ee_editable.button-a a font {color:inherit; word-break: break-word; word-wrap: break-word; }
-->
</style><style ee-styles="" ee-render="inline"><!--
/* Auto-generated style block.  Only edit if you know what you are doing! */
.base-styles { color: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 14px; line-height: 160%; Margin: 0px; }
body, td { font-family: Arial, sans-serif; }
.ee_editable, .ee_editable td { color: rgb(51, 51, 51); font-size: 14px; line-height: 160%; }
.ee_editable p { Margin: 0px; }
.ee_editable .h1, .h1.ee_editable { font-size: 24px; font-weight: bold; color: rgb(51, 51, 51); line-height: 140%; }
.ee_editable .h2, .h2.ee_editable { font-size: 22px; font-weight: normal; color: rgb(51, 51, 51); line-height: 140%; }
.ee_editable .h3, .h3.ee_editable { font-size: 18px; font-weight: normal; color: rgb(51, 51, 51); line-height: 160%; }
.ee_editable .h4, .h4.ee_editable { font-size: 16px; font-weight: bold; }
.ee_editable p.disclaimer { font-size: 14px; color: #3a3a3a; line-height: 160%; text-align: left; }
.button-td.Default.definition { color: rgb(255, 255, 255); font-family: Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: bold; line-height: 140%; text-align: center; border: 0px solid rgb(0, 0, 0); border-radius: 3px; padding: 8px 15px; align-items: flex-start; background: rgb(51, 51, 51); text-decoration: none; }
.button-container { text-align: left; }
.button-container .button-wrapper { float: left; }
.button-container  .button-td { border-radius: 3px; background: rgb(51, 51, 51); }
.button-container  .button-td .button-a, .button-container .ee_editable.button-a { color: rgb(255, 255, 255); line-height: 140%; text-align: center; }
.button-container  .button-td .button-a a, .button-container .ee_editable.button-a a { color: rgb(255, 255, 255); font-family: Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: bold; line-height: 140%; text-align: center; border: 0px solid rgb(0, 0, 0); border-radius: 3px; padding: 8px 15px; text-decoration: none; }

--></style>


<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" class="ee_resizable" style="table-layout: auto;" ee-show-font-styles="" ee-template-version="2.3">
  <tbody>
    <tr>
      <td valign="top"><center class="width-100">
          
          <!--  FULL WIDTH CONTENT: START --> 
          
          <!-- EMAIL BODY : START -->
          <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" class="email-body" style="background-color: #ffffff;table-layout: auto;">
            <tbody>
              <tr>
                <td class="email-full-width margin-0-auto"><!--[if (gte mso 9)|(IE)]>
                <table cellspacing="0" cellpadding="0" border="0" style="width:660px;" width="660" align="center">
                <tr>
                <td>
                <![endif]-->
                  
                  <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" class="email-width" style="table-layout: auto;">
                    <tbody>
                      <tr>
                        <td><!-- ROW CONTAINER : BEGIN -->
                          
                          <table cellpadding="0" cellspacing="0" border="0" valign="top" width="100%" style="table-layout: auto;">
                            <tbody>
                              <tr>
                                <td class="row-container"><!--[if mso]>
                                <table border="0" cellspacing="0" cellpadding="0" align="center" style="width:660px;" width="660">
                                <tr>
                                <td align="center" valign="top" style="width:660px;" width="660">
                                <![endif]--> 
                                  <!-- ROWS : START -->
                                  
                                  <div class="ee_dropzone">
                                  </div>
                                  
                                  <!-- ROWS : END --> 
                                  <!--[if mso]>
                                </td>
                                </tr>
                                </table>
                                <![endif]--></td>
                              </tr>
                            </tbody>
                          </table>
                          
                          <!-- ROW CONTAINER : END --></td>
                      </tr>
                    </tbody>
                  </table>
                  
                  <!--[if (gte mso 9)|(IE)]>
                </td>
                </tr>
                </table>
                <![endif]--></td>
              </tr>
            </tbody>
          </table>
          <!-- EMAIL BODY: END --> 
          
          <!--- EMAIL BODY : START -->
          <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" class="email-body" style="background-color: #ffffff;table-layout: auto;">
            <tbody>
              <tr>
                <td class="email-full-width margin-0-auto"><!--[if (gte mso 9)|(IE)]>
                <table cellspacing="0" cellpadding="0" border="0" style="width:660px;" width="660" align="center">
                <tr>
                <td>
                <![endif]-->
                  
                  <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" class="email-width" style="table-layout: auto;">
                    <tbody>
                      <tr>
                        <td><!-- ROW CONTAINER : BEGIN -->
                          
                          <table cellpadding="0" cellspacing="0" border="0" valign="top" width="100%" style="table-layout: auto;">
                            <tbody>
                              <tr>
                                <td class="row-container"><!--[if mso]>
                                <table border="0" cellspacing="0" cellpadding="0" align="center" style="width:660px;" width="660">
                                <tr>
                                <td align="center" valign="top" style="width:660px;" width="660">
                                <![endif]--> 
                                  <!--- ROWS : START -->
                                  
                                  <div class="ee_dropzone"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="ee_element ee_spacer" ee-type="element" style="width: 660px;table-layout: auto;"><tbody><tr><td style="font-size: 1px;" class=""><img src="https://i.emlfiles.com/cmpimg/t/s.gif" style="display: block; height: 45px;" alt="" width="10" height="45" class=""></td></tr></tbody></table><table width="100%" border="0" cellspacing="0" cellpadding="0" class="ee_columns ee_element" ee-type="container" data-title="Columns" style="width: 660px; position: relative;"><tbody><tr><td width="48%" valign="top" class="ee_dropzone ved-scaled-cols" style="width: 313px;" align="left"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="ee_element" ee-type="element" style="width: 313px;">
			            <tbody><tr>
                             <td><img border="0" src="https://i.emlfiles.com/cmpimg/8/4/8/3/3/1/files/797686_dove.png" class="ee_editable          ee_pnggif_image           vedpw313" style="min-height: auto; width: 313px; display: block;" width="313"></td>
			            </tr>
                    </tbody></table></td><td width="8" valign="top" class="eegap"><img src="https://i.emlfiles.com/cmpimg/t/s.gif" style="display:block" height="10" width="8" class=""></td><td width="52%" valign="top" class="ee_dropzone ved-scaled-cols" style="width: 339px;" align="left"><table class="ee_element ee_borders" cellpadding="0" cellspacing="0" style="table-layout: auto;" width="100%"><tbody><tr><td class="ee_pad eeb_width" style="padding: 6px 10px; width: 319px;"><div class="ee_editable eev_element" style="width: 319px;" ee-type="element"><p style="text-align: center; font-size: 26px; color: rgb(0, 180, 170); margin: 0px;" class="">Dear Tea</p><p style="text-align: center; font-size: 26px; color: rgb(0, 180, 170);" class=""><br></p><p style="font-size: 16px; line-height: 150%; color: rgb(0, 60, 90); margin: 0px;" class="">Another year has passed and we are happy that you are with us. We wish you a happy birthday and hope that this year will be filled with happy moments and successes!</p><p style="font-size: 16px; line-height: 150%; color: rgb(0, 60, 90);" class=""><br></p><p style="font-size: 16px; line-height: 150%; color: rgb(0, 60, 90); margin: 0px;" class="">To celebrate, we made a donation to XXX charity in your name. By caring together, we can make big things happen!</p><p style="font-size: 16px; line-height: 150%; color: rgb(0, 60, 90);" class=""><br></p><p style="font-size: 16px; line-height: 150%; color: rgb(0, 60, 90); margin: 0px;" class="">Your Bigbank</p></div></td></tr></tbody></table></td></tr></tbody></table><table width="100%" border="0" cellspacing="0" cellpadding="0" class="ee_element ee_spacer" ee-type="element" style="width: 660px;table-layout: auto;"><tbody><tr><td style="font-size: 1px;" class=""><img src="https://i.emlfiles.com/cmpimg/t/s.gif" style="display: block; height: 45px;" alt="" width="10" height="45" class=""></td></tr></tbody></table><table cellpadding="0" cellspacing="0" class="ee_element ee_borders" ee-type="element" width="100%" style="width: 660px;table-layout: auto;"><tbody><tr><td valign="top" style="padding-top: 6px;padding-right: 6px;padding-bottom: 6px;padding-left: 6px;" class="ee_pad eeb_width"><div class="ee_editable eev_element" style="width: 648px;" ee-type="element"><p><a href="http://$UNSUB$" style="text-decoration: none; color: rgb(175, 175, 175);" class=""><font style="font-size: 9px;">unsubscribe</font></a></p></div></td></tr></tbody></table>
                                    
                                  </div>
                                  
                                  <!-- ROWS : END --> 
                                  <!--[if mso]>
                                </td>
                                </tr>
                                </table>
                                <![endif]--></td>
                              </tr>
                            </tbody>
                          </table>
                          
                          <!-- ROW CONTAINER : END --></td>
                      </tr>
                    </tbody>
                  </table>
                  
                  <!--[if (gte mso 9)|(IE)]>
                </td>
                </tr>
                </table>
                <![endif]--></td>
              </tr>
            </tbody>
          </table>
          <!-- EMAIL BODY: END --> 
          
          <!--  FULL WIDTH CONTENT: END -->
          
        </center></td>
    </tr>
  </tbody>
</table></body></html>