<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Invoice</title> <style> @font-face { font-family: "Montserrat-SemiBold"; src: url("https://s3.us-west-1.amazonaws.com/storage.fusenpack.com/b808164b4f7ecc19f560d235db5b1f5b99fe8ab218b606f15debab2b9c4230e2"); } @font-face { font-family: "Montserrat-Medium"; src: url("https://s3.us-west-1.amazonaws.com/storage.fusenpack.com/3d91bbd91ba6fac26b8460a078742b61bfd1e2976311c065f8ac9c5270be6901"); } @font-face { font-family: "Montserrat-Light"; src: url("https://s3.us-west-1.amazonaws.com/storage.fusenpack.com/24e580a4a5afebf94596ec7b6c8d9c8d57f75a5429ee757217da552d5f03e5d1"); } @font-face { font-family: "Montserrat-Regular"; src: url("https://s3.us-west-1.amazonaws.com/storage.fusenpack.com/78072d2cbce0a3f88c01ab2830ba3a453f0968b516388e45e9a6fb5e970450b8"); } body { margin: 0; } .header_warp { background-color: #F8F8FA; padding: 20px 5% 20px 6%; } .header_td { width: 50%; font-family: Montserrat-SemiBold; } .header_td.logo { vertical-align: top; } .header_logo { max-height: 15px; max-width: 100%; margin-top: 5px; } .header_td.title { color: #212121; font-weight: 600; font-size: 36px; } .information_warp { padding: 30px 5% 30px 6%; } .information_td { width: 50%; font-size: 13px; line-height: 20px; font-weight: 300; font-family: Montserrat-Light; } .information_td.bill { color: #212121; font-weight: 500; font-family: Montserrat-Medium; } .information_td.right { color: #212121; } .information_td.info { color: #666666; line-height: 17px; } .bill_warp { padding: 0 5% 0 6%; } .bill_td { font-size: 13px; } .bill_td:first-child { width: 47.59%; } .bill_td.title { border-top: 2px solid #333; padding: 13px 0 7px; font-weight: 500; color: #212121; font-family: Montserrat-Medium; } .bill_td.info { color: #666; border-bottom: 1px solid #ccc; padding: 8px 0; font-weight: 400; font-family: Montserrat-Light; } .bill_td.info:first-child { font-family: Montserrat-Regular; } .bill_warp tr:last-child .bill_td.info { border-bottom: none; } .total_warp { padding: 14px 5% 24px 0; } .total_td { color: #212121; padding: 8px 0 7px; font-size: 12px; font-weight: 500; font-family: Montserrat-Medium; } .total_td.info { color: #666; font-weight: 400; font-family: Montserrat-Regular; } .total_td.border-dashed { border-bottom: 1px dashed #ccc; } .total_td.border-solid { border-bottom: 2px solid #333; padding-bottom: 12px; } .total_td.total { padding-top: 12px; font-size: 13px; font-weight: 600; font-family: Montserrat-SemiBold; } .notes_warp { padding: 0 5% 0 6%; } .notes_td { font-size: 13px; color: #666; font-weight: 300; width: 50%; line-height: 21px; font-family: Montserrat-Light; } .notes_td.title { color: #212121; font-weight: 500; font-family: Montserrat-Medium; } .notes_td.notes { vertical-align: top; } </style> </head> <body> <!-- header --> <table class="header_warp" border="0" align="center" cellpadding="0" cellspacing="0" width="100%"> <tr> <td class="header_td logo" align="left"> <img class="header_logo" src="https://fusenapi.kayue.cn:8010/storage/email/logo.png" alt="logo"> </td> <td class="header_td title" align="right">Invoice</td> </tr> </table> <!-- information --> <table class="information_warp" border="0" align="center" cellpadding="0" cellspacing="0" width="100%"> <tr> <td class="information_td bill" align="left">Bill To:</td> <td class="information_td right" align="right">Invoice No. #20220562040</td> </tr> <tr> <td class="information_td info" align="left">Timmy Turner</td> <td class="information_td right" align="right">Date: 2023/12/04</td> </tr> <tr> <td class="information_td info" align="left">North Street</td> <td class="information_td" align="right"></td> </tr> <tr> <td class="information_td info" align="left">London, SE20 3JW</td> <td class="information_td" align="right"></td> </tr> <tr> <td class="information_td info" align="left">United Kingdom</td> <td class="information_td" align="right"></td> </tr> </table> <!-- bill --> <table class="bill_warp" border="0" align="center" cellpadding="0" cellspacing="0" width="100%"> <tr> <td class="bill_td title" align="left">Product Name</td> <td class="bill_td title" align="right">Price</td> <td class="bill_td title" align="right">Quantity</td> <td class="bill_td title" align="right">Total</td> </tr> <tr> <td class="bill_td info" align="left">Plastic bowl</td> <td class="bill_td info" align="right">$01.00</td> <td class="bill_td info" align="right">20,000 Units</td> <td class="bill_td info" align="right">$99.00</td> </tr> <tr> <td class="bill_td info" align="left">Paper bag with handlexxxxxxxxxxxxxxx second line</td> <td class="bill_td info" align="right">$01.00</td> <td class="bill_td info" align="right">20,000 Units</td> <td class="bill_td info" align="right">$99.00</td> </tr> </table> <!-- total --> <table class="total_warp" border="0" align="right" cellpadding="0" cellspacing="0" width="50%"> <tr> <td class="total_td" align="right">Subtotal</td> <td class="total_td info" align="right">$198.00</td> </tr> <tr> <td class="total_td" align="right">Shipping Fee</td> <td class="total_td info" align="right">Free</td> </tr> <tr> <td class="total_td border-dashed" align="right">Tax</td> <td class="total_td info border-dashed" align="right">$0.00</td> </tr> <tr> <td class="total_td" align="right">Total</td> <td class="total_td info" align="right">$198.00</td> </tr> <tr> <td class="total_td border-solid" align="right">Deposit Requested</td> <td class="total_td info border-solid" align="right">$99.00</td> </tr> <tr> <td class="total_td total" align="right">Deposit Due</td> <td class="total_td total" align="right">$99.00</td> </tr> </table> <!-- notes --> <table class="notes_warp" border="0" align="center" cellpadding="0" cellspacing="0" width="100%"> <tr> <td class="notes_td title" align="left">Payment Method:</td> <td class="notes_td title" align="left">Notes:</td> </tr> <tr> <td class="notes_td" align="left">ICBC</td> <td class="notes_td notes" align="left" rowspan="2">Thank you for your business !</td> </tr> <tr> <td class="notes_td" align="left">Account No. :20000000001</td> </tr> </table> </body> </html>