|
|
(312 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | {{:Team:ETH Zurich/tpl/head}} | + | {{:Team:ETH Zurich/tpl/head|Overview of Mosai''coli''}} |
- | {{:Team:ETH Zurich/tpl/head/overview}} | + | {{:Team:ETH Zurich/tpl/head/simplify}} |
| + | {{:Team:ETH Zurich/tpl/head/animbuttons}} |
| | | |
- | <html> | + | <center> |
| + | {{:Team:ETH Zurich/tpl/scrollbuttontworows|Our|Project|green}} |
| + | {{:Team:ETH Zurich/tpl/scrollbuttontworows|Pattern|Emergence|blue}} |
| + | {{:Team:ETH Zurich/tpl/scrollbuttontworows|Genetic|Circuits|red}} |
| + | </center> |
| | | |
- | </html> | + | <html> |
- | {{:Team:ETH Zurich/project/overview/summary}} | + | <div id="Our" style='background-color:#FFFFFF; padding:2%;'> <article class="Our complex" style='margin-bottom:0;'> </html> |
- | <html> | + | {{:Team:ETH Zurich/project/overview/summary}} |
| + | <html> </article> <article class="Our simple" style="display:none; margin-bottom:0;"> </html> |
| + | {{:Team:ETH Zurich/project/overview/summarysimple}} |
| + | <html> </article> </html> |
| + | {{:Team:ETH Zurich/tpl/simpbutton|Our|green}} |
| + | <html></div> |
| + | <br/> |
| + | <br/> |
| | | |
- | <h2> Background </h2> | + | <div id="Pattern" style='background-color:#FFFFFF; padding:2%;'> </html> |
| + | {{:Team:ETH_Zurich/project/overview/grid}} |
| + | <html> </div> |
| + | <br/> |
| + | <br/> |
| | | |
- | <div class="carousel"> </html> | + | <div id="Genetic" style='background-color:#FFFFFF; padding:2%;'></html> |
- | {{:Team:ETH Zurich/project/overview/background}} <html>
| + | == Implementation in ''E. coli'' == |
- | <p class="read-more"><a href="#" class="button twolines">Read More</a></p>
| + | <center> |
- | </div>
| + | Here you can see our circuit in action. More details on how it works are <html> <a class="circled scrolly" href="#implementation"> just below</a></html>. For a comprehensive inventory of all parts used, you can check our [https://2014.igem.org/Team:ETH_Zurich/data Data page]. |
- | | + | <html> |
- | <h2> Our Project: Mosai<em>coli</em></h2>
| + | <style> |
- | | + | @media |
- | <h3> Principle and goals </h3>
| + | only screen and (max-width: 760px), |
- | <div class="carousel"> </html>
| + | (min-device-width: 768px) and (max-device-width: 1024px) { |
- | {{:Team:ETH Zurich/project/overview/goals}} <html>
| + | |
- | <p class="read-more"><a href="#" class="button twolines">Read More</a></p>
| + | |
- | </div>
| + | |
- | | + | |
- | <h3> Implementation in <em>E. Coli</em> </h3>
| + | |
- | | + | |
- | <div class="carousel"> </html> | + | |
- | {{:Team:ETH Zurich/project/overview/implementation}} <html>
| + | |
- | <p class="read-more"><a href="#" class="button twolines">Read More</a></p> | + | |
- | </div>
| + | |
- | | + | |
- | <h3> Biological tools: quorum sensing and integrases </h3>
| + | |
- | | + | |
- | <div class="carousel"> </html>
| + | |
- | {{:Team:ETH Zurich/project/overview/tools}} <html>
| + | |
- | <p class="read-more"><a href="#" class="button twolines">Read More</a></p> | + | |
- | </div>
| + | |
- | | + | |
- | | + | |
- | <h2> Applications and outlook </h2>
| + | |
| | | |
- | <div class="carousel"> </html> | + | /* Force table to not be like tables anymore */ |
- | {{:Team:ETH Zurich/project/overview/applications}} <html> | + | table, thead, tbody, th, td, tr { |
- | <p class="read-more"><a href="#" class="button twolines">Read More</a></p> | + | display: block; |
| + | } |
| + | |
| + | /* Hide table headers (but not display: none;, for accessibility) */ |
| + | thead tr { |
| + | border:none; |
| + | position: absolute; |
| + | top: -9999px; |
| + | left: -9999px; |
| + | } |
| + | |
| + | |
| + | td { |
| + | /* Behave like a "row" */ |
| + | border: none;; |
| + | position: relative; |
| + | } |
| + | |
| + | td:before { |
| + | /* Now like a table header */ |
| + | position: absolute; |
| + | /* Top/left values mimic padding */ |
| + | top: 6px; |
| + | left: 6px; |
| + | width: 45%; |
| + | padding-right: 10px; |
| + | white-space: nowrap; |
| + | } |
| + | |
| + | } |
| + | </style> |
| + | </br> |
| + | </br> |
| + | <table style='width:100%; z-index:1;'> |
| + | <tr style='border:2px solid black;'> |
| + | <td> |
| + | <div id="bloc1" style='margin-left:3em;'><h3 style='font-weight:800;'> Choose the cell type and the inputs:</h3></html> |
| + | <br/> |
| + | {{:Team:ETH_Zurich/tpl/animbuttonblue}} |
| + | {{:Team:ETH_Zurich/tpl/animbuttonred}} |
| + | <br/> |
| + | {{:Team:ETH Zurich/tpl/animbuttonnoneblue|<html>width='160px' height='152.78px'</html>}} |
| + | {{:Team:ETH Zurich/tpl/animbuttonlasblue|<html>width='160px' height='152.78px'</html>}} |
| + | <br/> |
| + | {{:Team:ETH Zurich/tpl/animbuttonluxblue|<html>width='160px' height='152.78px'</html>}} |
| + | {{:Team:ETH Zurich/tpl/animbuttonbothblue|<html>width='160px' height='152.78px'</html>}} |
| + | {{:Team:ETH Zurich/tpl/animbuttonnonered|<html>width='160px' height='152.78px'</html>}} |
| + | {{:Team:ETH Zurich/tpl/animbuttonlasred|<html>width='160px' height='152.78px'</html>}} |
| + | <br/> |
| + | {{:Team:ETH Zurich/tpl/animbuttonluxred|<html>width='160px' height='152.78px'</html>}} |
| + | {{:Team:ETH Zurich/tpl/animbuttonbothred|<html>width='160px' height='152.78px'</html>}} |
| + | </center> |
| + | <br/> |
| + | <html></div> |
| + | </td> |
| + | <td> |
| + | <div id="bloc2"> |
| + | <h3 style='text-align:center; font-weight:800;'>See how the information is processed to get the right output : </h3> |
| + | <center> |
| + | <img class='animation' id='luxred' src='https://static.igem.org/mediawiki/2014/7/73/ETH_Zurich_Animation_luxred.gif'> |
| + | <img class='animation' id='lasred' src='https://static.igem.org/mediawiki/2014/5/5e/ETH_Zurich_Animation_lasred.gif'> |
| + | <img class='animation' id='bothred' src='https://static.igem.org/mediawiki/2014/1/15/ETH_Zurich_Animation_bothred.gif'> |
| + | <img class='animation' id='nonered' src='https://static.igem.org/mediawiki/2014/b/b0/ETH_Zurich_Animation_nonered.gif'> |
| + | </center> |
| + | <center> |
| + | <img class='animation' id='bothblue' src='https://static.igem.org/mediawiki/2014/4/4e/ETH_Zurich_Animation_bothblue.gif'> |
| + | <img class='animation' id='noneblue' src='https://static.igem.org/mediawiki/2014/6/6e/ETH_Zurich_Animation_noneblue.gif'> |
| + | <img class='animation' id='luxblue' src='https://static.igem.org/mediawiki/2014/c/c4/ETH_Zurich_Animation_luxblue.gif'> |
| + | <img class='animation' id='lasblue' src='https://static.igem.org/mediawiki/2014/6/64/ETH_Zurich_Animation_lasblue.gif'> |
| + | </center></div> |
| + | </td> |
| + | </tr> |
| + | </table> |
| </div> | | </div> |
| | | |
- | </html> | + | <div id="implementation" style='background-color:#FFFFFF; padding:2%; text-align:left;'> |
| + | <article class="implementation simple" style="display:none; margin-bottom:0; padding-top:0;"> </html> |
| + | {{:Team:ETH Zurich/project/overview/implementationsimple}} |
| + | <html> </article><article class="implementation complex" style='margin-bottom:0; padding-top:0;'> </html> |
| + | {{:Team:ETH Zurich/project/overview/implementation}} |
| + | <html> </article> </html> |
| + | {{:Team:ETH Zurich/tpl/simpbutton2|implementation|blue}} |
| + | <html></div> </html> |
| | | |
| {{:Team:ETH Zurich/tpl/foot}} | | {{:Team:ETH Zurich/tpl/foot}} |