Difference between revisions of "Team:Duesseldorf/Test3"

Line 5: Line 5:
 
       <title>Home</title>
 
       <title>Home</title>
 
       <style>
 
       <style>
−
        @media only screen and (max-width: 1024px) {
+
:focus{
−
        video {display:none;}
+
outline:none;
−
        }
+
}
 +
.gallery{
 +
margin:20px auto;
 +
width:900px;
 +
height:640px;
 +
position:relative;
 +
}
 +
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;
 +
}
 +
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;
 +
}
 +
a:focus~.closed, a:focus~.closed-layer{
 +
display:block;
 +
}
 +
a:focus{
 +
border:none;
 +
overflow: visible;
 +
}
 +
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;
 +
}
 +
a:focus:nth-child(4n+1) img{
 +
left:150px;
 +
}
 +
a:focus:nth-child(4n+2) img{
 +
left:-50px;
 +
}
 +
a:focus:nth-child(4n+3) img{
 +
left:-250px;
 +
}
 +
a:focus:nth-child(4n+4) img{
 +
left:-460px;
 +
}
 +
a:focus:nth-child(-n+4) img{
 +
top:140px;
 +
}
 +
a:focus:nth-child(n+9) img{
 +
top:-150px;
 +
}
 +
a:focus:nth-child(n+13) img{
 +
top:-295px;
 +
}
 
       </style>
 
       </style>
 
   </head>
 
   </head>
Line 151: Line 266:
  
 
<!-------------------------- ARTICLE ---------------------------->
 
<!-------------------------- ARTICLE ---------------------------->
−
      <div class="article">
+
<div class="article">
  
−
<video id="Logo" src="https://static.igem.org/mediawiki/2016/b/b7/T--Duesseldorf--Logo-Animation.mov" autoplay="autoplay" width="100%;" height="auto;"></video>
 
−
  <h2>Imagine you turn the switch and the cancer is gone…</h2>
 
−
<p>
 
−
Cancer is the second most common cause of death killing about 8.2 million people annually, which equals the total population of New York City.
 
−
The global increase of cancer cases and the lack of highly specific therapies for various types of cancer states a clear message:<br>
 
−
New approaches have to be found, which allow a level of precision in cancer treatment that has been long-awaited.
 
−
<p>
 
−
Our approach aims at achieving high spatiotemporal control of apoptosis in tumor cells by applying an optogenetic double-killswitch. This system combines clean removal of cancer cells through apoptosis with the accuracy of light-controlled optogenetics. We utilize two optogenetic proteins, to create the desperately needed holy grail of cancer therapy.<br>
 
−
This is the goal of OPTOPTOSIS.
 
−
  </p>
 
−
<h2 id="Medal_Criteria">Our Achievements</h2>
 
−
<div class="w3-container" style="margin-bottom:50px;margin-top: 20px;">
 
−
  <div class="w3-row">
 
−
    <a href="javascript:void(0)" onclick="openrequirement(event, 'Bronze');">
 
−
      <span class="w3-quarter tablink w3-bottombar w3-hover-light-grey w3-padding" style="text-align:center;"><img src="https://static.igem.org/mediawiki/2016/thumb/b/b5/T--duesseldorf--medal-bronze1.png/210px-T--duesseldorf--medal-bronze1.png" style="width: 40%; margin:auto;"></span>
 
−
    </a>
 
−
    <a href="javascript:void(0)" onclick="openrequirement(event, 'Silver');">
 
−
      <span class="w3-quarter tablink w3-bottombar w3-hover-light-grey w3-padding" style="text-align:center;"><img src="https://static.igem.org/mediawiki/2016/thumb/a/ac/T--duesseldorf--medal-silber1.png/210px-T--duesseldorf--medal-silber1.png" style="width: 40%; margin:auto;"></span>
 
−
    </a>
 
−
    <a href="javascript:void(0)" onclick="openrequirement(event, 'Gold');">
 
−
      <span class="w3-quarter tablink w3-bottombar w3-hover-light-grey w3-padding" style="text-align:center;"><img src="https://static.igem.org/mediawiki/2016/thumb/8/8a/T--duesseldorf--medal-gold1.png/210px-T--duesseldorf--medal-gold1.png" style="width: 40%; margin:auto;"></span>
 
−
    </a>
 
−
    <a href="javascript:void(0)" onclick="openrequirement(event, 'Special');">
 
−
      <span class="w3-quarter tablink w3-bottombar w3-hover-light-grey w3-padding" style="text-align:center;"><img src="https://static.igem.org/mediawiki/2016/thumb/1/18/T--duesseldorf--medal-special1.png/210px-T--duesseldorf--medal-special1.png" style="width: 40%; margin:auto;"></span>
 
−
    </a>
 
−
  </div>
 
  
 +
<div class="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="Bronze" class="w3-container requirement" style="padding-top: 10px;">
 
−
    <h2>Bronze</h2>
 
−
  <h4>Register And Attend</h4>
 
−
<ul>
 
−
<li>Our team was successfully registered and had the greatest summer ever</li>
 
−
</ul>
 
−
<h4><a href="https://2016.igem.org/Team:Duesseldorf/Attributions">Attribution</a></h4>
 
−
<ul>
 
−
<li>We created our own Wiki with clear <a href="https://2016.igem.org/Team:Duesseldorf/Attributions">attribution</a> of each aspect of our project</li>
 
−
</ul>
 
  
−
<h4>Deliverables </h4>
 
−
 
−
<ul>
 
−
<li>The judging form and <a href="https://2016.igem.org/Team:Duesseldorf/Safety">safety form</a> was completed with great care</li>
 
−
<li>We are very excited to present our poster and project talk at the Giant Jamboree</li>
 
−
<li>We attributed and acknowledged all of the work done for our project on our Wiki page</li>
 
−
<li>We documented and created Part pages for our Parts and submitted the DNA samples of our new Parts to the Registry</li>
 
−
</ul>
 
−
<h4><a href="https://2016.igem.org/Team:Duesseldorf/Parts">Part/Contribution</a></h4>
 
−
We are proud of our new standard Biobrick Part and submitted <a href="https://2016.igem.org/Team:Duesseldorf/Parts">BBa_K1936000</a> to the iGEM Registry
 
−
 
−
  </div>
 
−
 
−
  <div id="Silver" class="w3-container requirement" style="padding-top: 10px;">
 
−
<h2>Silver</h2>   
 
−
<h4><a href="https://2016.igem.org/Team:Duesseldorf/Collaborations">Collaboration </a></h4>
 
−
<ul>
 
−
<li>We had great <a href="https://2016.igem.org/Team:Duesseldorf/Collaborations">collaborations</a> with other teams and are really happy about our common success  </li>
 
−
</ul>
 
−
 
−
<h4><a href="https://2016.igem.org/Team:Duesseldorf/Parts">Validated Part / Validated Contribution</a></h4>
 
−
<ul>
 
−
<li>We characterized <a href="https://2016.igem.org/Team:Duesseldorf/Parts">BBa_K1936001</a> </li>
 
−
<li>This part was submitted to the iGEM registry and is experimentally validated</li>
 
−
</ul>
 
−
 
−
<h4><a href="https://2016.igem.org/Team:Duesseldorf/Outreach#HP">Human Practices</a></h4>
 
−
<ul>
 
−
<li>Of course, we shared our project and knowledge with the public and talked about the <a href="https://2016.igem.org/Team:Duesseldorf/Ethik">ethical aspects</a>. We had a lot of fun at our different human practice activities.</li>
 
−
</ul>
 
−
 
−
  </div>
 
−
 
−
  <div id="Gold" class="w3-container requirement" style="padding-top: 10px;">
 
−
    <h2>Gold</h2>
 
−
 
−
<h4><a href="https://2016.igem.org/Team:Duesseldorf/Outreach#IHP">Integrated Human Practices</a></h4>
 
−
<ul>
 
−
<li>Additionally to our <a href="https://2016.igem.org/Team:Duesseldorf/Outreach#HP">Human Practice</a> work we visited the <a href="https://2016.igem.org/Team:Duesseldorf/Outreach#BfArM">BfArM (the german equivalent of the FDA) and telephoned with the Paul Ehrlich Institute</a>, which is responsible for admission of genetherapeutics, to consult professional critics concerning future applications of our project </li>
 
−
</ul>
 
−
 
−
<h4><a href="https://2016.igem.org/Team:Duesseldorf/Proof">Proof of concept</a></h4>
 
−
<ul>
 
−
<li>We are really happy that we are able to show a functional proof of concept of our project with one of our newly created BioBricks</li>
 
−
</ul>
 
−
 
−
<h4><a href="https://2016.igem.org/Team:Duesseldorf/Demonstrate">Demonstrate your work</a></h4>
 
−
<ul>
 
−
<li>We were able to show our functional proof of concept under real world conditions with experiments in human cancer cell culture </li>
 
−
</ul>
 
−
 
−
  </div>
 
−
    <div id="Special" class="w3-container requirement" style="padding-top: 10px;">
 
−
    <h2>Special</h2>
 
−
 
−
  </div>
 
−
 
 
−
 
 
−
 
 
−
 
 
−
 
 
 
</div>
 
</div>
  
−
 
−
 
−
 
−
<div class="sponsor" style="margin-top: 100px;">
 
−
 
−
</div>
 
−
</div>
 
  
 
</div>
 
</div>
−
    </div>
+
</div>
−
  </div>
+
</div>
−
 
+
−
<script>
+
−
function openrequirement(evt, requirementName) {
+
−
  var i, x, tablinks;
+
−
  x = document.getElementsByClassName("requirement");
+
−
  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(requirementName).style.display = "block";
+
−
  evt.currentTarget.firstElementChild.className += " w3-border-green";
+
−
}
+
−
</script>
+
 
</body>
 
</body>

Revision as of 12:54, 19 October 2016

Home


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