{ "html": "\n\n\n \n \n Basic Corporate Invoice<\/title>\n <link rel=\"stylesheet\" href=\"style.css\" \/>\n<\/head>\n<body>\n <div>\n <div class=\"logo-area\">\n <div class=\"circle\"><\/div>\n <h1>Company Logo<\/h1>\n <\/div>\n <table class=\"footer\">\n <tr>\n <td colspan=\"3\">\n <div class=\"footer-logo-area\">\n <div class=\"circle\"><\/div>\n <h1>Company Logo<\/h1>\n <\/div>\n <\/td>\n <\/tr>\n <tr>\n <td>\n <h3>Awesome Company<\/h3>\n Busystreet 5<br\/>\n 00001 Gotham<br\/>\n Fantasyland\n <\/td>\n <td class=\"qrcode\">\n <img src=\"https:\/\/raw.githubusercontent.com\/azettl\/printcss.examples\/main\/HTML%20Examples\/Company%20Examples\/Invoices\/Basic%20Corporate%20Invoice\/qrcode.png\" alt=\"QR Code to example.com\" \/>\n <\/td>\n <td>\n <h3>Payment<\/h3>\n Awesome Bank<br\/>\n DE12 1234 0000 5678 9000 00<br\/>\n Best Bank<br\/>\n DE01 2345 6789 0000 1234 56\n <\/td>\n <\/tr>\n <\/table>\n <table class=\"first-page-header\">\n <tr>\n <td rowspan=\"2\">\n <div class=\"from-address\">\n Awesome Company · \n Busystreet 5 · \n 00001 Gotham ·\n Fantasyland\n <\/div>\n <div class=\"to-address\">\n <h3>Mueller Ltd.<\/h3>\n Max Mueller<br\/>\n Lazyroad 2<br\/>\n 00002 New Town<br\/>\n Fantasyland\n <\/div>\n <\/td>\n <td class=\"right\">\n <h3>Invoice<\/h3>\n <table>\n <tr>\n <td>Customer No:<\/td>\n <td>1234567<\/td>\n <\/tr>\n <tr>\n <td>Invoice Date:<\/td>\n <td>13. March 2021<\/td>\n <\/tr>\n <tr>\n <td>Due Date:<\/td>\n <td>27. March 2021<\/td>\n <\/tr>\n <tr>\n <td>Our VAT Id:<\/td>\n <td>DE 123 456 789<\/td>\n <\/tr>\n <tr>\n <td>Your VAT Id:<\/td>\n <td>FR 987 654 321<\/td>\n <\/tr>\n <\/table>\n <\/td>\n <\/tr>\n <tr>\n <td class=\"right distance\">\n <h3>Your Contact<\/h3>\n <table>\n <tr>\n <td colspan=\"2\">Jane Doe<br\/>Print CSS and Web Development Guru<\/td>\n <\/tr>\n <tr>\n <td>Phone:<\/td>\n <td>+49 123 4567 8901<\/td>\n <\/tr>\n <tr>\n <td>E-Mail:<\/td>\n <td>jane.doe@example.com<\/td>\n <\/tr>\n <tr>\n <td>Website:<\/td>\n <td>example.com<\/td>\n <\/tr>\n <\/table>\n <\/td>\n <\/tr>\n <\/table>\n <div class=\"content\">\n <h1>Invoice<span class=\"green\">#2021-1234<\/span><\/h1>\n <p>\n <b>Date: 13. March 2021<\/b>\n <\/p>\n <p>\n Dear Mr. Mueller,\n <br \/>\n we allow ourselves to invoice the following items for our efforts. \n <\/p>\n <table>\n <thead>\n <tr>\n <th>SKU<\/th>\n <th>Name<\/th>\n <th>Quantity<\/th>\n <th class=\"right\">Price<\/th>\n <th class=\"right\">Tax<\/th>\n <th class=\"right\">Total<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>S21T-Gec-RS<\/td>\n <td>Summer 2021,<br \/>Gecko Tee,<br\/>Small,<br \/>Red<\/td>\n <td>1<\/td>\n <td class=\"right\">14,99 \u20ac<\/td>\n <td class=\"right\">2,84 \u20ac<\/td>\n <td class=\"right\">14,99 \u20ac<\/td>\n <\/tr>\n <tr>\n <td>S21T-Gec-RM<\/td>\n <td>Summer 2021,<br \/>Gecko Tee,<br\/>Medium,<br \/>Red<\/td>\n <td>4<\/td>\n <td class=\"right\">59,96 \u20ac<\/td>\n <td class=\"right\">11,36 \u20ac<\/td>\n <td class=\"right\">59,96 \u20ac<\/td>\n <\/tr>\n <tr>\n <td>S21T-Lad-WS<\/td>\n <td>Summer 2021,<br \/>Ladybird Tee,<br\/>Small,<br \/>White<\/td>\n <td>1<\/td>\n <td class=\"right\">14,99 \u20ac<\/td>\n <td class=\"right\">2,84 \u20ac<\/td>\n <td class=\"right\">14,99 \u20ac<\/td>\n <\/tr>\n <tr>\n <td>S21T-Lad-WM<\/td>\n <td>Summer 2021,<br \/>Ladybird Tee,<br\/>Medium,<br \/>White<\/td>\n <td>4<\/td>\n <td class=\"right\">59,96 \u20ac<\/td>\n <td class=\"right\">11,36 \u20ac<\/td>\n <td class=\"right\">59,96 \u20ac<\/td>\n <\/tr>\n <tr>\n <td>W21S-Gec-RS<\/td>\n <td>Winter 2021,<br \/>Gecko Sweater,<br\/>Small,<br \/>Red<\/td>\n <td>1<\/td>\n <td class=\"right\">24,99 \u20ac<\/td>\n <td class=\"right\">4,74 \u20ac<\/td>\n <td class=\"right\">24,99 \u20ac<\/td>\n <\/tr>\n <tr>\n <td>W21S-Lad-WM<\/td>\n <td>Winter 2021,<br \/>Ladybird Sweater,<br\/>Medium,<br \/>White<\/td>\n <td>2<\/td>\n <td class=\"right\">49,98 \u20ac<\/td>\n <td class=\"right\">9,48 \u20ac<\/td>\n <td class=\"right\">49,98 \u20ac<\/td>\n <\/tr>\n <tr>\n <td colspan=\"5\" class=\"right no-border\">\n <b>Subtotal<\/b>\n <\/td>\n <td class=\"right no-border\">182,25 \u20ac<\/td>\n <\/tr>\n <tr>\n <td colspan=\"5\" class=\"right no-border\">\n <b>Tax<\/b>\n <\/td>\n <td class=\"right no-border\">42,62 \u20ac<\/td>\n <\/tr>\n <tr>\n <td colspan=\"5\" class=\"right no-border\">\n <b>Discount<\/b>\n <\/td>\n <td class=\"right no-border\">0,00 \u20ac<\/td>\n <\/tr>\n <tr>\n <td colspan=\"5\" class=\"right no-border\">\n <b>Shipping<\/b>\n <\/td>\n <td class=\"right no-border\">5,99 \u20ac<\/td>\n <\/tr>\n <tr>\n <td colspan=\"5\" class=\"right no-border\">\n <b>Total<\/b>\n <\/td>\n <td class=\"right no-border\">230,86 \u20ac<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <p>\n <b>Shipping method:<\/b> UPS - Express.\n <\/p>\n <p>\n <b>Payment method:<\/b> Please transfer the invoice amount within 14 days.\n <\/p>\n <\/div>\n <\/div>\n<\/body>\n<\/html>", "css": "@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;700&display=swap');\n\nbody{\n\tfont-family: 'Poppins', sans-serif;\n\tfont-size:12pt;\n}\n\n@page{\n size:210mm 297mm;\n margin:4cm 1cm 6cm 2cm;\n \n @top-right{\n \tcontent:element(coverLogo);\n }\n \n @bottom-right-corner{\n content:\"\";\n \tbackground:#44b75b;\n \tborder-top:.25cm solid #000222;\n }\n \n @bottom-right{\n content:\"\";\n \tbackground:#44b75b;\n \tborder-top:.25cm solid #000222;\n }\n \n @bottom-center{\n width:100%;\n content:element(footerArea);\n \tbackground:#44b75b;\n \tborder-top:.25cm solid #000222;\n }\n \n @bottom-left{\n \tbackground:#44b75b;\n \tborder-top:.25cm solid #000222;\n }\n \n @bottom-left-corner{\n content:\"\";\n \tbackground:#44b75b;\n \tborder-top:.25cm solid #000222;\n }\n}\n\n.logo-area{\n\tposition:running(coverLogo);\n}\n\n.footer{\n position:running(footerArea);\n color:#000222;\n width:100%;\n}\n\n.footer td{\n vertical-align:top;\n}\n\n.footer .qrcode{\n width:6cm;\n}\n\n.footer img{\n padding-left:25%;\n width:50%;\n}\n\n.first-page-header{\n width:100%;\n border-collapse:collapse;\n font-size:10pt;\n}\n\n.from-address{\n font-style:italic;\n font-size:8pt;\n margin-bottom:.25cm;\n}\n\n.first-page-header td{\n vertical-align:top;\n}\n\n.first-page-header td table{\n width:100%;\n}\n\n.first-page-header td table td:first-child{\n text-align:left;\n font-weight:bold;\n}\n\n.circle{\n\twidth:1cm;\n \theight:1cm;\n \tborder:.4cm solid #44b75b;\n \tborder-radius:100%;\n display:inline-block;\n}\n\n.footer-logo-area{\n margin-top:.25cm;\n}\n\n.footer-logo-area .circle{\n\t width:.5cm;\n \theight:.5cm;\n \tborder:.2cm solid white;\n}\n\n.footer-logo-area h1,\n.logo-area h1{\n\tdisplay:inline-block;\n \ttext-transform:uppercase;\n \tcolor:#000222;\n \twidth:4.4cm;\n \tline-height:1;\n \tmargin-left:0.25cm;\n \tposition:relative;\n top:-.25cm; \n}\n\n.footer-logo-area h1{\n font-size:1em;\n \twidth:2.4cm;\n top:-.125cm; \n}\n\n.content table{\n width:100%;\n border-collapse:collapse;\n}\n\n.content th{\n text-align: left;\n border-bottom:.125cm solid #000222;\n}\n\n.content td{\n border-bottom:.0125cm solid #000222;\n}\n\n.content tr{\n break-inside: avoid;\n page-break-inside: avoid;\n}\n\n.content .no-border{\n border-bottom:none;\n}\n\n.content h1{\n\tcolor:#000222;\n \tmargin-top:0;\n \ttext-transform: capitalize;\n}\n\n.green{\n\tcolor:#44b75b;\n \tdisplay:block;\n}\nh3{\n margin:0;\n}\n\n.distance{\n padding-top:.25cm;\n}\n\n.right{\n text-align:right !important;\n}", "options": { "renderer": "weasyprint" } }