{ "html": "\n\n \n \n \n Basic Corporate Report<\/title>\n <link rel=\"stylesheet\" href=\"style.css\" \/>\n <\/head>\n <body>\n <div class=\"cover\">\n <div class=\"logo-area\">\n <div class=\"circle\"><\/div>\n <h1>Company Logo<\/h1>\n <\/div>\n <h2>\n Corporate Performance\n <\/h2>\n <h3>\n Annual Report\n <\/h3>\n <h4>\n March 2021\n <\/h4>\n <\/div>\n <div class=\"report-page\">\n <div class=\"white-stripe\">\n <div class=\"logo-area\">\n <div class=\"circle\"><\/div>\n <\/div>\n <\/div>\n <h2>Sales Overview <span>2021<\/span><\/h2>\n <table>\n <tr>\n <td>\n <h3>Revenue<\/h3>\n <p>$20,000,000<\/p>\n <\/td>\n <td>\n <h3>Customers<\/h3>\n <p>2,200,000<\/p>\n <\/td>\n <\/tr>\n <\/table>\n <figure>\n <img src=\"https:\/\/raw.githubusercontent.com\/azettl\/printcss.examples\/main\/HTML%20Examples\/Company%20Examples\/Reports\/Basic%20Corporate%20Report\/linechart.png\" alt=\"Line Chart\" \/>\n <\/figure>\n <\/div>\n <div class=\"report-page white-page\">\n <div class=\"white-stripe\">\n <div class=\"logo-area\">\n <div class=\"circle\"><\/div>\n <\/div>\n <\/div>\n <h2>Consumer Profiles<\/h2>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam praeteritis? Sed nimis multa. Non potes, nisi retexueris illa. Duo Reges: constructio interrete.<\/p>\n <figure>\n <img src=\"https:\/\/raw.githubusercontent.com\/azettl\/printcss.examples\/main\/HTML%20Examples\/Company%20Examples\/Reports\/Basic%20Corporate%20Report\/barchart.png\" alt=\"Bar Chart\" \/>\n <\/figure>\n <\/div>\n <div class=\"report-page\">\n <div class=\"white-stripe\">\n <div class=\"logo-area\">\n <div class=\"circle\"><\/div>\n <\/div>\n <\/div>\n <h2>Consumer Lifestyle Behaviour<\/h2>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam praeteritis?<\/p>\n <ul>\n <li>Ipse Epicurus fortasse redderet, ut Sextus Peducaeus, Sex.<\/li>\n <li>Nihil opus est exemplis hoc facere longius.<\/li>\n <li>Nisi autem rerum natura perspecta erit, nullo modo poterimus sensuum iudicia defendere.<\/li>\n <li>Honesta oratio, Socratica, Platonis etiam.<\/li>\n <li>Nisi autem rerum natura perspecta erit, nullo modo poterimus sensuum iudicia defendere.<\/li>\n <li>Honesta oratio, Socratica, Platonis etiam.<\/li>\n <li>Sed mehercule pergrata mihi oratio tua.<\/li>\n <\/ul>\n <\/div>\n <\/body>\n<\/html>", "css": "@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;700&display=swap');\n\n@page{\n size:210mm 148mm;\n margin:10mm 20mm 5mm 20mm;\n background:#44b75b;\n}\n\n@page white{\n background:white;\n}\n\n@page:first{\n margin:20mm;\n}\n\nbody{\n font-family: 'Poppins', sans-serif;\n margin:0;\n}\n\n.cover{\n page:cover;\n background:white;\n width:210mm;\n margin-left:-2cm;\n padding-left:2cm;\n height:2cm;\n text-transform:uppercase;\n}\n\n.cover .circle{\n width:1.5cm;\n height:1.5cm;\n border:.5cm solid #000222;\n border-radius:100%;\n display:inline-block;\n position:relative;\n top:-.25cm; \n}\n\n.cover .logo-area h1{\n display:inline-block;\n color:#000222;\n width:5cm;\n line-height:1;\n margin-left:0.25cm;\n position:relative;\n top:-.75cm;\n}\n\n.cover h2,\n.cover h3{\n margin:0;\n line-height:1;\n}\n\n.cover h2{\n font-size:32pt;\n width:10cm;\n margin-top:1cm;\n}\n\n.cover h3{\n font-size:24pt;\n font-weight:normal;\n color:white;\n width:6cm;\n}\n\n.cover h4{\n font-size:16pt;\n margin-top:1cm;\n}\n\n.report-page{\n break-before:always;\n}\n\n.white-page{\n page:white;\n}\n\n.report-page .white-stripe{\n background:white;\n width:210mm;\n margin-left:-2cm;\n padding-left:2cm;\n height:2cm;\n text-transform:uppercase;\n}\n\n.white-page .white-stripe{\n background:#44b75b;\n}\n\n.report-page .white-stripe .circle{\n width:1.5cm;\n height:1.5cm;\n border:.5cm solid #000222;\n border-radius:100%;\n display:inline-block;\n position:relative;\n top:-.25cm;\n left:145mm;\n}\n\n.report-page h2,\n.report-page h3{\n margin:.5cm 0;\n text-transform:uppercase;\n line-height:1;\n font-size:24pt;\n}\n\n.report-page h3{\n margin:0;\n color:white;\n font-size:16pt;\n}\n\n.report-page h2 span{\n font-weight:normal;\n}\n\ntable{\n border-collapse:collapse;\n width:100%;\n}\n\ntd{\n width:50%;\n vertical-align:top;\n}\n\np{\n margin:0;\n}\n\nimg{\n height:8cm;\n}\n\nfigure{\n margin:0;\n text-align:center;\n}", "options": { "renderer": "weasyprint" } }