<!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>