diff --git a/wiki/pages/home.html b/wiki/pages/home.html index 10543f25b1c1e01d68bb2185726105952edb2023..59edd08d3dee478a41c86bd30e8e8856e1c3d771 100644 --- a/wiki/pages/home.html +++ b/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">