Test 1

templates/main/index.html

@@ -0,0 +1,25 @@
+{% extends "main/layout.html" %}
+
+{% block title %}Marlous van Leeuwen{% endblock %}
+
+{% block main %}
+    <main class="container">
+        <div class="row">
+            {% for i in range(count) %}
+                <div class="col-lg-3 col-md-4 col-6">
+                    <a data-toggle="modal" data-target="#detailModal" data-name="{{ i }}">
+                        <div class="card border-light">
+                            <img class="card-img" src="https://placeimg.com/400/400/any" alt="random image">
+
+                            <div class="card-img-overlay d-flex align-items-center justify-content-center">
+                                <div class="card-title-bg bg-dark w-100 d-flex align-items-center justify-content-center">
+                                    <h5 class="card-text text-light">{{ i }}</h5>
+                                </div>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+            {% endfor %}
+        </div>
+    </main>
+{% endblock %}