<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> <title>XPUB Projects</title> <link rel="stylesheet" href="style.css" /> <style> @font-face { font-family: inconsolata; src: url(fonts/inconsolata.ttf); } @font-face { font-family: inconsolatabold; src: url(fonts/inconsolatabold.ttf); } body { margin: 3%; font-family:inconsolata, sans-serif; background: lightgray; } a { text-decoration: none; color: black } a:hover { text-decoration: underline; color: blue; } #covers { display: flex; flex-wrap: wrap; } .thesis { width: 300px; margin: 10px; } .thesis img { width: 100% } </style> </head> <body> <div id="covers"> {% for project in projects %} <div class="thesis"><a href="{{project.thesis}}" title="{{project.student}}"><img src="{{project.cover}}"></a></div> {%- endfor %} </div> </body> </html>