You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

83 lines
1.3 KiB
HTML

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