API tools faq
paste
Advertisement
Guest User

Untitled

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