diff --git a/wiki/pages/team.html b/wiki/pages/team.html index d45c055f10fed384ab7824e6a04c6f970d8e4e2e..c665c7dcdb40cafda09da026f9f7ae0d50454e5d 100644 --- a/wiki/pages/team.html +++ b/wiki/pages/team.html @@ -14,22 +14,76 @@ } .grid-child { display: block; - width:350px; - height:550px; + width: 350px; + height: 550px; background-color: white; border: 2px solid black; margin: 20px 0; color: black; - overflow:scroll; + text-overflow: ellipsis; } .face-image { /* width: 80%; */ - height: 30%; + aspect-ratio: 1; + max-width: 50%; + max-height: 40%; display:block; - margin: 5% auto; + margin: 2% auto auto; } </style> +<script> + class Card { + constructor(cardId) { + // Variables + this.cardId = cardId; + this.card = document.getElementById(cardId); + // Event listeners + this.card.addEventListener("mouseover", (event) => this.hoverOnBorder()); + this.card.addEventListener("mouseout", (event) => this.hoverOffBorder()); + this.card.addEventListener("click", (event) => this.toggleSize()); + // Init styling size (to fix JS bug) + this.card.style.width = "350px"; + this.card.style.overflow = "hidden"; + } + + hoverOnBorder() { + //this.card.style.borderColor = "#e3000b"; + this.card.style.border = "4px solid #e3000b"; + } + + hoverOffBorder() { + //this.card.style.borderColor = "#000000"; + this.card.style.border = "2px solid #000000"; + } + + toggleSize() { + if (this.card.style.width === "350px") { + this.card.style.overflow = "scroll"; + this.card.style.width = "750px"; + } + else { + this.card.style.overflow = "hidden"; + this.card.style.width = "350px"; + } + } + } + + document.addEventListener('DOMContentLoaded', () => { + new Card("card_kate"); + new Card("card_adrian"); + new Card("card_maksym"); + new Card("card_lea"); + new Card("card_thijmen"); + new Card("card_vasilis"); + new Card("card_henriete"); + new Card("card_tim"); + new Card("card_luc-jan"); + new Card("card_frank"); + new Card("card_tom"); + }); +</script> + <h1 style="text-align:center">Who are we?</h1> <div class="row" style="margin-bottom:3vh;"> <div class="col-4"> @@ -41,68 +95,61 @@ </div> <h2 style="text-align:center">Our members:</h2> <div class="grid-parent"> - <div class="grid-child"> - <img src="https://static.igem.wiki/teams/5342/images/teamlogo-nb.png" class="face-image" alt="face"> - <h4 style="text-align:center">Firstname Lastname</h4> - <h6 style="text-align:center"> Role 1, Role 2, and Role 3</h6> - <p style="margin: 0 5%;">Hi! I'm a generic member, and I exist for the sole purpose of being a template so that I can eventually get replaced by a REAL member :) My interests are helping the lead programmer :D</p> - </div> - <div class="grid-child"> + <div class="grid-child" id = "card_kate"> <img src="https://static.igem.wiki/teams/5342/images/teamlogo-nb.png" class="face-image" alt="face"> <h4 style="text-align:center">Firstname Lastname</h4> <h6 style="text-align:center"> Role 1, Role 2, and Role 3</h6> <p style="margin: 0 5%;">Hi! I'm a generic member, and I exist for the sole purpose of being a template so that I can eventually get replaced by a REAL member :) My interests are helping the lead programmer :D</p> </div> - <div class="grid-child"> + <div class="grid-child" id = "card_adrian"> <img src="https://static.igem.wiki/teams/5342/images/teamlogo-nb.png" class="face-image" alt="face"> <h4 style="text-align:center">Firstname Lastname</h4> <h6 style="text-align:center"> Role 1, Role 2, and Role 3</h6> <p style="margin: 0 5%;">Hi! I'm a generic member, and I exist for the sole purpose of being a template so that I can eventually get replaced by a REAL member :) My interests are helping the lead programmer :D</p> </div> - <div class="grid-child"> + <div class="grid-child" id = "card_maksym"> <img src="https://static.igem.wiki/teams/5342/images/teamlogo-nb.png" class="face-image" alt="face"> <h4 style="text-align:center">Firstname Lastname</h4> <h6 style="text-align:center"> Role 1, Role 2, and Role 3</h6> <p style="margin: 0 5%;">Hi! I'm a generic member, and I exist for the sole purpose of being a template so that I can eventually get replaced by a REAL member :) My interests are helping the lead programmer :D</p> </div> - <div class="grid-child"> + <div class="grid-child" id = "card_lea"> <img src="https://static.igem.wiki/teams/5342/images/teamlogo-nb.png" class="face-image" alt="face"> <h4 style="text-align:center">Firstname Lastname</h4> <h6 style="text-align:center"> Role 1, Role 2, and Role 3</h6> <p style="margin: 0 5%;">Hi! I'm a generic member, and I exist for the sole purpose of being a template so that I can eventually get replaced by a REAL member :) My interests are helping the lead programmer :D</p> </div> - <div class="grid-child"> + <div class="grid-child" id = "card_thijmen"> <img src="https://static.igem.wiki/teams/5342/images/teamlogo-nb.png" class="face-image" alt="face"> <h4 style="text-align:center">Firstname Lastname</h4> <h6 style="text-align:center"> Role 1, Role 2, and Role 3</h6> <p style="margin: 0 5%;">Hi! I'm a generic member, and I exist for the sole purpose of being a template so that I can eventually get replaced by a REAL member :) My interests are helping the lead programmer :D</p> </div> - <div class="grid-child"> + <div class="grid-child" id = "card_vasilis"> <img src="https://static.igem.wiki/teams/5342/images/teamlogo-nb.png" class="face-image" alt="face"> <h4 style="text-align:center">Firstname Lastname</h4> <h6 style="text-align:center"> Role 1, Role 2, and Role 3</h6> <p style="margin: 0 5%;">Hi! I'm a generic member, and I exist for the sole purpose of being a template so that I can eventually get replaced by a REAL member :) My interests are helping the lead programmer :D</p> </div> - <div class="grid-child"> + <div class="grid-child" id = "card_henriete"> <img src="https://static.igem.wiki/teams/5342/images/teamlogo-nb.png" class="face-image" alt="face"> <h4 style="text-align:center">Firstname Lastname</h4> <h6 style="text-align:center"> Role 1, Role 2, and Role 3</h6> <p style="margin: 0 5%;">Hi! I'm a generic member, and I exist for the sole purpose of being a template so that I can eventually get replaced by a REAL member :) My interests are helping the lead programmer :D</p> </div> - <div class="grid-child"> + <div class="grid-child" id = "card_tim"> <img src="https://static.igem.wiki/teams/5342/images/teamlogo-nb.png" class="face-image" alt="face"> <h4 style="text-align:center">Firstname Lastname</h4> <h6 style="text-align:center"> Role 1, Role 2, and Role 3</h6> <p style="margin: 0 5%;">Hi! I'm a generic member, and I exist for the sole purpose of being a template so that I can eventually get replaced by a REAL member :) My interests are helping the lead programmer :D</p> </div> - <div class="grid-child"> + <div class="grid-child" id = "card_luc-jan"> <img src="https://static.igem.wiki/teams/5342/images/teamlogo-nb.png" class="face-image" alt="face"> <h4 style="text-align:center">Firstname Lastname</h4> <h6 style="text-align:center"> Role 1, Role 2, and Role 3</h6> <p style="margin: 0 5%;">Hi! I'm a generic member, and I exist for the sole purpose of being a template so that I can eventually get replaced by a REAL member :) My interests are helping the lead programmer :D</p> </div> - <div class="grid-child"> - <!-- Frank --> + <div class="grid-child" id = "card_frank"> <img src="https://static.igem.wiki/teams/5342/images/team/frank.webp" class="face-image" alt="face"> <h4 style="text-align:center">Frank Nelissen</h4> <h6 style="text-align:center">Instructor</h6> @@ -114,6 +161,12 @@ I am happy to fulfil my role as instructor for the Radboud iGEM team and together try to find solutions for the research questions. </p> </div> + <div class="grid-child" id = "card_tom"> + <img src="https://static.igem.wiki/teams/5342/images/teamlogo-nb.png" class="face-image" alt="face"> + <h4 style="text-align:center">Firstname Lastname</h4> + <h6 style="text-align:center"> Role 1, Role 2, and Role 3</h6> + <p style="margin: 0 5%;">Hi! I'm a generic member, and I exist for the sole purpose of being a template so that I can eventually get replaced by a REAL member :) My interests are helping the lead programmer :D</p> + </div> </div> <h1 style="text-align:center">Where are we?</h1>