gildas
/
movies


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
							<html>
    <head>
        <title>gildas.ch</title>

        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
        <style>
         body {
             font-family: 'Roboto', sans-serif;
         }
         h2 {
             font-size: 1.2em;
             color: #757575;
         }
         ul {
             list-style-type: none;
             display: flex;
             flex-wrap: wrap;
             padding: 0;
         }
         li {
             width: 240px;
             height: 400px;
             display: grid;
             grid-template-rows: 320px 80px;
             box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
             margin: 10px;
         }
         li .poster {
             justify-self: center;
             align-self: center;
         }
         li .metadata {
             padding: 10px;
         }
         li img {
             max-width: 240px;
             max-height: 320px;
         }
         h3 {
             margin-bottom: 5px;
             margin-top: 5px;
         }
        </style>
    </head>
    <body>
        <h2>Movies</h2>

        <ul>
            {{ range $m := .Movies }}
            <li>
                <div class="poster">
                    <img src="{{ $m.Poster }}" title="{{ $m.Title }}" alt="{{ $m.Title }}" />
                </div>
                <div class="metadata">
                    <h3>{{ $m.Title }}</h3>
                    <div>{{ $m.Director }}</div>
                </div>
            </li>
            {{ end }}
        </ul>
    </body>
</html>