HTML
<ul class="flex-container"> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> </ul> <div class="circle"></div>
CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap'); @page{ size:30cm 40cm; background-color:rgb(233,227,213); margin:1cm 1cm 4cm 1cm; @bottom-left{ content:"03"; font-size:64pt; font-weight:bold; font-family: 'Roboto', sans-serif; } @bottom-right{ content:"Earth"; text-transform:uppercase; font-size:64pt; font-weight:bold; font-family: 'Roboto', sans-serif; } } .flex-container { padding: 0; margin: 0; list-style: none; display: flex; justify-content: space-between; } .flex-item { background:black; width:.5cm; height:34cm; } .circle{ position:absolute; left:4cm; top:6cm; width:20cm; height:20cm; border-radius:100%; background-color:rgb(38,168,222); }
JavaScript
Preview powered by paged.js
PDF rendered with  (https://weasyprint.org/)