API tools faq
paste
Advertisement
Silent2743

htmltestinggg

Silent2743
Dec 2nd, 2021
881
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.97 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3.   <head>
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.     <title>Simple Transactional Email</title>
  7.     <style>
  8.       /* -------------------------------------
  9.           GLOBAL RESETS
  10.       ------------------------------------- */
  11.      
  12.       /*All the styling goes here*/
  13.      
  14.       img {
  15.         border: none;
  16.         -ms-interpolation-mode: bicubic;
  17.         max-width: 100%;
  18.       }
  19.  
  20.       body {
  21.         background-color: #f6f6f6;
  22.         font-family: sans-serif;
  23.         -webkit-font-smoothing: antialiased;
  24.         font-size: 14px;
  25.         line-height: 1.4;
  26.         margin: 0;
  27.         padding: 0;
  28.         -ms-text-size-adjust: 100%;
  29.         -webkit-text-size-adjust: 100%;
  30.       }
  31.  
  32.       table {
  33.         border-collapse: separate;
  34.         mso-table-lspace: 0pt;
  35.         mso-table-rspace: 0pt;
  36.         width: 100%; }
  37.         table td {
  38.           font-family: sans-serif;
  39.           font-size: 14px;
  40.           vertical-align: top;
  41.       }
  42.  
  43.       /* -------------------------------------
  44.           BODY & CONTAINER
  45.      ------------------------------------- */
  46.  
  47.      .body {
  48.        background-color: #f6f6f6;
  49.         width: 100%;
  50.       }
  51.  
  52.       /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
  53.       .container {
  54.         display: block;
  55.         margin: 0 auto !important;
  56.         /* makes it centered */
  57.         max-width: 580px;
  58.         padding: 10px;
  59.         width: 580px;
  60.       }
  61.  
  62.       /* This should also be a block element, so that it will fill 100% of the .container */
  63.       .content {
  64.         box-sizing: border-box;
  65.         display: block;
  66.         margin: 0 auto;
  67.         max-width: 580px;
  68.         padding: 10px;
  69.       }
  70.  
  71.       /* -------------------------------------
  72.           HEADER, FOOTER, MAIN
  73.       ------------------------------------- */
  74.       .main {
  75.         background: #ffffff;
  76.         border-radius: 3px;
  77.         width: 100%;
  78.       }
  79.  
  80.       .wrapper {
  81.         box-sizing: border-box;
  82.         padding: 20px;
  83.       }
  84.  
  85.       .content-block {
  86.         padding-bottom: 10px;
  87.         padding-top: 10px;
  88.       }
  89.  
  90.       .footer {
  91.         clear: both;
  92.         margin-top: 10px;
  93.         text-align: center;
  94.         width: 100%;
  95.       }
  96.         .footer td,
  97.         .footer p,
  98.         .footer span,
  99.         .footer a {
  100.           color: #999999;
  101.           font-size: 12px;
  102.           text-align: center;
  103.       }
  104.  
  105.       /* -------------------------------------
  106.           TYPOGRAPHY
  107.       ------------------------------------- */
  108.       h1,
  109.       h2,
  110.       h3,
  111.       h4 {
  112.         color: #000000;
  113.         font-family: sans-serif;
  114.         font-weight: 400;
  115.         line-height: 1.4;
  116.         margin: 0;
  117.         margin-bottom: 30px;
  118.       }
  119.  
  120.       h1 {
  121.         font-size: 35px;
  122.         font-weight: 300;
  123.         text-align: center;
  124.         text-transform: capitalize;
  125.       }
  126.  
  127.       p,
  128.       ul,
  129.       ol {
  130.         font-family: sans-serif;
  131.         font-size: 14px;
  132.         font-weight: normal;
  133.         margin: 0;
  134.         margin-bottom: 15px;
  135.       }
  136.         p li,
  137.         ul li,
  138.         ol li {
  139.           list-style-position: inside;
  140.           margin-left: 5px;
  141.       }
  142.  
  143.       a {
  144.         color: #3498db;
  145.         text-decoration: underline;
  146.       }
  147.  
  148.       /* -------------------------------------
  149.           BUTTONS
  150.       ------------------------------------- */
  151.       .btn {
  152.         box-sizing: border-box;
  153.         width: 100%; }
  154.         .btn > tbody > tr > td {
  155.           padding-bottom: 15px; }
  156.         .btn table {
  157.           width: auto;
  158.       }
  159.         .btn table td {
  160.           background-color: #ffffff;
  161.           border-radius: 5px;
  162.           text-align: center;
  163.       }
  164.         .btn a {
  165.           background-color: #ffffff;
  166.           border: solid 1px #3498db;
  167.           border-radius: 5px;
  168.           box-sizing: border-box;
  169.           color: #3498db;
  170.           cursor: pointer;
  171.           display: inline-block;
  172.           font-size: 14px;
  173.           font-weight: bold;
  174.           margin: 0;
  175.           padding: 12px 25px;
  176.           text-decoration: none;
  177.           text-transform: capitalize;
  178.       }
  179.  
  180.       .btn-primary table td {
  181.         background-color: #3498db;
  182.       }
  183.  
  184.       .btn-primary a {
  185.         background-color: #3498db;
  186.         border-color: #3498db;
  187.         color: #ffffff;
  188.       }
  189.  
  190.       /* -------------------------------------
  191.           OTHER STYLES THAT MIGHT BE USEFUL
  192.       ------------------------------------- */
  193.       .last {
  194.         margin-bottom: 0;
  195.       }
  196.  
  197.       .first {
  198.         margin-top: 0;
  199.       }
  200.  
  201.       .align-center {
  202.         text-align: center;
  203.       }
  204.  
  205.       .align-right {
  206.         text-align: right;
  207.       }
  208.  
  209.       .align-left {
  210.         text-align: left;
  211.       }
  212.  
  213.       .clear {
  214.         clear: both;
  215.       }
  216.  
  217.       .mt0 {
  218.         margin-top: 0;
  219.       }
  220.  
  221.       .mb0 {
  222.         margin-bottom: 0;
  223.       }
  224.  
  225.       .preheader {
  226.         color: transparent;
  227.         display: none;
  228.         height: 0;
  229.         max-height: 0;
  230.         max-width: 0;
  231.         opacity: 0;
  232.         overflow: hidden;
  233.         mso-hide: all;
  234.         visibility: hidden;
  235.         width: 0;
  236.       }
  237.  
  238.       .powered-by a {
  239.         text-decoration: none;
  240.       }
  241.  
  242.       hr {
  243.         border: 0;
  244.         border-bottom: 1px solid #f6f6f6;
  245.         margin: 20px 0;
  246.       }
  247.  
  248.       /* -------------------------------------
  249.           RESPONSIVE AND MOBILE FRIENDLY STYLES
  250.       ------------------------------------- */
  251.       @media only screen and (max-width: 620px) {
  252.         table.body h1 {
  253.           font-size: 28px !important;
  254.           margin-bottom: 10px !important;
  255.         }
  256.         table.body p,
  257.         table.body ul,
  258.         table.body ol,
  259.         table.body td,
  260.         table.body span,
  261.         table.body a {
  262.           font-size: 16px !important;
  263.         }
  264.         table.body .wrapper,
  265.         table.body .article {
  266.           padding: 10px !important;
  267.         }
  268.         table.body .content {
  269.           padding: 0 !important;
  270.         }
  271.         table.body .container {
  272.           padding: 0 !important;
  273.           width: 100% !important;
  274.         }
  275.         table.body .main {
  276.           border-left-width: 0 !important;
  277.           border-radius: 0 !important;
  278.           border-right-width: 0 !important;
  279.         }
  280.         table.body .btn table {
  281.           width: 100% !important;
  282.         }
  283.         table.body .btn a {
  284.           width: 100% !important;
  285.         }
  286.         table.body .img-responsive {
  287.           height: auto !important;
  288.           max-width: 100% !important;
  289.           width: auto !important;
  290.         }
  291.       }
  292.  
  293.       /* -------------------------------------
  294.           PRESERVE THESE STYLES IN THE HEAD
  295.       ------------------------------------- */
  296.       @media all {
  297.         .ExternalClass {
  298.           width: 100%;
  299.         }
  300.         .ExternalClass,
  301.         .ExternalClass p,
  302.         .ExternalClass span,
  303.         .ExternalClass font,
  304.         .ExternalClass td,
  305.         .ExternalClass div {
  306.           line-height: 100%;
  307.         }
  308.         .apple-link a {
  309.           color: inherit !important;
  310.           font-family: inherit !important;
  311.           font-size: inherit !important;
  312.           font-weight: inherit !important;
  313.           line-height: inherit !important;
  314.           text-decoration: none !important;
  315.         }
  316.         #MessageViewBody a {
  317.           color: inherit;
  318.           text-decoration: none;
  319.           font-size: inherit;
  320.           font-family: inherit;
  321.           font-weight: inherit;
  322.           line-height: inherit;
  323.         }
  324.         .btn-primary table td:hover {
  325.           background-color: #34495e !important;
  326.         }
  327.         .btn-primary a:hover {
  328.           background-color: #34495e !important;
  329.           border-color: #34495e !important;
  330.         }
  331.       }
  332.  
  333.     </style>
  334.   </head>
  335.   <body class="">
  336.     <span class="preheader">This is preheader text. Some clients will show this text as a preview.</span>
  337.     <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
  338.       <tr>
  339.         <td>&nbsp;</td>
  340.         <td class="container">
  341.           <div class="content">
  342.  
  343.             <!-- START CENTERED WHITE CONTAINER -->
  344.             <table role="presentation" class="main">
  345.  
  346.               <!-- START MAIN CONTENT AREA -->
  347.               <tr>
  348.                 <td class="wrapper">
  349.                   <table role="presentation" border="0" cellpadding="0" cellspacing="0">
  350.                     <tr>
  351.                       <td>
  352.                         <p>Hi there,</p>
  353.                         <p>Sometimes you just want to send a simple HTML email with a simple design and clear call to action. This is it.</p>
  354.                         <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  355.                           <tbody>
  356.                             <tr>
  357.                               <td align="left">
  358.                                 <table role="presentation" border="0" cellpadding="0" cellspacing="0">
  359.                                   <tbody>
  360.                                     <tr>
  361.                                       <td> <a href="http://htmlemail.io" target="_blank">Call To Action</a> </td>
  362.                                     </tr>
  363.                                   </tbody>
  364.                                 </table>
  365.                               </td>
  366.                             </tr>
  367.                           </tbody>
  368.                         </table>
  369.                         <p>This is a really simple email template. Its sole purpose is to get the recipient to click the button with no distractions.</p>
  370.                         <p>Good luck! Hope it works.</p>
  371.                       </td>
  372.                     </tr>
  373.                   </table>
  374.                 </td>
  375.               </tr>
  376.  
  377.             <!-- END MAIN CONTENT AREA -->
  378.             </table>
  379.             <!-- END CENTERED WHITE CONTAINER -->
  380.  
  381.             <!-- START FOOTER -->
  382.             <div class="footer">
  383.               <table role="presentation" border="0" cellpadding="0" cellspacing="0">
  384.                 <tr>
  385.                   <td class="content-block">
  386.                     <span class="apple-link">Company Inc, 3 Abbey Road, San Francisco CA 94102</span>
  387.                     <br> Don't like these emails? <a href="http://i.imgur.com/CScmqnj.gif">Unsubscribe</a>.
  388.                   </td>
  389.                 </tr>
  390.                 <tr>
  391.                   <td class="content-block powered-by">
  392.                     Powered by <a href="http://htmlemail.io">HTMLemail</a>.
  393.                   </td>
  394.                 </tr>
  395.               </table>
  396.             </div>
  397.             <!-- END FOOTER -->
  398.  
  399.           </div>
  400.         </td>
  401.         <td>&nbsp;</td>
  402.       </tr>
  403.     </table>
  404.   </body>
  405. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!