API tools faq
paste
Guest User

html email boilerplate

a guest
Apr 23rd, 2013
410
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.52 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  6.     <title>Wood Newsletter</title>
  7.     <style type="text/css">
  8.         /* Based on The MailChimp Reset INLINE: Yes. */  
  9.         /* Client-specific Styles */
  10.         #outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
  11.         body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
  12.         /* Prevent Webkit and Windows Mobile platforms from changing default font sizes.*/
  13.         .ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */  
  14.         .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
  15.         /* Forces Hotmail to display normal line spacing.  More on that: http://www.emailonacid.com/forum/viewthread/43/ */
  16.         #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
  17.         /* End reset */
  18.  
  19.         /* Some sensible defaults for images
  20.         Bring inline: Yes. */
  21.         img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
  22.         a img {border:none;}
  23.         .image_fix {display:block;}
  24.  
  25.         /* Yahoo paragraph fix
  26.         Bring inline: Yes. */
  27.         p {margin: 1em 0;}
  28.  
  29.         /* Hotmail header color reset
  30.         Bring inline: Yes. */
  31.         h1, h2, h3, h4, h5, h6 {color: black !important;}
  32.  
  33.         h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: blue !important;}
  34.  
  35.         h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active {
  36.         color: red !important; /* Preferably not the same color as the normal header link color.  There is limited support for psuedo classes in email clients, this was added just for good measure. */
  37.         }
  38.  
  39.         h1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
  40.         color: purple !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
  41.         }
  42.  
  43.         /* Outlook 07, 10 Padding issue fix
  44.         Bring inline: No.*/
  45.         table td {border-collapse: collapse;}
  46.  
  47.         /* Remove spacing around Outlook 07, 10 tables
  48.         Bring inline: Yes */
  49.         table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
  50.  
  51.         /* Styling your links has become much simpler with the new Yahoo.  In fact, it falls in line with the main credo of styling in email and make sure to bring your styles inline.  Your link colors will be uniform across clients when brought inline.
  52.         Bring inline: Yes. */
  53.         a {color: #333; text-decoration: none}
  54.  
  55.  
  56.         /***************************************************
  57.         ****************************************************
  58.         MOBILE TARGETING
  59.         ****************************************************
  60.         ***************************************************/
  61.         @media only screen and (max-device-width: 480px) {
  62.             /* Part one of controlling phone number linking for mobile. */
  63.             a[href^="tel"], a[href^="sms"] {
  64.                         text-decoration: none;
  65.                         color: blue; /* or whatever your want */
  66.                         pointer-events: none;
  67.                         cursor: default;
  68.                     }
  69.  
  70.             .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
  71.                         text-decoration: default;
  72.                         color: orange !important;
  73.                         pointer-events: auto;
  74.                         cursor: default;
  75.                     }
  76.  
  77.         }
  78.  
  79.         /* More Specific Targeting */
  80.  
  81.         @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  82.         /* You guessed it, ipad (tablets, smaller screens, etc) */
  83.             /* repeating for the ipad */
  84.             a[href^="tel"], a[href^="sms"] {
  85.                         text-decoration: none;
  86.                         color: blue; /* or whatever your want */
  87.                         pointer-events: none;
  88.                         cursor: default;
  89.                     }
  90.  
  91.             .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
  92.                         text-decoration: default;
  93.                         color: orange !important;
  94.                         pointer-events: auto;
  95.                         cursor: default;
  96.                     }
  97.         }
  98.  
  99.         @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  100.         /* Put your iPhone 4g styles in here */
  101.         }
  102.  
  103.         /* Android targeting */
  104.         @media only screen and (-webkit-device-pixel-ratio:.75){
  105.         /* Put CSS for low density (ldpi) Android layouts in here */
  106.         }
  107.         @media only screen and (-webkit-device-pixel-ratio:1){
  108.         /* Put CSS for medium density (mdpi) Android layouts in here */
  109.         }
  110.         @media only screen and (-webkit-device-pixel-ratio:1.5){
  111.         /* Put CSS for high density (hdpi) Android layouts in here */
  112.         }
  113.         /* end Android targeting */
  114.  
  115.     </style>
  116.  
  117.     <!-- Targeting Windows Mobile -->
  118.     <!--[if IEMobile 7]>
  119.     <style type="text/css">
  120.    
  121.     </style>
  122.     <![endif]-->  
  123.  
  124.     <!-- ***********************************************
  125.     ****************************************************
  126.     END MOBILE TARGETING
  127.     ****************************************************
  128.     ************************************************ -->
  129.  
  130.     <!--[if gte mso 9]>
  131.         <style>
  132.         /* Target Outlook 2007 and 2010 */
  133.         </style>
  134.     <![endif]-->
  135. </head>
  136. <body>
  137. <!-- Wrapper/Container Table: Use a wrapper table to control the width and the background color consistently of your email. Use this approach instead of setting attributes on the body tag. -->
  138. <table cellpadding="0" cellspacing="0" border="0" id="backgroundTable" bgcolor="#edf4f6" width="100%">
  139.     <tr>
  140.         <td valign="top">
  141.         <!-- Tables are the most common way to format your email consistently. Set your table widths inside cells and in most cases reset cellpadding, cellspacing, and border to zero. Use nested tables as a way to space effectively in your message. -->
  142.         <table cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#edf4f6" style="font-family:calibri;font-size:13px;" width="600">
  143.             <tr>
  144.                 <td width="600" colspan="3" valign="middle" height="110"><img id="Image-Maps_8201304231223086" src="http://atlanticlink.eu/newsletter/graphic/menu2.png" usemap="#Image-Maps_8201304231223086" border="0" width="600" height="75" alt="menu" title="menu" />
  145. <map id="_Image-Maps_8201304231223086" name="Image-Maps_8201304231223086">
  146. <area shape="rect" coords="155,47,205,70" href="http://atlanticlink.eu/flooring-products/lea-products" alt="" title=""    />
  147. <area shape="rect" coords="213,47,263,70" href="http://atlanticlink.eu/flooring-products/crespano-parquet" alt="" title=""    />
  148. <area shape="rect" coords="273,47,323,70" href="http://atlanticlink.eu/specialty-products/onix" alt="" title=""    />
  149. <area shape="rect" coords="448,47,498,70" href="http://atlanticlink.eu/flooring-products/odyssey-and-travertino-toscano" alt="" title=""    />
  150. <area shape="rect" coords="332,47,382,70" href="http://atlanticlink.eu/specialty-products/palagio-usa" alt="" title=""    />
  151. <area shape="rect" coords="390,47,440,70" href="http://atlanticlink.eu/flooring-products/il-ferrone" alt="" title=""    />
  152. <area shape="rect" coords="507,47,557,70" href="http://atlanticlink.eu/specialty-products/fila" alt="" title=""    />
  153. <area shape="rect" coords="598,73,600,75" href="http://www.image-maps.com/index.php?aff=mapped_users_8201304231223086" alt="Image Map" title="Image Map" />
  154. </map></td>
  155.            
  156.             </tr>
  157.             <tr>
  158.                 <td></td>
  159.                 <td colspan="2" width="600"><span style="color:#0066cc; font-size:23px">
  160.                 Architects and designer Newsletter</span></td>
  161.             </tr>
  162.             <tr>
  163.                 <td colspan="3" width="600"><img class="image_fix" src="http://atlanticlink.eu/newsletter/graphic/border-top2.png" width="600" height="37" alt="border-top" title="border-top"></td>
  164.             </tr>
  165.             <tr>
  166.                 <td width="30" valign="top"><img class="image_fix" src="http://atlanticlink.eu/newsletter/graphic/border-left2.png" width="30" height="760" alt="border-left" title="border-left"></td>
  167.                 <td width="546" bgcolor="#fafafa"><h3 style="margin-top:0"><span style="color:#0066ff;text-decoration:underline">Crespano</span>: Architects’ Choice for Luxury Woods</h3>
  168.  
  169. <p>Why Crespano?</p>
  170.  
  171. <p>ALL WOOD<br>
  172. Our parquet uses only wood—from top to bottom—without the addition of products that could ruin the beauty of
  173. the most ecological material there is.</p>
  174.  
  175. <p>3 BETTER THAN 2<br>
  176. Our three-layer parquet lasts a lifetime. Even in extra long and extra wide maxi formats the three cross-over layers
  177. ensure maximum stability, absorbing the variations in temperature and humidity that cause shift in the natural fibers
  178. of wood.  We use the same species as the visible top layer for the bottom layer, you get a double guarantee of
  179. beauty and stability.</p>
  180.  
  181. <p>SUSTAINABILITY<br>
  182. When it comes to ecology we are second to none.  CP Parquet is an eco-friendly natural wooden flooring system.
  183. We do everything we can to protect the environment, from choosing renewable raw materials to laying methods and
  184. the use of harmless glues, water-based varnishes and biocompatible oils.  Our wooden flooring has a green heart. We
  185. use the finest European species from controlled forests, glues that do not harm people or the environment, natural
  186. oils and water-based varnish.  No harmful volatile substances in the environment, in compliance with strict European
  187. standards: EN 16000-9. We recycle chippings and sawdust to heat our premises and fuel dryers, furnaces and varnishing
  188. equipment. We also use recovered sawdust to produce pellets for household heaters.</p>
  189.  
  190. <p>100%, MADE IN ITALY<br>
  191. All processing of CP Parquet natural wooden flooring takes place at our plant in Italy. This allows us to control every
  192. detail and guarantee top quality.</p>
  193.  
  194. <p>A SOLUTIONS PARTNER<br>
  195. We love challenges! The more difficult the better. We are prepared to become part of your projects with a professional
  196. approach and goodwill.   We will transform your ideas into unique and beautiful wooden flooring, thanks to an incredible
  197. choice </p>
  198. <h3><span style="color:#0066ff;text-decoration:underline">Bio Plank</span>: Affordable High-Quality, Multipurpose “Wood” Solution</h3>
  199.  
  200. <p>With nature as our reference, the constant research activities carried out at the LEA Ceramics laboratories have led to
  201. the creation of a new collection of porcelain stoneware: a faithful interpretation of the warmth and pleasure of wood
  202. effect surfaces.  With excellent performance in terms of strength and durability, respect of the environment, and with
  203. antibacterial protection, Bio Plank blends practicality and aesthetic taste while dialoguing with the most cutting-edge
  204. technologies.  Bio Plank can also be used outdoors. The special deck finish, with its thin, bas-relief listels, adds depth to
  205. the material, the three-dimensionality of the surface offers tactile sensations and light effects. With its special R11
  206. anti-slip protection, Bioplank deck is ideal for creating continuity between internal and external areas.</p>
  207.  
  208. <p>Available is various sizes and colors for your creation of ideal atmospheres in completely different styles. Bio Plank is
  209. also widely used outdoors.  Applications: housing; hotels; bar / restaurant; public spaces /
  210. malls; shops; airports; train stations; style; antibacterial needs.</p>
  211.  
  212. </td>
  213.                 <td width="24" valign="top"><img class="image_fix" src="http://atlanticlink.eu/newsletter/graphic/border-right2.png" width="24" height="760" alt="border-right" title="border-right"></td>
  214.             </tr>
  215.             <tr>
  216.                 <td colspan="3" width="600"><img class="image_fix" src="http://atlanticlink.eu/newsletter/graphic/border-bottom2.png" width="600" height="30" alt="border-right" title="border-right"></td>
  217.             </tr>
  218.             <tr>  
  219.                 <td colspan="3" width="600" align="center"><img hspace="8" src="http://atlanticlink.eu/newsletter/graphic/dot.png"><a href="http://atlanticlink.eu/contact-us">Ask a question</a><img hspace="8" src="http://atlanticlink.eu/newsletter/graphic/dot.png"><a href="http://atlanticlink.eu/contact-us">Schedule a meeting with us</a><img hspace="8" src="http://atlanticlink.eu/newsletter/graphic/dot.png"><a href="http://atlanticlink.eu/contact-us">Request a quote</a></td>
  220.             </tr>
  221.             <tr>
  222.                 <td colspan="3" width="600"><img id="Image-Maps_8201304231308005" src="http://atlanticlink.eu/newsletter/graphic/footer2.png"usemap="#Image-Maps_8201304231308005" border="0" width="600" height="153" alt="footer" title="footer" class="image_fix" />
  223. <map id="_Image-Maps_8201304231308005" name="Image-Maps_8201304231308005">
  224. <area shape="rect" coords="17,43,89,117" href="http://atlanticlink.eu/flooring-products/lea-products" alt="" title=""    />
  225. <area shape="rect" coords="95,42,169,117" href="http://atlanticlink.eu/flooring-products/crespano-parquet" alt="" title=""    />
  226. <area shape="rect" coords="176,43,250,116" href="http://atlanticlink.eu/specialty-products/onix" alt="" title=""    />
  227. <area shape="rect" coords="425,41,496,114" href="http://atlanticlink.eu/flooring-products/odyssey-and-travertino-toscano" alt="" title=""    />
  228. <area shape="rect" coords="252,41,328,116" href="http://atlanticlink.eu/specialty-products/palagio-usa" alt="" title=""    />
  229. <area shape="rect" coords="334,42,418,116" href="http://atlanticlink.eu/flooring-products/il-ferrone" alt="" title=""    />
  230. <area shape="rect" coords="505,40,583,117" href="http://atlanticlink.eu/specialty-products/fila" alt="" title=""    />
  231. <area shape="rect" coords="598,151,600,153" href="http://www.image-maps.com/index.php?aff=mapped_users_8201304231308005" alt="Image Map" title="Image Map" />
  232. </map></td>
  233.             </tr>
  234.             <tr>  
  235.                 <td></td>
  236.                 <td style="color:#2e5dbb;" width="576">
  237.                 <a href="http://www.facebook.com/pages/AtlanticLink/139785026102874?ref=hl"><img hspace="5" align="right" src="http://atlanticlink.eu/newsletter/graphic/fb.png"></a> <a href="http://atlanticlink.eu"><img align="right" src="http://atlanticlink.eu/newsletter/graphic/announcement.png"></a><span style="font-weight:bold">Atlantic Link</span><br>
  238. 2432 Hammett Ave., Fort Lee, NJ, 07024<br>
  239. Phone: 201-947-3042<br>
  240. Email: <a style="color:#0066cc" href="mailto:[email protected]">[email protected]</a></td>
  241.                 <td width="24"></td>
  242.             </tr>
  243.             <tr>
  244.                 <td colspan="3" width="600"><hr></td>
  245.             </tr>
  246.             <tr>
  247.                 <td colspan="2" width="576"><p>We respect your privacy, and will promptly honor your request to be removed from our newsletter.<br>  
  248. If you prefer to out-out of this newsletter, pleasse reply with “Remove” in the subject line.  Thank you. </p>
  249. <p>Copyright © 2013 Atlantic Link. All rights reserved.</p></td>
  250.                 <td width="24"></td>
  251.             </tr>
  252.         </table>
  253.         <!-- End example table -->
  254.  
  255.         <!-- Yahoo Link color fix updated: Simply bring your link styling inline. -->
  256.        
  257.         </td>
  258.     </tr>
  259. </table>  
  260. <!-- End of wrapper table -->
  261. </body>
  262. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!