Difference between revisions of "Team:Duesseldorf/Test3"

Line 5: Line 5:
 
       <title>Home</title>
 
       <title>Home</title>
 
       <style>
 
       <style>
−
:focus{
+
        @media only screen and (max-width: 1024px) {
−
outline:none;
+
        video {display:none;}
−
}
+
        }
−
.impression-gallery{
+
−
margin:20px auto;
+
−
width:900px;
+
−
height:640px;
+
−
position:relative;
+
−
}
+
−
.impression-gallery a{
+
−
display:inline-block;
+
−
width:25%;
+
−
height:141px;
+
−
position:relative;
+
−
border:5px solid #fff;
+
−
-moz-box-sizing:border-box;
+
−
-webkit-box-sizing:border-box;
+
−
box-sizing:border-box;
+
−
overflow: hidden;
+
−
}
+
−
.impression-gallery a img{
+
−
display:block;
+
−
width:100%;
+
−
height:auto;
+
−
-webkit-transition-property:width, height, top, bottom, left, right, z-index;
+
−
-webkit-transition-duration:1s;
+
−
-moz-transition-property:width, height, top, bottom, left, right, z-index;
+
−
-moz-transition-duration:1s;
+
−
-o-transition-property:width, height, top, bottom, left, right, z-index;
+
−
-o-transition-duration:1s;
+
−
transition-property:width, height, top, bottom, left, right, z-index;
+
−
transition-duration:1s;
+
−
position:absolute;
+
−
z-index:1;
+
−
top:0px;
+
−
left:0px;
+
−
cursor:pointer;
+
−
-moz-user-select: none;
+
−
-khtml-user-select: none;
+
−
user-select: none;   
+
−
}
+
−
.closed{
+
−
position:absolute;
+
−
top:85px;
+
−
right:195px;
+
−
display:none;
+
−
text-align:center;
+
−
font-weight:bold;
+
−
font-size:70px;
+
−
color:#555;
+
−
width:20px;
+
−
height:20px;
+
−
-webkit-text-shadow:0px 0px 5px #fff;
+
−
-moz-text-shadow:0px 0px 5px #222;
+
−
text-shadow:0px 0px 5px #fff;
+
−
-moz-transform:rotate(45deg);
+
−
-o-transform:rotate(45deg);
+
−
-webkit-transform:rotate(45deg);
+
−
cursor:pointer;
+
−
z-index:30;
+
−
}
+
−
.closed-layer{
+
−
display:none;
+
−
position:absolute;
+
−
top:140px;
+
−
left:150px;
+
−
width:500px;
+
−
height:352px;
+
−
background:transparent;
+
−
z-index:30;
+
−
cursor:pointer;
+
−
}
+
−
.impression-gallery a:focus~.closed, a:focus~.closed-layer{
+
−
display:block;
+
−
}
+
−
.impression-gallery a:focus{
+
−
border:none;
+
−
overflow: visible;
+
−
}
+
−
.impression-gallery a:focus img{
+
−
width:250%;
+
−
height:auto;
+
−
position:absolute;
+
−
box-shadow:0 0 15px 2px #000;
+
−
-moz-box-shadow:0 0 15px 2px #000;
+
−
-webkit-box-shadow:0 0 15px 2px #000;
+
−
-webkit-transition-property:width, height, top, bottom, left, right, z-index;
+
−
-webkit-transition-duration:1s;
+
−
-moz-transition-property:width, height, top, bottom, left, right, z-index;
+
−
-moz-transition-duration:1s;
+
−
-o-transition-property:width, height, top, bottom, left, right, z-index;
+
−
-o-transition-duration:1s;
+
−
transition-property:width, height, top, bottom, left, right, z-index;
+
−
transition-duration:1s;
+
−
cursor:default;
+
−
z-index:25;
+
−
}
+
−
.impression-gallery a:focus:nth-child(4n+1) img{
+
−
left:150px;
+
−
}
+
−
.impression-gallery a:focus:nth-child(4n+2) img{
+
−
left:-50px;
+
−
}
+
−
.impression-gallery a:focus:nth-child(4n+3) img{
+
−
left:-250px;
+
−
}
+
−
.impression-gallery a:focus:nth-child(4n+4) img{
+
−
left:-460px;
+
−
}
+
−
.impression-gallery a:focus:nth-child(-n+4) img{
+
−
top:140px;
+
−
}
+
−
.impression-gallery a:focus:nth-child(n+9) img{
+
−
top:-150px;
+
−
}
+
−
.impression-gallery a:focus:nth-child(n+13) img{
+
−
top:-295px;
+
−
}
+
 
       </style>
 
       </style>
 
   </head>
 
   </head>
Line 266: Line 151:
  
 
<!-------------------------- ARTICLE ---------------------------->
 
<!-------------------------- ARTICLE ---------------------------->
−
<div class="article">
+
      <div class="article">
  
 +
 
 +
 
 +
 
 +
<div class="w3-container" style="margin-bottom:50px;margin-top: 20px;">
 +
  <div class="w3-row">
 +
    <a href="javascript:void(0)" onclick="openlightswitch(event, 'RED');">
 +
      <span class="w3-quarter tablink w3-bottombar w3-hover-light-grey w3-padding" style="text-align:center;"><h2>Red</h2></span>
 +
 
 +
    </a>
 +
    <a href="javascript:void(0)" onclick="openlightswitch(event, 'FAR_RED');">
 +
      <span class="w3-quarter tablink w3-bottombar w3-hover-light-grey w3-padding" style="text-align:center;"><h2>Far-Red</h2></span>
 +
    </a>
 +
    <a href="javascript:void(0)" onclick="openlightswitch(event, 'BLUE');">
 +
      <span class="w3-quarter tablink w3-bottombar w3-hover-light-grey w3-padding" style="text-align:center;"><h2>Blue</h2></span>
 +
    </a>
 +
    <a href="javascript:void(0)" onclick="openlightswitch(event, 'RED_BLUE');">
 +
      <span class="w3-quarter tablink w3-bottombar w3-hover-light-grey w3-padding" style="text-align:center;"><h2>Red+Blue</h2></span>
 +
    </a>
 +
  </div>
  
−
<div class="impression-gallery">
 
−
<a tabindex="1"><img src="http://placekitten.com/600/600"></a>
 
−
<a tabindex="1"><img src="http://placekitten.com/600/600"></a>
 
−
<a tabindex="1"><img src="http://placekitten.com/600/600"></a>
 
−
<a tabindex="1"><img src="http://placekitten.com/600/600"></a>
 
−
<a tabindex="1"><img src="http://placekitten.com/600/600"></a>
 
−
<a tabindex="1"><img src="http://placekitten.com/600/600"></a>
 
−
<a tabindex="1"><img src="http://placekitten.com/600/600"></a>
 
−
<a tabindex="1"><img src="http://placekitten.com/600/600"></a>
 
−
<a tabindex="1"><img src="http://placekitten.com/600/600"></a>
 
−
<a tabindex="1"><img src="http://placekitten.com/600/600"></a>
 
−
<a tabindex="1"><img src="http://placekitten.com/600/600"></a>
 
−
<a tabindex="1"><img src="http://placekitten.com/600/600"></a>
 
−
<a tabindex="1"><img src="http://placekitten.com/600/600"></a>
 
−
<a tabindex="1"><img src="http://placekitten.com/600/600"></a>
 
−
<a tabindex="1"><img src="http://placekitten.com/600/600"></a>
 
−
<a tabindex="1"><img src="http://placekitten.com/600/600"></a>
 
−
<span class="closed">+</span>
 
−
<span class="closed-layer"></span>
 
−
</div>
 
  
  
 +
  <div id="RED" class="w3-container lightswitch" style="padding-top: 10px;"><img src="https://static.igem.org/mediawiki/2016/1/19/T--duesseldorf--1switchred.png">
  
 +
  </div>
 +
 +
  <div id="FAR_RED" class="w3-container lightswitch" style="padding-top: 10px;"><img src="https://static.igem.org/mediawiki/2016/0/0b/T--duesseldorf--2switchfarred.png">
 +
 +
  </div>
 +
 +
  <div id="BLUE" class="w3-container lightswitch" style="padding-top: 10px;"><img src="https://static.igem.org/mediawiki/2016/6/69/T--duesseldorf--3blue.png">
 +
 +
  </div>
 +
    <div id="RED_BLUE" class="w3-container lightswitch" style="padding-top: 10px;"><img src="https://static.igem.org/mediawiki/2016/a/a2/T--duesseldorf--5redblue.png">
 +
    <h2>RED_BLUE</h2>
 +
  </div>
 +
 
 +
 
 
</div>
 
</div>
  
 +
<div style="border:5px solid #0C9476;border-radius:25px;padding:10px;">
  
 +
<h2>Results and engineered constructs of OPTOPTOSIS</h2>
 +
<p>
 +
<img src="https://static.igem.org/mediawiki/2016/2/21/T--duesseldorf--check3.png" width="30px">Our <a href="https://2016.igem.org/Team:Duesseldorf/Proof#">red switch</a> operates how it was desired
 +
</p>
 +
<ul>
 +
<li>we could show that our apoptosis protein is expressed</li>
 +
<li>our testing cells are still alive</li>
 +
</ul>
 +
<p>
 +
<img src="https://static.igem.org/mediawiki/2016/2/21/T--duesseldorf--check3.png" width="30px">Our <a href="https://2016.igem.org/Team:Duesseldorf/Proof#">blue switch</a> operates how it was desired
 +
</p>
 +
<ul>
 +
<li>we could show that our construct is expressed</li>
 +
<li>our construct binds to the outer mitochondrial membrane</li>
 +
</ul>
 +
<p>
 +
<img src="https://static.igem.org/mediawiki/2016/2/21/T--duesseldorf--check3.png" width="30px">The combination of our <a href="https://2016.igem.org/Team:Duesseldorf/Proof#">two constructs</a> operates how it was desired.
 +
</p>
 +
<ul>
 +
<li>Only when we irradiate our cells with red and blue light the cells commit apoptosis</li>
 +
</ul>
 
</div>
 
</div>
 +
 +
 +
 +
</div>
 +
 
</div>
 
</div>
−
</div>
+
    </div>
 +
  </div>
 +
 
 +
<script>
 +
function openlightswitch(evt, lightswitchName) {
 +
  var i, x, tablinks;
 +
  x = document.getElementsByClassName("lightswitch");
 +
  for (i = 0; i < x.length; i++) {
 +
    x[i].style.display = "none";
 +
  }
 +
  tablinks = document.getElementsByClassName("tablink");
 +
  for (i = 0; i < x.length; i++) {
 +
    tablinks[i].className = tablinks[i].className.replace(" w3-border-green", "");
 +
  }
 +
  document.getElementById(lightswitchName).style.display = "block";
 +
  evt.currentTarget.firstElementChild.className += " w3-border-green";
 +
}
 +
var mybtn = document.getElementsByClassName("tablink")[0];
 +
mybtn.click();
 +
</script>
 
</body>
 
</body>

Revision as of 21:05, 19 October 2016

Home


Heinrich-Heine University
Universitätsstraße 1
40225 Düsseldorf
Design by Marvin van Aalst

Red

Far-Red

Blue

Red+Blue

RED_BLUE

Results and engineered constructs of OPTOPTOSIS

Our red switch operates how it was desired

  • we could show that our apoptosis protein is expressed
  • our testing cells are still alive

Our blue switch operates how it was desired

  • we could show that our construct is expressed
  • our construct binds to the outer mitochondrial membrane

The combination of our two constructs operates how it was desired.

  • Only when we irradiate our cells with red and blue light the cells commit apoptosis