Difference between revisions of "Team:ShanghaitechChina"

 
(248 intermediate revisions by 6 users not shown)
Line 1: Line 1:
{{ShanghaitechChina}}
 
 
<html>
 
<html>
    <style>
+
<style>
#content{
+
html{
background-color:rgba(69,137,148,1);
+
height:100%;
 
+
margin:0;
 
+
padding:0;
 +
width:100%;
 +
background-color:#242424;
 
}
 
}
#landingContent {
+
body{
    background-color: white;
+
width:100%;
    background-image: url("https://static.igem.org/mediawiki/2015/f/f9/Heidelberg_landingpage_longrobe.svg");
+
margin:0 auto;
    background-position: 413px -340px;
+
padding:0;
    background-repeat: no-repeat;
+
        background:url("https://static.igem.org/mediawiki/2016/1/12/Bubbles_back.png"),url("https://static.igem.org/mediawiki/2016/2/23/Bubbles3.png"),url("https://static.igem.org/mediawiki/2016/e/e1/Back3.png") repeat fixed;
    border-radius: 10px;
+
        font-size:100%;
    font-size: 26px;
+
       
    line-height: normal;
+
    margin-left: auto;
+
    margin-right: auto;
+
    min-height: 2200px;
+
    overflow: hidden;
+
    text-align: justify;
+
    width: 1000px;
+
 
}
 
}
#landingContent div::first-letter {
+
body,td,th {
    color: #ff5533;
+
font-family: Arial, Helvetica, sans-serif,Britannic;
    font-size: 28px;
+
    font-weight: bold;
+
    margin-top: 0;
+
 
}
 
}
#landingContent p::first-letter {
+
 
    color: #ff5533;
+
#top_title, #sideMenu{
    font-size: 28px;
+
        display: none;
    font-weight: bold;
+
      }
    margin-top: 0;
+
 
 +
html, body, div, span, p, a, del, em, img, ol, ul, li, fieldset, form, label {
 +
margin: 0;
 +
padding: 0;
 +
border: 0;
 +
font-size: 100%;
 +
font: inherit;
 +
vertical-align: baseline;
 
}
 
}
.question, .image, .statement {
+
 
    float: left;
+
article, aside, details, figcaption, figure,
    height: 300px;
+
footer, header, hgroup, menu, nav, section {
    margin: 40px;
+
display: block;
    padding: 10px;
+
    width: 420px;
+
 
}
 
}
#tools {
+
 
    background-color: #77bb22;
+
html, body {
    border-style: dashed;
+
line-height: 1;
    border-width: 1px;
+
min-height:100%; font-size:18px;
    float: left;
+
/*font-family: 'Droid Sans', sans-serif;*/
    font-size: 32px;
+
 
    font-weight: bold;
+
    left: 10%;
+
    margin: 50px auto;
+
    padding: 15px;
+
    position: relative;
+
    text-align: center;
+
    width: 80%;
+
}
+
.question {
+
    height: 250px;
+
    padding-top: 70px;
+
}
+
.image {
+
    height: 250px;
+
}
+
/* Have padding top so banner image doesn't overlap top nav */
+
.intro-banner {
+
    background-image: url("https://static.igem.org/mediawiki/2016/d/d0/Mask.png") , url("https://static.igem.org/mediawiki/2016/1/16/Landscape1.jpeg");
+
    background-size:cover;
+
    color: #f2f2f2;
+
    padding-bottom: 50px;
+
    padding-top: 50px;
+
    text-align: center;
+
    width: 102%;
+
    background-size:cover;
+
    margin-left: -1%;
+
 
}
 
}
.intro-banner:hover{
 
    background: url("https://static.igem.org/mediawiki/2016/1/16/Landscape1.jpeg") no-repeat scroll center center;
 
    background-size:cover;
 
  
  
 +
 +
html, body {
 +
width:100%;
 +
height:100%;
 +
padding:0;
 +
margin:0;
 +
overflow-x:hidden;
 +
       
 
}
 
}
.intro-inner {
+
.skrollable {
    position: relative;
+
/*
    padding-bottom: 10%;
+
* First-level skrollables are positioned relative to window
}
+
*/
 +
position:fixed;
  
.intro-inner h1 {
+
/*
    margin: 0;
+
* Skrollables by default have a z-index of 100 in order to make it easy to position elements in front/back without changing each skrollable
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
+
*/
    font-size: 5em;
+
z-index:100;
 
}
 
}
  
.intro-divider {
+
.skrollr-mobile .skrollable {
    width: 50%;
+
/*
    border-top: 1px solid #f2f2f2;
+
May cause issues on Android default browser (see #331 on GitHub).
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+
*/
    margin-left:25%;
+
position:absolute;
 
}
 
}
  
.intro-inner h3 {
+
.skrollable .skrollable {
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
+
/*
 +
* Second-level skrollables are positioned relative their parent skrollable
 +
*/
 +
position:absolute;
 
}
 
}
  
/* Special paragraphs that stand out */
+
.skrollable .skrollable .skrollable {
.lead {
+
/*
    font-size: 20px;
+
* Third-level (and below) skrollables are positioned static
 +
*/
 +
position:static;
 
}
 
}
 +
.content {
 +
    background-color: rgba(240,240,240,0.85);
 +
    width:100%;
 +
    font-size: 22px;
 +
    padding: 10px 30px;
 +
}
 +
.imground {
 +
    width:100%;
 +
    margin-left:2%;
 +
    border-radius: 10px 10px 10px 10px;
 +
}
 +
.introimg {
 +
    width:82%;
 +
    margin-left:9%;
 +
    border-radius: 10px 10px 10px 10px;
 +
}
 +
.videocontainer {
 +
width:100%;
 +
height:105%;
 +
margin-top:10%;
 +
color:white;
 +
}
 +
.content2 {
 +
    background-color: rgba(255,255,255,0.85);
 +
    width:82%;
 +
    margin-left:9%;
 +
    border: 1px solid #cccccc;
 +
    border-radius: 10px;
 +
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35);
 +
    color: #3d3d3d;
 +
    font-size: 22px;
 +
    padding: 10px 10px 10px 10px;
 +
}
 +
</style>
 +
<head class="no-skrollr">
 +
<meta charset="utf-8">
 +
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 +
<title>ShanghaiTech University</title>
 +
    <script src="https://2016.igem.org/Template:ShanghaitechChina/js/skollr?action=raw&ctype=text/javascript"></script>
 +
    <link rel="stylesheet" href="https://2016.igem.org/Template:ShanghaitechChina/css/bootstrap?action=raw&ctype=text/css">
 +
    <script src="https://2016.igem.org/Template:ShanghaitechChina/js/jquery?action=raw&ctype=text/javascript"></script>
 +
    <script src="https://2016.igem.org/Template:ShanghaitechChina/js/bootstrap?action=raw&ctype=text/javascript"></script>
 +
   
 +
</head>
 +
<body data-0="background-position:0px 0px;" data-10000="background-position:-1000px -20000px;">
 +
</div></div></div></div></div>
 +
<nav class="navbar navbar-inverse navbar-fixed-top" style="margin-top:10px;text-align:center">
 +
    <div class="container-fluid">
  
/* For smaller devices */
+
        <!-- Logo -->
@media (max-width: 767px) {
+
        <div class="navbar-header">
    .intro-inner {
+
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
        padding-bottom: 15%;
+
                <span class="icon-bar"></span>
    }
+
                <span class="icon-bar"></span>
 +
            </button>
 +
            <a href="https://2016.igem.org/Team:ShanghaitechChina" class="navbar-brand" style="font-size:28px;margin-top:2%">Solar Hunter</a>
 +
        </div>
  
    .intro-inner > h1 {
+
        <!-- Menu Items -->
        font-size: 3em;
+
        <div class="collapse navbar-collapse" id="mainNavBar">
    }
+
                <ul class="nav navbar-nav navbar-right">
 +
                    <li><a href="https://2016.igem.org/Team:ShanghaitechChina" style="font-size:20px;"> </a></li>
 +
                    <li><a href="https://2016.igem.org/Team:ShanghaitechChina" style="font-size:20px;">Home</a></li>
 +
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="font-size:20px;">Team<span class="caret"></span></a>
 +
                    <ul class="dropdown-menu" style="margin-left:0;">
 +
                    <li><a href="https://2016.igem.org/Team:ShanghaitechChina/Team" style="font-size:20px;">Members</a></li>
 +
                    <li><a href="https://2016.igem.org/Team:ShanghaitechChina/Attributions" style="font-size:20px;">Attributions</a></li>
 +
                    </ul></li>
 +
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="font-size:20px;  ">Project<span class="caret"></span></a>
 +
                    <ul class="dropdown-menu" style="margin-left:0;">
 +
                    <li><a href="https://2016.igem.org/Team:ShanghaitechChina/IBS" style="font-size:20px;">Integrative Biohydrogen System</a></li>
 +
                    <li><a href="https://2016.igem.org/Team:ShanghaitechChina/Nanomaterials" style="font-size:18px;">Semiconductor Nanomaterials</a></li>
 +
                    <li><a href="https://2016.igem.org/Team:ShanghaitechChina/Biofilm" style="font-size:18px;">Engineered Biofilms</a></li>
 +
                    <li><a href="https://2016.igem.org/Team:ShanghaitechChina/Hydrogen" style="font-size:18px;">Hydrogenase Gene Clusters</a></li>
 +
                    </ul></li>
 +
    <li><a href="https://2016.igem.org/Team:ShanghaitechChina/Parts" style="font-size:20px;  ">Parts</a></li>
 +
    <!--<li><a href="https://2016.igem.org/Team:ShanghaitechChina/Safety" style="font-size:20px;  ">Safety</a></li>-->
 +
    <li><a href="https://2016.igem.org/Team:ShanghaitechChina/Notebook" style="font-size:20px;  ">Notebook</a></li>
 +
    <li><a href="https://2016.igem.org/Team:ShanghaitechChina/Human_Practice" style="font-size:20px;  ">Human Practice</a></li>
 +
    <li><a href="https://2016.igem.org/Team:ShanghaitechChina/InterLab" style="font-size:20px;  ">InterLab</a></li>
 +
<li><a href="https://2016.igem.org/Team:ShanghaitechChina/Safety" style="font-size:20px;  ">Safety</a></li>
 +
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="font-size:20px;  ">Special Prize<span class="caret"></span></a><ul class="dropdown-menu" style="margin-left:0;"><li><a href="https://2016.igem.org/Team:ShanghaitechChina/Integrated_Practices" style="font-size:20px;  ">Integrated Human Practices</a></li>
 +
<li><a href="https://2016.igem.org/Team:ShanghaitechChina/Engagement" style="font-size:20px;  "> Education and Public Engagement</a></li>
 +
<li><a href="https://2016.igem.org/Team:ShanghaitechChina/Measurement" style="font-size:20px;  ">Measurement</a></li>
 +
<li><a href="https://2016.igem.org/Team:ShanghaitechChina/Design" style="font-size:20px;  ">Applied Design</a></li>
 +
</ul></li>
 +
                </ul>
 +
            </div>
  
    ul.intro-social-buttons > li {
 
        display: block;
 
        margin-bottom: 20px;
 
        padding: 0;
 
    }
 
  
     ul.intro-social-buttons > li:last-child {
+
     </div>
        margin-bottom: 0;
+
</nav>
    }
+
  
    .intro-divider {
+
<div id="skrollr-body">
        width: 100%;
+
<div data-0="opacity:1;top:3%;transform:rotate(0deg);transform-origin:0 0;" data-500="opacity:0;top:90%;transform:rotate(-90deg);">
    }
+
  <img class="introimg" src="https://static.igem.org/mediawiki/2016/2/26/Intro-image.jpg">
}
+
</div>
 +
<img class="introimg" src="https://static.igem.org/mediawiki/2016/7/71/T--ShanghaitechChina--member--bf--Home_Big_Picture.png" style="margin-top:45%;">
 +
<!--https://static.igem.org/mediawiki/2016/5/5d/Plan_1_V2.jpg-->
 +
<div class="content2">
 +
We conceived and proposed an integrative artificial photosynthesis platform, Solar Hunter, in which engineered strains, living biofilms and biofilms-interfaced semiconductor nanomaterials reside in harmony, carefully divide individuals' labor and synergistically work towards value-added products.
  
.button-title {
 
    font-family: 'Architects Daughter', cursive;
 
    font-size: 18px;
 
}
 
  
</style>
+
</div>
   
+
<div class="content" style="margin-top:5%">
<body>
+
<div class="row"><center><h1><b>Integrative Biohydrogen System</b></h1></center>
<a href="#landingContent">
+
<div class="col-lg-5">
<div class="intro-banner">
+
<a href="https://2016.igem.org/Team:ShanghaitechChina/IBS"><img class="imground" src="https://static.igem.org/mediawiki/2016/c/c9/T--ShanghaitechChina--member--qlc--plan1_V5.jpg"></a>
        <div class="container">
+
</div>
            <div class="row">
+
<div class="col-lg-7" style="margin-top:20px" >
 +
We proposed and demonstrated a sun-powered biofilm-interfaced artificial hydrogen-producing system, Solar Hunter, that harnesses the energy from sun light. Biofilm-anchored nanorods can efficiently convert photons to electrons, which seamlessly tap into the electron chain of engineered strain carrying FeFe hydrogenase gene cluster, thereby achieving high-efficiency hydrogen production. Furthermore, the intrinsic adherence of biofilms towards various interfaces allows us to grow biofilms on easy-separation micro-beads, therefore facilitating recyclable usage of the biofilm-anchored NRs and endowing this whole system with recyclability.
  
                <div class="col-lg-12">
+
</div>
                    <div class="intro-inner">
+
</div>
                        <h1>Solar Hunter</h1>
+
<div class="row" style="margin-top:80px">
                        <h3>meixianghaoxieshenme</h3>
+
<div class="col-lg-8" style="margin-top:20px">
                        <hr class="intro-divider">
+
Nanomaterials are those nanoscale objects serving as solar energy harvester. When firmly anchored onto <i>E. coli</i> biofilms through coordination chemistry, they can be easily recycled together with scalable biofilm coatings and still possess the capability to efficiently convert photons into electrons upon light exposure. The acquired electrons would tap into the electron chains of engineered strain harboring hydrogenase gene cluster, thereby fulfilling hydrogen production.
                        <ul class="list-inline intro-social-buttons">
+
</div>
 +
<div class="col-lg-4">
 +
<a href="https://2016.igem.org/Team:ShanghaitechChina/Nanomaterials"><img class="imground" src="https://static.igem.org/mediawiki/2016/9/94/T--ShanghaitechChina--member--qlc--nanomaterials.jpg"></a>
 +
</div>
 +
</div>
 +
<div class="row" style="margin-top:80px">
 +
<div class="col-lg-4">
 +
<a href="https://2016.igem.org/Team:ShanghaitechChina/Biofilm"><img class="imground" src="https://static.igem.org/mediawiki/2016/a/a4/T--ShanghaitechChina--member--qlc--biofilm.jpg"></a>
 +
</div>
 +
<div class="col-lg-8" style="margin-top:20px">
 +
Biofilms function as a platform to sustain the whole system. Biofilms can immobilize NRs firmly so that they prevent potential damage and stresses caused by free NRs, as is the case in traditional artificial photosynthesis system.  In addition,  the intrinsic adherence of biofilms towards various interfaces, allows us to grow biofilms on easy-separation micro-beads. Based on those merits, biofilm stand out by facilitating recyclable usage of the biofilm-anchored NRs and endowing this whole system with recyclability.
 +
</div>
  
                        </ul>
+
</div>
                    </div>
+
<div class="row" style="margin-top:80px">
                </div>
+
  
            </div>
+
<div class="col-lg-8" style="margin-top:20px">
        </div>
+
In our sun-powered biofilm-interfaced hydrogen-producing system, hydrogenase harnessed in engineered <i>E. coli</i> are conceived to efficiently catalyze proton reduction upon receiving electrons originally donated by semiconductor nanomaterials. Electron transportation from semiconductors to hydrogenase could be bridged and facilitated by the use of mediators, methyl viologen. To achieve efficient enzymatic activities, we codon-optimized and constructed the whole hydrogenase gene clusters (from <i>Clostridium acetobutylicum</i>) by leveraging the multi-expression Acembl System.
    </div>
+
</div>
</a>
+
<div class="col-lg-4">
<div id="landingContent">
+
<a href="https://2016.igem.org/Team:ShanghaitechChina/Hydrogen"><img class="imground" src="https://static.igem.org/mediawiki/2016/7/76/T--ShanghaitechChina--member--qlc--hydrogenase.jpg"></a>
                <a href="https://2015.igem.org/Team:Heidelberg/hp/experts#mall">
+
</div>
                <div class="question" id="question1">
+
</div>
                    What impact would it have to <em>cure cystic fibrosis</em> by correcting the causing dysfunctional mRNA but without genetically modifying the patient?
+
</div>
                </div>
+
<div id="vi" class="videocontainer" style="position-left:0" data-200-bottom="background:rgba(0, 0, 0, 0.2);" data-top="background:rgba(0,0,0,1);" style="margin-top:0">
                <img src="https://static.igem.org/mediawiki/2015/2/2c/Heidelberg_landingpage_lunge.svg" id="lungImage" class="image">
+
<video data-anchor-target="#vi" src="https://static.igem.org/mediawiki/2016/6/64/T--ShanghaitechChina--SolarHunter2.mp4" width="75%" style="margin-top:3%;margin-left:13%" controls="controls">
                </a>
+
</video>
 +
<center>
 +
<p></p>
 +
ShanghaiTech University, No. 393, Huaxiazhong Rd., Zhangjiang High-tech Park, Pudong Area, Shanghai 201210, China. Correspondence
 +
<p></p>
 +
E-mail: zhongchao@shanghaitech.edu.cn
 +
</center>
 +
</div>
 +
</div>
  
                <a href="https://2015.igem.org/Team:Heidelberg/hp/experts#keastelic">
 
                <img src="https://static.igem.org/mediawiki/2015/4/47/Heidelberg_landingpage_laterne.svg" id="laternImage" class="image">
 
  
                <div class="question" id="question2">
 
                    How much safer could our cities be if <em>rape would be prevented</em> by an easy and discrete method to detect drugs ulteriorly poured  in drinks?
 
                </div>
 
                </a>
 
               
 
                <a href="https://2015.igem.org/Team:Heidelberg/hp/experts#wink">
 
                <div class="question" id="question3">
 
                    What could be discovered if every research lab had the possibility to <em>perform cheap and fast western blotting</em> for every protein?
 
                </div>
 
  
                <img src="https://static.igem.org/mediawiki/2015/e/ec/Heidelberg_landingpage_ab.svg" id="abImage" class="image">
+
<script>
                </a>
+
var isMobile = function() {
                <a href="https://2015.igem.org/Team:Heidelberg/hp/experts#wink">
+
    var check = false;
                <div class="question" id="question3">
+
    (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
                    What could be discovered if every research lab had the possibility to <em>perform cheap and fast western blotting</em> for every protein?
+
    return check;
                 </div>
+
  };
 +
 
 +
  if (!isMobile())
 +
  {
 +
    // Mediawiki escapes & to &amp;
 +
    var s = skrollr.init({
 +
//edgeStrategy: 'set',
 +
                 forceHeight: false
 +
    });
 +
  }
 +
 
 +
</script>
 +
 
  
                <img src="https://static.igem.org/mediawiki/2015/e/ec/Heidelberg_landingpage_ab.svg" id="abImage" class="image">
 
                </a>
 
               
 
                <div id="tools">
 
                    Nature has provided us with the right tools: functional nucleic acids
 
                </div>
 
            </div>
 
</body>
 
  
 +
</body>
  
  
 
</html>
 
</html>

Latest revision as of 07:23, 2 December 2016

ShanghaiTech University