Invoice - Done
HTML
<!-- THIS CUSTOM <STYLE> SECTION IS SPECIFIC TO THIS PAGE, DO NOT APPLY THESE STYLES TO OTHER PAGES OR IT WILL BREAK THINGS!!! -->
<style>
table {
border-collapse: separate;
border-spacing: 0;
}
thead {
background: transparent;
}
th:first-child {
border-top-left-radius: var(--general--border-radius);
overflow: hidden;
}
th:last-child {
border-top-right-radius: var(--general--border-radius);
overflow: hidden;
}
th {
border: none;
background-clip: border-box;
position: relative;
background-color: var(--invoices--invoice-table-header-bg, transparent);
}
tbody tr td:first-child {
border-left: 1px solid var(--invoices--invoice-table-border);
}
tbody tr td:last-child {
border-right: 1px solid var(--invoices--invoice-table-border);
}
tbody tr:nth-child(even) {
background-color: var(--invoices--invoice-alternating-row);
}
</style>
<div class="paper-8-5x11">
<div class="invoice-wrapper">
<div class="invoice-top">
<div class="invoice-logo-container">
<img src="{app logo}" loading="lazy" width="Auto" alt="{app name}" class="invoice-logo">
</div>
<div class="invoice-number">Invoice #8888888888</div>
</div>
<div class="w-layout-grid invoice-details">
<div class="invoice-details-side-container">
<div class="invoice-detail-container">
<div class="invoice-detail-section-heading">User First Inc. dba EveryAnswer</div>
<div>36-3033 King George Blvd.<br>Surrey, British Columbia<br>Canada, V4P 1B8</div>
</div>
<div class="invoice-detail-container">
<div class="invoice-detail-section-heading uppercase">Bill To</div>
<div>happier IT Inc.<br>36-3033 King George Blvd.<br>Surrey, British Columbia<br>Canada, V4P 1B8</div>
</div>
</div>
<div class="invoice-details-side-container">
<div class="invoice-detail-container">
<div class="invoice-detail-line">
<div class="invoice-detail-line-key">Invoice Date:</div>
<div class="invoice-detail-line-value">October 1, 2024</div>
</div>
<div class="invoice-detail-line">
<div class="invoice-detail-line-key">Invoice Amount:</div>
<div class="invoice-detail-line-value">$249.00</div>
</div>
<div class="invoice-detail-line">
<div class="invoice-detail-line-key">Purchase Order:</div>
<div class="invoice-detail-line-value">N/A</div>
</div>
<div class="invoice-detail-line">
<div class="invoice-detail-line-key">Invoice Status:</div>
<div class="invoice-detail-line-value">Refunded</div>
</div>
<div class="invoice-detail-line">
<div class="invoice-detail-line-key">Billing Period:</div>
<div class="invoice-detail-line-value">September 2024</div>
</div>
</div>
<div class="invoice-detail-container">
<div class="invoice-detail-section-heading uppercase">Payment Method</div>
<div class="invoice-detail-line">
<div class="invoice-detail-line-key">Method:</div>
<div class="invoice-detail-line-value">Credit Card</div>
</div>
<div class="invoice-detail-line">
<div class="invoice-detail-line-key">Type:</div>
<div class="invoice-detail-line-value">Visa</div>
</div>
<div class="invoice-detail-line">
<div class="invoice-detail-line-key">Card:</div>
<div class="invoice-detail-line-value">xxxx xxxx xxxx 1111</div>
</div>
</div>
</div>
</div>
<div class="invoice-main-content">
<div class="invoice-table-wrapper">
<table class="invoice-table">
<thead>
<tr>
<th class="invoice-table-heading">Description</th>
<th class="invoice-table-heading center">Quantity</th>
<th class="invoice-table-heading right">Price Per</th>
<th class="invoice-table-heading right">Subtotal</th>
</tr>
</thead>
<tbody>
<tr>
<td class="invoice-table-cell">
<div class="invoice-line-description-heading">This is some text inside of a div block.</div>
<div class="invoice-line-description-detail">This is some text inside of a div block.</div>
</td>
<td class="invoice-table-cell center no-wrap">wqewqe</td>
<td class="invoice-table-cell right no-wrap">wqewqe</td>
<td class="invoice-table-cell right no-wrap">wqewqe</td>
</tr>
<tr class="tr">
<td class="invoice-table-cell">wqewqe</td>
<td class="invoice-table-cell center">wqewqe</td>
<td class="invoice-table-cell right">wqewqe</td>
<td class="invoice-table-cell right">wqewqe</td>
</tr>
<tr>
<td class="invoice-table-cell">wqewqe</td>
<td class="invoice-table-cell center">wqewqe</td>
<td class="invoice-table-cell right">wqewqe</td>
<td class="invoice-table-cell right">wqewqe</td>
</tr>
</tbody>
</table>
<div class="invoice-total-box">
<div class="invoice-subtotal-lines">
<div class="invoice-subtotal-item">
<div class="invoice-subtotal-item-key">Total excl. Tax</div>
<div class="invoice-subtotal-item-value">$1234.11</div>
</div>
<div class="invoice-subtotal-item">
<div class="invoice-subtotal-item-key">Tax 1 @ 10%</div>
<div class="invoice-subtotal-item-value">$1234.11</div>
</div>
<div class="invoice-subtotal-item">
<div class="invoice-subtotal-item-key">Tax 2 @ 20%</div>
<div class="invoice-subtotal-item-value">$1234.11</div>
</div>
<div class="invoice-subtotal-divider"></div>
<div class="invoice-subtotal-item">
<div class="invoice-subtotal-item-key"><strong>Total</strong></div>
<div class="invoice-subtotal-item-value"><strong>$1234.11</strong></div>
</div>
<div class="invoice-subtotal-item">
<div class="invoice-subtotal-item-key">Payments</div>
<div class="invoice-subtotal-item-value">$1234.11</div>
</div>
</div>
<div class="invoice-total-line">
<div class="invoice-subtotal-item-key">Amount Due</div>
<div class="invoice-subtotal-item-value">$1234.11</div>
</div>
</div>
</div>
</div>
<div class="invoice-footer">
<div class="invoice-detail-container">
<div class="invoice-detail-section-heading uppercase">Payments</div>
<div>$123.00 was paid on Dec 05, 2023 by Credit Card xxxx xxxx xxxx 1234.</div>
</div>
<div class="invoice-detail-container">
<div class="invoice-detail-section-heading uppercase">Exchange Rate</div>
<div>Please note: All charges are billed in USD, and currency exchange is managed by your credit card issuer or bank.</div>
</div>
</div>
</div>
</div>