{ "html": "\n\n \n \n \n Monthly Customer Activity Report<\/title>\n <link rel=\"stylesheet\" href=\"style.css\" \/>\n <\/head>\n <body>\n <div class=\"white-stripe\">\n <div class=\"logo-area\">\n <div class=\"circle\"><\/div>\n <h1>Company Logo<\/h1>\n <\/div>\n <\/div>\n <h2>\n Monthly Customer Activity Report\n <\/h2>\n <h3>\n March 2021\n <\/h3>\n <div class=\"section-white\">\n <div>\n <h4>The Breakdown<\/h4>\n <div class=\"breakdown\">\n <div>\n <p>\n <i>Avg Age:<\/i><br \/>\n <b>18-26<\/b>\n <\/p>\n <p>\n <i>Country:<\/i><br \/>\n <b>Germany<\/b>\n <\/p>\n <\/div>\n <figure>\n <img src=\"https:\/\/raw.githubusercontent.com\/azettl\/printcss.examples\/main\/HTML%20Examples\/Company%20Examples\/Reports\/Monthly%20Customer%20Activity%20Report\/doughnutchart1.png\" alt=\"Doughnut Chart\" \/>\n <\/figure>\n <\/div>\n <\/div>\n <div>\n <h4>Website Traffic: 32,500<\/h4>\n <div class=\"dark\">\n <p><i>Average Time on Page: 2:14 minutes<\/i><\/p>\n <figure>\n <img src=\"https:\/\/raw.githubusercontent.com\/azettl\/printcss.examples\/main\/HTML%20Examples\/Company%20Examples\/Reports\/Monthly%20Customer%20Activity%20Report\/devicechart.png\" alt=\"Device Chart\" \/>\n <\/figure>\n <\/div>\n <h4>Reports 2021<\/h4>\n <div class=\"dark\">\n <table>\n <tr>\n <td>January<\/td>\n <td>17,656<\/td>\n <\/tr>\n <tr>\n <td>February<\/td>\n <td>27,433<\/td>\n <\/tr>\n <tr>\n <td><b>March<\/b><\/td>\n <td><b>32,500<\/b><\/td>\n <\/tr>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n <h2>Customer Review Samples<\/h2>\n <div class=\"reviews\">\n <div>\n <figure>\n <img src=\"https:\/\/images.unsplash.com\/photo-1546458904-143d1674858d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1958&q=80\" alt=\"Person\" \/>\n <figcaption>\n <b>Firstname Lastname<\/b>\n <i>Profession<\/i>\n <\/figcaption>\n <\/figure>\n <blockquote cite='http:\/\/loripsum.net'>Cuius oratio attende, quaeso, Brute, satisne videatur Antiochi complexa esse sententiam.<\/blockquote>\n <\/div>\n <div>\n <figure>\n <img src=\"https:\/\/images.unsplash.com\/photo-1603444595152-2c267343c2da?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2007&q=80\" alt=\"Person\" \/>\n <figcaption>\n <b>Firstname Lastname<\/b>\n <i>Profession<\/i>\n <\/figcaption>\n <\/figure>\n <blockquote cite='http:\/\/loripsum.net'>Cuius oratio attende, quaeso, Brute, satisne videatur Antiochi complexa esse sententiam, quam tibi, qui fratrem.<\/blockquote>\n <\/div>\n <div>\n <figure>\n <img src=\"https:\/\/images.unsplash.com\/photo-1585402627084-e80d83061b76?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80\" alt=\"Person\" \/>\n <figcaption>\n <b>Firstname Lastname<\/b>\n <i>Profession<\/i>\n <\/figcaption>\n <\/figure>\n <blockquote cite='http:\/\/loripsum.net'>Cuius oratio attende, quaeso, Brute, satisne videatur Antiochi complexa esse sententiam, quam tibi, qui fratrem eius Aristum frequenter audieris, maxime probatam existimo.<\/blockquote>\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\n@page{\n size:216mm 356mm; \/* https:\/\/formaty.info\/en\/LEGAL\/ *\/\n margin:10mm 20mm 5mm 20mm;\n background:#44b75b;\n}\n\nbody{\n font-family: 'Poppins', sans-serif;\n margin:0;\n color:#000222;\n}\n\n.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-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}\n\n.white-stripe .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\nh2,\nh3{\n width:176mm;\n margin:0;\n line-height:1;\n text-align:center;\n}\n\nh2{\n font-size:24pt;\n margin-top:2cm;\n text-transform:uppercase;\n}\n\nh3{\n font-size:16pt;\n font-weight:normal;\n color:white;\n}\n\n.section-white{\n width:176mm;\n margin:10mm 0 5mm -20mm;\n padding:5mm 20mm;\n background:white;\n display:flex;\n justify-content:space-between;\n}\n\n.section-white div{\n width:85.5mm;\n}\n\n.section-white div h4{\n background:#44b75b;\n padding:2mm 6mm;\n margin:0;\n}\n\n.section-white .dark{\n box-sizing:border-box;\n background:#000222;\n color:white;\n text-align:center;\n border-top:1px solid white;\n margin-bottom:5mm;\n padding:2mm 6mm;\n}\n\nfigure{\n margin:0;\n}\n\nimg{\n max-width:100%;\n}\n\ntable{\n width:100%;\n}\n\ntd{\n text-align:right;\n}\n\ntr > td:first-of-type{\n text-align:left;\n}\n\n.breakdown div{\n display:flex;\n}\n\n.breakdown div p{\n margin-right:15mm;\n}\n\n.reviews{\n display:flex;\n justify-content:space-between;\n margin-top:10mm;\n}\n\n.reviews div{\n width:55mm;\n}\n\n.reviews div figure{\n text-align:center;\n}\n\n.reviews div figure img{\n width:20mm;\n height:20mm;\n border-radius:100%;\n border:4px solid white;\n}\n\nblockquote{\n margin:5mm 0;\n text-align:justify;\n font-style:italic;\n color: white;\n hyphens:auto;\n line-height:1;\n}\n\nblockquote:before { \n content: open-quote;\n color: white;\n}\n\nblockquote:after { \n content: close-quote;\n color: white;\n}", "options": { "renderer": "weasyprint" } }