Add styled footer

templates/includes/footer.html

@@ -1,17 +1,60 @@
 {% load static %}
-{# Modern Tailwind Footer #}
-<footer class="footer footer-center p-10 bg-base-200 text-base-content">
-    <div class="grid grid-flow-col gap-8">
-        <a href="http://eawag.ch" target="_blank">
-            <img height="60" src='{% static "/images/ealogo.gif" %}' alt="Eawag"/>
+<div class="lg:max-w-2/3 mx-auto bg-base-200 text-base-content">
+
+    <footer class="footer sm:footer-horizontal p-10">
+        <nav>
+            <h6 class="footer-title">Predict</h6>
+            <a class="link link-hover">Search</a>
+            <a class="link link-hover">Design</a>
+            <a class="link link-hover">Marketing</a>
+      <a class="link link-hover">Advertisement</a>
+    </nav>
+    <nav>
+      <h6 class="footer-title">Company</h6>
+      <a class="link link-hover">About us</a>
+      <a class="link link-hover">Contact</a>
+      <a class="link link-hover">Jobs</a>
+    </nav>
+    <nav>
+      <h6 class="footer-title">Legal</h6>
+      <a class="link link-hover">Terms of use</a>
+      <a class="link link-hover">Privacy policy</a>
+      <a class="link link-hover">Cookie policy</a>
+      <a class="link link-hover">Cite enviPath</a>
+    </nav>
+  </footer>
+  <footer class="footer border-neutral-200 border-t-2 px-10 py-4">
+    <aside class="grid-flow-col items-center">
+        <svg class="fill-neutral-content flex-shrink-0 h-14 m-2" viewbox="0 0 65 65" >
+            <use
+              href="{% static "/images/logo-square.svg" %}#ep-logo-square"
+            >
+            </use>
+          </svg>
+
+        enviPath Ltd.
+        <br />
+        Biodegredation prediction since 2015.
+      </p>
+    </aside>
+    <nav class="md:place-self-center md:justify-self-end">
+      <div class="grid grid-flow-col gap-4">
+        <a href="https://www.youtube.com/@envipath7231" target="_blank">
+            <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-current">
+                <title>YouTube</title>
+                <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
+            </svg>
         </a>
-        <a href="http://ml.auckland.ac.nz" target="_blank">
-            <img height="60" src='{% static "/images/uoa.png" %}' alt="The University of Auckland"/>
+        <a href="https://community.envipath.org/" target="_blank">
+            <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-current">
+                <title>Discourse</title>
+                <path d="M12.103 0C18.666 0 24 5.485 24 11.997c0 6.51-5.33 11.99-11.9 11.99L0 24V11.79C0 5.28 5.532 0 12.103 0zm.116 4.563c-2.593-.003-4.996 1.352-6.337 3.57-1.33 2.208-1.387 4.957-.148 7.22L4.4 19.61l4.794-1.074c2.745 1.225 5.965.676 8.136-1.39 2.17-2.054 2.86-5.228 1.737-7.997-1.135-2.778-3.84-4.59-6.84-4.585h-.008z"/>
+            </svg>
         </a>
-    </div>
-    <div>
-        <div class="grid grid-flow-col gap-4">
-            <a href="mailto:admin@envipath.org" class="link link-hover">Contact</a>
-        </div>
-    </div>
-</footer>
+        <a href="https://www.linkedin.com/company/envipath/" target="_blank">
+            <img src="{% static "/images/linkedin.png" %}" alt="LinkedIn" class="w-6 h-6">
+        </a>
+      </div>
+    </nav>
+  </footer>
+</div>