Difference between revisions of "Template:Technion HS Israel9"

 
(54 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<link href="//2015.igem.org/Template:Technion_HS_Israel4/Technion_HS_Israel_menu_style?action=raw&ctype=text/css" rel="stylesheet">
 
−
  <head>
 
 
      
 
      
 +
 +
  <head>
 +
    <link href="//2015.igem.org/Template:Technion_HS_Israel4/Technion_HS_Israel_menu_style?action=raw&ctype=text/css" rel="stylesheet">
 
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.9/jquery.fullPage.min.css">
 
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.9/jquery.fullPage.min.css">
 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.9/jquery.fullPage.min.js"></script>
 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.9/jquery.fullPage.min.js"></script>
 
      
 
      
−
<script type="text/javascript" src="https://2015.igem.org/Team:Technion_HS_Israel/js/Homepage.js?action=raw&ctype=text/javascript"></script>
+
<script type="text/javascript" src="https://2015.igem.org/Team:Technion_HS_Israel/js/Homepage?action=raw&ctype=text/javascript"></script>
 
     <link href="https://2015.igem.org/Team:Technion_HS_Israel/css/Homepage?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
 
     <link href="https://2015.igem.org/Team:Technion_HS_Israel/css/Homepage?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
 
     <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
 
     <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
 
     <title></title>
 
     <title></title>
 
   </head>
 
   </head>
−
  <body>
+
    <body>
−
    <div id="fullpage">
+
 
−
      <div class="section">
+
<div class="content" style="width:100%;top:-5px;padding:0;position:absolute;margin:0;">
−
         <div class="grayRect_test" style="background-color:#383838;">
+
<ul id="sdt_menu" class="sdt_menu" style="margin:0;">
 +
<li>
 +
<a href="https://2015.igem.org/Team:Technion_HS_Israel">
 +
<img src="https://static.igem.org/mediawiki/2015/3/3b/Technion_HS_Israel_Menu1.png" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Home</span>
 +
<span class="sdt_descr"></span>
 +
 
 +
</span>
 +
</a>
 +
<div class="sdt_box">
 +
<a href = "https://2015.igem.org/Team:Technion_HS_Israel/MedalFulfillment"> Medal Fulfillment</a>
 +
<a href = "https://2015.igem.org/Team:Technion_HS_Israel"> Home</a>
 +
</div>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:Technion_HS_Israel/Description">
 +
<img src="https://static.igem.org/mediawiki/2015/8/87/Technion_HS_Israel_Menu2.png" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Project</span>
 +
<span class="sdt_descr">More about our project</span>
 +
</span>
 +
</a>
 +
<div class="sdt_box">
 +
<a href = "https://2015.igem.org/Team:Technion_HS_Israel/Description">Description</a>
 +
 +
<a href= "https://2015.igem.org/Team:Technion_HS_Israel/Project/Results">Results</a>
 +
<a href= "#"></a>
 +
 +
<a href= "https://2015.igem.org/Team:Technion_HS_Israel/Project/Parts">Parts</a>
 +
 
 +
</div>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:Technion_HS_Israel/Experiments">
 +
<img src="https://static.igem.org/mediawiki/2015/c/cc/Technion_HS_Israel_Menu3.png" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Documents</span>
 +
<span class="sdt_descr"></span>
 +
</span>
 +
</a>
 +
<div class="sdt_box">
 +
 +
<a href= "https://2015.igem.org/Team:Technion_HS_Israel/Experiments">Experiments</a>
 +
<a href= "https://2015.igem.org/Team:Technion_HS_Israel/Notebook">Notebook</a>
 +
<a href= "https://2015.igem.org/Team:Technion_HS_Israel/safety">safety</a>
 +
 +
<a href= "https://2015.igem.org/Team:Technion_HS_Israel/Protocols">Protocols</a>
 +
 +
 
 +
</div>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:Technion_HS_Israel/Modelling">
 +
<!--https://2015.igem.org/Team:Technion_HS_Israel/Modelling/Software--!>
 +
<img src="https://static.igem.org/mediawiki/2015/6/6d/Technion_HS_Israel_Menu4.png" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Modelling</span>
 +
<span class="sdt_descr">We take our math seriously</span>
 +
</span>
 +
</a>
 +
<div class="sdt_box">
 +
<a href = "https://2015.igem.org/Team:Technion_HS_Israel/Modelling">Model Overview</a>
 +
<a href = "https://2015.igem.org/Team:Technion_HS_Israel/PlasmidLoss">Plasmid Loss</a>
 +
<a href = "https://2015.igem.org/Team:Technion_HS_Israel/Modelling/Equations">Equations</a>
 +
<a href = "https://2015.igem.org/Team:Technion_HS_Israel/Modelling/Parameters">Parameters</a>
 +
<a href = "https://2015.igem.org/Team:Technion_HS_Israel/Modelling/Results">Results</a>
 +
<a href = "https://2015.igem.org/Team:Technion_HS_Israel/Modelling/Documents">Documents</a>
 +
 
 +
 
 +
</div>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:Technion_HS_Israel/Software">
 +
<!--https://2015.igem.org/Team:Technion_HS_Israel/Modelling/Software--!>
 +
<img src="https://static.igem.org/mediawiki/2015/6/6d/Technion_HS_Israel_Menu4.png" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Software</span>
 +
<span class="sdt_descr"</span>
 +
</span>
 +
</a>
 +
<div class="sdt_box">
 +
<a href="https://2015.igem.org/Team:Technion_HS_Israel/Software">Software Overview</a>
 +
<a href="https://2015.igem.org/Team:Technion_HS_Israel/Practices/SearchEngine"> Search Engine</a>
 +
<a href = "https://2015.igem.org/Team:Technion_HS_Israel/Constants_Database">Constants Database</a>
 +
<a href = "https://2015.igem.org/Team:Technion_HS_Israel/Software/Simulation">Simulation </a>
 +
<a href="https://2015.igem.org/Team:Technion_HS_Israel/LINK_TO_EXPLANATION">About the Database </a>
 +
 +
 +
 
 +
 
 +
</div>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:Technion_HS_Israel/Team">
 +
<img src="https://static.igem.org/mediawiki/2015/2/2c/Technion_HS_Israel_Menu5.png" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Team</span>
 +
<span class="sdt_descr">We are a bunch of nerdy nerds</span>
 +
</span>
 +
</a>
 +
<div class="sdt_box">
 +
 +
<a href= "https://2015.igem.org/Team:Technion_HS_Israel/Team">Members</a>
 +
<a href= "https://2015.igem.org/Team:Technion_HS_Israel/Attributions">Attributions and contributions</a>
 +
<a href= "https://2015.igem.org/Team:Technion_HS_Israel/teamGallery">Gallery</a>
 +
 +
 
 +
</div>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:Technion_HS_Israel/Practices">
 +
<img src="Technion_HS_Israel_Menu6.jpg" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Practices</span>
 +
<span class="sdt_descr"></span>
 +
</span>
 +
</a>
 +
<div class="sdt_box">
 +
<a href="https://2015.igem.org/Team:Technion_HS_Israel/Practices/collaborations">Collaborations</a>
 +
<a href="https://2015.igem.org/Team:Technion_HS_Israel/Practices">Practices</a>
 +
<a href="https://2015.igem.org/Team:Technion_HS_Israel/Practices/SearchEngine">Search Engine</a>
 +
<a href="https://2015.igem.org/Team:Technion_HS_Israel/Practices/modelingTutorials ">Modeling Tutorials </a>
 +
 
 +
 +
</div>
 +
</li>
 +
</ul>
 +
 +
           
 +
 +
</div>
 +
         <div class="grayRect_test" style="background-color:#383838;top:85px;">
 
           <h1 style=
 
           <h1 style=
 
           "font-family: Varela Round,sans-serif; margin-left: 5%; padding: 3% 0%; width: 80%; color:white; font-size: 6.2vw; text-align: left; line-height: 1.3; letter-spacing: -0.05em;">
 
           "font-family: Varela Round,sans-serif; margin-left: 5%; padding: 3% 0%; width: 80%; color:white; font-size: 6.2vw; text-align: left; line-height: 1.3; letter-spacing: -0.05em;">
 
           Innovative Autonomous<br>
 
           Innovative Autonomous<br>
−
             <span>Kill Switch for Bacteria</span>
+
             <span>Bacteria Kill Switch</span>
 
           </h1>
 
           </h1>
 
           <h2 style=
 
           <h2 style=
Line 26: Line 166:
 
           "position:absolute;top:10vh;right:3vw;width:20vw">
 
           "position:absolute;top:10vh;right:3vw;width:20vw">
 
         </div>
 
         </div>
−
      </div>
+
 
−
      <div class="section">
+
 
−
         <div class="grayRect_test" style="background-color:white;">
+
 
−
<h1 style="font-family: 'Varela Round', sans-serif;padding-top:20px;text-align:left;margin-left:40px;margin-top: -10px;line-height:110%;font-size:5em">We Are The Technion HS 2015 iGEM Team</h1>
+
−
<h2 style="font-size:3em;margin-left:35vw; margin-top:7vw; text-align:left;bottom:30vh;">Welcome to our wiki.</h2>
+
         <!-- The JavaScript -->
−
<div id="scroll_to_questions">
+
       
−
      Scroll to see <span>What, Why, How</span> and <span>Who</span><br>
+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
−
  <hr style="margin-top: 10px; margin-bottom: 10px;" width="30%">
+
<script type="text/javascript" src="//2015.igem.org/Template:Technion_HS_Israel4/Technion_HS_Israel_jquery_scripts?
−
      <img src="https://static.igem.org/mediawiki/2015/3/32/Arr_in_circle.png" width="40px;">
+
action=raw&ctype=text/javascript"></script>
−
    </div>
+
−
</div>
+
−
      </div>
+
−
      <div class="section">
+
−
        <div class="header_test" style=
+
−
        "background-color:white; z-index:2; margin:0">
+
−
          <p>
+
−
            <span>What</span> we do
+
−
          </p>
+
−
        </div>
+
−
        <div class="grayRect_test" style=
+
−
        "background-color: hsla(0,0%,85%,0.91);">
+
−
<div class="cardbox">
+
−
<div class="slide" style="background-color:blue">
+
−
<span>We design</span>
+
−
<h2>a chain of reactions which ends with in a poison </h2>
+
−
</div>
+
−
<div class="slide" style="background-color:red">
+
−
<span>We implement </span>
+
−
<h2> it using genetic engineering on a plasmid </h2>
+
−
</div>
+
−
<div class="slide" style="background-color:blue">
+
−
<span>We introduce </span>
+
−
<h2>it into the bacteria in question </h2>
+
−
</div>
+
−
<div class="slide" style="background-color:red">
+
−
<span>We control</span>
+
−
<h2>the bacteria's lifespan by adjusting the amount of 'food' we give </h2>
+
−
</div>
+
−
<div class="slide" style="background-color:blue">
+
−
<h2><span>We rest</span>
+
−
because the kill switch will eliminate the bacteria at the right time</h2>
+
−
</div>
+
−
</div>
+
 
 
−
      </div>
 
−
  </div>
 
−
      <div class="section">
 
−
        <div class="header_test" style=
 
−
        "z-index:4;background-color:hsla(0,0%,85%,0.91);">
 
−
          <p>
 
−
            <span>Why</span> should you care
 
−
          </p>
 
−
        </div>
 
−
        <div class="grayRect_test" style=
 
−
        "z-index:-5;background-color:hsla(216, 100%, 50%, 1);">
 
−
<div class="cardbox">
 
−
<div class="slide" style="background-color:blue">
 
−
<h2>Genetically modified organisms (GMO) </h2>
 
−
<span>are everywhere</span>
 
−
<h2>food, medicines, industry... </h2>
 
−
</div>
 
−
<div class="slide" style="background-color:red">
 
−
<span>GMOs are scary</span>
 
−
<h2>52% of the population think Genetically Modified foods are unsafe </h2>
 
−
</div>
 
−
<div class="slide" style="background-color:blue">
 
−
<h2>Uncontrolled GMO growth might harm </h2>
 
−
<span>the environment</span>
 
−
</div>
 
−
<div class="slide" style="background-color:red">
 
−
<span>Our system</span>
 
−
<h2>helps to solve these problems by controlling GMO's population </h2>
 
−
</div>
 
−
<div class="slide" style="background-color:blue">
 
−
<h2>and enables GMO-based industry to control precisely </h2>
 
−
<span>how much product</span>
 
−
<h2>will be produced </h2>
 
−
</div>
 
−
</div>
 
 
 
−
</div>
+
        <script type="text/javascript">
−
      </div>
+
$(window).enllax();
−
      <div class="section">
+
            $(function() {
−
        <div class="header_test" style=
+
/**
−
        "background-color:hsla(216, 100%, 50%, 1);">
+
* for each menu element, on mouseenter,  
−
          <p>
+
* we enlarge the image, and show both sdt_active span and
−
            <span>How</span> we do it
+
* sdt_wrap span. If the element has a sub menu (sdt_box),
−
          </p>
+
* then we slide it - if the element is the last one in the menu
−
        </div>
+
* we slide it to the left, otherwise to the right
−
        <div class="grayRect_test" style=
+
*/
−
        "background-color: hsla(194, 100%, 53%, 1);">
+
−
        <div class="grayRect_test" style=
+
$('#header').bind('mouseenter',function(){
−
        "background-color: hsla(0,0%,85%,0.91);">
+
var $elem = $(this);
−
<div class="cardbox">
+
$elem.find('#tcell')
−
<div class="slide" style="background-color:blue">
+
.stop(true)
−
<span>Our biobrick</span>
+
.animate({'width':'600px','left':'120px'
−
<h2>is composed out of three parts </h2>
+
},400,'');
−
</div>
+
$elem.find('#logo')
−
<div class="slide" style="background-color:red">
+
.stop(true)
−
<span style="font-size:9vw">The first and second parts </span>
+
//.glow({ radius: "10", color:"green" });
−
<h2>are responsible for controlling expression in the third part- the killing part.</h2>
+
$elem.find('#title').fadeIn( 1000 );
−
</div>
+
−
<div class="slide" style="background-color:blue">
+
}).bind('mouseleave',function(){
−
<h2>we achieve </h2>
+
var $elem = $(this);
−
<span>control</span>
+
$elem.find('#tcell')
−
<h2>over the first two parts by using AHL (N-Acyl homoserine lactones) as an inducer- the 'food'. </h2>
+
.stop(true)
−
</div>
+
.animate({'width':'0px','left':'150'
−
<div class="slide" style="background-color:red">
+
},400,'');
−
<span>The AHL</span>
+
$elem.find('#logo')
−
<h2 style="line-height:170%">binds with LuxR creating a complex that inhibits expression of some genes while AiiA degrades the AHL. that why when the 'food' runs out the poison in the third part is expressed and the cell dies. </h2>
+
.stop(true)
−
</div>
+
//.glow({ radius: "20", color:"green", disable:true });
−
</div>
+
$elem.find('#title').fadeOut( "slow" );
−
+
});
−
</div>
+
                $('#sdt_menu > li').bind('mouseenter',function(){
−
</div>
+
var $elem = $(this);
−
      </div>
+
$elem.find('img')
−
      <div class="section">
+
.stop(true)
−
        <div class="header_test" style=
+
.animate({
−
        "background-color: hsla(194, 100%, 53%, 1);">
+
'width':'190px',
−
          <p>
+
'height':'170px',
−
            <span>Who</span> we are
+
'left':'0px'
−
          </p>
+
},400,'easeOutBack')
−
        </div>
+
.andSelf()
−
        <div class="grayRect_test" style="background-color: white;">
+
.find('.sdt_wrap')
−
<div class="cardbox">
+
    .stop(true)
−
<div class="slide" style="background-color:blue">
+
.animate({'top':'140px'},500,'easeOutBack')
−
+
.andSelf()
−
<span>High school students</span>
+
.find('.sdt_active')
−
<h2>from Israel </h2>
+
    .stop(true)
−
</div>
+
.animate({'height':'170px'},300,function(){
−
+
var $sub_menu = $elem.find('.sdt_box');
−
</div>
+
if($sub_menu.length){
−
</div>
+
var left = '190px';
−
      </div>
+
if($elem.parent().children().length == $elem.index()+1)
−
      <div class="section">
+
left = '-190px';
−
        <div class="header_test" style="background-color: white;">
+
$sub_menu.show().animate({'left':left},200);
−
          <p>
+
}
−
          </p>
+
});
−
         </div>
+
}).bind('mouseleave',function(){
−
        <div class="grayRect_test" style=
+
var $elem = $(this);
−
        "background-color: hsla(194, 100%, 53%, 1);"></div>
+
var $sub_menu = $elem.find('.sdt_box');
−
      </div>
+
if($sub_menu.length)
−
     </div>
+
$sub_menu.hide().css('left','0px');
−
    <div id="scroll_for_more">
+
−
      Scroll for more<br>
+
$elem.find('.sdt_active')
−
      <img src="https://static.igem.org/mediawiki/2015/3/35/Arr_down.png" width="25px;">
+
.stop(true)
−
    </div>
+
.animate({'height':'0px'},300)
−
+
.andSelf().find('img')
 +
.stop(true)
 +
.animate({
 +
'width':'0px',
 +
'height':'0px',
 +
'left':'85px'},400)
 +
.andSelf()
 +
.find('.sdt_wrap')
 +
.stop(true)
 +
.animate({'top':'25px'},500);
 +
});
 +
            });
 +
         </script>
 +
<div id="whiteBox" style="width: 80%; background-color: hsla(0,0%,85%,0.91); padding: 25px; height: auto; margin-left: auto;
 +
     margin-right: auto; position: absolute; top: 670px; left: 10%; right: 10%; z-index:-1;">
 +
 
 +
 
 
   </body>
 
   </body>
 
</html>
 
</html>

Latest revision as of 20:32, 18 September 2015

Innovative Autonomous
Bacteria Kill Switch

That's What We Do.