Difference between revisions of "Team:ETH Zurich/Team"

 
(182 intermediate revisions by 5 users not shown)
Line 1: Line 1:
−
{{ETH_Zurich_2}}
+
{{ETH_Zurich/Head_N_Prefix}}
−
 
+
 
<html>
 
<html>
 +
<link rel="stylesheet" type="text/css" href="/Template:ETH_Zurich/team_css?action=raw&amp;ctype=text/css">
 +
</html>
 +
{{ETH_Zurich/Head_N_Suffix}}
 +
{{ETH_Zurich/Header_N}}
 +
<html>
 +
<main role="main">
 +
<h1 class="headline">Team Members</h1>
 +
<!--
 +
Round pictures with text below would look more modern I'd say.
 +
Yes, they do. But don't crop everything, use CSS!
 +
-->
 +
<section>
 +
    <h1>Team</h1>
  
−
<head>
+
<figure class="non-float" style="width:600px">
−
<style>
+
  <img src="https://static.igem.org/mediawiki/2017/d/d1/T--ETH_Zurich--teampic.jpg">
−
body {
+
</figure>
−
  background: #333;
+
</section>
−
  padding: 70px 0;
+
−
  font: 15px/20px Arial, sans-serif;
+
−
}
+
−
 
+
−
.container {
+
−
  margin: 0 auto;
+
−
  width: 250px;
+
−
  height: 200px;
+
−
  position: relative;
+
−
  perspective: 1000px;
+
−
}
+
−
 
+
−
.carousel {
+
−
  height: 100%;
+
−
  width: 100%;
+
−
  position: absolute;
+
−
  transform-style: preserve-3d;
+
−
  transition: transform 1s;
+
−
}
+
  
−
.item {
+
<section>
−
  display: block;
+
    <h1>Students</h1>
−
  position: absolute;
+
    <ul class="rooster">
−
  background: #000;
+
        <li>
−
  width: 150px;
+
        <figure class="fig-generic">
−
  height: 200px;
+
            <img alt="Anubhav Jain"
−
  line-height: 200px;
+
            src="https://static.igem.org/mediawiki/2017/c/c7/T--ETH_Zurich--Anu1.jpg"/>
−
  font-size: 2em;
+
            <figcaption>Anubhav Jain<br/><span class="role"><small>Electrical Engineering</span></small></figcaption>
−
  text-align: center;
+
        </figure>
−
  color: #FFF;
+
        </li>
−
  opacity: 0.95;
+
−
  border-radius: 10px;
+
−
}
+
  
−
.a {
+
        <li>
−
  transform: rotateY(0deg) translateZ(200px);
+
        <figure class="fig-generic">
−
  background: url("https://2017.igem.org/wiki/images/1/1c/T--ETH_Zurich--Anubhav_Jain.jpeg");
+
            <img alt="David Schweingruber"
−
  background-size: cover;
+
            src="https://static.igem.org/mediawiki/2017/7/7e/T--ETH_Zurich--David.jpg"/>
−
  background-repeat: no-repeat;
+
            <figcaption>David Schweingruber<br/><span class="role"><small>Biotechnology</small></span></figcaption>
−
  background-position: center;
+
        </figure>
−
}
+
        </li>
−
.b {
+
−
  transform: rotateY(45deg) translateZ(200px);
+
−
  background: url("https://2017.igem.org/wiki/images/8/81/T--ETH_Zurich--Lida_Vadakumchery.jpeg");
+
−
  background-size: cover;
+
−
  background-repeat: no-repeat;
+
−
  background-position: center;
+
−
}
+
−
.c {
+
−
  transform: rotateY(90deg) translateZ(200px);
+
−
  background: url(https://2017.igem.org/wiki/images/4/4a/T--ETH_Zurich--Nico_Huber.jpeg);
+
−
  background-size: cover;
+
−
  background-repeat: no-repeat;
+
−
  background-position: center;
+
−
}
+
−
.d {
+
−
  transform: rotateY(135deg) translateZ(200px);
+
−
  background: url(https://2017.igem.org/wiki/images/1/1f/T--ETH_Zurich--David_Schweingruber.jpeg);
+
−
  background-size: cover;
+
−
  background-repeat: no-repeat;
+
−
  background-position: center;
+
−
}
+
−
.e {
+
−
  transform: rotateY(180deg) translateZ(200px);
+
−
  background: url(https://static.igem.org/mediawiki/2017/5/52/T--ETH_Zurich--Vasileios_Cheras.jpeg);
+
−
  background-size: cover;
+
−
  background-repeat: no-repeat;
+
−
  background-position: center;
+
−
}
+
−
.f {
+
−
  transform: rotateY(225deg) translateZ(200px);
+
−
  background: url(https://2017.igem.org/wiki/images/8/87/T--ETH_Zurich--Nikolas_Korasidis.jpeg);;
+
−
  background-size: cover;
+
−
  background-repeat: no-repeat;
+
−
  background-position: center;
+
−
}
+
−
.g {
+
−
  transform: rotateY(270deg) translateZ(200px);
+
−
  background: url(https://static.igem.org/mediawiki/2017/8/83/T--ETH_Zurich--Irma_Telarovic.jpeg);;
+
−
  background-size: cover;
+
−
  background-repeat: no-repeat;
+
−
  background-position: center;
+
−
}
+
−
.h {
+
−
  transform: rotateY(315deg) translateZ(200px);
+
−
  background: url(https://static.igem.org/mediawiki/2017/e/e6/T--ETH_Zurich--Valentin_Senlis.jpeg);;
+
−
  background-size: cover;
+
−
  background-repeat: no-repeat;
+
−
  background-position: center;
+
−
}
+
  
−
.next, .prev {
+
        <li>
−
  color: #444;
+
        <figure class="fig-generic">
−
  position: absolute;
+
            <img alt="Irma Telarovic"
−
  top: 100px;
+
            src="https://static.igem.org/mediawiki/2017/c/c2/T--ETH_Zurich--irma2.jpg"/>
−
  padding: 1em 2em;
+
            <figcaption>Irma Telarovic</br><span class="role="><small>Medicine/Biomedical Engineering</small></span></figcaption>
−
  cursor: pointer;
+
        </figure>
−
  background: #CCC;
+
        </li>
−
  border-radius: 5px;
+
−
  border-top: 1px solid #FFF;
+
−
  box-shadow: 0 5px 0 #999;
+
−
  transition: box-shadow 0.1s, top 0.1s;
+
−
}
+
−
.next:hover, .prev:hover { color: #000; }
+
−
.next:active, .prev:active {
+
−
  top: 104px;
+
−
  box-shadow: 0 1px 0 #999;
+
−
}
+
−
.next { right: 5em; }
+
−
.prev { left: 5em; }
+
−
</style>
+
−
</head>
+
  
−
<body>
+
        <li>
−
<div class="container">
+
        <figure class="fig-generic">
−
  <div class="carousel">
+
            <img alt="Lida Vadakumchery"
−
    <div class="item a">Anu</div>
+
            src="https://static.igem.org/mediawiki/2017/7/70/T--ETH_Zurich--Lida.jpg"/>
−
    <div class="item b">Lida</div>
+
            <figcaption>Lida Vadakumchery<br/><span class="role"><small>Biochemistry</small></span></figcaption>
−
    <div class="item c">Nico</div>
+
        </figure>
−
    <div class="item d">David</div>
+
        </li>
−
    <div class="item e">Vasili</div>
+
−
    <div class="item f">Nikos</div>
+
−
    <div class="item g">Irma</div>
+
−
    <div class="item h">Valentin</div>
+
−
  </div>
+
−
</div>
+
−
<div class="next">Next</div>
+
−
<div class="prev">Prev</div>
+
  
−
<script>
+
        <li>
−
var carousel = $(".carousel"),
+
        <figure class="fig-generic">
−
    currdeg  = 0;
+
            <img alt="Nicolas Huber"
 +
            src="https://static.igem.org/mediawiki/2017/3/36/T--ETH_Zurich--Nico1.jpg"/>
 +
            <figcaption>Nicolas Huber<br/><span class="role"><small>Biotechnology</small></span></figcaption>
 +
        </figure>
 +
        </li>
  
−
$(".next").on("click", { d: "n" }, rotate);
+
        <li>
−
$(".prev").on("click", { d: "p" }, rotate);
+
        <figure class="fig-generic">
 +
            <img alt="Nikolaos Korasidis"
 +
            src="https://static.igem.org/mediawiki/2017/1/18/T--ETH_Zurich--Nikos.jpg"/>
 +
            <figcaption>Nikolas Korasidis<br/><span class="role"><small>Electrical Engineering/Bioinformatics</small></span></figcaption>
 +
        </figure>
 +
        </li>
  
−
function rotate(e){
+
        <li>
−
  if(e.data.d=="n"){
+
        <figure class="fig-generic">
−
    currdeg = currdeg - 45;
+
            <img alt="Valentin Senlis"
−
  }
+
            src="https://static.igem.org/mediawiki/2017/b/b3/T--ETH_Zurich--Valentin1.jpg"/>
−
  if(e.data.d=="p"){
+
            <figcaption>Valentin Senlis<br/><span class="role"><small>Engineering/Biotechnology</small></span></figcaption>
−
    currdeg = currdeg + 45;
+
        </figure>
−
  }
+
        </li>
−
  carousel.css({
+
−
    "-webkit-transform": "rotateY("+currdeg+"deg)",
+
−
    "-moz-transform": "rotateY("+currdeg+"deg)",
+
−
    "-o-transform": "rotateY("+currdeg+"deg)",
+
−
    "transform": "rotateY("+currdeg+"deg)"
+
−
  });
+
−
}
+
−
</script>
+
−
</body>
+
  
 +
        <li>
 +
        <figure class="fig-generic">
 +
            <img alt="Vasileios Cheras"
 +
            src="https://static.igem.org/mediawiki/2017/5/50/T--ETH_Zurich--Vasilis.jpg"/>
 +
            <figcaption>Vasilis Cheras<br/><span class="role"><small>Chemical Engineering/Biotechnology</small></span></figcaption>
 +
        </figure>
 +
        </li>
 +
    </ul>
 +
</section>
 +
<section><p>Credits to Daniel Gerngross for the awesome portraits.</p>
 +
</section>
 +
<section>
 +
    <h1>Contact</h1>
 +
    <address>
 +
        iGEM Team (Lab 2.28)<br/>
 +
        Department of Biosystems Science and Engineering<br/>
 +
        Mattenstrasse 26<br/>
 +
        4058 Basel<br/>
 +
        Switzerland
 +
    </address>
 +
</section>
 +
</main>
 
</html>
 
</html>
 +
{{ETH_Zurich/Footer_N}}

Latest revision as of 01:24, 2 November 2017

Team Members

Team

Students

  • Anubhav Jain
    Anubhav Jain
    Electrical Engineering
  • David Schweingruber
    David Schweingruber
    Biotechnology
  • Irma Telarovic
    Irma Telarovic
    Medicine/Biomedical Engineering
  • Lida Vadakumchery
    Lida Vadakumchery
    Biochemistry
  • Nicolas Huber
    Nicolas Huber
    Biotechnology
  • Nikolaos Korasidis
    Nikolas Korasidis
    Electrical Engineering/Bioinformatics
  • Valentin Senlis
    Valentin Senlis
    Engineering/Biotechnology
  • Vasileios Cheras
    Vasilis Cheras
    Chemical Engineering/Biotechnology

Credits to Daniel Gerngross for the awesome portraits.

Contact

iGEM Team (Lab 2.28)
Department of Biosystems Science and Engineering
Mattenstrasse 26
4058 Basel
Switzerland