Difference between revisions of "Team:ETH Zurich"

 
(63 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{ETH_Zurich}}
 
{{ETH_Zurich}}
 +
{{:Team:ETH_Zurich/homeStyleCss}}
 +
{{:Team:ETH_Zurich/homeSlideshow}}
 
<html>
 
<html>
−
<!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]-->
 
  
 +
<img id="homepageLogo" src="https://static.igem.org/mediawiki/2015/f/f2/MicroBeaconLogo_slogan.png">
  
−
<style>
+
<!-- Start of content -->
−
#mainContainer {
+
−
    overflow-x: hidden;
+
−
    max-width:80%;
+
−
}
+
−
#menuButton {
+
−
    margin-top: 85px;
+
−
}
+
−
#sideFiller {
+
−
    display:none;
+
−
/*    width:auto;*/
+
−
/*    height:auto;*/
+
−
/*    float:right;*/
+
−
}
+
−
#topContainer {
+
−
    height:auto;
+
−
}
+
−
/*#sideFiller object, #sideFiller img{
+
−
    display:none;
+
−
}*/
+
−
#sidemenuContainer {
+
−
    display:none !important;
+
−
}
+
−
#sidemenuContainer {
+
−
    display:none;
+
−
    opacity:0;
+
−
    visibility:hidden;
+
−
}
+
−
#menuContainer {
+
−
    width: 75.8637em !important;
+
−
    float:none;
+
−
    display:block;
+
−
    margin:0 auto;
+
−
/*    padding-top:50px;*/
+
−
}
+
−
.hideMenu {
+
−
    float:left;
+
−
    margin: 0 auto;
+
−
    display:inline-block;
+
−
    width:100%;
+
−
}
+
−
#homepageWrapper {
+
−
    width:101.7%;
+
−
    margin-left:-0.75%;
+
−
    display:inline-block;
+
−
    position:relative;
+
−
/*    height:1407.6px;*/
+
−
}
+
−
#homepageWrapper:after {
+
−
    padding-top:133.3333333%;
+
−
    display:block;
+
−
    content:'';
+
−
}
+
−
#homepageContainer {
+
−
    position:absolute;
+
−
    top:0;bottom:0;right:0;left:0;
+
−
}
+
−
/*#homeContentTop {
+
−
    width:100%;
+
−
    overflow:hidden;
+
−
    margin:auto;
+
−
    height:680px;
+
−
    text-align: center;
+
−
vertical-align: middle;
+
−
}
+
−
#homeContentBottom {
+
−
    width:100%;
+
−
    overflow:hidden;
+
−
    margin:auto;
+
−
    height:680px;
+
−
    text-align: center;
+
−
  vertical-align: middle;
+
−
}*/
+
−
.content {
+
−
    position:relative;
+
−
    text-align: center;
+
−
    display:table;
+
−
    overflow:hidden;
+
−
    background-clip:border-box;
+
−
    width:33.333333%;
+
−
    height:25%;
+
−
}
+
−
.contentInner {
+
−
    background:rgba(255,255,255,1);
+
−
    margin:2.5%;
+
−
    position:absolute;
+
−
    overflow:hidden;
+
−
    top:0;
+
−
    left:0;
+
−
    bottom:0;
+
−
    right:0;
+
−
    border-radius:10px;
+
−
    background-clip:border-box;
+
−
    z-index:1;
+
−
}
+
−
.centered {
+
−
    position:absolute !important;
+
−
    top:50%;
+
−
    left:50%;
+
−
    -webkit-transform:translateY(-50%) translateX(-50%);
+
−
      -moz-transform:translateY(-50%) translateX(-50%);
+
−
        -o-transform:translateY(-50%) translateX(-50%);
+
−
            transform:translateY(-50%) translateX(-50%);
+
−
}
+
  
−
.content h1,.content h2,.content h3,.content h4,.content h5,.content h6,.content p,.content ul,.content li,.content ol,.content img {
+
<div id="homepageWrapper">
−
/*    text-align:center !important;*/
+
<div id="homepageContainer">
−
/*    display:table-cell !important;*/
+
−
    margin:0 auto !important;
+
−
/*    vertical-align:middle !important;*/
+
−
    position:relative;
+
−
}
+
−
.content a.over {
+
−
    display:table;
+
−
    height:100%;
+
−
    width:100%;
+
−
    text-align:center;   
+
−
    text-decoration:none;
+
−
}
+
−
.content h1 {
+
−
    display:none;
+
−
    vertical-align:middle;
+
−
    color: #006EB4 !important;
+
−
}
+
−
.content img {
+
−
    -webkit-transition: opacity 0.5s;
+
−
    -moz-transition: opacity 0.5s;
+
−
    -o-transition: opacity 0.5s;
+
−
    transition: opacity 0.5s;   
+
−
}
+
−
.contentInner:hover h1 {
+
−
    display:table-cell;
+
−
}
+
−
.contentInner:hover img {
+
−
    opacity: 0.4;
+
−
}
+
  
−
#rightSideFiller {
+
<div class="content" id="homeMainContainer" style="float:left;width:100%;height:50%;"><div class="contentInner" style="margin:1.25%;">
−
    display:none;
+
<div id="homeMainCaption"></div>
−
}
+
<div id="homepageImageContainer">
−
#footerContainer {
+
<img class="homeMainImage centered" id="homeImage0" src="https://static.igem.org/mediawiki/2015/d/d7/ETH_homepage_1.png">
−
    max-width:80%;
+
<img class="homeMainImage centered" id="homeImage1" src="https://static.igem.org/mediawiki/2015/7/79/ETH_homepage_2.png">
−
}
+
<img class="homeMainImage centered" id="homeImage2" src="https://static.igem.org/mediawiki/2015/a/a2/ETH_homepage_3.png">
−
#homepageLogo {
+
<img class="homeMainImage centered" id="homeImage3" src="https://static.igem.org/mediawiki/2015/5/5a/ETH_homepage_4.png">
−
    width:100%;
+
<img class="homeMainImage centered" id="homeImage4" src="https://static.igem.org/mediawiki/2015/f/f0/ETH_homepage_5.png">
−
    margin:auto;
+
<img class="homeMainImage centered" id="homeImage5" src="https://static.igem.org/mediawiki/2015/9/9c/ETH_homepage_6.png">
−
    display:inherit;
+
<a id="homeMainArrowPrev" href="#" onclick="changeState(-1); return false;">&#9668;</a>
−
}
+
<a id="homeMainArrowNext" href="#" onclick="changeState(1); return false;">&#9658;</a>
−
#homeMainContainer img {
+
</div>
−
    transition: width 1s,transform 1s;
+
−
}
+
−
#homeMainCaption {
+
−
    background: rgba(0,0,0,0.7);
+
−
    height:0;
+
−
    transition: height 0.2s;
+
−
    position:absolute;
+
−
    left:0;
+
−
    right:0;
+
−
    bottom:0;
+
−
}
+
−
#homeMainCaption p {
+
−
    color:white;
+
−
    padding:5%;
+
−
}
+
−
@media screen and (max-device-width:480px) {
+
−
#homepageLogo {
+
−
    display:none;
+
−
    width:80%;
+
−
    margin:0;
+
−
    float:left;
+
−
}
+
−
p#slogan {
+
−
    display:none;
+
−
}
+
−
#sideFiller {
+
−
    display:block;
+
−
}
+
−
}
+
−
#homeMainContainer:hover img {
+
−
    opacity:1;
+
−
}
+
−
#homeMainContainer:hover #homeMainCaption {
+
−
    height:20%;
+
−
}
+
−
#homeMainContainer img {
+
−
    width:200%;
+
−
    height:auto;
+
−
}
+
−
#homeMainContainer a {
+
−
    color:#006EB4;
+
−
    transition: color 0.2s;
+
−
}
+
−
#homeMainContainer a:hover {
+
−
    text-decoration:none;
+
−
    color:#00964B;
+
−
}
+
−
</style>
+
  
−
<style id="mainState0">
+
</div></div>
−
#homeMainContainer img {
+
−
    transform: translate3d(-20%,0,0);
+
−
}
+
−
</style>
+
−
<style id="mainState1">
+
−
#homeMainContainer img {
+
−
    transform: translate3d(-40%,0,0);
+
−
}
+
−
</style>
+
−
<style id="mainState2">
+
−
#homeMainContainer img {
+
−
    transform: translate3d(-50%,0,0);
+
−
}
+
−
</style>
+
−
<style id="mainState3">
+
−
#homeMainContainer img {
+
−
    transform: translate3d(-40%,-20%,0);
+
−
}
+
−
</style>
+
−
<style id="mainState4">
+
−
#homeMainContainer img {
+
−
    transform: translate3d(-40%,-20%,0);
+
−
    width:300%;
+
−
}
+
−
</style>
+
  
−
<script>
 
−
var homeMainStates = [
 
−
    document.getElementById('mainState0'),
 
−
    document.getElementById('mainState1'),
 
−
    document.getElementById('mainState2'),
 
−
    document.getElementById('mainState3'),
 
−
    document.getElementById('mainState4')
 
−
];
 
−
var homeMainCaptions = [
 
−
    "<p>Caption1</p>",
 
−
    "<p>Caption2</p>",
 
−
    "<p>Caption3</p>",
 
−
    "<p>Caption4</p>",
 
−
    "<p>Caption5</p>"
 
−
];
 
−
var curMainState = 0;
 
−
var numMainStates = homeMainStates.length;
 
−
$(function() {
 
−
    for (var i=0;i<numMainStates;i++) {
 
−
        homeMainStates[i].disabled = true;
 
−
    }
 
−
    document.getElementById('homeMainCaption').innerHTML = homeMainCaptions[0];
 
−
});
 
  
−
function changeState(dir) {
 
−
    if (document.getElementById('homeMainContainer').className == "content") {
 
−
    document.getElementById('homeMainContainer').className = "content running";
 
−
    if (dir==1) {
 
−
        if (curMainState == numMainStates-1) {
 
−
            curMainState = numMainStates;
 
−
            while (curMainState--) {
 
−
                homeMainStates[curMainState].disabled = true;
 
−
            }
 
−
        } else {
 
−
            homeMainStates[curMainState+1].disabled = false;
 
−
        }
 
−
    } else {
 
−
        if (curMainState) {
 
−
            homeMainStates[curMainState].disabled = true;
 
−
        } else {
 
−
            curMainState = 1;
 
−
        }
 
−
    }
 
−
    curMainState += dir;
 
−
    document.getElementById('homeMainCaption').innerHTML = homeMainCaptions[curMainState];
 
−
    setTimeout(function(){document.getElementById('homeMainContainer').className = "content";},700);
 
−
    }
 
−
}
 
−
</script>
 
  
 +
<!-- THIS WILL BE MOVED TO ANOTHER PAGE
 +
<div class="content" id="homeCancerContainer" style="float:left;width:33.333333%;height:50%;"><div class="contentInner" style="2.5% 5% 2.5% 5%">
  
−
<!--<script type="text/javascript" src="https://2015.igem.org/Template:ETH_Zurich/lightbox.min.js?action=raw&ctype=text/javascript"></script>-->
+
<img src="https://static.igem.org/mediawiki/2015/thumb/9/9a/ETH_ctc_pub_per_year.svg/609px-ETH_ctc_pub_per_year.svg.png" style="width:100%">
 +
<div align="left">
 +
<ul>
  
−
<style>
+
<li><p>Cancer constitutes an increasing risk factor for the ageing population in the developed world. The following graph shows the death rates per 100'000 in the ten worst countries (World Cancer Reserch Fund, 2011).</p>
−
#homeMainArrowNext, #homeMainArrowPrev {
+
<img height="200" width="180" src="https://static.igem.org/mediawiki/2015/8/8e/CancerRates.jpg">
−
    position:absolute;
+
</li>
−
    top:50%;
+
−
    font-size:500%;
+
−
    display:none;
+
−
}
+
−
#homeMainArrowNext {
+
−
    right:0;
+
−
}
+
−
#homeMainArrowPrev {
+
−
    left:0;
+
−
}
+
−
#homeMainContainer:hover #homeMainArrowNext, #homeMainContainer:hover #homeMainArrowPrev {
+
−
    display:block;
+
−
}
+
−
</style>
+
  
−
<img id="homepageLogo" src="https://static.igem.org/mediawiki/2015/c/c9/MicroBeaconLogo.png">
 
  
 +
<li><p>Estimates predict more than 500'000 cancer victims in the US for the year 2015 alone (American Cancer Society, Surveillance Research, 2015). While these estimates include only the four major cancers (colon & rectum, lung & bronchus, breast and prostate), other manifestations of cancer are on the rise as well.</p>
 +
</li>
  
−
<p id="slogan" style="color:white;font-family:'Tahoma', sans-serif;font-weight:normal;font-size:25px;text-align:center;margin-top:-13%;margin-bottom:6%;width:100%;margin-left:0.5%">The microbial beacon&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; for cancer detection</p>
 
−
<!-- Start of content -->
 
  
−
<div id="homepageWrapper">
+
<li><p>Current tests for cancer screening mostly rely on imaging methods to detect tumors in various tissues. For many cancer types there is no method to detect metastasis at an early stage (US Centers of Disease Control and Prevention, 2015).</p>
−
<div id="homepageContainer">
+
</li>
 +
</ul>
 +
</div>
 +
</div>
  
−
<div class="content" id="homeMainContainer" style="float:left;width:66.666666%;height:50%;"><div class="contentInner" style="margin:1.25%;">
 
−
</html>
 
−
[[File:ETH_Zurich_home_slideshow.png|link=]]
 
−
<html>
 
−
<a id="homeMainArrowPrev" href="#" onclick="changeState(-1); return false;">&#9668;</a>
 
−
<a id="homeMainArrowNext" href="#" onclick="changeState(1); return false;">&#9658;</a>
 
−
<div id="homeMainCaption">
 
 
</div>
 
</div>
−
</div></div>
+
-->
−
 
+
−
<div class="content" id="homeCancerContainer" style="float:left;width:33.333333%;height:50%;"><div class="contentInner" style="2.5% 5% 2.5% 5%">
+
−
    <p>CancerFax</p>
+
−
</div></div>
+
  
−
<div class="content" style="float:left;"><div class="contentInner">
+
<div class="content" style="float:left;">
 
     <a class="over" href="https://2015.igem.org/Team:ETH_Zurich/Results">
 
     <a class="over" href="https://2015.igem.org/Team:ETH_Zurich/Results">
−
     <h1>Results</h1>
+
     <h1 class="tileText">Results</h1>
−
     <img src="https://static.igem.org/mediawiki/2015/thumb/a/a3/ETH15_Jurkat_2_and_4h.png/605px-ETH15_Jurkat_2_and_4h.png" style="height:220%;position:absolute;top:-7%;left:-95%;">
+
<div class="contentInner">
 +
     <img class="tileIcon" src="https://static.igem.org/mediawiki/2015/thumb/a/a3/Results.svg/120px-Results.svg.png">
 +
    <img class="tileBack" src="https://static.igem.org/mediawiki/2015/thumb/0/08/Eth15_co-culture-3t3-jurkat-bacteria.png/602px-Eth15_co-culture-3t3-jurkat-bacteria.png" style="height:220%;position:absolute;top:0%;left:-110%;">
 
     </a>
 
     </a>
 
</div></div>
 
</div></div>
  
−
<div class="content" style="float:left;"><div class="contentInner">
+
<div class="content" style="float:left;">
 
     <a class="over" href="https://2015.igem.org/Team:ETH_Zurich/Modeling">
 
     <a class="over" href="https://2015.igem.org/Team:ETH_Zurich/Modeling">
−
     <h1>Modeling</h1>
+
     <h1 class="tileText">Modeling</h1>
−
     <img class="centered" style="height:130%;" src="https://static.igem.org/mediawiki/2015/thumb/0/05/2dahlsurface.png/600px-2dahlsurface.png">
+
<div class="contentInner">
 +
     <img class="tileIcon" src="https://static.igem.org/mediawiki/2015/thumb/8/8f/Modeling.svg/120px-Modeling.svg.png">
 +
    <img class="tileBack centered" style="height:130%;top:60%;" src="https://static.igem.org/mediawiki/2015/thumb/0/05/2dahlsurface.png/600px-2dahlsurface.png">
 
     </a>
 
     </a>
 
</div></div>
 
</div></div>
  
−
<div class="content" style="float:left;"><div class="contentInner">
+
<div class="content" style="float:left;">
 +
    <a class="over" href="https://2015.igem.org/Team:ETH_Zurich/Chip">
 +
    <h1 class="tileText" style="transform:translateY(-120%) translateX(-50%);-webkit-transform:translateY(-120%) translateX(-50%)">Chip Design</h1>
 +
<div class="contentInner">
 +
    <img class="tileIcon" src="https://static.igem.org/mediawiki/2015/thumb/8/80/Chip.svg/120px-Chip.svg.png">
 +
    <img class="tileBack centered" src="https://static.igem.org/mediawiki/2015/4/45/20150910_bacteria%263T3.jpg" style="width:100%;">
 +
</div></a></div>
 +
 
 +
<div class="content" style="float:left;">
 
     <a class="over" href="https://2015.igem.org/Team:ETH_Zurich/Collaborations">
 
     <a class="over" href="https://2015.igem.org/Team:ETH_Zurich/Collaborations">
−
     <h1>Collaborations</h1>
+
     <h1 class="tileText">Collaborations</h1>
−
     </a>
+
<div class="contentInner">
−
</div></div>
+
     <img class="tileIcon" src="https://static.igem.org/mediawiki/2015/thumb/f/f1/Collaborations.svg/120px-Collaborations.svg.png">
 +
    <img class="tileBack centered" src="https://static.igem.org/mediawiki/2015/thumb/8/85/ETH_collaborations.jpg/800px-ETH_collaborations.jpg" style="width:150%;">
 +
   
 +
</div></a></div>
  
  
−
<div class="content" style="float:left;"><div class="contentInner">
+
<div class="content" style="float:left;">
−
    <a class="over" href="https://2015.igem.org/Team:ETH_Zurich/Chip">
+
−
    <h1>Chip Design</h1>
+
−
    <img class="centered" src="https://static.igem.org/mediawiki/2015/thumb/1/1d/MicrofluidicFormerDesign.svg/512px-MicrofluidicFormerDesign.svg.png">
+
−
    </a>
+
−
</div></div>
+
−
 
+
−
<div class="content" style="float:left;"><div class="contentInner">
+
 
     <a class="over" href="https://2015.igem.org/Team:ETH_Zurich/Practices">
 
     <a class="over" href="https://2015.igem.org/Team:ETH_Zurich/Practices">
−
     <h1>Human Practices</h1>
+
     <h1 class="tileText" style="transform:translateY(-120%) translateX(-50%);-webkit-transform:translateY(-120%) translateX(-50%)">Human Practices</h1>
−
     <img class="centered" style="height:152%;" src="https://static.igem.org/mediawiki/2015/1/13/HumanpracticesHomePage.png">
+
<div class="contentInner">
−
     </a>
+
    <img class="tileIcon" src="https://static.igem.org/mediawiki/2015/thumb/f/f0/ETH_HumanPractices_pie.png/120px-ETH_HumanPractices_pie.png">
−
</div></div>
+
     <img class="tileBack centered" style="height:120%;" src="https://static.igem.org/mediawiki/2015/thumb/2/21/HP_SP_introducing_cells_and_DNA_to_children.JPG/800px-HP_SP_introducing_cells_and_DNA_to_children.JPG">
 +
      
 +
</div></a></div>
  
−
<div class="content" style="float:left;"><div class="contentInner">
+
<div class="content" style="float:left;">
 
     <a class="over" href="https://2015.igem.org/Team:ETH_Zurich/Team">
 
     <a class="over" href="https://2015.igem.org/Team:ETH_Zurich/Team">
−
     <h1>Team</h1>
+
     <h1 class="tileText">Team</h1>
−
     <img src="https://static.igem.org/mediawiki/2015/thumb/8/8a/TeamHomepage.png/800px-TeamHomepage.png" style="height:100%;" class="centered"/>
+
<div class="contentInner">
−
     </a>
+
    <img class="tileIcon" src="https://static.igem.org/mediawiki/2015/thumb/5/56/Team.svg/120px-Team.svg.png">
−
</div></div>
+
     <img src="https://static.igem.org/mediawiki/2015/thumb/8/8a/TeamHomepage.png/800px-TeamHomepage.png" style="height:100%;" class="tileBack centered"/>
 +
      
 +
</div></a></div>
 +
 
 +
 
 +
 
 +
 
 +
 
 
</div>
 
</div>
 
</div>
 
</div>

Latest revision as of 03:37, 19 September 2015

"What I cannot create I do not understand."
- Richard Feynmann

We would like to thank our sponsors