Implement Contact, Header, start Footer

2026-02-13 12:57:06 +01:00
parent b0dec274bd
commit 21d5e9eb5e
10 changed files with 401 additions and 31 deletions
@@ -0,0 +1,100 @@
+---
+function getCurrentYear() {
+    return new Date().getFullYear();
+}
+---
+
+<footer>
+    {/* Footer nav */}
+    <nav>
+        {/* Explore */}
+        <div class="explore">
+            <span>Explore</span>
+            <ul>
+                <li>Home</li>
+                <li>Blog</li>
+            </ul>
+        </div>
+
+        {/* Follow us */}
+        <div class="follow">
+            <span>Reach out to us</span>
+            <ul>
+                <li>+43 670 4011 885</li>
+                <li>office@tideshiftdigital.com</li>
+            </ul>
+
+            {/* Socials */}
+            <ul class="socials">
+                <li>icon</li>
+                <li>icon</li>
+                <li>icon</li>
+            </ul>
+        </div>
+
+        {/* Legal */}
+        <div class="legal">
+            <span>Legal</span>
+            <ul>
+                <li>Privacy Policy</li>
+                <li>Imprint</li>
+            </ul>
+        </div>
+    </nav>
+
+    {/* Copyright */}
+    <div class="info">
+        <span>&copy; {getCurrentYear()} Tideshift Digital e.U.</span>
+
+        <span>Made with ❤️ in Vienna</span>
+
+        <div>
+            <span>Vienna, 12:09 CET</span>
+            <span>⛅ 12C</span>
+        </div>
+    </div>
+    
+    {/* Typemark */}
+    <div></div>
+</footer>
+
+<style>
+    footer {
+        max-width: var(--max-content-width);
+        margin-inline: auto;
+        padding-block: 8rem 5.5rem;
+        padding-inline: 5rem;
+    }
+
+    nav, .info {
+        display: flex;
+        justify-content: space-between;
+        gap: 2remm;
+    }
+
+    ul {
+        list-style: none;
+    }
+
+    .explore {
+
+    }
+
+    .follow {
+
+    }
+
+    .socials {
+        display: flex;
+        align-items: center;
+        gap: 2rem;
+    }
+
+    .legal {
+
+    }
+
+    .info {
+        align-items: center;
+    }
+</style>