Advertisement
ahmadandika

template 5.1

Dec 18th, 2020
834
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 25.79 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html
  3.  xmlns="http://www.w3.org/1999/xhtml"
  4.  xmlns:v="urn:schemas-microsoft-com:vml"
  5.  xmlns:o="urn:schemas-microsoft-com:office:office"
  6. >
  7.   <head>
  8.     <!--[if gte mso 9]>
  9.      <xml>
  10.        <o:OfficeDocumentSettings>
  11.          <o:AllowPNG />
  12.          <o:PixelsPerInch>96</o:PixelsPerInch>
  13.        </o:OfficeDocumentSettings>
  14.      </xml>
  15.    <![endif]-->
  16.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  17.     <meta
  18.      name="viewport"
  19.      content="width=device-width, initial-scale=1, maximum-scale=1"
  20.    />
  21.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  22.     <meta name="format-detection" content="date=no" />
  23.     <meta name="format-detection" content="address=no" />
  24.     <meta name="format-detection" content="telephone=no" />
  25.     <meta name="x-apple-disable-message-reformatting" />
  26.     <!--[if !mso]><!-->
  27.     <link
  28.      href="https://fonts.googleapis.com/css?family=Fira+Mono:400,500,700|Ubuntu:400,400i,500,500i,700,700i"
  29.      rel="stylesheet"
  30.    />
  31.     <!--<![endif]-->
  32.     <title>Email Template</title>
  33.     <!--[if gte mso 9]>
  34.      <style type="text/css" media="all">
  35.        sup {
  36.          font-size: 100% !important;
  37.        }
  38.      </style>
  39.    <![endif]-->
  40.  
  41.     <style type="text/css" media="screen">
  42.       /* Linked Styles */
  43.  
  44.       @font-face {
  45.         font-family: Roboto;
  46.         src: url('[base-url]/Roboto-Regular.ttf');
  47.         font-weight: 700;
  48.         font-style: normal;
  49.       }
  50.       @font-face {
  51.         font-family: Roboto;
  52.         src: url('[base-url]/Roboto-Regular.ttf');
  53.         font-weight: 400;
  54.         font-style: normal;
  55.       }
  56.       @font-face {
  57.         font-family: Roboto;
  58.         src: url('[base-url]/Roboto-Regular.ttf');
  59.         font-weight: 500;
  60.         font-style: normal;
  61.       }
  62.  
  63.       body {
  64.         font-family: Roboto;
  65.         padding: 0 !important;
  66.         margin: 0 !important;
  67.         display: block !important;
  68.         min-width: 100% !important;
  69.         width: 100% !important;
  70.         background: #d8e0e3;
  71.         -webkit-text-size-adjust: none;
  72.       }
  73.  
  74.       a {
  75.         color: #000001;
  76.         text-decoration: none;
  77.       }
  78.  
  79.       p {
  80.         padding: 0 !important;
  81.         margin: 0 !important;
  82.       }
  83.  
  84.       img {
  85.         -ms-interpolation-mode: bicubic;
  86.         /* Allow smoother rendering of resized image in Internet Explorer */
  87.       }
  88.  
  89.       .mcnPreviewText {
  90.         display: none !important;
  91.       }
  92.  
  93.       .btn-ivr {
  94.         border-radius: 20px;
  95.         border: none;
  96.         background: linear-gradient(
  97.           72.82deg,
  98.           #8a2387 -54.11%,
  99.           #e94057 20.36%,
  100.           #f27121 89.55%
  101.         );
  102.         font-size: 16px;
  103.         color: #ffffff;
  104.         text-decoration: none;
  105.         font-weight: bold;
  106.         cursor: pointer;
  107.         width: 30%;
  108.       }
  109.       .bg-footer {
  110.         background-image: url('[base-url]/footer.png');
  111.         background-repeat: no-repeat;
  112.         height: 100%;
  113.         width: 100%;
  114.         background-size: 100%;
  115.       }
  116.       .border-bank {
  117.         width: 200px;
  118.         height: 140px;
  119.         border: 2px solid transparent;
  120.         -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
  121.         -webkit-border-image: -webkit-linear-gradient(
  122.           top,
  123.           #3acfd5 0%,
  124.           #3a4ed5 100%
  125.         );
  126.         border-image: linear-gradient(
  127.           to bottom,
  128.           #8a2387 -33.84%,
  129.           #e94057 37.41%,
  130.           #f27121 103.6%
  131.         );
  132.         border-image-slice: 1;
  133.         border-radius: 20px;
  134.         border: 2px solid;
  135.         position: absolute;
  136.         left: 51rem;
  137.       }
  138.  
  139.       .t-left,
  140.       .t-right {
  141.         width: 25%;
  142.       }
  143.  
  144.       .t-center {
  145.         width: 50%;
  146.       }
  147.  
  148.       /* Mobile styles */
  149.       @media only screen and (max-device-width: 425px),
  150.         only screen and (max-width: 425px) {
  151.         .t-left,
  152.         .t-right {
  153.           width: 0%;
  154.         }
  155.  
  156.         .t-center {
  157.           width: 100%;
  158.         }
  159.         .mobile-shell {
  160.           width: 100% !important;
  161.           min-width: 100% !important;
  162.         }
  163.         .h5 {
  164.           padding-right: 2rem !important;
  165.           padding-top: 26px !important;
  166.         }
  167.  
  168.         .m-center {
  169.           text-align: center !important;
  170.         }
  171.         .border-bank {
  172.           left: 7rem !important;
  173.         }
  174.  
  175.         .text3,
  176.         .text-footer,
  177.         .text-header {
  178.           text-align: center !important;
  179.         }
  180.  
  181.         .lh-18 {
  182.           line-height: 18px;
  183.         }
  184.  
  185.         .center {
  186.           margin: 0 auto !important;
  187.         }
  188.  
  189.         .td {
  190.           width: 100% !important;
  191.           min-width: 100% !important;
  192.         }
  193.  
  194.         .m-br-15 {
  195.           height: 15px !important;
  196.         }
  197.  
  198.         .m-0 {
  199.           margin: 0 !important;
  200.         }
  201.  
  202.         .p-0 {
  203.           padding: 0 !important;
  204.         }
  205.  
  206.         .p20-15 {
  207.           padding: 20px 15px !important;
  208.         }
  209.  
  210.         .p0-15 {
  211.           padding: 0 15px !important;
  212.         }
  213.  
  214.         .p30-15 {
  215.           padding: 30px 15px !important;
  216.         }
  217.  
  218.         .p30-15-15 {
  219.           padding: 30px 15px 15px !important;
  220.         }
  221.  
  222.         .p30-15-0-80 {
  223.           padding: 30px 15px 0px 80px !important;
  224.         }
  225.  
  226.         .p30-15-0 {
  227.           padding: 30px 15px 0px 15px !important;
  228.         }
  229.  
  230.         .p40 {
  231.           padding-bottom: 30px !important;
  232.         }
  233.  
  234.         .pt36 {
  235.           padding-top: 36px !important;
  236.         }
  237.  
  238.         .pb8 {
  239.           padding-bottom: 8px !important;
  240.         }
  241.  
  242.         .footer {
  243.           padding: 20px 15px !important;
  244.         }
  245.  
  246.         .h2-white {
  247.           font-size: 40px !important;
  248.           line-height: 44px !important;
  249.           text-align: center !important;
  250.         }
  251.  
  252.         .fz-18 {
  253.           font-size: 18px !important;
  254.         }
  255.  
  256.         .h2 {
  257.           font-size: 42px !important;
  258.           line-height: 50px !important;
  259.         }
  260.  
  261.         .m-td,
  262.         .m-hide {
  263.           display: none !important;
  264.           width: 0 !important;
  265.           height: 0 !important;
  266.           font-size: 0 !important;
  267.           line-height: 0 !important;
  268.           min-height: 0 !important;
  269.         }
  270.  
  271.         .m-block {
  272.           display: block !important;
  273.         }
  274.  
  275.         .container {
  276.           padding: 0px !important;
  277.         }
  278.  
  279.         .separator {
  280.           padding-top: 30px !important;
  281.         }
  282.  
  283.         .fluid-img img {
  284.           width: 100% !important;
  285.           max-width: 100% !important;
  286.           height: auto !important;
  287.         }
  288.  
  289.         .column,
  290.         .column-top,
  291.         .column-dir,
  292.         .column-empty,
  293.         .column-empty2,
  294.         .column-bottom,
  295.         .column-dir-top,
  296.         .column-dir-bottom {
  297.           float: left !important;
  298.           width: 100% !important;
  299.           display: block !important;
  300.         }
  301.  
  302.         .column-empty {
  303.           padding-bottom: 10px !important;
  304.         }
  305.  
  306.         .column-empty2 {
  307.           padding-bottom: 30px !important;
  308.         }
  309.  
  310.         .content-spacing {
  311.           width: 15px !important;
  312.         }
  313.         .btn-ivr {
  314.           width: 100%;
  315.         }
  316.       }
  317.       @media (max-width: 768px) {
  318.         .img-logo {
  319.           /* text-align: left;
  320.           position: absolute;
  321.           left: 37rem; */
  322.         }
  323.         .border-bank {
  324.           left: 18rem;
  325.         }
  326.       }
  327.  
  328.       @media (max-width: 425px) {
  329.         .img-logo {
  330.           /* left: 20rem;
  331.           top: 61rem; */
  332.         }
  333.         .bg-footer {
  334.           height: 163px;
  335.           background-size: cover !important;
  336.           width: 100%;
  337.         }
  338.       }
  339.     </style>
  340.   </head>
  341.  
  342.   <body
  343.    class="body"
  344.    style="padding:0 !important; margin:0 !important; display:block !important; min-width:100% !important; width:100% !important; background:#d8e0e3; -webkit-text-size-adjust:none;"
  345.  >
  346.     <table
  347.      width="100%"
  348.      border="0"
  349.      cellspacing="0"
  350.      cellpadding="0"
  351.      bgcolor="#d8e0e3"
  352.    >
  353.       <tr>
  354.         <td
  355.          align="center"
  356.          valign="top"
  357.          class="container"
  358.          style="padding:50px 10px;"
  359.        >
  360.           <!-- Container -->
  361.           <table width="100%" border="0" cellspacing="0" cellpadding="0">
  362.             <tr>
  363.               <td align="center">
  364.                 <table
  365.                  width="650"
  366.                  border="0"
  367.                  cellspacing="0"
  368.                  cellpadding="0"
  369.                  class="mobile-shell"
  370.                >
  371.                   <tr>
  372.                     <td
  373.                      class="td"
  374.                      bgcolor="#ffffff"
  375.                      style="width:650px; min-width:650px; font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal;"
  376.                    >
  377.                       <!-- Header -->
  378.                       <img src="[base-url]/header.png" style="width:100%" />
  379.                       <!-- END Header -->
  380.  
  381.                       <!-- Intro -->
  382.                       <table
  383.                        width="100%"
  384.                        border="0"
  385.                        cellspacing="0"
  386.                        cellpadding="0"
  387.                        bgcolor="#ffffff"
  388.                      >
  389.                         <tr>
  390.                           <td class="p0-15" style="padding: 20px 20px 0">
  391.                             <table
  392.                              width="100%"
  393.                              border="0"
  394.                              cellspacing="0"
  395.                              cellpadding="0"
  396.                              style="border-radius: 12px;"
  397.                            >
  398.                               <tr>
  399.                                 <td style="padding-top: 20px;">
  400.                                   <tr>
  401.                                     <td style="text-align: center; width: 50%;">
  402.                                       <img
  403.                                        src="[base-url]/icon-kami.svg"
  404.                                        alt=""
  405.                                        border="0"
  406.                                        style="width: 20%; max-width: 50%; text-align: center; height: auto; "
  407.                                      />
  408.                                     </td>
  409.                                   </tr>
  410.                                 </td>
  411.                               </tr>
  412.                               <tr>
  413.                                 <td
  414.                                  class="pt36 fz-18"
  415.                                  style="padding: 30px;"
  416.                                  colspan="2"
  417.                                >
  418.                                   <table
  419.                                    width="100%"
  420.                                    border="0"
  421.                                    cellspacing="0"
  422.                                    cellpadding="0"
  423.                                  >
  424.                                     <tr>
  425.                                       <td
  426.                                        class="pt36 fz-18"
  427.                                        style="color:#272727; text-align: left; font-weight: bold; font-size:28px; line-height:1;"
  428.                                      >
  429.                                         Hai, [name]
  430.                                       </td>
  431.                                     </tr>
  432.  
  433.                                     <tr>
  434.                                       <td
  435.                                        class="h5"
  436.                                        style="font-size:14px; line-height:1.5; color:#404852; padding: 20px 0 0;"
  437.                                      >
  438.                                         <p>
  439.                                           Kami mendapatkan notifikasi bahwa Anda
  440.                                           telah melakukan permintaan penarikan
  441.                                           saldo dengan menggunakan data baru
  442.                                           Anda.
  443.                                         </p>
  444.                                       </td>
  445.                                     </tr>
  446.  
  447.                                     <tr>
  448.                                       <td
  449.                                        class="h5"
  450.                                        style="font-size:14px; line-height:1.5; color:#404852; padding: 20px 0 20px;"
  451.                                      >
  452.                                         <p>
  453.                                           Berikut rincian data penarikan saldo
  454.                                           terbaru Anda:
  455.                                         </p>
  456.                                       </td>
  457.                                     </tr>
  458.                                     <tr>
  459.                                       <table>
  460.                                         <!-- <div class="border-bank"> -->
  461.                                         <tr>
  462.                                           <td>
  463.                                             <table width="100%">
  464.                                               <tr>
  465.                                                 <td class="t-left"></td>
  466.                                                 <td
  467.                                                  class="h5 t-center"
  468.                                                  style="font-size:14px; line-height:1.5; color:#404852; padding: 20px;border: 2px solid  #e94057; border-radius: 10px;"
  469.                                                  align="left"
  470.                                                  width="50%"
  471.                                                >
  472.                                                   <p>
  473.                                                     [bank]
  474.                                                   </p>
  475.                                                   <br />
  476.                                                   <p>
  477.                                                     [account-name]
  478.                                                   </p>
  479.                                                   <p>
  480.                                                     [account-number]
  481.                                                   </p>
  482.                                                 </td>
  483.                                                 <td class="t-right"></td>
  484.                                               </tr>
  485.                                             </table>
  486.                                           </td>
  487.                                         </tr>
  488.                                         <!-- </div> -->
  489.  
  490.                                         <tr>
  491.                                           <td
  492.                                            class="h5"
  493.                                            style="font-size:14px; line-height:1.5; color:#404852; padding: 20px 0 0;"
  494.                                          >
  495.                                             <p>
  496.                                               Demi alasan keamanan, anda dapat
  497.                                               memverifikasi info akun Anda
  498.                                               dengan meng-klik tombol di bawah
  499.                                               ini:
  500.                                             </p>
  501.                                           </td>
  502.                                         </tr>
  503.                                         <tr>
  504.                                           <td
  505.                                            align="center"
  506.                                            style="padding: 25px 0 10px;"
  507.                                            width="100"
  508.                                          >
  509.                                             <a target="_blank" href="[link]">
  510.                                               <div
  511.                                                class="btn-ivr"
  512.                                                style="padding: 20px 1px;  text-align: center; font-size:14px; "
  513.                                              >
  514.                                                 Verifikasi Info Akun
  515.                                               </div>
  516.                                             </a>
  517.                                           </td>
  518.                                         </tr>
  519.                                         <tr>
  520.                                           <td
  521.                                            class="h5"
  522.                                            style="font-size:14px; line-height:1.5; color:#404852; padding: 20px 0 0;"
  523.                                          >
  524.                                             <p>
  525.                                               Anda dapat mengabaikan email ini
  526.                                               jika anda tidak melakukan
  527.                                               permintaan penarikan saldo dengan
  528.                                               menggunakan data di atas.
  529.                                             </p>
  530.                                           </td>
  531.                                         </tr>
  532.  
  533.                                         <tr>
  534.                                           <td
  535.                                            style="border-bottom: 1px solid #C7C7C7; padding: 10px;"
  536.                                          >
  537.                                             <!-- <hr /> -->
  538.                                           </td>
  539.                                         </tr>
  540.                                         <tr>
  541.                                           <td
  542.                                            class="h5"
  543.                                            style="font-size:14px; line-height:1.5; color:#404852; padding: 20px 0 20px;"
  544.                                          >
  545.                                             <p>
  546.                                               Terima kasih atas kepercayaan Anda
  547.                                               telah memilih KAMI sebagai
  548.                                               platform untuk menikmati karya
  549.                                               dari kreator-kreator di Indonesia.
  550.                                             </p>
  551.                                           </td>
  552.                                         </tr>
  553.                                       </table>
  554.                                     </tr>
  555.                                   </table>
  556.                                 </td>
  557.                               </tr>
  558.                             </table>
  559.  
  560.                             <!-- END Intro -->
  561.                             <!-- Closing -->
  562.                             <footer>
  563.                               <table
  564.                                class="bg-footer"
  565.                                border="0"
  566.                                cellspacing="0"
  567.                                cellpadding="0"
  568.                              >
  569.                                 <tr></tr>
  570.  
  571.                                 <tr>
  572.                                   <td
  573.                                    class="h5"
  574.                                    style="text-align:right; font-size:14px; line-height:1.5; color:#ffffff; padding-right: 14rem; padding-top: 50px;"
  575.                                  >
  576.                                     <p>
  577.                                       Download Aplikasi Saham Rakyat sekarang
  578.                                     </p>
  579.                                   </td>
  580.                                   <td>
  581.                                     <a href="#">
  582.                                       <img
  583.                                        src="[base-url]/icon.svg"
  584.                                        width="100"
  585.                                        height="50"
  586.                                        border="0"
  587.                                        alt=""
  588.                                        class="img-logo"
  589.                                        style="position:absolute;"
  590.                                      />
  591.                                     </a>
  592.                                   </td>
  593.                                 </tr>
  594.                                 <tr>
  595.                                   <td>
  596.                                     <a
  597.                                      href="https://apps.apple.com/id/"
  598.                                      target="_blank"
  599.                                    >
  600.                                       <img
  601.                                        src="[base-url]/icon-play (2).png"
  602.                                        style="    width: 30%;
  603.                              height: auto;
  604.                              padding: 15px 10px 11px 50px;"
  605.                                      />
  606.                                     </a>
  607.                                     <a
  608.                                      href="https://play.google.com/"
  609.                                      target="_blank"
  610.                                    >
  611.                                       <img
  612.                                        src="[base-url]/icon-play (1).png"
  613.                                        style="    width: 30%;
  614.                               height: auto;
  615.                               padding: 15px 0 11px 0;"
  616.                                      />
  617.                                     </a>
  618.                                   </td>
  619.  
  620.                                   <td>
  621.                                     <a href="#">
  622.                                       <img
  623.                                        src="[base-url]/icon-ig.svg"
  624.                                        width="30"
  625.                                        height="30"
  626.                                        style="padding-right: 5px;
  627. "
  628.                                      />
  629.                                     </a>
  630.                                   </td>
  631.                                   <td>
  632.                                     <a
  633.                                      href="                              www.instagram.com/sahamrakyat/"
  634.                                      target="_blank"
  635.                                    >
  636.                                       <img
  637.                                        src="[base-url]/icon-fb.svg"
  638.                                        width="30"
  639.                                        height="30"
  640.                                        style="padding-right: 5px;
  641. "
  642.                                      />
  643.                                     </a>
  644.                                   </td>
  645.                                   <td>
  646.                                     <a
  647.                                      href="                              www.instagram.com/sahamrakyat/"
  648.                                      target="_blank"
  649.                                    >
  650.                                       <img
  651.                                        src="[base-url]/icon-yt.svg"
  652.                                        width="30"
  653.                                        height="30"
  654.                                        style="padding-right: 5px;
  655. "
  656.                                      />
  657.                                     </a>
  658.                                   </td>
  659.                                 </tr>
  660.                               </table>
  661.                             </footer>
  662.  
  663.                             <!-- END Closing -->
  664.                             <!-- Footer -->
  665.  
  666.                             <!-- END Footer -->
  667.                           </td>
  668.                         </tr>
  669.                       </table>
  670.                     </td>
  671.                   </tr>
  672.                 </table>
  673.  
  674.                 <!-- END Container -->
  675.               </td>
  676.             </tr>
  677.           </table>
  678.         </td>
  679.       </tr>
  680.     </table>
  681.  
  682.     <table class="gmail-app-fix">
  683.       <tr>
  684.         <td>
  685.           <table
  686.            cellpadding="0"
  687.            cellspacing="0"
  688.            border="0"
  689.            align="center"
  690.            width="600"
  691.          >
  692.             <tr>
  693.               <td
  694.                cellpadding="0"
  695.                cellspacing="0"
  696.                border="0"
  697.                height="1"
  698.                ;=""
  699.                style="line-height: 1px; min-width: 200px;"
  700.              >
  701.                 <img
  702.                  src="transparent.gif"
  703.                  width="200"
  704.                  height="1"
  705.                  style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"
  706.                />
  707.               </td>
  708.               <td
  709.                cellpadding="0"
  710.                cellspacing="0"
  711.                border="0"
  712.                height="1"
  713.                ;=""
  714.                style="line-height: 1px; min-width: 200px;"
  715.              >
  716.                 <img
  717.                  src="transparent.gif"
  718.                  width="200"
  719.                  height="1"
  720.                  style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"
  721.                />
  722.               </td>
  723.               <td
  724.                cellpadding="0"
  725.                cellspacing="0"
  726.                border="0"
  727.                height="1"
  728.                ;=""
  729.                style="line-height: 0px; min-width: 200px;"
  730.              >
  731.                 <img
  732.                  src="transparent.gif"
  733.                  width="200"
  734.                  height="1"
  735.                  style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"
  736.                />
  737.               </td>
  738.             </tr>
  739.           </table>
  740.         </td>
  741.       </tr>
  742.     </table>
  743.   </body>
  744. </html>
  745.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement