Difference between revisions of "Team:Bielefeld-CeBiTec/Team"

Line 50: Line 50:
 
}
 
}
  
−
.column_image {
 
−
    float: left;
 
−
    padding: 10px;
 
−
    text-align:center;
 
−
    margin-bottom:50px;
 
−
    width:33%;
 
−
}
 
−
 
−
 
−
.row:after {
 
−
    content: "";
 
−
    display: table;
 
−
    clear: both;
 
−
    margin-bottom: 50px;
 
  
 +
.container {
 +
  position: relative;
 +
  width: 30%;
 +
  float:left;
 +
  margin: 10px;
 +
 
 
}
 
}
  
−
 
+
.image {
−
#image {
+
 
   display: block;
 
   display: block;
 +
  width: 100%;
 
   height: auto;
 
   height: auto;
−
 
 
 
}
 
}
  
−
.dropi {
+
.overlay {
 
   position: absolute;
 
   position: absolute;
 
   top: 0;
 
   top: 0;
Line 80: Line 71:
 
   left: 0;
 
   left: 0;
 
   right: 0;
 
   right: 0;
−
   height: auto;
+
   height: 100%;
−
   width: auto;
+
   width: 100%;
−
   display:none
+
   display: none;
 
   transition: .5s ease;
 
   transition: .5s ease;
−
   background-color: rgba(0,0,0,.5);
+
   background-color: #008CBA;
−
  cursor: pointer;
+
 
}
 
}
  
  
−
 
+
.text {
−
#text {
+
 
   color: white;
 
   color: white;
 
   font-size: 20px;
 
   font-size: 20px;
Line 101: Line 90:
 
   text-align: center;
 
   text-align: center;
 
}
 
}
−
 
  
 
</style>
 
</style>
 
 
 +
<script>
 +
 +
function matthias() {
 +
    var x = document.getElementById("mo");
 +
    if (x.style.display === "none") {
 +
        x.style.display= "block";
 +
    } else {
 +
        x.style.display = "none";
 +
    }
 +
};
 +
 +
function levin() {
 +
    var x = document.getElementById("lk");
 +
    if (x.style.display === "none") {
 +
        x.style.display= "block";
 +
    } else {
 +
        x.style.display = "none";
 +
    }
 +
};
 +
 +
function irina() {
 +
    var x = document.getElementById("ir");
 +
    if (x.style.display === "none") {
 +
        x.style.display= "block";
 +
    } else {
 +
        x.style.display = "none";
 +
    }
 +
};
 +
 +
function erika() {
 +
    var x = document.getElementById("es");
 +
    if (x.style.display === "none") {
 +
        x.style.display= "block";
 +
    } else {
 +
        x.style.display = "none";
 +
    }
 +
};
 +
 +
function antonin() {
 +
    var x = document.getElementById("ale");
 +
    if (x.style.display === "none") {
 +
        x.style.display= "block";
 +
    } else {
 +
        x.style.display = "none";
 +
    }
 +
};
 +
 +
function jakob() {
 +
    var x = document.getElementById("jz");
 +
    if (x.style.display === "none") {
 +
        x.style.display= "block";
 +
    } else {
 +
        x.style.display = "none";
 +
    }
 +
};
 +
 +
function johannes() {
 +
    var x = document.getElementById("jr");
 +
    if (x.style.display === "none") {
 +
        x.style.display= "block";
 +
    } else {
 +
        x.style.display = "none";
 +
    }
 +
};
 +
 +
function Christoph() {
 +
    var x = document.getElementById("cg");
 +
    if (x.style.display === "none") {
 +
        x.style.display= "block";
 +
    } else {
 +
        x.style.display = "none";
 +
    }
 +
};
 +
 +
function Vanessa() {
 +
    var x = document.getElementById("vk");
 +
    if (x.style.display === "none") {
 +
        x.style.display= "block";
 +
    } else {
 +
        x.style.display = "none";
 +
    }
 +
};
 +
 +
 +
</script>
 +
 +
 
</head>
 
</head>
 
 
Line 120: Line 195:
 
                 <div class="title">Meet the Team</div>
 
                 <div class="title">Meet the Team</div>
  
−
<div class="row" >
+
<div class="container">
−
   <div id="column_drei" class="column_image" style="text-align:center; margin-bottom:30px;">
+
   <img src="https://static.igem.org/mediawiki/2018/3/3e/T--Bielefeld-CeBiTec--Matthias_vk.jpg" onclick=matthias() class="image">
−
      <div class="img_third">
+
   <div class="overlay" id="mo" onclick=matthias() style="display:none;">
−
                      <img class="figure thirty" src="https://static.igem.org/mediawiki/2018/3/3e/T--Bielefeld-CeBiTec--Matthias_vk.jpg" onclick=visible() id="image">
+
     <div class="text">Hello World</div>
−
   <div class="dropi" onclick=visible() style="display:none;">
+
−
     <div id="text">Hello World</div>
+
 
   </div>
 
   </div>
 
</div>
 
</div>
  
−
<div class="img_third">
+
 
−
                      <img class="figure thirty" style="margin-right:30px; margin-left:30px;" src="https://static.igem.org/mediawiki/2018/d/d3/T--Bielefeld-CeBiTec--Levin_vk.jpg">
+
<div class="container">
 +
  <img src="https://static.igem.org/mediawiki/2018/d/d3/T--Bielefeld-CeBiTec--Levin_vk.jpg" onclick=levin() class="image">
 +
  <div class="overlay" id="lk" onclick=levin() style="display:none;">
 +
    <div class="text">Hello World</div>
 +
  </div>
 
</div>
 
</div>
  
−
<div class="img_third">
 
−
                      <img class="figure thirty" src="https://static.igem.org/mediawiki/2018/a/a3/T--Bielefeld-CeBiTec--Vanessa_vk.jpg">
 
  
 +
<div class="container">
 +
  <img src="https://static.igem.org/mediawiki/2018/d/d3/T--Bielefeld-CeBiTec--Levin_vk.jpg" onclick=levin() class="image">
 +
  <div class="overlay" id="lk" onclick=levin() style="display:none;">
 +
    <div class="text">Hello World</div>
 
   </div>
 
   </div>
−
  <div class="column_image" style="text-align:center; margin-bottom:30px;">
+
</div>
  
−
                      <img class="figure thirty" src="https://static.igem.org/mediawiki/2018/7/7e/T--Bielefeld-CeBiTec--Johannes_vk.jpg">
+
<div class="container">
 +
  <img src="https://static.igem.org/mediawiki/2018/a/a3/T--Bielefeld-CeBiTec--Vanessa_vk.jpg" onclick=vanessa() class="image">
 +
  <div class="overlay" id="vk" onclick=vanessa() style="display:none;">
 +
    <div class="text">Hello World</div>
 +
  </div>
 +
</div>
  
  
−
   
+
<div class="container">
−
                      <img class="figure thirty" style="margin-right:30px; margin-left:30px;" src="https://static.igem.org/mediawiki/2018/7/7f/T--Bielefeld-CeBiTec--Jakob_vk.jpg">
+
  <img src="https://static.igem.org/mediawiki/2018/7/7e/T--Bielefeld-CeBiTec--Johannes_vk.jpg" onclick=johannes() class="image">
−
 
+
  <div class="overlay" id="jr" onclick=johannes() style="display:none;">
−
                      <img class="figure thirty" src="https://static.igem.org/mediawiki/2018/a/a4/T--Bielefeld-CeBiTec--Irina_vk.jpg">
+
    <div class="text">Hello World</div>
−
 
+
  </div>
 +
</div>
  
  
 +
<div class="container">
 +
  <img src="https://static.igem.org/mediawiki/2018/7/7f/T--Bielefeld-CeBiTec--Jakob_vk.jpg" onclick=jakob() class="image">
 +
  <div class="overlay" id="jz" onclick=jakob() style="display:none;">
 +
    <div class="text">Hello World</div>
 
   </div>
 
   </div>
 +
</div>
  
−
<div class="column_image" style="text-align:center; margin-bottom:30px;">
 
  
−
 
−
                      <img class="figure thirty" src="https://static.igem.org/mediawiki/2018/0/08/T--Bielefeld-CeBiTec--antonin_vk.jpeg">
 
−
 
 
  
−
                      <img class="figure thirty" style="margin-right:30px; margin-left:30px;" src="https://static.igem.org/mediawiki/2018/3/38/T--Bielefeld-CeBiTec--Erika_vk.jpeg">
+
<div class="container">
 +
  <img src="https://static.igem.org/mediawiki/2018/a/a4/T--Bielefeld-CeBiTec--Irina_vk.jpg" onclick=irina() class="image">
 +
  <div class="overlay" id="ir" onclick=irina() style="display:none;">
 +
    <div class="text">Hello World</div>
 +
  </div>
 +
</div>
  
  
 +
<div class="container">
 +
  <img src="https://static.igem.org/mediawiki/2018/0/08/T--Bielefeld-CeBiTec--antonin_vk.jpeg" onclick=antonin() class="image">
 +
  <div class="overlay" id="ale" onclick=antonin() style="display:none;">
 +
    <div class="text">Hello World</div>
 +
  </div>
 +
</div>
  
−
                      <img class="figure thirty" src="https://static.igem.org/mediawiki/2018/d/dc/T--Bielefeld-CeBiTec--Christoph_vk.jpeg">
+
−
 
+
<div class="container">
 +
  <img src="https://static.igem.org/mediawiki/2018/3/38/T--Bielefeld-CeBiTec--Erika_vk.jpeg"" onclick=erika() class="image">
 +
  <div class="overlay" id="es" onclick=erika() style="display:none;">
 +
    <div class="text">Hello World</div>
 +
  </div>
 +
</div>
  
  
 +
<div class="container">
 +
  <img src="https://static.igem.org/mediawiki/2018/d/dc/T--Bielefeld-CeBiTec--Christoph_vk.jpeg" onclick=christoph() class="image">
 +
  <div class="overlay" id="cg" onclick=christoph() style="display:none;">
 +
    <div class="text">Hello World</div>
 
   </div>
 
   </div>
 
</div>
 
</div>
  
  
−
 
−
 
 
    </div>
 
    </div>
  

Revision as of 10:00, 16 October 2018

Meet the Team