Scribd
Upload
18 views5 pages

Invoice Design - HTML CSS

This document is an HTML template for an invoice featuring details such as invoice number, issued and due dates, billed and sender information, itemized services with quantities and rates, and total amounts due. It includes embedded SVG graphics and links to external stylesheets for styling. The invoice is designed for a business transaction between Savvy Eats, Inc. and a customer named Ahmad Ali.

Uploaded by

ahtasham.shan7
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
18 views5 pages

Invoice Design - HTML CSS

This document is an HTML template for an invoice featuring details such as invoice number, issued and due dates, billed and sender information, itemized services with quantities and rates, and total amounts due. It includes embedded SVG graphics and links to external stylesheets for styling. The invoice is designed for a business transaction between Savvy Eats, Inc. and a customer named Ahmad Ali.

Uploaded by

ahtasham.shan7
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:wght@500"
/>
<title>HTML Preview</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="compiled-styles.css" />
</head>
<body style="margin: 0px">
<!-- This only removes default margins in our renderer iframe, you may remove
-->
<div id="firejet-html-app">
<div class="invoice-wrapper">
<div class="invoice-invoice">
<div class="invoice-noise">
<div class="invoice-noise-1">
<div class="invoice-tt-invoice-ab-232401tvector">
<div class="invoice-t-invoice-ab">
<div class="invoice-invoice-1">Invoice</div>
<div class="invoice-ab">#AB2324-01</div>
</div>
<div class="invoice-t-vector">
<object
data="/assets/Vector.svg"
class="invoice-vector"
></object>
</div>
</div>
<div class="invoice-t-rectangle">
<div class="invoice-rectangle">
<div class="invoice-t-vector-27vector">
<object
data="/assets/Vector1.svg"
class="invoice-vector-1"
></object
><object
data="/assets/Vector1.svg"
class="invoice-vector-2"
></object>
</div>
<div class="invoice-tt-issued-01aug-2024tdue-15aug-2024vector-
131ttbilled-to-tahmad-ali-607amain-boulevard-qatar-doha-qatar-
0000000001234567vector-132ttfrom-tsavvy-eats-inc-business-address-city-state-in-
000000tax-id-00xxxxx-1234x-0xx" >
<div class="invoice-t-issued-01aug-2024tdue-15aug">
<div>Issued</div>
<div class="invoice-aug">01 Aug, 2024</div>
<div class="invoice-due">Due</div>
<div class="invoice-aug-1">15 Aug, 2024</div>
</div>
<object
data="/assets/Vector2.svg"
class="invoice-vector-3"
></object>
<div class="invoice-tt-billed-to-tahmad-ali-607amain-boulevard-
qatar-doha-qatar" >
<div class="invoice-t-billed-to-tahmad-ali-607amain-
boulevard-qatar-doha-qatar" >
<div class="invoice-billed-to">Billed to</div>
<div class="invoice-t-ahmad-ali">
<div class="invoice-ahmad-ali">Ahmad Ali</div>
</div>
<div class="invoice-a-main-boulevard-qatar-doha-qatar">
<span
><p>607-A, Main Boulevard, Qatar</p>
<p>Doha, Qatar - 00000</p></span
>
</div>
<div class="invoice-component">+0 (000) 123-4567</div>
</div>
</div>
<object
data="/assets/Vector2.svg"
class="invoice-vector-4"
></object>
<div class="invoice-tt-from-tsavvy-eats-inc-business-address-
city-state-in-000000tax-id-00xxxxx-1234x-0xx" >
<div class="invoice-t-from-tsavvy-eats-inc-business-address-
city-state-in-000000tax-id-00xxxxx-1234x-0xx" >
<div class="invoice-from">From</div>
<div class="invoice-t-savvy-eats-inc">
<div class="invoice-savvy-eats-inc">
Savvy Eats, Inc
</div>
</div>
<div class="invoice-business-address-city-state-in">
<span
><p>Business address</p>
<p>City, State, IN - 000 000</p></span
>
</div>
<div class="invoice-tax-id-00xxxxx-1234x-0xx">
TAX ID 00XXXXX1234X0XX
</div>
</div>
</div>
</div>
</div>
</div>
<div class="invoice-t-service-tqty-rate-line-total">
<div>Service</div>
<div class="invoice-t-qty-rate-line-total">
<div class="invoice-qty">Qty</div>
<div class="invoice-rate">Rate</div>
<div class="invoice-line-total">Line total</div>
</div>
</div>
<div class="invoice-t-vector-1">
<object
data="/assets/Vector3.svg"
class="invoice-vector-5"
></object>
</div>
<div class="invoice-t-breakfast-tt2tqar-10000tqar">
<div class="invoice-breakfast">Breakfast</div>
<div class="invoice-t-t2tqar-10000tqar">
<div class="invoice-t-2tqar">
<div class="invoice-component-1">2</div>
<div class="invoice-t-qar">
<div>QAR</div>
<div>100.00</div>
</div>
</div>
<div class="invoice-t-qar-1">
<div>QAR</div>
<div>200.00</div>
</div>
</div>
</div>
<div class="invoice-tt-description-hours-log">
<div class="invoice-t-description-hours-log">
<div>Description</div>
<div class="invoice-component-4">•</div>
<div>Hours log ↗</div>
</div>
</div>
<div class="invoice-tt-meals-description-tt2tqar-10000tqar">
<div class="invoice-t-meals-description">
<div class="invoice-meals">Meals</div>
<div>Description</div>
</div>
<div class="invoice-t-t2tqar-10000tqar-1">
<div class="invoice-t-2tqar-1">
<div class="invoice-component-5">2</div>
<div class="invoice-t-qar-2">
<div>QAR</div>
<div>100.00</div>
</div>
</div>
<div class="invoice-t-qar-3">
<div>QAR</div>
<div>200.00</div>
</div>
</div>
</div>
<div class="invoice-t-vector-2">
<object
data="/assets/Vector3.svg"
class="invoice-vector-6"
></object>
</div>
<div class="invoice-tt-subtotal-tqar">
<div class="invoice-t-subtotal-tqar">
<div class="invoice-subtotal">Subtotal</div>
<div class="invoice-t-qar-4">
<div>QAR</div>
<div>400.00</div>
</div>
</div>
</div>
<div class="invoice-t-vector-3">
<object
data="/assets/Vector4.svg"
class="invoice-vector-7"
></object>
</div>
<div class="invoice-tt-tax-0tqar">
<div class="invoice-t-tax-0tqar">
<div class="invoice-tax">Tax (0%)</div>
<div class="invoice-t-qar-5">
<div>QAR</div>
<div>0.00</div>
</div>
</div>
</div>
<div class="invoice-t-vector-4">
<object
data="/assets/Vector4.svg"
class="invoice-vector-8"
></object>
</div>
<div class="invoice-tt-total-tqar">
<div class="invoice-t-total-tqar">
<div class="invoice-total">Total</div>
<div class="invoice-t-qar-6">
<div>QAR</div>
<div>400.00</div>
</div>
</div>
</div>
<div class="invoice-t-due">
<div class="invoice-due-1">
<div class="invoice-t-amount-due-tqar">
<div class="invoice-amount-due">Amount due</div>
<div class="invoice-t-qar-7">
<div>QAR</div>
<div>400.00</div>
</div>
</div>
</div>
</div>
<div class="invoice-t-thank-you-for-the-business">
<div class="invoice-thank-you-for-the-business">
Thank you for the business!
</div>
</div>
<div class="invoice-tt-icon-you-ve-already-paid-for-this-service">
<div class="invoice-t-icon-you-ve-already-paid-for-this-service" >
<object
data="/assets/Icon.svg"
class="invoice-icon"
></object>
<div class="invoice-you-ve-already-paid-for-this-service">
You’ve already paid for this service.
</div>
</div>
</div>
<div class="invoice-t-rectangle-1">
<div class="invoice-rectangle-1">
<object
data="/assets/Vector5.svg"
class="invoice-vector-9"
></object>
<div class="invoice-t-www-savvyeats-com-910000000000vector-
128hello-email-com" >
<div class="invoice-www-savvyeats-com">
www.savvyeats.com
</div>
<div>+91 00000 00000</div>
<object
data="/assets/Vector6.svg"
class="invoice-vector-10"
></object>
<div>[email protected]</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

<!--
This component was generated from Figma with FireJet.
Learn more at https://www.firejet.io

README:
The output code may look slightly different when copied to your codebase. To fix
this:
1. Include the necessary fonts. The required fonts are imported from index.html
2. Include the global styles. They can be found in styles.css

Note: Step 2 is not required for tailwind.css output


-->

You might also like