Advertisement
Guest User

Background image email

a guest
Feb 13th, 2015
470
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.23 KB | None | 0 0
  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">
  6. <title>Promo Email</title>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  10. <meta name="format-detection" content="telephone=no">
  11. <style type="text/css">
  12. /* RESET */
  13. #outlook a {
  14.     padding: 0;
  15. }
  16.  
  17. body {
  18.     width: 100% !important;
  19.     -webkit-text-size-adjust: 100%;
  20.     -ms-text-size-adjust: 100%;
  21.     margin: 0;
  22.     padding: 0;
  23.     mso-line-height-rule: exactly;
  24. }
  25.  
  26. table td {
  27.     border-collapse: collapse;
  28. }
  29.  
  30. .ExternalClass {
  31.     width: 100%;
  32. }
  33.  
  34. .ExternalClass,.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
  35.     line-height: 100%;
  36. }
  37.  
  38. table td {
  39.     border-collapse: collapse;
  40. }
  41.  
  42. /* IMG */
  43. img {
  44.     outline: none;
  45.     text-decoration: none;
  46.     -ms-interpolation-mode: bicubic;
  47. }
  48.  
  49. a img {
  50.     border: none;
  51. }
  52.  
  53.  
  54. /* Becoming responsive */
  55. @media only screen and (max-device-width: 480px) {
  56.     table[id="container_div"] {
  57.         max-width: 480px !important;
  58.     }
  59.  
  60.     table[id="container_table"], table[class="image_container"], table[class="image-group-contenitor"] {
  61.         width: 100% !important;
  62.         min-width: 320px !important;
  63.     }
  64.     table[class="image-group-contenitor"] td, table[class="mixed"] td, td[class="mix_image"], td[class="mix_text"], td[class="table-separator"], td[class="section_block"] {
  65.         display: block !important;
  66.         width: 100% !important;
  67.     }
  68.  
  69.     table[class="image_container"] img, td[class="mix_image"] img,table[class="image-group-contenitor"] img {
  70.         width: 100% !important;
  71.     }
  72.  
  73.     table[class="image_container"] img[class="natural-width"], td[class="mix_image"] img[class="natural-width"], table[class="image-group-contenitor"] img[class="natural-width"] {
  74.         width: auto !important;
  75.     }
  76.  
  77.     a[class="button-link justify"] {display: block !important;width:auto !important;}  td[class="table-separator"] br {display: none;}  td[class="cloned_td"]  table[class="image_container"] {width: 100% !important; min-width: 0 !important;} table[class="social_wrapp"] {width: auto;} }
  78.  
  79. </style>
  80. </head>
  81. <body bgcolor="#ffffff">
  82. <table id="container_div" style="text-align:center; background-color:#ffffff; border-collapse: collapse" align="center" bgcolor="#ffffff" width="100%" cellpadding="0" cellspacing="0" border="0">
  83. <tr>
  84. <td align="center">
  85. <table id="container_wrapper" cellpadding="0" cellspacing="0" border="0">
  86. <tbody>
  87. <tr>
  88. <td>
  89. <table id="container_table" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" style="border-collapse: collapse; min-width: 850px;" width="850">
  90. <tbody>
  91.  
  92. <tr>
  93.  
  94.  
  95. <td background="http://subtlepatterns.com/patterns/footer_lodyas.png" bgcolor="#4285B0" valign="top">
  96.       <!--[if gte mso 9]>
  97.      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
  98.        <v:fill type="tile" src="http://subtlepatterns.com/patterns/footer_lodyas.png" color="#4285B0" />
  99.        <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
  100.       <div>
  101.        <![endif]-->
  102. <table cellpadding="15">    
  103.  
  104.  
  105.  
  106. <tbody><tr valign="top">
  107. <td valign="top" class="" align="left" width="50%"><a href="https://website.com" target="_blank"></a></td>
  108.  
  109. </tr><tr valign="top">
  110. <td valign="top" class="mix_text" width="380" style="line-height: 100%;"><span style="font-size: 36px; line-height: 100%;"><font color="#666666" face="Arial, Helvetica, sans-serif"><span id="contentTitle" class="mktEditable" style="color: rgb(255, 255, 255); line-height: 100%;">Promotional Title</span></font></span>
  111. <div style="color: rgb(255, 255, 255);"><span id="contentBody" class="mktEditable" style="font-size: 14px;
  112. font-family: Arial, Helvetica, sans-serif; color: rgb(255, 255, 255); line-height: 130%;">I'm the text and I like latin.<br>Pellentesque vel dui sed orci faucibus iaculis.
  113.  <br>Suspendisse dictum magna id purus tincidunt rutrum.&nbsp;<br><br></span></div>
  114. <table border="0" cellpadding="5" cellspacing="0" width="150" style="background-color:#ed5124; border-radius:2px;">
  115. <tbody><tr>
  116. <td align="center" valign="middle" style="color:#FFFFFF; font-family:Arial, sans-serif; font-size:16px;">
  117.             <a target="_blank" id="cta1" class="mktEditable" style="color:#FFFFFF; text-decoration:none;">Read More</a>
  118.         </td>
  119. </tr>
  120. </tbody></table>
  121.  
  122.  
  123. </td>
  124. <td class="table-separator" width="30" height="30"><b></b></td>
  125. <td valign="top" class="mix_image" align="center" width="380"><span id="contentDiagram" class="mktEditable"><img data-embeded="auto" src="http://i.imgur.com/lP5OtFV.png" alt="Text shown when image is not displayed" class="" style="height: auto; vertical-align: top; border: 0px none transparent; border-radius: 0px; width: 380px;" width="380"></span></td>
  126. </tr>
  127.  
  128.  
  129.  
  130.  
  131.  
  132.      
  133.       <!--[if gte mso 9]> </div>
  134.        </v:textbox>
  135.      </v:rect>
  136.      <![endif]-->
  137.  
  138.   </tbody></table>
  139.     </td>
  140.  
  141.  
  142. </tr>
  143. <tr>
  144. <td valign="top" bgcolor="#ffffff">
  145. <table cellpadding="10" cellspacing="0" border="0" width="100%" style="border-collapse: collapse; background-color: rgb(255, 255, 255);" bgcolor="#ffffff">
  146. <tbody>
  147. <tr valign="top">
  148. <td valign="top" align="left" height="4">
  149.            
  150. <table class="divider" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
  151. <tbody>
  152. <tr>
  153. <td style="line-height: 0; text-decoration: none; padding: 0px;">
  154.                             &nbsp;
  155.                         </td>
  156. </tr>
  157. </tbody>
  158. </table>
  159. </td>
  160. </tr>
  161. </tbody>
  162. </table>
  163. </td>
  164. </tr>
  165. <tr>
  166. <td valign="top">
  167. <table cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse" width="100%">
  168. <tbody>
  169. <tr>
  170. <td class="section_block" width="22%" valign="top" bgcolor="#ffffff">
  171. <table cellpadding="5" cellspacing="0" border="0" width="100%" style="border-collapse: collapse; background-color: rgb(255, 255, 255);border-top: 5px solid #ED5214;" bgcolor="#ffffff">
  172. <tbody>
  173. <tr valign="top">
  174. <td valign="top" style="line-height: 130%; color: rgb(0, 0, 0);"><strong><span style="font-size: 18px; line-height: 130%;"><span id="bodyTitle" class="mktEditable" style="font-family: Arial, Helvetica, sans-serif; color: rgb(102, 102, 102); line-height: 130%;">Neque porro quisquam est qui</span></span></strong></td>
  175. </tr>
  176. </tbody>
  177. </table>
  178. </td>
  179. <td class="section_block" width="78%" valign="top" bgcolor="#ffffff">
  180. <table cellpadding="5" cellspacing="0" border="0" width="100%" style="border-collapse: collapse; background-color: rgb(255, 255, 255);" bgcolor="#ffffff">
  181. <tbody>
  182. <tr valign="top">
  183. <td valign="top" style="line-height: 130%; color: rgb(0, 0, 0);"><span style="font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: rgb(102, 102, 102); line-height: 130%;"></span><strong><span id="bodyText" class="mktEditable" style="font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: rgb(102, 102, 102); line-height: 130%;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  184.  
  185. </span></strong><br><br>
  186.  
  187.  
  188. <table border="0" cellpadding="5" cellspacing="0" width="150" style="background-color:#ed5124; border-radius:2px;">
  189. <tr>
  190. <td align="center" valign="middle" style="color:#FFFFFF; font-family:Arial, sans-serif; font-size:16px;">
  191.             <a target="_blank" id="cta2" class="mktEditable" style="color:#FFFFFF; text-decoration:none;">Read More</a>
  192.         </td>
  193. </tr>
  194. </table>
  195.  
  196.  
  197. <span style="font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: rgb(102, 102, 102); line-height: 130%;"> </span></td>
  198. </tr>
  199. </tbody>
  200. </table>
  201. </td>
  202. </tr>
  203. </tbody>
  204. </table>
  205. </td>
  206. </tr>
  207.  
  208. <tr>
  209. <td valign="top" bgcolor="#ffffff">
  210. <table cellpadding="10" cellspacing="0" border="0" width="100%" style="border-collapse: collapse; background-color: rgb(255, 255, 255);" bgcolor="#ffffff">
  211. <tbody>
  212. <tr valign="top">
  213. <td valign="top" align="left" height="4">
  214.            
  215. <table class="divider" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-top-style: solid; border-top-color: rgb(204, 204, 204); margin: 0px auto; border-top-width: 3px; color: rgb(204, 204, 204);" align="center">
  216. <tbody>
  217. <tr>
  218. <td style="line-height: 0; text-decoration: none; padding: 0px;">
  219.                             &nbsp;
  220.                         </td>
  221. </tr>
  222. </tbody>
  223. </table>
  224. </td>
  225. </tr>
  226. </tbody>
  227. </table>
  228. </td>
  229. </tr>
  230. <tr>
  231. <td valign="top">
  232. <table cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse" width="100%">
  233. <tbody>
  234. <tr>
  235. <td class="section_block" width="22%" valign="top" bgcolor="#ffffff">
  236. <table cellpadding="10" cellspacing="0" border="0" width="100%" style="border-collapse: collapse; background-color: rgb(255, 255, 255);" bgcolor="#ffffff">
  237. <tbody>
  238. <tr valign="top">
  239. <td valign="top" style="line-height: 150%; color: rgb(0, 0, 0);"><span style="font-size: 10px; line-height: 150%;"><span style="font-family: Arial, Helvetica, sans-serif; color: rgb(102, 102, 102); line-height: 150%;">2015  - All rights Reserved</span></span></td>
  240. </tr>
  241. </tbody>
  242. </table>
  243. </td>
  244. <td class="section_block" width="78%" valign="top" bgcolor="#ffffff">
  245. <table cellpadding="10" cellspacing="0" border="0" width="100%" style="border-collapse: collapse; background-color: rgb(255, 255, 255);" bgcolor="#ffffff">
  246. <tbody>
  247. <tr valign="top">
  248. <td valign="top" align="right">
  249. <table class="social_wrapp" cellpadding="0" cellspacing="0" border="0" width="144" style="border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;">
  250. <tbody>
  251. <tr>
  252. <td>
  253.                    
  254. <table class="SocialItemUnit" cellpadding="0" cellspacing="0" border="0" align="left" style="border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0; display: block;" width="46">
  255. <tbody>
  256. <tr>
  257. <td align="right" valign="top" style="text-decoration: none; padding: 4px 0px;" width="46">
  258.             <span class="social-follow">
  259.                 <a href="https://www.facebook.com/" target="_blank" style="text-decoration: none;">
  260.                     <img src="http://i.imgur.com/JdnVHP2.png" alt="Facebook" style="display: block; border: 0; outline: none; padding-bottom: 0; vertical-align: top;">
  261.                 </a>
  262.             </span>
  263.         </td>
  264. </tr>
  265. </tbody>
  266. </table>
  267. <table class="SocialItemUnit" cellpadding="0" cellspacing="0" border="0" align="left" style="border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0; display: block;" width="46">
  268. <tbody>
  269. <tr>
  270. <td align="right" valign="top" style="text-decoration: none; padding: 4px 0px;" width="46">
  271.             <span class="social-follow">
  272.                 <a href="https://twitter.com/" target="_blank" style="text-decoration: none;">
  273.                     <img src="http://i.imgur.com/HW18dqY.png" alt="Twitter" style="display: block; border: 0; outline: none; padding-bottom: 0; vertical-align: top;">
  274.                 </a>
  275.             </span>
  276.         </td>
  277. </tr>
  278. </tbody>
  279. </table>
  280. <table class="SocialItemUnit" cellpadding="0" cellspacing="0" border="0" align="left" style="border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0; display: block;" width="46">
  281. <tbody>
  282. <tr>
  283. <td align="right" valign="top" style="text-decoration: none; padding: 4px 0px;" width="46">
  284.             <span class="social-follow">
  285.                 <a href="https://www.linkedin.com/company/" target="_blank" style="text-decoration: none;">
  286.                     <img src="http://i.imgur.com/liM9Qq9.png" alt="Linkedin" style="display: block; border: 0; outline: none; padding-bottom: 0; vertical-align: top;">
  287.                 </a>
  288.             </span>
  289.         </td>
  290. </tr>
  291. </tbody>
  292. </table>
  293. </td>
  294. </tr>
  295. </tbody>
  296. </table>
  297. </td>
  298. </tr>
  299. </tbody>
  300. </table>
  301. </td>
  302. </tr>
  303. </tbody>
  304. </table>
  305. </td>
  306. </tr>
  307. </tbody>
  308. </table>
  309. </td>
  310. </tr>
  311. </tbody>
  312. </table>
  313. <br></td>
  314. </tr>
  315. </table>
  316. </body>
  317. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement