API tools faq
paste
Advertisement
xcage88

untuk slicing email

xcage88
Nov 14th, 2023
638
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.26 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Pending Email</title>
  7.     <!-- <link rel="preconnect" href="https://fonts.googleapis.com">
  8.    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  9.    <link href="https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@500&family=Lato&family=Open+Sans&family=Playfair:wght@500&display=swap" rel="stylesheet">     -->
  10.     <style>
  11.         @import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@500&family=Lato&family=Open+Sans&family=Playfair:wght@500&display=swap');
  12.         .body{
  13.             margin: 0;
  14.             padding: 0;
  15.             font-family: 'Lato', sans-serif;
  16.             background-color: #f7f6f6;
  17.         }
  18.         .wrapper{
  19.             margin: 0 auto;            
  20.             width: 60%;
  21.             height: 100%;
  22.             background-color: #fff;            
  23.         }
  24.         .head-container{
  25.             width: 100%;            
  26.         }
  27.         .head-icon{
  28.             padding: 5px;
  29.         }
  30.         .main-container{
  31.             width: 100%;
  32.             max-width: 100%;
  33.         }
  34.         .date-paid{
  35.             padding: 5px;
  36.         }
  37.         .both-text{
  38.             font-size: 1.125rem;
  39.             line-height: 1.75rem;
  40.             font-weight: bold;
  41.         }
  42.         .all-content{
  43.             padding: 5px;
  44.             margin-top: 0.75rem;
  45.         }
  46.         .my-table{
  47.             border-collapse: collapse;
  48.             text-align: left;
  49.             max-width: 100%;
  50.         }
  51.         .my-table tr th{
  52.             padding: 8px;
  53.             font-weight: normal;
  54.             font-size: 18px;
  55.         }
  56.         .my-table tr td {
  57.             font-size: 18px;
  58.         }
  59.         .all-subcontent{
  60.             width: 100%;
  61.             max-width: 100%;
  62.         }
  63.         .total{
  64.             max-width: 100%;
  65.             margin-top: 2.5rem;
  66.             text-align: center;
  67.         }
  68.         .total-pembayaran{
  69.             font-weight: 400;
  70.             font-size: 24px;
  71.         }
  72.         .total-count{
  73.             font-size: 54px;
  74.             font-weight: 700;
  75.             margin-top: 2px;
  76.         }
  77.         .button-kunjung{
  78.             background-color: #FFC809;
  79.             border-radius: 50px;
  80.             width: 40%;
  81.             padding: 4px;
  82.             text-align: center;            
  83.         }
  84.         .button-kunjung > a{
  85.             font-size: 14px;
  86.             line-height: 1.75rem;
  87.             font-weight: bolder;
  88.             word-spacing: 2px;
  89.             text-decoration: none;
  90.             font-size: 15px;
  91.             color: #000;
  92.             font-weight: bold;
  93.         }
  94.         .footer-container{
  95.             width: 100%;
  96.             background-color: #FFC809;
  97.             margin-top: 2rem;
  98.             max-width: 100%;
  99.         }
  100.         .footer-contact{
  101.             padding: 10px;
  102.  
  103.         }
  104.         .table-contact{
  105.             max-width: 100%;
  106.             margin: 0 auto;
  107.             text-align: center;
  108.             border-spacing: 13px;            
  109.         }
  110.         .table-contact tr th{
  111.             text-align: right;
  112.         }
  113.         .table-contact tr td{
  114.             text-align: left;
  115.         }
  116.         .table-contact tr td p, .table-contact tr td a{
  117.             font-size: 13px;
  118.             text-decoration: none;
  119.             color: #000;
  120.         }
  121.         .contact{
  122.             width: 27px;
  123.         }
  124.         .table-icon{
  125.             width: 100%;
  126.         }
  127.         .icon-content{
  128.             column-count: 2;
  129.             border: 2px solid;
  130.             padding: 2px;
  131.         }
  132.         .apps{
  133.             width: 100%;
  134.             padding: 4px;
  135.         }
  136.         .image-link{
  137.             width: 120px;
  138.         }
  139.         .icon{
  140.             text-align: right;
  141.             width: 100%;
  142.             max-width: 100%;
  143.         }
  144.         .table{
  145.             border: 2px solid;
  146.         }
  147.         @media screen and (max-width: 800px) {
  148.             .wrapper{
  149.                 width: 100%;
  150.             }
  151.             .button-kunjung{
  152.                 width: 50%;
  153.                 padding: 3px;
  154.             }
  155.             .icon-content{
  156.                 column-count: 1;
  157.                 text-align: center;
  158.             }
  159.             .icon{
  160.                 text-align: center;
  161.                 margin-bottom: 10px;
  162.             }
  163.         }
  164.     </style>
  165. </head>
  166. <body>
  167.  
  168.     <div class="body">
  169.         <div class="wrapper">
  170.            
  171.             <!-- head icon -->
  172.             <div class="head-container">
  173.                 <div class="head-icon">
  174.                     <img src="https://i.postimg.cc/BvQc4xDR/orderia.png" alt="Logo Orderia"/>
  175.                 </div>
  176.             </div>
  177.    
  178.             <!-- main content -->
  179.             <div class="main-container">
  180.    
  181.                 <!-- date & pending paid -->
  182.                 <div class="date-paid">
  183.                     <h3 class="both-text">Selesaikan pembayaran anda Sebelum:</h3>
  184.                     <h3 class="both-text">Kamis, 23 November 2023 11:00</h3>
  185.                 </div>
  186.    
  187.                 <!-- no order -->
  188.                 <div class="all-content">
  189.                     <h3 class="both-text">No. Pesanan : ORD-1234-1234</h3>
  190.                 </div>
  191.    
  192.                 <!-- detail order -->
  193.                 <div class="all-content">
  194.                     <h3 class="both-text">Detail Pesanan :</h3>
  195.                     <div class="all-subcontent">
  196.                         <table class="my-table">
  197.                             <tr>
  198.                                 <th>
  199.                                     Nama Pemesanan
  200.                                 </th>
  201.                                 <td>
  202.                                     : John Doe
  203.                                 </td>
  204.                             </tr>
  205.                             <tr>
  206.                                 <th>
  207.                                     Nama Resto
  208.                                 </th>
  209.                                 <td>
  210.                                     : Rumah Makan Padang
  211.                                 </td>
  212.                             </tr>
  213.                             <tr>
  214.                                 <th>
  215.                                     Tanggal
  216.                                 </th>
  217.                                 <td>
  218.                                     : Kamis, 23 Agustus 2023
  219.                                 </td>
  220.                             </tr>
  221.                             <tr>
  222.                                 <th>
  223.                                     Jenis Pesanan
  224.                                 </th>
  225.                                 <td>
  226.                                     : Reservasi
  227.                                 </td>
  228.                             </tr>
  229.                             <tr>
  230.                                 <th>
  231.                                     Jumlah Tamu
  232.                                 </th>
  233.                                 <td>
  234.                                     : 10 Orang
  235.                                 </td>
  236.                             </tr>    
  237.                         </table>
  238.                     </div>
  239.                     <div class="total">
  240.                         <h2 class="total-pembayaran">Total Pembayaran</h2>
  241.                         <h2 class="total-count">Rp3.000.000</h2>
  242.                     </div>
  243.                 </div>
  244.                 <div class="all-content">
  245.                     <h3 class="both-text">Dapat ditransfer melalui:</h3>
  246.                     <div class="all-subcontent">
  247.                         <table class="my-table">
  248.                             <tr>
  249.                                 <th>
  250.                                     No. Rekening
  251.                                 </th>
  252.                                 <td>
  253.                                     : 22301120304012
  254.                                 </td>
  255.                             </tr>
  256.                             <tr>
  257.                                 <th>
  258.                                     Nama Pemilik
  259.                                 </th>
  260.                                 <td>
  261.                                     : John Doe
  262.                                 </td>
  263.                             </tr>  
  264.                         </table>
  265.                     </div>
  266.                 </div>
  267.                 <div class="all-content">
  268.                     <h3 class="both-text">Punya Pertanyaan?</h3>
  269.                     <div class="button-kunjung">
  270.                         <a href="" target="_blank" rel="noreferrer">Kunjungi Pusat Bantuan</a>
  271.                     </div>
  272.                 </div>
  273.             </div>
  274.    
  275.             <!-- footer content -->
  276.             <div class="footer-container">
  277.                 <div class="footer-contact">
  278.                     <table class="table-contact">
  279.                         <tr>
  280.                             <th>
  281.                                 <img src="https://i.postimg.cc/jdbfRHYv/whatsapp.png" alt="icon-whatapps" class="contact">
  282.                             </th>
  283.                             <td>
  284.                                 <p>Orderia Whatsapp</p>
  285.                                 <a href="" target="_blank" rel="noreferrer">+62 112-2334-223</a>
  286.                             </td>
  287.                             <th>
  288.                                 <img src="https://i.postimg.cc/tJ0xZPZq/direct-inbox.png" alt="icon-aplikasi" class="contact">
  289.                             </th>
  290.                             <td>
  291.                                 <p>Aplikasi Orderia</p>
  292.                                 <a href="" target="_blank" rel="noreferrer">orderia.co/download</a>
  293.                             </td>
  294.                         </tr>
  295.                         <tr>
  296.                             <th>
  297.                                 <img src="https://i.postimg.cc/T2mm8kFp/sms.png" alt="icon-sms" class="contact">                            
  298.                             </th>
  299.                             <td>
  300.                                 <p>Orderia Email</p>
  301.                                 <a href="https://mail.google.com/mail/u/0/?view=cm&tf=1&fs=1&to=support@orderia.co" target="_blank" rel="noreferrer">support@orderia.co</a>
  302.                             </td>
  303.                             <th>
  304.                                 <img src="https://i.postimg.cc/4yzhzdVz/global.png"  alt="icon-globe" class="contact">                                                        
  305.                             </th>
  306.                             <td>
  307.                                 <p>Orderia Website</p>
  308.                                 <a href="" target="_blank" rel="noreferrer">orderia.co</a>
  309.                             </td>
  310.                         </tr>
  311.                     </table>
  312.                 </div>
  313.                 <div class="table-icon">
  314.                     <div class="icon-content">
  315.                         <div class="apps">
  316.                             <a href='https://www.apple.com/app-store/' target='_blank' rel='noreferrer'>                        
  317.                                 <img src="https://i.postimg.cc/fbFFZbfs/appstore.png" alt="appstore" class="image-link">
  318.                             </a>
  319.                             <a href='https://play.google.com/store/' target='_blank' rel='noreferrer'>
  320.                                 <img src="https://i.postimg.cc/FKjcFWjK/googleplay.png" alt="googleplay" class="image-link">
  321.                             </a>
  322.                         </div>
  323.                         <div class="icon">
  324.                             <a href='https://www.instagram.com/hovisohibul/?next=%2F' target='_blank' rel='noreferrer' >
  325.                                 <img src="https://i.postimg.cc/gkt30dvD/ig.png" alt="instagram">
  326.                             </a>
  327.                             <a href='https://twitter.com/home' target='_blank' rel='noreferrer' style="padding-top: 40px;">
  328.                                 <img src="https://i.postimg.cc/zG9Wnj2H/twitter.png" alt="twitter">
  329.                             </a>
  330.                             <a href='https://www.youtube.com/watch?v=SfSplXqACNE&ab_channel=NOICE' target='_blank' rel='noreferrer'>
  331.                                 <img src="https://i.postimg.cc/yNcRnZ2Q/youtube.png" alt="youtube">
  332.                             </a>
  333.                             <a href='https://www.facebook.com/profile.php?id=100071366830392' target='_blank' rel='noreferrer'>
  334.                                 <img src="https://i.postimg.cc/Y231JQ0T/fb.png" alt="facebook">
  335.                             </a>
  336.                             <a href='https://www.linkedin.com/in/hovi-sohibul-wafa-1287001b5/' target='_blank' rel='noreferrer'>
  337.                                 <img src="https://i.postimg.cc/Pr5mhN8J/llink.png" alt="linked">
  338.                             </a>
  339.                             <a href='https://www.tiktok.com/search?lang=id-ID&q=aespa_official&t=1691471614785' target='_blank' rel='noreferrer'>
  340.                                 <img src="https://i.postimg.cc/jSWPw9cr/tiktok.png" alt="tiktok">
  341.                             </a>                            
  342.                             <!-- <table class="table">
  343.                                <tr>
  344.                                    <td>
  345.                                        <a href='https://www.instagram.com/hovisohibul/?next=%2F' target='_blank' rel='noreferrer' >
  346.                                            <img src="https://i.postimg.cc/gkt30dvD/ig.png" alt="instagram">
  347.                                        </a>
  348.                                        <a href='https://twitter.com/home' target='_blank' rel='noreferrer' style="padding-top: 40px;">
  349.                                            <img src="https://i.postimg.cc/zG9Wnj2H/twitter.png" alt="twitter">
  350.                                        </a>
  351.                                        <a href='https://www.youtube.com/watch?v=SfSplXqACNE&ab_channel=NOICE' target='_blank' rel='noreferrer'>
  352.                                            <img src="https://i.postimg.cc/yNcRnZ2Q/youtube.png" alt="youtube">
  353.                                        </a>
  354.                                        <a href='https://www.facebook.com/profile.php?id=100071366830392' target='_blank' rel='noreferrer'>
  355.                                            <img src="https://i.postimg.cc/Y231JQ0T/fb.png" alt="facebook">
  356.                                        </a>
  357.                                        <a href='https://www.linkedin.com/in/hovi-sohibul-wafa-1287001b5/' target='_blank' rel='noreferrer'>
  358.                                            <img src="https://i.postimg.cc/Pr5mhN8J/llink.png" alt="linked">
  359.                                        </a>
  360.                                        <a href='https://www.tiktok.com/search?lang=id-ID&q=aespa_official&t=1691471614785' target='_blank' rel='noreferrer'>
  361.                                            <img src="https://i.postimg.cc/jSWPw9cr/tiktok.png" alt="tiktok">
  362.                                        </a>
  363.                                    </td>
  364.                                </tr>
  365.                            </table> -->
  366.                         </div>
  367.                     </div>
  368.                 </div>
  369.             </div>
  370.         </div>
  371.     </div>
  372. </body>
  373. </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!