diff --git a/wiki/pages/home.html b/wiki/pages/home.html index d661e646f3cf3cb26bc96f6ff3b16993ca558e52..48ebb21c3d0a0af98a996493f5ed24b2cb422040 100644 --- a/wiki/pages/home.html +++ b/wiki/pages/home.html @@ -1,10 +1,58 @@ {% 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> + <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> +</div> +{% endblock %} {% block page_content %} +<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"> <div class="col"> <h2>Before you start</h2> @@ -56,5 +104,5 @@ </ul> </div> </div> - +--> {% endblock %}