<!DOCTYPE html> <html lang="eng"> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charset="UTF-8" /> <title>Ingredients</title> <style> .header { padding: 10px 16px; color: black; } h1 { font-family: "Coconat"; font-size: 80px; } h2 { font-family: "Coconat"; } body { height: 100%; margin: 0; background-repeat: no-repeat; background-attachment: fixed; background-color: black; background-image: linear-gradient(0deg, black, white); } p { font-family: "Montserrat Alternates"; } * { box-sizing: border-box; } .column { float: left; padding: 45px; height: 200px; } .left { width: 60%; } .right { width: 40%; } .row:after { content: ""; display: table; clear: both; } .barcode { width: 240px; height: 100px; } </style> </head> <body> <div class="header" id="myHeader"> <h1 align="center">THE INGREDIENTS</h1> </div> % for content in contents: <div class="row"> <div class="column left"> <h2>${content['title']} <img class="barcode" src="${content['barcode']}" /></h2> </div> <div class="column right"> <p>☾ ${content['content'][:200]}...</p> </div> </div> %endfor </body> </html>