Difference between revisions of "Team:ShanghaitechChina"

Line 12: Line 12:
 
margin:0 auto;
 
margin:0 auto;
 
padding:0;
 
padding:0;
−
         background-image:url(https://static.igem.org/mediawiki/2016/2/23/Bubbles3.png),url(https://static.igem.org/mediawiki/2016/f/fd/Bubbles2.png),url(https://static.igem.org/mediawiki/2016/1/12/Bubbles_back.png);
+
          
 
}
 
}
 
body,td,th {
 
body,td,th {
Line 41: Line 41:
 
/*font-family: 'Droid Sans', sans-serif;*/
 
/*font-family: 'Droid Sans', sans-serif;*/
  
−
}
 
−
 
−
body {
 
−
background: #eeeeee;
 
−
background: -webkit-linear-gradient(top, #eeeeee, #cccccc 100%);
 
−
background: -moz-linear-gradient(top, #eeeeee, #cccccc 100%);
 
−
background: -o-linear-gradient(top, #eeeeee, #cccccc 100%);
 
−
background: -ms-linear-gradient(top, #eeeeee, #cccccc 100%);
 
−
background: linear-gradient(top, #eeeeee, #cccccc 100%);
 
−
background-attachment:fixed;
 
−
}
 
−
 
−
h1 {
 
−
font-size:24px;
 
−
margin:0;
 
−
}
 
−
 
−
h1 > small {
 
−
text-align:right;
 
−
display:inline-block;
 
−
font-size:.71em;
 
−
text-indent:15em;
 
−
color:#444;
 
−
}
 
−
 
−
h2 {
 
−
color:inherit;
 
−
font-size:18px;
 
−
margin:2em 0 1em 0;
 
−
}
 
−
 
−
h2:first-child {margin-top:0;}
 
−
 
−
h3 {
 
−
color:#333;
 
−
font-size:1.41em;
 
−
margin:1em 0;
 
−
}
 
−
 
−
h4 {
 
−
color:#444;
 
−
font-size:1.11em;
 
−
margin:1em 0;
 
 
}
 
}
  
Line 94: Line 51:
 
margin:0;
 
margin:0;
 
overflow-x:hidden;
 
overflow-x:hidden;
 +
    background:url("./images/back4.png"),url("./images/bubbles2.png"),url("./images/bubbles3.png") repeat fixed;
 
}
 
}
  
Line 127: Line 85:
 
*/
 
*/
 
position:static;
 
position:static;
−
}
 
−
 
−
 
−
#progress {
 
−
height:4px;
 
−
background:#444;
 
−
bottom:0;
 
−
z-index:200;
 
−
}
 
−
 
−
#bg1, #bg2, #bg3, #bg4 {
 
−
z-index:50;
 
−
top:0;
 
−
left:0;
 
−
width:100%;
 
−
height:100%;
 
−
background:url("https://static.igem.org/mediawiki/2016/1/12/Bubbles_back.png") repeat 0 0;
 
−
}
 
−
 
−
#bg2 {
 
−
z-index:49;
 
−
background-image:url("https://static.igem.org/mediawiki/2016/f/fd/Bubbles2.png");
 
−
}
 
−
 
−
#bg3 {
 
−
z-index:48;
 
−
background-image:url("https://static.igem.org/mediawiki/2016/2/23/Bubbles3.png");
 
−
}
 
−
#bg4 {
 
−
z-index:48;
 
−
background-image:url("https://static.igem.org/mediawiki/2016/b/b3/Bubbles4.png");
 
−
}
 
−
 
−
#intro {
 
−
width:80%;
 
−
left:50%;
 
−
top:1em;
 
−
margin-left:-40%;
 
−
padding:2em;
 
−
background:#fff;
 
−
text-align:center;
 
−
border-radius:1em;
 
−
 
−
-webkit-transform-origin:0 0;
 
−
-moz-transform-origin:0 0;
 
−
-ms-transform-origin:0 0;
 
−
-o-transform-origin:0 0;
 
−
transform-origin:0 0;
 
−
 
−
-webkit-box-sizing: border-box;
 
−
-moz-box-sizing: border-box;
 
−
box-sizing: border-box;
 
−
}
 
−
 
−
#intro .arrows {
 
−
font-size:2em;
 
−
color:#09f;
 
−
}
 
−
 
−
#transform {
 
−
width:70%;
 
−
left:50%;
 
−
top:20%;
 
−
margin-left:-35%;
 
−
text-align:center;
 
−
font-size:150%;
 
−
 
−
.transform-origin(50%, 50%);
 
−
}
 
−
 
−
#properties {
 
−
width:100%;
 
−
height:100%;
 
−
padding-top:10%;
 
−
text-align:center;
 
−
 
−
-webkit-box-sizing: border-box;
 
−
-moz-box-sizing: border-box;
 
−
box-sizing: border-box;
 
−
}
 
−
 
−
 
−
 
−
#end {
 
−
width:80%;
 
−
left:10%;
 
−
height:80%;
 
−
padding:3em;
 
−
border:0 solid #666;
 
−
font-size:18px;
 
−
 
−
-webkit-box-sizing: border-box;
 
−
-moz-box-sizing: border-box;
 
−
box-sizing: border-box;
 
−
}
 
−
.content {
 
−
    background-color: white;
 
−
    border: 1px solid #cccccc;
 
−
    border-radius: 10px;
 
−
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35);
 
−
    color: #3d3d3d;
 
−
    font-family: Tahoma;
 
−
    font-size: 14px;
 
−
    margin-left: 5%;
 
−
    margin-top: 50px;
 
−
    padding: 15px 60px;
 
−
    width: 80%;
 
−
}
 
−
#easing {
 
−
top:10%;
 
−
width:50%;
 
−
z-index:101;
 
−
}
 
−
 
−
.drop {
 
−
background:#09f;
 
−
font-weight:bold;
 
−
padding:1em;
 
−
}
 
−
#easing_wrapper {
 
−
width:100%;
 
−
height:100%;
 
−
}
 
−
.tiny{
 
−
    cursor:pointer;
 
−
}
 
−
 
−
#huge{
 
−
  cursor:pointer;
 
 
}
 
}
 
.content {
 
.content {
 
     background-color: rgba(240,240,240,0.85);
 
     background-color: rgba(240,240,240,0.85);
−
     width:96%;
+
     width:100%;
−
    border: 1px solid #cccccc;
+
−
    border-radius: 10px;
+
−
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35);
+
−
    color: #3d3d3d;
+
 
     font-size: 18px;  
 
     font-size: 18px;  
−
    margin-left:2%;
 
−
    margin-top:50px;
 
 
     padding: 10px 30px;
 
     padding: 10px 30px;
 
}
 
}
Line 272: Line 95:
 
     width:100%;
 
     width:100%;
 
     margin-left:2%;
 
     margin-left:2%;
−
    max-height:300px;
 
 
     border-radius: 10px 10px 10px 10px;
 
     border-radius: 10px 10px 10px 10px;
 
}
 
}
 
.introimg {
 
.introimg {
−
     width:80%;
+
     width:85%;
−
     margin-left:10%;
+
     margin-left:8%;
−
    margin-top:2%;
+
 
     border-radius: 10px 10px 10px 10px;
 
     border-radius: 10px 10px 10px 10px;
 
}
 
}
−
 
+
.videocontainer {
−
.contentBorder {
+
width:100%;
−
    border: 1px solid #aaaaaa;
+
height:100%;
−
    border-radius: 7px;
+
margin-top:10%
−
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35);
+
 
}
 
}
−
.ContentHeader {
+
.bigtext {
−
    color: #3d3d3d;
+
width:60%;
−
    font-size: 30px;
+
margin-left:20%;
−
    font-weight: bold;
+
font-size:16px;
−
    margin-bottom: 5px;
+
margin-top:2%;
−
    margin-left: 15px;
+
 
}
 
}
 
</style>
 
</style>
Line 305: Line 124:
 
      
 
      
 
</head>
 
</head>
−
<body>
+
<body data-0="background-position:0px 0px;" data-10000="background-position:-1000px -20000px;">
−
 
+
 
</div></div></div></div></div>
 
</div></div></div></div></div>
 +
<div id="skrollr-body">
 
<nav class="navbar navbar-inverse navbar-fixed-top">
 
<nav class="navbar navbar-inverse navbar-fixed-top">
 
     <div class="container-fluid">
 
     <div class="container-fluid">
Line 349: Line 168:
 
     </div>
 
     </div>
 
</nav>
 
</nav>
−
<div data-0="opacity:1;top:3%;transform:rotate(0deg);transform-origin:0 0;" data-300="opacity:0;top:-10%;transform:rotate(-90deg);">
+
<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">
 
   <img class="introimg" src="https://static.igem.org/mediawiki/2016/2/26/Intro-image.jpg">
 
</div>
 
</div>
−
<div class="content" style="margin-top:30%" data-0="display:block;top:100%;" data-200="top:30%;" data-2300="top:-300%;" >
+
<center>
 +
<img src="https://static.igem.org/mediawiki/2016/5/5d/Plan_1_V2.jpg" style="width:60%;margin-top:50%;">
 +
</center>
 +
<div class="bigtext">
 +
Artificial photosynthesis represents a promising solution for energy issues, however, the efficiency, robustness, and scalability does not meet the requirements of industrial applications. We proposed and demonstrated a sun-powered biofilm-interfaced artificial hydrogen-producing system, Solar Hunter, that could potentially solve the issues above.
 +
</div>
 +
<div class="content" style="margin-top:5%">
 
<div class="row">
 
<div class="row">
−
<div class="col-lg-6">
 
−
<img class="imground" src="https://static.igem.org/mediawiki/2016/5/5d/Plan_1_V2.jpg">
 
 
</div>
 
</div>
−
<div class="col-lg-6">
+
<div class="row" style="margin-top:80px">
−
Artificial photosynthesis represents a promising solution for energy issues, however, the efficiency, robustness, and scalability does not meet the requirements of industrial applications. We proposed and demonstrated a sun-powered biofilm-interfaced artificial hydrogen-producing system, Solar Hunter, that could potentially solve the issues above. 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.
+
<div class="col-lg-4">
 +
<img class="imground" src="https://static.igem.org/mediawiki/2016/7/71/Biofilm_2.jpg">
 
</div>
 
</div>
 +
<div class="col-lg-8">
 +
Artificial photosynthesis represents a promising solution for energy issues, however, the efficiency, robustness, and scalability does not meet the requirements of industrial applications. We proposed and demonstrated a sun-powered biofilm-interfaced artificial hydrogen-producing system, Solar Hunter, that could potentially solve the issues above. 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.
 +
</div>
 +
 
</div>
 
</div>
 
<div class="row" style="margin-top:80px">
 
<div class="row" style="margin-top:80px">
Line 366: Line 194:
 
</div>
 
</div>
 
<div class="col-lg-4">
 
<div class="col-lg-4">
−
<img class="imground" src="https://static.igem.org/mediawiki/2016/7/71/Biofilm_2.jpg">
+
<img class="imground" src="https://static.igem.org/mediawiki/2016/5/5c/Hydrogenase_2.jpg">
 
</div>
 
</div>
 
</div>
 
</div>
 
<div class="row" style="margin-top:80px">
 
<div class="row" style="margin-top:80px">
 
<div class="col-lg-4">
 
<div class="col-lg-4">
−
<img class="imground" src="https://static.igem.org/mediawiki/2016/5/5c/Hydrogenase_2.jpg">
+
<img class="imground" src="https://static.igem.org/mediawiki/2016/6/6a/Nanomaterials_2.jpg">
 
</div>
 
</div>
 
<div class="col-lg-8">
 
<div class="col-lg-8">
 
Artificial photosynthesis represents a promising solution for energy issues, however, the efficiency, robustness, and scalability does not meet the requirements of industrial applications. We proposed and demonstrated a sun-powered biofilm-interfaced artificial hydrogen-producing system, Solar Hunter, that could potentially solve the issues above. 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.
 
Artificial photosynthesis represents a promising solution for energy issues, however, the efficiency, robustness, and scalability does not meet the requirements of industrial applications. We proposed and demonstrated a sun-powered biofilm-interfaced artificial hydrogen-producing system, Solar Hunter, that could potentially solve the issues above. 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.
 
</div>
 
</div>
−
 
 
</div>
 
</div>
−
<div class="row" style="margin-top:80px">
+
<div id="vi" class="videocontainer" data-200-bottom="background:rgba(0, 0, 0, 0.2);" data-top="background:rgba(0,0,0,1);">
−
 
+
<video data-anchor-target="#vi" data-bottom="left:200%" src="zhangzhe.mp4" width="50%" style="margin-top:10%;margin-left:25%" controls="controls">
−
<div style="width:66%">
+
</video>
−
Artificial photosynthesis represents a promising solution for energy issues, however, the efficiency, robustness, and scalability does not meet the requirements of industrial applications. We proposed and demonstrated a sun-powered biofilm-interfaced artificial hydrogen-producing system, Solar Hunter, that could potentially solve the issues above. 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.
+
 
</div>
 
</div>
−
<div style="width:33%">
 
−
<img class="imground" src="https://static.igem.org/mediawiki/2016/6/6a/Nanomaterials_2.jpg">
 
 
</div>
 
</div>
−
</div>
 
−
</div>
 
−
<div id="easing_wrapper" data-0="display:none;" data-2400="display:block;" data-2900="background:rgba(0, 0, 0, 0);color[swing]:rgb(0,0,0);" data-3900="background:rgba(0,0,0,1);color:rgb(255,255,255);" data-4400="top:0%;">
 
−
<div id="easing" data-0="display:none;" data-3200="display:block;left:100%" data-4200="left:25%;">
 
−
        <div class="embed-responsive embed-responsive-16by9">
 
−
            <iframe height="100%" src="https://www.youtube.com/embed/JYpXdKFRm90" frameborder="0" allowfullscreen></iframe>
 
−
        </div>
 
−
</div>
 
−
</div>
 
−
<div id="bg1" data-0="background-position:0px 0px;" data-end="background-position:-500px -10000px;"></div>
 
−
<div id="bg2" data-0="background-position:0px 0px;" data-end="background-position:-500px -8000px;"></div>
 
−
<div id="bg3" data-0="background-position:0px 0px;" data-end="background-position:-500px -6000px;"></div>
 
 
<script>
 
<script>
 
var s = skrollr.init({
 
var s = skrollr.init({
 
//edgeStrategy: 'set',
 
//edgeStrategy: 'set',
−
easing: {
+
                forceHeight: false
−
WTF: Math.random,
+
−
inverted: function(p) {
+
−
return 1-p;
+
−
}
+
−
}
+
 
});
 
});
 
</script>
 
</script>

Revision as of 15:40, 19 October 2016

ShanghaiTech University