Update footer.html

fbbbe7c1 · HouTeng Chan · c3b70b31 · fbbbe7c1
Commit fbbbe7c1 authored 8 months ago by HouTeng Chan
--- a/wiki/footer.html
+++ b/wiki/footer.html
+<!DOCTYPE html>
+<html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
-    .row.mt-4 {
-      margin-right: 100px; 
+    .follow-us-wrapper {
+      display: flex;
+      justify-content: center;
+      gap: 10px; /* Adjust the space between icons as needed */
+      margin-top: 20px;
+    }
+    .follow-us {
+      width: 40px; /* Adjust icon size as needed */
+      height: auto;
+      filter: grayscale(100%); /* Add any styling effects if necessary */
    }
  </style>
-
 </head>
-
-<footer class="pb-2 pt-2 mt-5 footer text-center" style="background-color: #ffe4e1; border-radius: 50px; display: flex; flex-direction: column; align-items: center;">
-  <div class="container">
-    <div class="row justify-content-center">
-      <div class="col-lg-6 col-xs-12">
-          <h4 class="mt-lg-0 mt-sm-3">Follow us on social media</h4>
+<body>
+  <footer class="pb-2 pt-2 mt-5 footer text-center" style="background-color: #ffe4e1; border-radius: 50px; display: flex; flex-direction: column; align-items: center;">
+    <div class="container">
+      <div class="row justify-content-center">
+        <div class="col-lg-6 col-xs-12">
+          <h4 class="mt-lg-0 mt-sm-3">Connect With Us</h4>
          <div class="row justify-content-center">
-              <div class="col-lg-6 col-xs-12">
-                  <div>
-                      <p class="mb-0 text-center"><small><a href="https://www.instagram.com/igem_tsinghua2024?igsh=MTY4d3EzMGtwZjg3ZA%3D%3D" style="color: black;">Instagram</a></small></p>
-                      <p class="mb-0 text-center"><small><a href="https://www.youtube.com/@igemtsinghua2024?si=nrNZ1XaRee_rAYYn" style="color: black;">YouTube</a></small></p>
-                      <p class="mb-0 text-center"><small><a href="https://www.tiktok.com/" style="color: black;">TikTok</a></small></p>
-                  </div>
-              </div>
-              <div class="col-lg-6 col-xs-12">
-                  <div>
-                      <p class="mb-0 text-center"><small><a href="https://www.wechat.com/" style="color: black;">WeChat</a></small></p>
-                      <p class="mb-0 text-center"><small><a href="https://b23.tv/FxdqrK7 " style="color: black;">Bilibili</a></small></p>
-                      <p class="mb-0 text-center"><small><a href=# style="color: black;">......</a></small></p>
-                  </div>
-              </div>
+            <div class="follow-us-wrapper">
+              <a href="https://www.instagram.com/igem_tsinghua2024?igsh=MTY4d3EzMGtwZjg3ZA==">
+                <img class="follow-us" src="https://static.igem.wiki/teams/4497/wiki/footer/instagram.svg" alt="Instagram">
+              </a>
+              <a href="https://www.linkedin.com/company/igem-munich">
+                <img class="follow-us" src="https://static.igem.wiki/teams/4497/wiki/footer/linkedin.svg" alt="LinkedIn">
+              </a>
+              <a href="https://twitter.com/igem_munich">
+                <img class="follow-us" src="https://static.igem.wiki/teams/4497/wiki/footer/twitter.svg" alt="Twitter">
+              </a>
+              <a href="https://www.facebook.com/Munich.iGEM/">
+                <img class="follow-us" src="https://static.igem.wiki/teams/4497/wiki/footer/facebook.svg" alt="Facebook">
+              </a>
+              <a href="mailto:igem@lists.lrz.de">
+                <img class="follow-us" src="https://static.igem.wiki/teams/4497/wiki/footer/email.svg" alt="Email">
+              </a>
+            </div>
          </div>
-      </div>
+        </div>

-      <div class="col-lg-6 col-xs-12">
+        <div class="col-lg-6 col-xs-12">
          <h4>Contact</h4>
          <p class="mb-0 text-center"><small>Tsinghua University, Hai Dian, Beijing</small></p>
-          <p class="mb-0 text-center"><small>+86 12345678900       igemtsinghua2024@gmail.com</small></p>
+          <p class="mb-0 text-center"><small>+86 12345678900 igemtsinghua2024@gmail.com</small></p>
+        </div>
      </div>
-    </div>
- 
-    <hr>
-    <div class="row justify-content-center mt-4">
-      <div class="col">
-        <p class="mb-0 text-center"><small>© 2024 - Content on this site is licensed under a <a class="subfoot" href="https://creativecommons.org/licenses/by/4.0/" style="color: black;" rel="license">Creative Commons Attribution 4.0 International license</a>.</small></p>
-        <p class="text-center"><small>The repository used to create this website is available at <a href="https://gitlab.igem.org/2024/tsinghua" style="color: black;" >gitlab.igem.org/2024/tsinghua</a>.</small></p>
+
+      <hr>
+      <div class="row justify-content-center mt-4">
+        <div class="col">
+          <p class="mb-0 text-center"><small>© 2024 - Content on this site is licensed under a <a class="subfoot" href="https://creativecommons.org/licenses/by/4.0/" style="color: black;" rel="license">Creative Commons Attribution 4.0 International license</a>.</small></p>
+          <p class="text-center"><small>The repository used to create this website is available at <a href="https://gitlab.igem.org/2024/tsinghua" style="color: black;">gitlab.igem.org/2024/tsinghua</a>.</small></p>
+        </div>
      </div>
    </div>
-
-  </div>
-</footer>
+  </footer>
+</body>
+</html>