(43 intermediate revisions by 7 users not shown) | |||
Line 13: | Line 13: | ||
#HQ_page .meta p{ | #HQ_page .meta p{ | ||
text-align: left; | text-align: left; | ||
− | font-size: | + | font-size: 15.4px !important; |
} | } | ||
Line 37: | Line 37: | ||
} | } | ||
− | .mydescription.myMedium:hover{ | + | .mydescription:not(#Benjamin).myMedium:hover{ |
animation: expandCardMedium 0.5s; | animation: expandCardMedium 0.5s; | ||
animation-fill-mode: forwards; | animation-fill-mode: forwards; | ||
Line 108: | Line 108: | ||
} | } | ||
− | .ui.card > .content > .header, .ui.cards > .card > .content > .header { | + | #myContent .ui.card > .content > .header, .ui.cards > .card > .content > .header { |
color: #51a7f9; | color: #51a7f9; | ||
} | } | ||
Line 129: | Line 129: | ||
<!-- Content Begin --> | <!-- Content Begin --> | ||
<img id="TopPicture" width="960" src="https://static.igem.org/mediawiki/2017/f/f1/T--Munich--team-picture.jpeg" > | <img id="TopPicture" width="960" src="https://static.igem.org/mediawiki/2017/f/f1/T--Munich--team-picture.jpeg" > | ||
− | <table width=" | + | <table width="100%" border=0 cellspacing=0 cellpadding=10> |
<tr><td colspan=3 align=left valign=center> | <tr><td colspan=3 align=left valign=center> | ||
− | <font size=7 color=#51a7f9><b> | + | <font size=7 color=#51a7f9><b style="color: #51a7f9">Students</b></font> |
</td></tr> | </td></tr> | ||
<tr><td colspan=3 align=center valign=center> | <tr><td colspan=3 align=center valign=center> | ||
Line 162: | Line 162: | ||
<div class="ui card" id="Benedikt"> | <div class="ui card" id="Benedikt"> | ||
<div class="image"> | <div class="image"> | ||
− | <img src=" | + | <img src="https://static.igem.org/mediawiki/2017/9/98/T--Munich--ProfilePicture_Benedikt.jpg"> |
</div> | </div> | ||
<div class="content"> | <div class="content"> | ||
Line 175: | Line 175: | ||
</div> | </div> | ||
<p> | <p> | ||
− | <b>Favorite thing about iGEM: | + | <b>Favorite thing about iGEM:</b> So many cool ideas.<br> |
− | </b> So many cool ideas.<br> | + | <b>Scientific Interests:</b> I want to copy the mechanisms of nature to use them under a new purpose.<br> |
− | <b>Scientific Interests: | + | <b>Fun Fact:</b> I like to philosophize about everything.<br> |
− | </b> I want to copy nature to use | + | <b>What makes you happy:</b> Climbing, nature, traveling, and new impressions.<br> |
− | <b>Fun Fact: | + | <b>Who is your role-model:</b> Alexander von Humboldt |
− | </b> I like to | + | |
− | <b>What makes you happy: | + | |
− | </b> Climbing, nature, traveling, and new impressions.<br> | + | |
− | <b>Who is your role-model: | + | |
− | </b> Alexander von Humboldt | + | |
</p> | </p> | ||
</div> | </div> | ||
Line 205: | Line 200: | ||
</div> | </div> | ||
<p> | <p> | ||
− | <b> | + | <b>Favorite thing about iGEM:</b> |
The possibility of experiencing the development of a project from the idea to the implementation, and being able to influence it a lot along the way. <br> | The possibility of experiencing the development of a project from the idea to the implementation, and being able to influence it a lot along the way. <br> | ||
<b>Fun fact about me:</b> | <b>Fun fact about me:</b> | ||
− | An old friend of mine used some music we produced in one of his movies. So by accident, I am now credited in the Music section on Cannes Festival's | + | An old friend of mine used some music we produced in one of his movies. So by accident, I am now credited in the Music section on Cannes Festival's webpage.<br> |
<b>What makes you happy?</b> | <b>What makes you happy?</b> | ||
Experiments, simulations and/or electronics that work out the way I expected. My music being on when I enter the lab/room. Jam Sessions!<br> | Experiments, simulations and/or electronics that work out the way I expected. My music being on when I enter the lab/room. Jam Sessions!<br> | ||
Line 226: | Line 221: | ||
<p class="header">Patrick Wilke</p> | <p class="header">Patrick Wilke</p> | ||
<div class="meta"> | <div class="meta"> | ||
− | <p><span class="date"> | + | <p><span class="date">Master Biochemistry (TUM)</span><br>Age: 23<br>Origin: Germany</p> |
</div> | </div> | ||
<div class="description" > | <div class="description" > | ||
Line 234: | Line 229: | ||
</div> | </div> | ||
<p> | <p> | ||
− | <b> | + | <b>Favorite thing about iGEM:</b> |
Working in a team of motivated students and helping each other out.<br> | Working in a team of motivated students and helping each other out.<br> | ||
<b>Fun fact about me:</b>When I was little, I spent the whole day playing table football at the school. Once, I lost sense of time and my worried mother called the police on me. | <b>Fun fact about me:</b>When I was little, I spent the whole day playing table football at the school. Once, I lost sense of time and my worried mother called the police on me. | ||
Line 275: | Line 270: | ||
<div class="ui card" id="Ludwig"> | <div class="ui card" id="Ludwig"> | ||
<div class="image"> | <div class="image"> | ||
− | <img src=" | + | <img src="https://static.igem.org/mediawiki/2017/b/b6/T--Munich--ProfilePicture_Ludwig.jpg"> |
</div> | </div> | ||
<div class="content"> | <div class="content"> | ||
− | <p class="header"> | + | <p class="header">Ludwig Bauer</p> |
<div class="meta"> | <div class="meta"> | ||
<p><span class="date">Master Biochemistry (TUM)</span><br>Age: 22<br>Origin: Erding, Germany</p> | <p><span class="date">Master Biochemistry (TUM)</span><br>Age: 22<br>Origin: Erding, Germany</p> | ||
Line 288: | Line 283: | ||
</div> | </div> | ||
<p> | <p> | ||
− | <b>Favorite thing about iGEM:</b> Learning about things | + | <b>Favorite thing about iGEM:</b> Learning about new things that are not directly related to my biochemistry studies and working in a multidisciplinary team.<br> |
<b>Scientific Interests:</b> Biological and natural products chemistry<br> | <b>Scientific Interests:</b> Biological and natural products chemistry<br> | ||
− | <b>Fun Fact:</b> He | + | <b>Fun Fact:</b> He keep smiling even in stressful situations.<br> |
− | <b>What makes you happy:</b> A large | + | <b>What makes you happy:</b> A large peak when purifying proteins.<br> |
− | <b>Role Model:</b> | + | <b>Role Model:</b> M. T. Cicero |
</p> | </p> | ||
</div> | </div> | ||
Line 356: | Line 351: | ||
<p class="header">Dawafuti Sherpa</p> | <p class="header">Dawafuti Sherpa</p> | ||
<div class="meta"> | <div class="meta"> | ||
− | <p><span class="date">Master | + | <p><span class="date">Master Biology (LMU)</span><br>Age: 27<br>Origin: Kathmandu, Nepal</p> |
</div> | </div> | ||
<div class="description" > | <div class="description" > | ||
Line 432: | Line 427: | ||
<p class="header">Florian Katzmeier</p> | <p class="header">Florian Katzmeier</p> | ||
<div class="meta"> | <div class="meta"> | ||
− | <p><span class="date">Master Biophysics (TUM)</span><br>Age: 23<br>Origin: Landsberg am | + | <p><span class="date">Master Biophysics (TUM)</span><br>Age: 23<br>Origin: Landsberg am Lech, Germany</p> |
</div> | </div> | ||
<div class="description" > | <div class="description" > | ||
Line 452: | Line 447: | ||
<div class="ui card" id="Julian"> | <div class="ui card" id="Julian"> | ||
<div class="image"> | <div class="image"> | ||
− | <img src=" | + | <img src="https://static.igem.org/mediawiki/2017/9/9a/T--Munich--ProfilePicture_Julian.jpg"> |
</div> | </div> | ||
<div class="content"> | <div class="content"> | ||
<p class="header">Julian Reinhard</p> | <p class="header">Julian Reinhard</p> | ||
<div class="meta"> | <div class="meta"> | ||
− | <p><span class="date">Bachelor Bioinformatics (LMU + TUM)</span><br>Age: | + | <p><span class="date">Bachelor Bioinformatics, Molecular Biotech. (LMU + TUM)</span><br>Age: 25<br>Origin: Bruchsal, Germany</p> |
</div> | </div> | ||
<div class="description" > | <div class="description" > | ||
Line 467: | Line 462: | ||
<b>Favorite thing about iGEM:</b> Trying and mixing new experimental protocols.<br> | <b>Favorite thing about iGEM:</b> Trying and mixing new experimental protocols.<br> | ||
<b>Scientific Interests:</b> Structural Bioinformatics and Systems Biology.<br> | <b>Scientific Interests:</b> Structural Bioinformatics and Systems Biology.<br> | ||
− | <b>Fun Fact:</b> Developed | + | <b>Fun Fact:</b> Developed RNase anxiety disorder during iGEM.<br> |
<b>What makes you happy:</b> Getting things to (finally!) work.<br> | <b>What makes you happy:</b> Getting things to (finally!) work.<br> | ||
<b>Role Model:</b> Craig Venter. | <b>Role Model:</b> Craig Venter. | ||
Line 500: | Line 495: | ||
</div> | </div> | ||
</div> | </div> | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
<div class="ui card" id="Matthias"> | <div class="ui card" id="Matthias"> | ||
<div class="image"> | <div class="image"> | ||
Line 532: | Line 503: | ||
<p class="header">Matthias Lenz</p> | <p class="header">Matthias Lenz</p> | ||
<div class="meta"> | <div class="meta"> | ||
− | <p><span class="date">Bachelor Biology (TUM)</span><br>Age: 22<br>Origin: | + | <p><span class="date">Bachelor Biology (TUM)</span><br>Age: 22<br>Origin: Velden, Germany</p> |
</div> | </div> | ||
<div class="description" > | <div class="description" > | ||
Line 540: | Line 511: | ||
</div> | </div> | ||
<p> | <p> | ||
− | <b>Favorite thing about iGEM:</b> | + | <b>Favorite thing about iGEM:</b> Having people from diverse backgrounds come together and seeing their different approaches to problems.<br> |
<b>Scientific Interests:</b> Genomics and Biomedicine.<br> | <b>Scientific Interests:</b> Genomics and Biomedicine.<br> | ||
<b>Fun Fact:</b> A Professor of Genetics once told me I had a "really distinct phenotype" and walked away without any further explanation.<br> | <b>Fun Fact:</b> A Professor of Genetics once told me I had a "really distinct phenotype" and walked away without any further explanation.<br> | ||
− | <b>What makes you happy:</b> Observing nature, reading, | + | <b>What makes you happy:</b> Observing nature, reading, bouldering.<br> |
− | <b>Role Model:</b> Richard Feynman | + | <b>Role Model:</b> Top tier scientists that also communicate science to the public like Richard Feynman or Richard Dawkins. |
</p> | </p> | ||
</div> | </div> | ||
Line 578: | Line 549: | ||
</td></tr> | </td></tr> | ||
<tr><td colspan=3 align=left valign=center> | <tr><td colspan=3 align=left valign=center> | ||
− | <font size=7 color=#51a7f9><b>Supervisors</b></font> | + | <font size=7 color=#51a7f9><b style="color: #51a7f9">Supervisors</b></font> |
</td></tr> | </td></tr> | ||
<tr><td colspan=3 align=center valign=center> | <tr><td colspan=3 align=center valign=center> | ||
Line 584: | Line 555: | ||
<div class="ui card" id="Aurore"> | <div class="ui card" id="Aurore"> | ||
<div class="image"> | <div class="image"> | ||
− | <img src=" | + | <img src="https://static.igem.org/mediawiki/2017/5/5a/T--Munich--ProfilePicture_Aurore.jpg"> |
</div> | </div> | ||
<div class="content"> | <div class="content"> | ||
Line 624: | Line 595: | ||
</div> | </div> | ||
</div> | </div> | ||
− | <div class="ui card | + | <div class="ui card"> |
<div class="image"> | <div class="image"> | ||
− | <img src=" | + | <img src="https://static.igem.org/mediawiki/2017/0/04/T--Munich--ProfilePicture_Benjamin.jpg"> |
</div> | </div> | ||
− | <div class="content"> | + | <div onmouseenter="toggleCard($('#Benjamin'))" onmouseleave="toggleCard($('#Benjamin'))" class="content"> |
<p class="header">Benjamin Aleritsch</p> | <p class="header">Benjamin Aleritsch</p> | ||
<div class="meta"> | <div class="meta"> | ||
Line 634: | Line 605: | ||
</div> | </div> | ||
<div class="description" > | <div class="description" > | ||
− | <div class="mydescription myMedium" > | + | <div class="mydescription myMedium" id="Benjamin"> |
<div class="threeDots-container"> | <div class="threeDots-container"> | ||
<img alt ="three dots" src="https://static1.squarespace.com/static/5654cf16e4b00b463710ff91/t/56568104e4b0509ba9df9296/1448509701389/?format=750w"> | <img alt ="three dots" src="https://static1.squarespace.com/static/5654cf16e4b00b463710ff91/t/56568104e4b0509ba9df9296/1448509701389/?format=750w"> | ||
Line 673: | Line 644: | ||
<p class="header">Dong-Jiunn Jeffery Truong</p> | <p class="header">Dong-Jiunn Jeffery Truong</p> | ||
<div class="meta"> | <div class="meta"> | ||
− | <p><span class="date">PhD student | + | <p><span class="date">PhD student developing Molecular Tools for Non-Invasive Imaging and Actuation</span></p> |
</div> | </div> | ||
<div class="description" > | <div class="description" > | ||
Line 681: | Line 652: | ||
</div> | </div> | ||
<p> | <p> | ||
− | + | Jeff studied Molecular Biotechnology at TUM and is doing his PhD at the Helmholtz Zentrum München, where he is engineering molecular systems to control and observe cellular processes with different stimuli | |
− | like light, magnetic fields, and sound. | + | like light, magnetic fields, and sound. As an iGEM veteran, his experiences in the competition and the work |
dynamic have been very valuable, just like his knowledge in synthetic biology and biological engineering | dynamic have been very valuable, just like his knowledge in synthetic biology and biological engineering | ||
provided us with great ideas for our project. | provided us with great ideas for our project. | ||
Line 693: | Line 664: | ||
</td></tr> | </td></tr> | ||
<tr><td colspan=3 align=left valign=center> | <tr><td colspan=3 align=left valign=center> | ||
− | <font size=7 color=#51a7f9><b>PIs</b></font> | + | <font size=7 color=#51a7f9><b style="color: #51a7f9">PIs</b></font> |
</td></tr> | </td></tr> | ||
<tr><td colspan=3 align=center valign=center> | <tr><td colspan=3 align=center valign=center> | ||
Line 699: | Line 670: | ||
<div class="ui card pi-card" id="Simmel"> | <div class="ui card pi-card" id="Simmel"> | ||
<div class="image"> | <div class="image"> | ||
− | <img src="https://static.igem.org/mediawiki/2017/ | + | <img src="https://static.igem.org/mediawiki/2017/9/90/T--Munich--ProfilPicture_Simmel.jpg"> |
</div> | </div> | ||
<div class="content"> | <div class="content"> | ||
Line 724: | Line 695: | ||
<div class="ui card pi-card" id="Westmeyer"> | <div class="ui card pi-card" id="Westmeyer"> | ||
<div class="image"> | <div class="image"> | ||
− | <img style="height: | + | <img style="height: 280px !important" src="https://static.igem.org/mediawiki/2017/1/10/T--Munich--ProfilePicture_Westmeyer.jpg"> |
</div> | </div> | ||
<div class="content"> | <div class="content"> | ||
Line 928: | Line 899: | ||
</td><td height="25" bgcolor=#ffffff></td></tr> | </td><td height="25" bgcolor=#ffffff></td></tr> | ||
+ | <script type="text/javascript"> | ||
+ | |||
+ | $(".card").click(function(){ | ||
+ | |||
+ | $(this).toggleClass("locked"); | ||
+ | |||
+ | }); //With this click function, the locked class is added. Locked is simply use for a boolean expression no determine whether the animation on mouse hover should be trigger (see toggleCard). | ||
+ | |||
+ | var initialheight = $(".mydescription").css("height"); // We save the initialheight of any card (they all should have the same inital height) so we can use its value to reset the height once the card is deactivated. | ||
+ | |||
+ | function debugging(){ | ||
+ | alert(initialheight); | ||
+ | |||
+ | } | ||
+ | |||
+ | function toggleCard(object){ | ||
+ | |||
+ | if(!(object.parents().hasClass("locked"))){ | ||
+ | |||
+ | if(!(object.hasClass("card-active"))){ | ||
+ | object.addClass("card-active"); | ||
+ | |||
+ | object.animate({ | ||
+ | |||
+ | height: 360 | ||
+ | |||
+ | },500, function(){ | ||
+ | |||
+ | if((object.hasClass("card-active"))){ | ||
+ | |||
+ | object.clearQueue(); | ||
+ | |||
+ | } | ||
+ | |||
+ | }); | ||
+ | |||
+ | } else { | ||
+ | object.removeClass("card-active"); | ||
+ | |||
+ | object.animate({ | ||
+ | |||
+ | height: initialheight | ||
+ | |||
+ | },500, function(){ | ||
+ | |||
+ | if(!(object.hasClass("card-active"))){ | ||
+ | |||
+ | object.clearQueue(); | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | }); | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | } //Toggle function. Changes the card to its active, inactive state by using the animate function to gradually change its height to match that of the p (active) or to become initalheight (inactive). Adds the card-active class at the end to change the other css properties that do not require animation. | ||
+ | |||
+ | function toggleCardSudden(object){ | ||
+ | if(!(object.hasClass("card-active"))){ | ||
+ | if(object.attr("id")=="Dali") { | ||
+ | $("#DaliF").attr("src","https://scontent.xx.fbcdn.net/v/t31.0-8/19488772_1328753460507879_5404459836438295641_o.jpg?oh=42fee72c3e799515ca59f9a20809b612&oe=5A070989"); | ||
+ | |||
+ | |||
+ | }/* TODO: Delete this later and implement it in an good way. */ | ||
+ | object.animate({ | ||
+ | |||
+ | height: object.children("p").css("height") | ||
+ | |||
+ | },500, function(){ | ||
+ | |||
+ | |||
+ | }); | ||
+ | |||
+ | } else { | ||
+ | if(object.attr("id")=="Dali") { | ||
+ | $("#DaliF").attr("src","D:\\Documentos\\IGEM\\wiki\\ProfileFotos\\Dali.jpg"); | ||
+ | |||
+ | |||
+ | }/* TODO: Delete this later and implement it in an good way. */ | ||
+ | object.css("height",initialheight); | ||
+ | } | ||
+ | |||
+ | object.toggleClass("card-active"); | ||
+ | } | ||
+ | |||
+ | |||
+ | function and(a, b){ | ||
+ | return (!(!(a || a) || !(b || b))); | ||
+ | } //Calculates the value of a and b, because why should the &&; operator work? | ||
+ | |||
+ | $('.dropdown').dropdown({on:'hover'}); | ||
+ | |||
+ | </script> | ||
</table></body></html> | </table></body></html> |
Latest revision as of 18:23, 15 December 2017