{ "html": "\n\n \n \n \n Business Brochure<\/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 <div class=\"green-area\">\n <h1>Business<\/h1>\n <h2>Brochure<\/h2>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<\/p>\n <\/div> \n <img src=\"https:\/\/images.unsplash.com\/photo-1513128034602-7814ccaddd4e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1950&q=80\" \/>\n <\/div>\n\n <div class=\"page-right-blue\">\n <div class=\"green-border\"><\/div>\n <div class=\"content\">\n <h1>Lorem ipsum <span class=\"green\">dolor<\/span><\/h1>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec enim diam vulputate ut pharetra sit amet aliquam. In cursus turpis massa tincidunt dui ut. Consequat mauris nunc congue nisi vitae suscipit tellus. Volutpat maecenas volutpat blandit aliquam etiam erat. Quis ipsum suspendisse ultrices gravida dictum. Velit ut tortor pretium viverra suspendisse. <\/p>\n <p>Porta non pulvinar neque laoreet suspendisse. Et molestie ac feugiat sed lectus. Morbi tristique senectus et netus et. Facilisis sed odio morbi quis commodo odio aenean sed. <\/p>\n <p>Id semper risus in hendrerit gravida rutrum quisque non. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Tellus in hac habitasse platea. Tellus elementum sagittis vitae et leo duis ut diam quam. Id interdum velit laoreet id donec. Faucibus in ornare quam viverra orci sagittis eu. <\/p>\n <\/div>\n <img src=\"https:\/\/images.unsplash.com\/photo-1600880292203-757bb62b4baf?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1950&q=80\" \/>\n <\/div>\n\n <div class=\"page-center-image\">\n <img src=\"https:\/\/images.unsplash.com\/photo-1459499362902-55a20553e082?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1910&q=80\"\/>\n <h1>Lorem ipsum <span class=\"green\">dolor<\/span><\/h1>\n <div class=\"green-border\"><\/div>\n <div class=\"content\">\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec enim diam vulputate ut pharetra sit amet aliquam.<\/p>\n <p>In cursus turpis massa tincidunt dui ut. Consequat mauris nunc congue nisi vitae suscipit tellus. Volutpat maecenas volutpat blandit aliquam etiam erat.<\/p>\n <p>In cursus turpis massa tincidunt dui ut. Consequat mauris nunc congue nisi vitae suscipit tellus. Volutpat maecenas volutpat blandit aliquam etiam erat.<\/p>\n <\/div>\n <blockquote>\n <i>\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\"<\/i>\n <\/blockquote> \n <\/div>\n\n <div class=\"last\">\n <div>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<\/p>\n <\/div>\n <img src=\"https:\/\/images.unsplash.com\/photo-1513128034602-7814ccaddd4e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1950&q=80\" \/>\n <div class=\"blue-area\"><\/div>\n <div>\n <div class=\"last-logo-area\">\n <div class=\"circle\"><\/div>\n <h1>Company Logo<\/h1>\n <\/div>\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}\n\n@page{\n\tsize:210mm 297mm;\n \n @bottom-right-corner{\n content:\"\";\n \tbackground:#000222;\n }\n \n @bottom-right{\n content:\"\";\n \tbackground:#000222;\n }\n \n @bottom-center{\n content:\"\";\n \tbackground:#000222;\n }\n \n @bottom-left{\n content:\"\";\n \tbackground:#000222;\n }\n \n @bottom-left-corner{\n content:\"\";\n \tbackground:#000222;\n }\n}\n\n@page:first{\n\n margin:6cm 6cm 1cm 2cm;\n\n @top-left{\n \tcontent:element(coverLogo);\n }\n \n @top-right-corner{\n content:\"\";\n \tbackground:#000222;\n }\n}\n\n@page LastPage{\n\n margin:0 0 1cm 0;\n \n @bottom-right-corner{\n content:\"\";\n \tbackground:#44b75b;\n }\n \n @bottom-right{\n content:\"\";\n \tbackground:#44b75b;\n }\n \n @bottom-center{\n content:\"\";\n \tbackground:#44b75b;\n }\n \n @bottom-left{\n content:\"\";\n \tbackground:#44b75b;\n }\n \n @bottom-left-corner{\n content:\"\";\n \tbackground:#44b75b;\n }\n}\n\n@page:left{\n\n margin:0 0 1cm 0;\n \n @bottom-right-corner{\n content:\"\";\n \tbackground:#44b75b;\n }\n \n @bottom-right{\n content:\"\";\n \tbackground:#44b75b;\n }\n \n @bottom-center{\n content:\"\";\n \tbackground:#44b75b;\n }\n \n @bottom-left{\n content:\"\";\n \tbackground:#44b75b;\n }\n \n @bottom-left-corner{\n content:\"\";\n \tbackground:#44b75b;\n }\n}\n\n@page RightBlue{\n margin:3cm 3cm 1cm 3cm;\n \n @top-right-corner{\n content:\"\";\n \tbackground:#000222;\n }\n \n @right-top{\n content:\"\";\n \tbackground:#000222;\n }\n \n @right-middle{\n content:\"\";\n \tbackground:#000222;\n }\n \n @right-bottom{\n content:\"\";\n \tbackground:#000222;\n }\n}\n\n@page CenterImage{\n margin:1.5cm 1.5cm 1cm 1.5cm;\n}\n\n.logo-area{\n\tposition:running(coverLogo);\n}\n\n.circle{\n\twidth:2cm;\n \theight:2cm;\n \tborder:.4cm solid #44b75b;\n \tborder-radius:100%;\n display:inline-block;\n}\n\n.logo-area h1,\n.last-logo-area h1{\n\tdisplay:inline-block;\n \ttext-transform:uppercase;\n \tcolor:#000222;\n \twidth:5cm;\n \tline-height:1;\n \tmargin-left:0.25cm;\n \tposition:relative;\n top:-.25cm; \n}\n\n.green-area{\n\tbackground:#44b75b;\n \tmargin-left:-2cm;\n \twidth:210mm;\n \tpadding:2cm;\n}\n\n.green-area h1{\n \ttext-transform:uppercase;\n \tcolor:#000222;\n margin:0;\n}\n\n.green-area h2{\n \ttext-transform:uppercase;\n \tcolor:#fff;\n margin:0;\n}\n\n.green-area p{\n \tcolor:#000222;\n \twidth:11cm;\n margin-bottom:0;\n}\n\n.cover{\n\tpage-break-after:always;\n \tbreak-after:always;\n}\n\n.cover img{\n \tmargin-left:-2cm;\n \twidth:15cm;\n \theight:12.55cm;\n}\n\n.last{\n\tpage: LastPage;\n \tpage-break-before:always;\n \tbreak-before:always;\n display:flex;\n flex-wrap: wrap\n}\n\n.last img,\n.last > div{\n \twidth:105mm;\n \theight:14.35cm;\n \tmargin:0;\n \tdisplay:flex;\n \tjustify-content:center;\n align-items: center;\n}\n\n.last p{\n \tmargin:2cm;\n \tcolor:#000222;\n}\n\n.last .blue-area{\n \tbackground:#000222;\n}\n\n.page-right-blue{\n\tpage: RightBlue;\n}\n\n.page-right-blue img{\n\twidth:15.5cm;\n \tposition:absolute;\n \tbottom:0;\n \tright:-3cm;\n \tpadding-left:.5cm;\n \tbackground-color:#fff;\n}\n\n.page-right-blue .content{\n\tpadding:0 1cm 2cm 1cm;\n \tbackground-color:#fff;\n \tposition:absolute;\n \ttop:0;\n \tleft:0;\n}\n\n.page-right-blue .content h1{\n\tcolor:#000222;\n \tmargin-top:0;\n \ttext-transform: capitalize;\n}\n\n.page-right-blue .content h1 .green{\n\tcolor:#44b75b;\n \tdisplay:block;\n}\n\n.page-right-blue .green-border{\n\tborder:.125cm solid #44b75b;\n \theight:16cm;\n \twidth:8cm;\n \tposition:absolute;\n \ttop:1cm;\n \tleft:-1.5cm;\n}\n\n.page-center-image{\n\tpage: CenterImage;\n}\n\n.page-center-image img{\n\twidth:100%;\n}\n\n.page-center-image h1{\n\tcolor:#000222;\n \ttext-transform: capitalize;\n \ttext-align:center;\n}\n\n.page-center-image h1 .green{\n\tcolor:#44b75b;\n \tdisplay:block;\n}\n\n.page-center-image .content{\n\twidth:9.25cm;\n \tpadding-right:.5cm;\n \tbackground-color:#fff;\n \tposition:absolute;\n \tleft:0;\n \ttop:15.5cm;\n \tz-index:3;\n}\n\n.page-center-image .content p:first-of-type{\n\tmargin:0;\n}\n\n.page-center-image blockquote{\n\twidth:8.75cm;\n \tmargin:0;\n\tborder:.125cm solid #44b75b;\n \tpadding:.5cm;\n \tbackground-color:#fff;\n \tposition:absolute;\n \tright:0;\n \ttop:15.5cm;\n \tz-index:2;\n}\n\n.page-center-image .green-border{\n\twidth:8.75cm;\n\theight:8.75cm;\n\tborder:.125cm solid #44b75b;\n \tposition:absolute;\n \tleft:4.625cm;\n \tbottom:1cm;\n \tz-index:1;\n}", "options": { "renderer": "weasyprint" } }