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