HTML
<div class="break"> <div class="logo-area"> <div class="circle"></div> <h1>Company Logo</h1> </div> </div> <span class="head"> <b>Jane Doe</b> <br /> <b class="dark">Print CSS and Web Development Guru</b> </span> <br /> jane.doe@example.com <br /> Mobile +49 123 4567 8901 <br /> www.example.com <br /> <span class="foot"> Example Company <br /> Busystreet 5 &middot; 00001 Gotham </span>
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap'); @page{ size:3.5in 2in; marks:crop; bleed:0.125in; margin:0.125in; } @page:first{ margin:0; } body{ margin:0; padding:0; font-family: 'Poppins', sans-serif; font-size:9pt; } .circle{ width:.35in; height:.35in; border:.25in solid #44b75b; border-radius:100%; display:inline-block; } .logo-area { position:absolute; left:50%; top:50%; width:2.6in; height:.85in; transform:translateX(-50%) translateY(-50%); } .logo-area h1{ display:inline-block; text-transform:uppercase; color:#000222; width:1.5in; line-height:1; margin-left:0.125in; position:relative; top:-.225in; } b{ color:#44b75b; font-size:1.25rem; } .dark{ color:#000222; font-size:10pt; } .head{ display:inline-block; margin-bottom: 0.125in; } .foot{ display:inline-block; margin-top:0.125in; border-left:0.05in solid #44b75b; padding-left:0.125in; } .break{ page-break-after: always; break-after: always; }
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/)