HTML-Newsletter-Template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="">
   <head>
      <meta content="width=device-width" name="viewport" />
      <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
      <title>Women NC</title>
      <style type="text/css">@media only screen and (max-width: 600px) {
         a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important;}
         div[class="column"] { width: auto!important; float:none!important;}
         table.social div[class="column"] {
         width:auto!important;
         }
         }
      </style>
   </head>
   <body bgcolor="#FFFFFF" leftmargin="0" marginheight="0" marginwidth="0" style="font-family: &quot;Helvetica Neue&quot;, Helvetica, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; text-size-adjust: none; height: auto; width: 100% !important; min-height: auto;" topmargin="0">
      <p> </p>
      <table bgcolor="#aa8cc5" class="head-wrap" style="margin: 0;padding: 0;width: 100%;">
         <tbody>
            <tr style="margin: 0;padding: 0;">
               <td style="margin: 0;padding: 0;"> </td>
               <td align="" class="header container" style="margin: 0 auto!important;padding: 0;display: block!important;max-width: 600px!important;clear: both!important;">
                  <div class="content" style="margin: 0 auto;padding: 15px;max-width: 600px;display: block;">
                     <table bgcolor="#aa8cc5" style="margin: 0;padding: 0;width: 100%;">
                        <tbody>
                           <tr style="margin: 0;padding: 0;">
                              <td style="margin: 0;padding: 0;"><img src="http://www.womennc.org/wp/wp-content/uploads/2015/08/Logo.png" style="margin: 0;padding: 0;max-width: 100%;" /></td>
                              <td align="right" style="margin: 0;padding: 0;">
                                 <h6 class="collapse" style="margin: 0!important;padding: 0;font-family: &quot;HelveticaNeue-Light&quot;, &quot;Helvetica Neue Light&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Lucida Grande&quot;, sans-serif;line-height: 1.1;margin-bottom: 15px;color: #282828;font-weight: 900;font-size: 14px;text-transform: uppercase;">[PuT DATE HERE] Newsletter</h6>
                              </td>
                           </tr>
                        </tbody>
                     </table>
                  </div>
               </td>
               <td style="margin: 0;padding: 0;"> </td>
            </tr>
         </tbody>
      </table>
      <table bgcolor="" class="body-wrap" style="margin: 0;padding: 0;width: 100%;">
         <tbody>
            <tr style="margin: 0;padding: 0;">
               <td style="margin: 0;padding: 0;"> </td>
               <td align="" bgcolor="#ececec" class="container" style="margin: 0 auto!important;padding: 0;display: block!important;max-width: 600px!important;clear: both!important;">
                  <div class="content" style="margin: 0 auto;padding: 15px;max-width: 600px;display: block;">
                     <table style="margin: 0;padding: 0;width: 100%;">
                        <tbody>
                           <tr style="margin: 0;padding: 0;">
                              <td style="margin: 0;padding: 0;">
                                 <h1 style="margin: 0;padding: 0;font-family: &quot;HelveticaNeue-Light&quot;, &quot;Helvetica Neue Light&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Lucida Grande&quot;, sans-serif;line-height: 1.1;margin-bottom: 15px;color: #000;font-weight: 200;font-size: 44px;">Big Headline</h1>
                                 <p class="lead" style="margin: 0;padding: 0;margin-bottom: 10px;font-weight: normal;font-size: 17px;line-height: 1.6;">Second heading, maybe a summary or an important part of the story</p>
                                 <p style="margin: 0;padding: 0;margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.6;"><img height="197" src="http://www.womennc.org/wp/wp-content/uploads/2016/08/FiveFellows_2016.jpg" width="536" /></p>
                                 <p style="margin: 0px 0px 10px; padding: 0px; font-weight: normal;"><font color="#222222" face="arial, sans-serif"><span style="font-size: 12.8px; line-height: 20.48px;">Place content here. To change the photo, replace the URL (in this case,&nbsp;</span></font><span style="color: rgb(34, 136, 17); font-family: monospace; font-size: 13.3333px;">http://www.womennc.org/wp/wp-content/uploads/2016/08/FiveFellows_2016.jpg</span><span style="font-size: 12.8px; line-height: 20.48px; color: rgb(34, 34, 34); font-family: arial, sans-serif;">) with the URL of the photo you want to share. If you want to change the size, change the number after height= and/or width=. The easiest way to make sure the photo isn't stretched funny is to only change one dimension and delete the other. For example, if you put "width=400" the height will be adjusted to be proportional to the new width.&nbsp;</span></p>
                              </td>
                           </tr>
                        </tbody>
                     </table>
                  </div>
                  <div class="content" style="margin: 0 auto;padding: 15px;max-width: 600px;display: block;">
                     <table bgcolor="" style="margin: 0;padding: 0;width: 100%;">
                        <tbody>
                           <tr style="margin: 0;padding: 0;">
                              <td class="small" style="vertical-align: top;padding-right: 10px;margin: 0;padding: 0;" width="20%"><img src="http://www.nwhp.org/wp-content/uploads/Womens-Equality-Day-180x300.jpg" style="margin: 0;padding: 0;max-width: 100%;" /></td>
                              <td style="margin: 0;padding: 0;">
                                 <h4 style="margin: 0;padding: 0;font-family: &quot;HelveticaNeue-Light&quot;, &quot;Helvetica Neue Light&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Lucida Grande&quot;, sans-serif;line-height: 1.1;margin-bottom: 15px;color: #000;font-weight: 500;font-size: 23px;">Second Headline</h4>
                                 <h6><em>Byline</em></h6>
                                 <p style="margin: 0;padding: 0;margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.6;">The general rule of thumb for working with unfamiliar code is to find what you want to change, and search for it in the code - for instance, in this box, if you find "second headline", you can then replace it with your real headline. To change a <a href="http://www.womennc.org">link</a>, change the URL after &lt;a href=, and to change the words you're hyperlinking, change the text after &gt;link&lt;/a&gt;. Follow the same instructions for any new links.</p>
                              </td>
                           </tr>
                        </tbody>
                     </table>
                  </div>
                  <div class="content" style="margin: 0 auto;padding: 15px;max-width: 600px;display: block;">
                     <table bgcolor="" style="margin: 0;padding: 0;width: 100%;">
                        <tbody>
                           <tr style="margin: 0;padding: 0;">
                              <td class="small" style="vertical-align: top;padding-right: 10px;margin: 0;padding: 0;" width="20%"><img height="113" src="http://www.womennc.org/wp/wp-content/uploads/2015/09/IMG_6650.jpg" width="150" /></td>
                              <td style="margin: 0;padding: 0;">
                                 <h4 style="margin: 0;padding: 0;font-family: &quot;HelveticaNeue-Light&quot;, &quot;Helvetica Neue Light&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Lucida Grande&quot;, sans-serif;line-height: 1.1;margin-bottom: 15px;color: #000;font-weight: 500;font-size: 23px;">Third Headline</h4>
                                 <p style="margin: 0;padding: 0;margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.6;">You can add as many headlines as you want, simply copy and paste from previous headlines (as long as its not the "Big Headline"). Just make sure that the section of code you're copying starts with &lt;div&gt; and ends with &lt;/div&gt;. Same rule goes for deleting extraneous boxes. Make sure not to delete any of the "boilerplate" code for the newsletter -- the heading with the logo, the information about Cities for CEDAW, the info about the CSW scholarship, and the contact information and donate button.&nbsp;</p>
                              </td>
                           </tr>
                        </tbody>
                     </table>
                  </div>
                  <div class="content" style="margin: 0 auto;padding: 15px;max-width: 600px;display: block;">
                     <table bgcolor="" style="margin: 0;padding: 0;width: 100%;">
                        <tbody>
                           <tr style="margin: 0;padding: 0;">
                              <td style="margin: 0;padding: 0;">
                                 <p class="callout" style="margin: 0px 0px 15px; padding: 15px; font-size: 14px; line-height: 1.6; background-color: rgb(236, 248, 255);"><b>This box</b><span style="font-weight: normal;">&nbsp;can be added to all newsletters with information about a specific thing your organization works on so that people can have a summary and aren't confused about your goals. Add a link with even more information in the "learn more" link. If you need more of these boxes you can copy and paste the whole relevant code above or below this one.&nbsp;<a href="http://www.womennc.org/about/advocacy/cedaw/" style="margin: 0;padding: 0;color: #2BA6CB;font-weight: bold;">Learn more »</a></span></p>
                              </td>
                           </tr>
                        </tbody>
                     </table>
                  </div>
                  <div class="content" style="margin: 0 auto;padding: 15px;max-width: 600px;display: block;">
                     <table bgcolor="" style="margin: 0;padding: 0;width: 100%;">
                        <tbody>
                           <tr style="margin: 0;padding: 0;">
                              <td style="margin: 0;padding: 0;">
                                 <p class="callout" style="margin: 0px 0px 15px; padding: 15px; font-size: 14px; line-height: 1.6; background-color: rgb(236, 248, 255);"><b style="font-size: 14px;">This&nbsp;</b>is a second box.&nbsp;<a href="http://www.womennc.org/about/advocacy/cedaw/" style="font-weight: bold; margin: 0px; padding: 0px; color: rgb(43, 166, 203);">Learn more »</a></p>
                              </td>
                           </tr>
                        </tbody>
                     </table>
                  </div>
                  <div class="content" style="margin: 0 auto;padding: 15px;max-width: 600px;display: block;">
                     <table bgcolor="" style="margin: 0;padding: 0;width: 100%;">
                        <tbody>
                           <tr style="margin: 0;padding: 0;">
                              <td style="margin: 0;padding: 0;">
                                 <table bgcolor="" class="social" style="margin: 0;padding: 0;background-color: #ebebeb;width: 100%;" width="100%">
                                    <tbody>
                                       <tr style="margin: 0;padding: 0;">
                                          <td style="margin: 0;padding: 0;">
                                             <div class="column" style="margin: 0;padding: 0;width: 280px;float: left;min-width: 279px;">
                                                <table align="left" bgcolor="" cellpadding="" style="margin: 0;padding: 0;width: 100%;">
                                                   <tbody>
                                                      <tr style="margin: 0;padding: 0;">
                                                         <td style="margin: 0;padding: 15px;">
                                                            <h5 style="margin: 0;padding: 0;font-family: &quot;HelveticaNeue-Light&quot;, &quot;Helvetica Neue Light&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Lucida Grande&quot;, sans-serif;line-height: 1.1;margin-bottom: 15px;color: #000;font-weight: 900;font-size: 17px;">Connect with Us:</h5>
                                                            <p style="margin: 0;padding: 0;margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.6;"><a class="soc-btn fb" href="https://www.facebook.com/WomenNC/" style="margin: 0;padding: 3px 7px;color: #FFF;font-size: 12px;margin-bottom: 10px;text-decoration: none;font-weight: bold;display: block;text-align: center;background-color: #3B5998!important;">Facebook</a> <a class="soc-btn tw" href="https://twitter.com/WomenNC" style="margin: 0;padding: 3px 7px;color: #FFF;font-size: 12px;margin-bottom: 10px;text-decoration: none;font-weight: bold;display: block;text-align: center;background-color: #1daced!important;">Twitter</a></p>
                                                         </td>
                                                      </tr>
                                                   </tbody>
                                                </table>
                                             </div>
                                             <div class="column" style="margin: 0;padding: 0;width: 280px;float: left;min-width: 279px;">
                                                <table align="left" bgcolor="" cellpadding="" style="margin: 0;padding: 0;width: 100%;">
                                                   <tbody>
                                                      <tr style="margin: 0;padding: 0;">
                                                         <td style="margin: 0;padding: 15px;">
                                                            <h5 style="margin: 0;padding: 0;font-family: &quot;HelveticaNeue-Light&quot;, &quot;Helvetica Neue Light&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Lucida Grande&quot;, sans-serif;line-height: 1.1;margin-bottom: 15px;color: #000;font-weight: 900;font-size: 17px;">Contact Info:</h5>
                                                            <p style="margin: 0;padding: 0;margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.6;"><strong style="margin: 0;padding: 0;">WomenNC</strong><br style="margin: 0;padding: 0;" />
                                                               <strong style="margin: 0;padding: 0;">P.O. Box 3021</strong><br style="margin: 0;padding: 0;" />
                                                               <strong style="margin: 0;padding: 0;">Cary, NC 27519-3021</strong><br style="margin: 0;padding: 0;" />
                                                               <strong style="margin: 0;padding: 0;"><a href="mailto:info@womennc.org" style="margin: 0;padding: 0;color: #2BA6CB;">info@womennc.org</a></strong>
                                                            </p>
                                                            <a class="btn pp" href="http://www.womennc.org/donate/" style="margin: 0;padding: 10px 16px;color: #FFF;text-decoration: none;background-color: #0070ba!important;font-weight: bold;margin-right: 10px;text-align: center;cursor: pointer;display: inline-block;">Donate</a>
                                                         </td>
                                                      </tr>
                                                   </tbody>
                                                </table>
                                             </div>
                                             <div class="clear" style="margin: 0;padding: 0;display: block;clear: both;"> </div>
                                          </td>
                                       </tr>
                                    </tbody>
                                 </table>
                              </td>
                           </tr>
                        </tbody>
                     </table>
                  </div>
               </td>
               <td style="margin: 0;padding: 0;"> </td>
            </tr>
         </tbody>
      </table>
      <table class="footer-wrap" style="margin: 0;padding: 0;width: 100%;clear: both!important;">
         <tbody>
            <tr style="margin: 0;padding: 0;">
               <td style="margin: 0;padding: 0;"> </td>
               <td style="margin: 0;padding: 0;"> </td>
            </tr>
         </tbody>
      </table>
      <p> </p>
   </body>
</html>