Added fading in logo at the top

wiki/pages/home.html

 {% extends "layout.html" %}
 
-{% block title %}Home{% endblock %}
-{% block lead %}<b>Welcome to iGEM 2024!</b> Your team has been approved and you are ready to start the iGEM season!{% endblock %}
+{% block title %}{% endblock %}
+
+{% block lead %}
+<div style="display:flex; justify-content: center;">
+  <img id="back-img" src="https://static.igem.wiki/teams/5342/images/infinityf-nobg-circle.webp" alt="InfinityF logo" style="width:auto; height:auto; max-height:50vh; max-width:70vw; z-index:0;">
+  <img id="front-img" src="https://static.igem.wiki/teams/5342/images/infinityf-nobg-logos-circle.webp" alt="InfinityF logo" style="width:auto; height:auto; max-height:50vh; max-width:70vw; transition: all 2.5s; z-index:1; opacity:0; position:absolute;">
+</div>
+{% endblock %}
 
 {% block page_content %}
 
+<style></style>
+
+<script>
+  document.addEventListener("scroll", (event) => {
+    document.getElementById("front-img").style.opacity='1';
+  }, {once:true});
+</script>
+
+
+<!--
 <div class="row">
   <div class="col">
     <h2>Before you start</h2>
@@ -56,5 +72,5 @@
     </ul>
   </div>
 </div>
-
+-->
 {% endblock %}