Added text underneath logo and video iframe.

wiki/pages/home.html

@@ -3,9 +3,14 @@
 {% 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>
+  <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 2s; z-index:1; opacity:0; position:absolute;">
+  </div>
+  <div id="header-text" style="text-align:center; opacity:0; transition: opacity 2s;">
+  <h1 style="color:white; font-weight:900;" >Our mission:</h1>
+  <h2 style="color:white; font-weight:bold;">Improve current Haemophilia treatment</h2>
 </div>
 {% endblock %}
 
@@ -16,9 +21,37 @@
 <script>
   document.addEventListener("scroll", () => {
     document.getElementById("front-img").style.opacity='1';
+    document.getElementById("header-text").style.opacity='1';
   }, {once:true});
 </script>
 
+<div>
+  <p>
+    Blood clotting cascade is like a relay race where the runners are clotting factors.
+    In Haemophilia A, factor 9, after receiving a baton from factor 11, is racing to form a clot that will stop a bleed in a patient.
+    However, the next member of the race, factor 8, is missing!
+    The Radboud iGEM team finds a solution to save the day, our improved Haemophilia treatment, InfinitiF∞.
+  </p>
+  <div style="min-width: 55%; display:flex; justify-content:center;">
+    <iframe style="max-width:100%;" title="Radboud-University: InfinityF∞: Revolutionizing Hemophilia Treatment with Ioniza... (2024) - Project Promotion [English]" width="560" height="315"  src="https://video.igem.org/videos/embed/3c80e512-061f-452c-a2fe-68a25e868175" allow="fullscreen" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
+  </div>
+</div>
+
+<!-- side-by-side ver.
+<div style="display:flex; justify-content: center;">
+  <div style="min-width: 45%;">
+    <p>
+      Blood clotting cascade is like a relay race where the runners are clotting factors.
+      In Haemophilia A, factor 9, after receiving a baton from factor 11, is racing to form a clot that will stop a bleed in a patient.
+      However, the next member of the race, factor 8, is missing!
+      The Radboud iGEM team finds a solution to save the day, our improved Haemophilia treatment, InfinitiF∞.
+    </p>
+  </div>
+  <div style="min-width: 45%; display:flex; justify-content:center;">
+    <iframe style="max-width:100%;" title="Radboud-University: InfinityF∞: Revolutionizing Hemophilia Treatment with Ioniza... (2024) - Project Promotion [English]" width="560" height="315"  src="https://video.igem.org/videos/embed/3c80e512-061f-452c-a2fe-68a25e868175" allow="fullscreen" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
+  </div>
+</div>
+-->
 
 <!--
 <div class="row">