add footer, edit index.html

Webauftritt/eportfolio/index.html

@@ -12,21 +12,17 @@
 
 <h1 class="flex justify-center">Welcome to the world of Curling!</h1> <!--todo refine the positioning of text on page-->
 
-<!--
-todo -> bind to bottom of page
--->
-<div class="h-40 bg-banner flex justify-between items-center px-40 mb-14 mt-auto">
+<div class="h-40 bg-banner flex justify-between items-center px-40 mb-14">
     <a href="rules.html" class="flex flex-col align-middle">
-        <img src="./public/rules.svg" alt="Regeln" class="w-20 h-20"/>
+        <img src="/rules.svg" alt="Regeln" class="w-20 h-20"/>
         <p class="text-center">Regeln</p>
     </a>
     <a href="spiritofcurling.html" class="flex flex-col align-middle">
-        <img src="./public/rules.svg" alt="Spirit of Curling" class="w-20 h-20"/>
-        <!--todo replace icon with actual icon-->
+        <img src="/spirit.svg" alt="Spirit of Curling" class="w-20 h-20"/>
         <p class="text-center">Spirit of Curling</p>
     </a>
     <a href="impressions.html" class="flex flex-col align-middle">
-        <img src="./public/extension.svg" alt="Beispiele" class="w-20 h-20"/>
+        <img src="/extension.svg" alt="Beispiele" class="w-20 h-20"/>
         <p class="text-center">Beispiele</p>
     </a>
 </div>
@@ -35,4 +31,5 @@ todo -> bind to bottom of page
 
 <script type="module" src="/main.js"></script>
 </body>
+{{> footer}}
 </html>

Webauftritt/eportfolio/partials/footer.hbs

@@ -0,0 +1,14 @@
+<footer class="bg-navbackground bottom-0 absolute w-full h-auto flex justify-between">
+    <div class="mb-5 mt-5 ml-10">
+        <p class="font-bold text-textcolor">Copyright & Impressum:</p>
+        <p class="text-textcolor">Tobias Hilfiker</p>
+        <p class="text-textcolor">GBS St. Gallen</p>
+        <p class="text-textcolor">Demutstrasse 115</p>
+        <p class="text-textcolor">CH-9012 St. Gallen</p>
+        <a class="text-textcolor" href="mailto:tobias.hilfiker@edu.gbssg.ch">tobias.hilfiker@edu.gbssg.ch</a>
+    </div>
+    <div class="mb-5 mt-5 mr-10">
+        <p class="font-bold text-textcolor">Curling selbst ausprobieren in St. Gallen:</p>
+        <a class="text-textcolor" href="https://www.curling-stgallen.ch" target="_blank">Curling Center St. Gallen</a>
+    </div>
+</footer>