HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Monthly Customer Activity Report</title> </head> <body> <div class="white-stripe"> <div class="logo-area"> <div class="circle"></div> <h1>Company Logo</h1> </div> </div> <h2> Monthly Customer Activity Report </h2> <h3> March 2021 </h3> <div class="section-white"> <div> <h4>The Breakdown</h4> <div class="breakdown"> <div> <p> <i>Avg Age:</i><br /> <b>18-26</b> </p> <p> <i>Country:</i><br /> <b>Germany</b> </p> </div> <figure> <img src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Company%20Examples/Reports/Monthly%20Customer%20Activity%20Report/doughnutchart1.png" alt="Doughnut Chart" /> </figure> </div> </div> <div> <h4>Website Traffic: 32,500</h4> <div class="dark"> <p><i>Average Time on Page: 2:14 minutes</i></p> <figure> <img src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Company%20Examples/Reports/Monthly%20Customer%20Activity%20Report/devicechart.png" alt="Device Chart" /> </figure> </div> <h4>Reports 2021</h4> <div class="dark"> <table> <tr> <td>January</td> <td>17,656</td> </tr> <tr> <td>February</td> <td>27,433</td> </tr> <tr> <td><b>March</b></td> <td><b>32,500</b></td> </tr> </table> </div> </div> </div> <h2>Customer Review Samples</h2> <div class="reviews"> <div> <figure> <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" /> <figcaption> <b>Firstname Lastname</b> <i>Profession</i> </figcaption> </figure> <blockquote cite='http://loripsum.net'>Cuius oratio attende, quaeso, Brute, satisne videatur Antiochi complexa esse sententiam.</blockquote> </div> <div> <figure> <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" /> <figcaption> <b>Firstname Lastname</b> <i>Profession</i> </figcaption> </figure> <blockquote cite='http://loripsum.net'>Cuius oratio attende, quaeso, Brute, satisne videatur Antiochi complexa esse sententiam, quam tibi, qui fratrem.</blockquote> </div> <div> <figure> <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" /> <figcaption> <b>Firstname Lastname</b> <i>Profession</i> </figcaption> </figure> <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> </div> </div> </body> </html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap'); @page{ size:216mm 356mm; /* https://formaty.info/en/LEGAL/ */ margin:10mm 20mm 5mm 20mm; background:#44b75b; } body{ font-family: 'Poppins', sans-serif; margin:0; color:#000222; } .white-stripe{ background:white; width:210mm; margin-left:-2cm; padding-left:2cm; height:2cm; text-transform:uppercase; } .white-stripe .circle{ width:1.5cm; height:1.5cm; border:.5cm solid #000222; border-radius:100%; display:inline-block; position:relative; top:-.25cm; } .white-stripe .logo-area h1{ display:inline-block; color:#000222; width:5cm; line-height:1; margin-left:0.25cm; position:relative; top:-.75cm; } h2, h3{ width:176mm; margin:0; line-height:1; text-align:center; } h2{ font-size:24pt; margin-top:2cm; text-transform:uppercase; } h3{ font-size:16pt; font-weight:normal; color:white; } .section-white{ width:176mm; margin:10mm 0 5mm -20mm; padding:5mm 20mm; background:white; display:flex; justify-content:space-between; } .section-white div{ width:85.5mm; } .section-white div h4{ background:#44b75b; padding:2mm 6mm; margin:0; } .section-white .dark{ box-sizing:border-box; background:#000222; color:white; text-align:center; border-top:1px solid white; margin-bottom:5mm; padding:2mm 6mm; } figure{ margin:0; } img{ max-width:100%; } table{ width:100%; } td{ text-align:right; } tr > td:first-of-type{ text-align:left; } .breakdown div{ display:flex; } .breakdown div p{ margin-right:15mm; } .reviews{ display:flex; justify-content:space-between; margin-top:10mm; } .reviews div{ width:55mm; } .reviews div figure{ text-align:center; } .reviews div figure img{ width:20mm; height:20mm; border-radius:100%; border:4px solid white; } blockquote{ margin:5mm 0; text-align:justify; font-style:italic; color: white; hyphens:auto; line-height:1; } blockquote:before { content: open-quote; color: white; } blockquote:after { content: close-quote; color: white; }
JavaScript
Preview powered by paged.js
PDF rendered with  (https://weasyprint.org/)