Silent2743

htmltestinggg

Dec 2nd, 2021
736
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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>
RAW Paste Data