footer design

static/style.css

@@ -108,6 +108,11 @@ body {
 Überschrift 1:  4rem  svg     animated  2px   no hover
 Überschrift 2:  3rem  html    still     2px   no hover
 */
+h6{
+  padding-bottom: 1rem;
+  padding-top: 1rem;
+  color: var(--offwhite);
+}
 h2{
   font-size: 3rem;
   -webkit-background-clip: text;
@@ -205,7 +210,11 @@ svg text:hover{
   padding-top: 5px;
   padding-bottom: 5px;
 }
-
+.socials{
+  height: 2rem;
+  width: auto;
+  margin: 0.5rem;
+}
 
 .backtotop {
   place-self:end;

wiki/footer.html

@@ -5,12 +5,79 @@
       <!---- Impressum ---->
       <a href="{{ url_for('pages', page='impressum') }}">Impressum</a>
       <!---- Sponsors ---->
-      <span style="float:right;">
-      <a href="#">Social Media</a>
-      </span>
+      <span style="float:right;"></span>
     </div>
     </p>
     <hr> 
+    <div class="row align-items-center">
+      <div class="col-sm-4">
+        <h6>Contact</h6>
+      </div>
+      <div class="col-sm-8">
+        <div class="row align-items-center">
+          <div class="col">
+            <h6>Connect to the team</h6>
+          </div>
+          <div class="col">
+            <h6>Sponsors and Partners</h6>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row align-items-center">
+      <div class="col-sm-4">
+          <div class="col">
+            info@igem-bielefeld.de
+          </div>
+          <div class="col" style="padding-top: 1rem;"> </div>
+          <div class="col">
+            iGEM2024
+            Universitätsstraße 25, 33613 Bielefeld
+            Centrum für Biotechnologie (CeBiTec)
+            Universität Bielefeld
+          </div> 
+        </div>
+      <div class="col-sm-8"> 
+        <div class="row align-items-center">
+          <!-- Social Media und co-->
+          <div class="col">
+            <div class="col">
+              <a href="https://www.linkedin.com/in/igem-bielefeld-cebitec">
+                <img class="socials" src="https://static.igem.wiki/teams/5247/design/icons/linkedin-hell.png">
+              </a>
+              <a href="https://www.instagram.com/igem.bielefeld/">
+                <img class="socials" src="https://static.igem.wiki/teams/5247/design/icons/instagram-1.png">
+              </a>
+              <a href="http://www.youtube.com/@iGemBielefeld2024">
+                <img class="socials" src="https://static.igem.wiki/teams/5247/design/icons/youtube-hell.png">
+              </a>
+              <a href="https://x.com/iGEM_Bielefeld">
+                <img class="socials" src="https://static.igem.wiki/teams/5247/design/icons/twitter-hell.png">
+              </a>
+            </div>
+            <div class="col">
+              <h6 style="padding-top: 1rem;">MeetUp</h6>
+            </div>
+            <div class="col">
+              <a href="https://www.instagram.com/bfh_euromeet/">
+                <img class="socials" src="https://static.igem.wiki/teams/5247/design/icons/instagram-1.png">
+              </a>
+              <a href="mailto:bfh.european.meetup@gmail.com">
+                <img class="socials" src="https://static.igem.wiki/teams/5247/design/icons/envelope-hell.png">
+              </a>
+              <a href="https://bfheuropeanmeetup.mobirisesite.com/home.html">
+                <img class="socials" src="https://static.igem.wiki/teams/5247/design/icons/globe-hell.png">
+              </a>
+          </div>
+          </div>
+          <!-- Sponsors -->
+          <div class="col">
+            
+          </div>
+        </div>
+      </div>
+    </div>
+    <hr> 
   <div style="background-color: #FFF6F2; border-radius: 10px;">
   <div class="row align-items-center" >
     <div class="col-2" id="#Zeiss">
@@ -73,5 +140,6 @@
     margin-left: 15px;
     margin-right: 15px;
   }
+  
 
 </style>
\ No newline at end of file