1 files changed, 102 insertions, 0 deletions
diff --git a/templates/names_template.html b/templates/names_template.html
new file mode 100644
index 00000000..03e617cd
--- /dev/null
+++ b/templates/names_template.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+
+    <style>
+        .navbar a,a:active,a:hover {
+            color: black;
+            text-decoration: underline;
+        }
+    
+        .navbar a::before {
+            content: '>';
+            margin-right: 5px; /* Space between > and link text */
+            opacity: 0; /* Initially hidden */
+            transition: opacity 0.0s; /* Smooth transition */
+        }
+
+        .navbar a::after {
+            content: '<';
+            margin-left: 5px; /* Space between link text and < */
+            opacity: 0; /* Initially hidden */
+            transition: opacity 0.0s; /* Smooth transition */
+        }
+
+        .navbar a:hover::before,
+        .navbar a:hover::after {
+            opacity: 1; /* Show on hover */
+        }
+
+        p { text-align: center; max-width: 500px; margin:auto; }
+        .book {
+            margin-bottom: 30px;
+        }
+
+        .book>p {
+            font-style: italic;
+            padding: 0;
+        }
+        a {
+            text-decoration: none;
+        }
+        a:hover {
+            text-decoration: underline;
+        }
+        h1,h2,h3,h4,h5 { text-align: center }
+        .navbar {
+            display: block;
+            margin-left: auto;
+            margin-right: auto 
+        }
+        h3 {
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            height: 100vh;
+            justify-content: center;
+            align-items: center;
+            margin: 0;
+        }
+        .navbar ul {
+            list-style-type: none;
+            text-align: center;
+            padding: 0;
+            display: flex;
+            width: 600px;
+            margin: auto;
+        }
+        a,a:active,a:hover {
+            color: black;
+        }
+
+        .navbar ul>li {
+            flex: 1;
+        }
+        .navbar a,.navbar a:hover,.navbar a:active {
+            color: black;
+        }
+    </style>
+
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ramaekers - Laeven family</title>
+  </head>
+  <body>
+    <main>
+        <br>
+        <div class="navbar">
+            <ul>
+                <li><a href="index.html"> Home </a></li>
+                <li><a href="names.html"> Names </a></li>
+                <li><a href="photos.html"> Photos </a></li>
+                <li><a href="info.html"> Info </a></li>
+                <li><a href="literature.html"> Literature </a></li>
+            </ul>
+        </div>
+        <br>
+        {{NAME_LIST}}
+        <br>
+    </main>
+  </body>
+</html>