Difference between revisions of "Team:ZJU-China"

 
(551 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<!DOCTYPE html>
+
{{ZJU-China}}
<html>
+
<html lang="en">
 
<head>
 
<head>
<meta charset="utf-8" />
+
<style type="text/css">
<title></title>
+
 
<link rel="stylesheet" href="css/style.css" />
+
 
<link rel="stylesheet" href="css/bootstrap.min.css" />
+
 
 +
</style>
 +
<meta charset="{CHARSET}">
 +
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Team:ZJU-China/bootstrapCSS&action=raw&ctype=text/css" />
 +
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Team:ZJU-China/pageCSS&action=raw&ctype=text/css" />
 +
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Team:ZJU-China/sponsorCSS&action=raw&ctype=text/css" />
 +
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Team:ZJU-China/bootstrapJS&action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Team:ZJU-China/jqueryJS&action=raw&ctype=text/javascript"></script>
 +
<title>Improve Part</title>
 +
<link href="css/font-awesome.min.css" rel="stylesheet">
 +
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Team:ZJU-China/bootsnavCSS&action=raw&ctype=text/css" />
  
<link rel="stylesheet" href="css/bootstrap2.min.css">
 
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
 
<link rel="stylesheet" href="css/font-awesome.min.css">
 
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
 
<link rel="stylesheet" type="text/css" href="dist/jquery.vm-carousel.css">
 
<script src="js/modernizr.js"></script>
 
 
<style type="text/css">
 
<style type="text/css">
 +
@font-face {
 +
font-family: brushmagic;
 +
src: url(https://static.igem.org/mediawiki/2018/2/2e/T--ZJU-China--Brushmagic.ttf) format('truetype');
 +
}
 +
.address img
 +
{
 +
position:absolute;
 +
left:0;
 +
bottom:-15%;
 +
width:100% !important;
 +
}
 +
.kite
 +
{
 +
z-index: 99;
 +
position:absolute;
 +
animation:myfirst 5s;
 +
-moz-animation:myfirst 5s; /* Firefox */
 +
-webkit-animation:myfirst 5s; /* Safari and Chrome */
 +
-o-animation:myfirst 5s; /* Opera */
 +
animation-iteration-count: infinite;
 +
width:33%;
 +
height: 5%;
 +
}
 +
 +
@keyframes myfirst
 +
{
 +
0%  {left:9.5%; top:4.2%;}
 +
25%  {left:10%; top:4.3%;}
 +
50%  {left:10.5%; top:4.4%;}
 +
75%  {left:10%; top:4.3%;}
 +
100% {left:9.5%; top:4.2%;}
 +
}
 +
 +
@-moz-keyframes myfirst /* Firefox */
 +
{
 +
0%  {left:9.5%; top:4.2%;}
 +
25%  {left:10%; top:4.3%;}
 +
50%  {left:10.5%; top:4.4%;}
 +
75%  {left:10%; top:4.3%;}
 +
100% {left:9.5%; top:4.2%;}
 +
}
 +
 +
@-webkit-keyframes myfirst /* Safari and Chrome */
 +
{
 +
0%  {left:9.5%; top:4.2%;}
 +
25%  {left:10%; top:4.3%;}
 +
50%  {left:10.5%; top:4.4%;}
 +
75%  {left:10%; top:4.3%;}
 +
100% {left:9.5%; top:4.2%;}
 +
}
 +
 +
@-o-keyframes myfirst /* Opera */
 +
{
 +
0%  {left:9.5%; top:4.2%;}
 +
25%  {left:10%; top:4.3%;}
 +
50%  {left:10.5%; top:4.4%;}
 +
75%  {left:10%; top:4.3%;}
 +
100% {left:9.5%; top:4.2%;}
 +
}
 +
.high1 p
 +
{
 +
position:relative;
 +
margin-left:52%;
 +
margin-top:279%;
 +
font-size:4em !important;
 +
font-family: brushmagic, sans-serif !important;
 +
font-family: brushmagic !important;
 +
font-weight: bold;
 +
color:#d4c9af !important;
 +
z-index:99;
 +
}
 +
.high1 a
 +
{
 +
font-size:1em !important;
 +
font-family: brushmagic, sans-serif !important;
 +
font-family: brushmagic !important;
 +
font-weight: bold;
 +
color:#d4c9af !important;
 +
z-index:99;
 +
text-decoration: underline !important;
 +
}
 +
.high2 p
 +
{
 +
position:relative;
 +
margin-left:13%;
 +
margin-top:24%;
 +
font-size:4em !important;
 +
font-family: brushmagic, sans-serif !important;
 +
font-weight: bold;
 +
color:#c0c6d4 !important;
 +
z-index:99;
 +
}
 +
.high2 a
 +
{
 +
font-size:1em !important;
 +
font-family: brushmagic, sans-serif !important;
 +
font-weight: bold;
 +
color:#c0c6d4 !important;
 +
z-index:99;
 +
text-decoration: underline !important;
 +
}
 +
.high3 p
 +
{
 +
position:relative;
 +
margin-left:57%;
 +
margin-top:71%;
 +
font-size:4em !important;
 +
font-family: brushmagic, sans-serif !important;
 +
font-weight: bold;
 +
color:#b3c0b5 !important;
 +
z-index:99;
 +
}
 +
.high3 a
 +
{
 +
font-size:1em !important;
 +
font-family: brushmagic, sans-serif !important;
 +
font-weight: bold;
 +
color:#b3c0b5 !important;
 +
z-index:99;
 +
text-decoration: underline !important;
 +
}
 +
.high4 p
 +
{
 +
position:relative;
 +
margin-left:17%;
 +
margin-top:30%;
 +
font-size:4em !important;
 +
font-family: brushmagic, sans-serif !important;
 +
font-weight: bold;
 +
color:#cfb6b2 !important;
 +
z-index:99;
 +
}
 +
.high4 a
 +
{
 +
font-size:1em !important;
 +
font-family: brushmagic, sans-serif !important;
 +
font-weight: bold;
 +
color:#cfb6b2 !important;
 +
z-index:99;
 +
text-decoration: underline !important;
 +
}
 +
.a2
 +
{
 +
  position:absolute;
 +
  top:0 !important;
 +
  left:0;
 +
  width:100% ;
 +
  height: auto;
 +
z-index:0;
 +
}
 +
.sponsors {
 +
width: 60% !important;
 +
/*float: center !important;*/
 +
position: absolute;
 +
left:20% !important;
 +
/*top:171% !important;*/
 +
bottom:-13% !important;
 +
z-index:10;
 +
}
 +
.sponsors > img
 +
{
 +
margin-top:0 !important;
 +
margin-bottom:5% !important;
 +
}
 +
 +
.nav > li > a, .dropdown-toggle, .dropdown-menu > li > a {
 +
font-family: 'Julius Sans One', sans-serif !important;
 +
}
 +
td, th {
 +
font-size: .8em !important
 +
}
 +
.dropdown-menu > li > a {
 +
font-size: .5em !important;
 +
}
 +
 +
.igem_content_wrapper {
 +
    width: 100% !important;
 +
}
 +
 +
.igem_2018_team_content {
 +
width: 100% !important;
 +
}
 +
 +
.igem_2018_team_menu.displaying_menu {
 +
    display: none !important;
 +
}
 +
 +
.firstHeading {
 +
  display: none !important;
 +
}
 +
 +
.title {
 +
  display: none !important;
 +
}
 +
 +
#mw-content-text > p {
 +
display: none !important;
 +
}
 +
 +
#HQ_page {
 +
    width:  100% !important;
 +
}
 +
 +
.firstHeading {
 +
  display: none !important;
 +
}
 +
 +
html, body, .globalWrapper {
 +
    width: 100% !important;
 +
}
 +
 +
.tl {
 +
    font-size: 5.5em !important;
 +
}
 +
.navbar-brand{
 +
padding: 29px 15px;
 +
}
 +
nav.navbar.bootsnav{
 +
border: none;
 +
margin-bottom: 150px;
 +
}
 +
.navbar-nav{
 +
float: left;
 +
}
 +
nav.navbar.bootsnav ul.nav > li > a{
 +
color: #828687;
 +
                text-transform: uppercase;
 +
                font-size: .5em !important;
 +
/*****/ padding: 30px;
 +
}
 +
nav.navbar.bootsnav ul.nav > li:hover{
 +
background: white;
 +
}
 +
.nav > li:after{
 +
content: "";
 +
width: 0;
 +
height: 5px;
 +
background: #494e6b;
 +
position: absolute;
 +
bottom: 0;
 +
left: 0;
 +
transition: all 0.5s ease 0s;
 +
}
 
 
  .vmc-centered{ padding: 10px 0; }
+
.nav > .logo:after {
  .vmc-centered img { transition: all 0.3s ease; }
+
background: transparent;
  .vmc-centered .vmc_active img { transform: scale(1.2); }
+
}
</style>
+
.nav > .logo:hover {
 +
background-image: url(https://static.igem.org/mediawiki/2018/b/b0/T--ZJU-China--teamlogo.png) !important;
 +
background: white;
 +
background-size: 100%;
 +
-webkit-background-size: 100%;
 +
}
 +
.logo {
 +
width: 100px !important;
 +
height: 78px;
 +
margin-right: 30px;
 +
background: white;
 +
}
 +
.logo > a{
 +
background: url(https://static.igem.org/mediawiki/2018/b/b0/T--ZJU-China--teamlogo.png) no-repeat;
 +
transform: rotate(45deg);
 +
background-color: white !important;
 +
width: 100px !important;
 +
height: 100px;
 +
background-size: 100%;
 +
-webkit-background-size: 100%;
 +
/*border: #000000 solid 1px;*/
 +
box-shadow: 0 0 10px 3px black;
 +
-webkit-box-shadow: 0 0 10px 3px black;
 +
margin-top: 10px;
 +
margin-left: 10px;
 +
border-radius: 20%;
 +
}
 +
 +
.nav > li:hover:after{
 +
width: 100%;
 +
}
 +
nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after{
 +
content: "+";
 +
font-family: 'FontAwesome';
 +
font-size: 16px;
 +
font-weight: 500;
 +
position: absolute;
 +
top: 31.6%;
 +
right: 10%;
 +
transition: all 0.4s ease 0s;
 +
}
 +
nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{
 +
content: "^";
 +
                font-family: 'FontAwesome';
 +
transform: rotate(180deg);
 +
}
 +
.dropdown-menu.multi-dropdown{
 +
position: absolute;
 +
left: -100% !important;
 +
}
 +
        .dropdown-menu{
 +
                position: absolute;
 +
left:-10%;
 +
        }
 +
nav.navbar.bootsnav li.dropdown ul.dropdown-menu{
 +
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 +
border: none;
  
 +
}
 +
      @media only screen and (max-width:1030px){
 +
.high1 p
 +
{
 +
position:relative;
 +
/*top:6000%;
 +
left:0;*/
 +
margin-left:52%;
 +
margin-top:280%;
 +
font-size:1em !important;
 +
font-family: brushmagic, sans-serif !important;
 +
font-weight: bold;
 +
color:#d4c9af !important;
 +
z-index:99;
 +
}
 +
.high1 a
 +
{
 +
font-size:1em !important;
 +
font-family: brushmagic, sans-serif !important;
 +
font-weight: bold;
 +
color:#d4c9af !important;
 +
z-index:99;
 +
text-decoration: underline !important;
 +
}
 +
.high2 p
 +
{
 +
position:relative;
 +
margin-left:13%;
 +
margin-top:32%;
 +
font-size:1em !important;
 +
font-family: brushmagic, sans-serif !important;
 +
font-weight: bold;
 +
color:#c0c6d4 !important;
 +
z-index:99;
 +
}
 +
.high2 a
 +
{
 +
font-size:1em !important;
 +
font-family: brushmagic, sans-serif !important;
 +
font-weight: bold;
 +
color:#c0c6d4 !important;
 +
z-index:99;
 +
text-decoration: underline !important;
 +
}
 +
.high3 p
 +
{
 +
position:relative;
 +
margin-left:57%;
 +
margin-top:79%;
 +
font-size:1em !important;
 +
font-family: brushmagic, sans-serif !important;
 +
font-weight: bold;
 +
color:#b3c0b5 !important;
 +
z-index:99;
 +
}
 +
.high3 a
 +
{
 +
font-size:1em !important;
 +
font-family: brushmagic, sans-serif !important;
 +
font-weight: bold;
 +
color:#b3c0b5 !important;
 +
z-index:99;
 +
text-decoration: underline !important;
 +
}
 +
.high4 p
 +
{
 +
position:relative;
 +
margin-left:17%;
 +
margin-top:35%;
 +
font-size:1em !important;
 +
font-family: brushmagic, sans-serif !important;
 +
font-weight: bold;
 +
color:#cfb6b2 !important;
 +
z-index:99;
 +
}
 +
.high4 a
 +
{
 +
font-size:1em !important;
 +
font-family: brushmagic, sans-serif !important;
 +
font-weight: bold;
 +
color:#cfb6b2 !important;
 +
z-index:99;
 +
text-decoration: underline !important;
 +
}
 +
}
 +
@media only screen and (max-width:700px){
 +
.high1 p
 +
{
 +
position:relative;
 +
/*top:6000%;
 +
left:0;*/
 +
margin-left:52%;
 +
margin-top:270%;
 +
font-size:.7em !important;
 +
font-family: brushmagic, sans-serif !important;
 +
font-weight: bold;
 +
color:#d4c9af !important;
 +
z-index:99;
 +
}
 +
.high1 a
 +
{
 +
font-size:1em !important;
 +
font-family: brushmagic, sans-serif !important;
 +
font-weight: bold;
 +
color:#d4c9af !important;
 +
z-index:99;
 +
text-decoration: underline !important;
 +
}
 +
.high2 p
 +
{
 +
position:relative;
 +
margin-left:14%;
 +
margin-top:30%;
 +
font-size:.7em !important;
 +
font-family: brushmagic, sans-serif !important;
 +
font-weight: bold;
 +
color:#c0c6d4 !important;
 +
z-index:99;
 +
}
 +
.high2 a
 +
{
 +
font-size:1em !important;
 +
font-family: brushmagic, sans-serif !important;
 +
font-weight: bold;
 +
color:#c0c6d4 !important;
 +
z-index:99;
 +
text-decoration: underline !important;
 +
}
 +
.high3 p
 +
{
 +
position:relative;
 +
margin-left:57%;
 +
margin-top:77%;
 +
font-size:.7em !important;
 +
font-family: brushmagic, sans-serif !important;
 +
font-weight: bold;
 +
color:#b3c0b5 !important;
 +
z-index:99;
 +
}
 +
.high3 a
 +
{
 +
font-size:1em !important;
 +
font-family: brushmagic, sans-serif !important;
 +
font-weight: bold;
 +
color:#b3c0b5 !important;
 +
z-index:99;
 +
text-decoration: underline !important;
 +
}
 +
.high4 p
 +
{
 +
position:relative;
 +
margin-left:17%;
 +
margin-top:33%;
 +
font-size:.7em !important;
 +
font-family: brushmagic, sans-serif !important;
 +
font-weight: bold;
 +
color:#cfb6b2 !important;
 +
z-index:99;
 +
}
 +
.high4 a
 +
{
 +
font-size:1em !important;
 +
font-family: brushmagic, sans-serif !important;
 +
font-weight: bold;
 +
color:#cfb6b2 !important;
 +
z-index:99;
 +
text-decoration: underline !important;
 +
}
 +
}
 +
@media only screen and (max-width:990px){
 +
nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after,
 +
nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{ content: " "; }
 +
.dropdown-menu.multi-dropdown{ left: 0 !important; }
 +
nav.navbar.bootsnav ul.nav > li:hover{ background: transparent; }
 +
nav.navbar.bootsnav ul.nav > li > a{ margin: 0; }
 +
}
 +
.container {
 +
box-shadow: 0 0 10px 3px black;
 +
-webkit-box-shadow: 0 0 10px 3px black;
 +
}
 +
.navbar-nav {
 +
float: right;
 +
}
 +
.logo {
 +
position: absolute;
 +
left: -7%;
 +
}
 +
 +
@media only screen and (min-width: 1024px) {
 +
/*改变滚动条样式*/
 +
 +
::-webkit-scrollbar
 +
{
 +
    width: 12px;
 +
    height: 16px;
 +
    background-color: gray;
 +
}
 +
 +
::-webkit-scrollbar-track
 +
{
 +
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 +
    border-radius: 10px;
 +
    background-color: whitesmoke;
 +
}
 +
 
 +
/*定义滑块 内阴影+圆角*/
 +
::-webkit-scrollbar-thumb
 +
{
 +
    border-radius: 10px;
 +
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 +
    background-color: rgba(0, 0, 0, 0.6);
 +
}
 +
 +
::-webkit-scrollbar-thumb:hover
 +
{
 +
border-radius: 5px;
 +
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
 +
background: rgba(0,0,0,0.4);
 +
}
 +
}
 +
 +
 +
 +
</style>
 
</head>
 
</head>
<body><script src="/demos/googlegg.js"></script>
+
<body>
<!--navigator-->
+
<div class="nav">
+
<div class="nav_label center">
+
<div class="navImg" style="background-image: url(img/bio.png);" img='url(img/bio.png)' imgHover='url(img/bio_white.png)'></div>
+
<p class="navP">LOGO</p>
+
</div>
+
<div class="nav_label center">
+
<div class="navImg" style="background-image: url(img/wetlab.png);" img='url(img/wetlab.png)' imgHover='url(img/wetlab_white.png)'></div>
+
<p class="navP">Wet Lab</p>
+
<div class="links center">
+
<ul>
+
<li>a</li>
+
<li>a</li>
+
<li>a</li>
+
<li>a</li>
+
</ul>
+
</div>
+
</div>
+
<div class="nav_label center">
+
<div class="navImg" style="background-image: url(img/HP.png);" img='url(img/HP.png)' imgHover='url(img/HP_white.png)'></div>
+
<p class="navP">HP</p>
+
</div>
+
<div class="nav_label center">
+
<div class="navImg" style="background-image: url(img/HP.png);" img='url(img/HP.png)' imgHover='url(img/HP_white.png)'></div>
+
<p class="navP">HP</p>
+
</div>
+
</div>
+
<!--head picture-->
+
    <img class="head_picture" src="img/ZJUChina_background.jpeg">
+
    <!--contents-->
+
  <div class = "contents">
+
    <h1> What we do</h1>
+
    <p>This year, we are developing a project which utilizes three orthogonal connection systems to detect enzyme-catalyzed reaction products qualitatively and quantitatively. </p>
+
    <p>Although enzymes can be used in purified form, in crude cell lysates, or encased in synthetic protective materials, an approach that optimally combines the criteria of high surface area, enhanced enzyme stability, rapid mass transport, and modularity remains elusive.  Recently, a brand-new protein immobilization platform has been explored. The platform modifies curli nanofibers, the amyloid fiber component of E. coli biofilms, with a peptide tag fused to the amyloidogenic protein CsgA.</p>
+
    <p>Meanwhile, a genetically programmable, irreversible immobilization method—the spontaneous covalent bond formation between 13-amino acid SpyTag and 15kDa SpyCatcher has been demonstrated.  CsgA with a fused SpyTag and a certain enzyme with a SpyCatcher fusion are proved to form site-specific attachment between tags and catchers, even in a complex mixture. </p>
+
    <img class="picture1" src="img/ZJUChina_spy.png">
+
    <p>In our approach, we are going to transform PHL628-△csgA cells with pBbE1a plasmids expressing CsgA-SpyTag to cover cells with curli fibers as the base. Curli fibers will connect adjacent cells to form a biofilm(Fig.1). Then, since there are three orthogonal systems, SpyTag/SpyCatcher2, SnoopTag/SnoopCatcher  and SdyTag/SdyCatcher , we are also going to synthesizing a string of three enzymes rather than one single SpyCatcher-Enzyme. The method is specifically illustrated as follows(Fig.2).</p>
+
    <img class="picture2" src="img/ZJUChina_figure2.png">
+
   
+
    <h1> Where the value lies</h1>
+
    <p>One advantage is that it promises to evolve into a cell-free system with high fidelity. It is reported the biofilm displaying the same level of activity after 12 days with a slight decrease after 28 days, which indicates that the biofilm and its entangled curli fibers are stable enough.Thus, a reasonable assumption is that even if cells die, curli with SpyTag and the string of enzymes still works. In view of this advantage, the assembled system has the potential to be widely practiced in industry.  </p>
+
    <p>Another advantage is that the string has a myriad of multi-enzyme systems by assigning specific functions to each enzyme at different sites. For example, a logic network composed of three enzymes, alcohol dehydrogenase (ADH, from Saccharomyces cerevisiae), glucose dehydrogenase (GDH, from Pseudomonas) and glucose oxidase (GOx, from Aspergillus niger) operating in concert as four concatenated logic gates(AND/OR) was designed to process 4 different chemical input signals (NAD, acetaldehyde, glucose and oxygen) (Fig.3).  The conceived functions of the three enzymes will be discussed later. There is no exaggeration that microelements, such as domains and subunits, provide a possibility to achieve multiple functions.</p>
+
  <img class="picture3" src="img/ZJUChina_figure3.png">
+
  
  <h1> How hardware assists</h1>
+
<div class="demo" style="width: 100%; padding: 0em 0; position: fixed; margin: 0; left:0; top: 0; z-index: 999; font-size: 1em !important">
  <h2> Microfluidic devices</h2>
+
<div class="container">
    <p>It is acknowledged that culture of cells using various microfluidic devices is becoming more common within experimental cell biology. Based on mature technology of microfluidic cell culture, we attempt to control over experimental conditions precisely via custom designed chip architectures, parallelization, automation and direct coupling to miniaturized downstream analysis platforms. This is how purified products, the strings of three enzymes, are produced. </p>
+
<div class="row">
    <h2> 3D printing</h2>
+
<div class="col-md-12">
    <p>A method using ink-jet printing for constructing multi-enzyme systems was proposed. Considering the vaporization of liquids on ink-jet printers while printing, which may lead to protein denaturation and enzyme inactivation, we decided to transform a 3D printer with similar principles. The capability of 3D printer in creating a precise two-dimensional distribution of enzymes indicates a possibility of spatially controlling enzymatic reactions. </p>
+
<nav class="navbar navbar-default navbar-mobile bootsnav">
    <h2> Biochip</h2>
+
<div class="navbar-header">
    <p>As for the application of our model, it is diversified and remains infinite possibilities. We have already cited one application called enzyme-based logic systems above. Moreover, biochips are preferred. The original intention is to monitor enzyme-catalyzed reaction in real-time with sensitive currents which is generated by the enzymatic biofuel cells (EBFCs) and reflects the product concentration and other indicators. </p>
+
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">menu
    <p>Adopting nanostructured materials for biofuel cell construction has been extensively suggested as an effective and promising strategy to achieve high energy production; nanotubes can directly connect the enzyme active centers and transport the produced electrons to the electrode along the tubular network. The bacteria growing on the nanotubes enables enzymes on the curli-connected string to close contact nanotubes, which acts as an anode. In addition, metal nanoparticles are similar in size to some enzymes, thus decreasing the electron transfer distance of the bioelectrodes. So we will interface curli fibers with gold nanoparticles(AuNPs) as well to further improve performance of EBFCs(Fig.4).  Laccases with electrodes yields the cathode units of EBFCs.</p>
+
<i class="fa fa-bars"></i>
  <img class="picture4" src="img/ZJUChina_figure4.png">
+
</button>
</div>
+
</div>
 +
<div class="collapse navbar-collapse" id="navbar-menu">
 +
<!--<div style="background: url(img/logo.png) no-repeat; height: 100px; width: 100px; background-size: 100% ; position: relative; margin: 0;
 +
padding: 0; border: #000000 solid 1px;"></div>-->
 +
<ul class="nav navbar-nav" data-in="fadeInDown" data-out="fadeOutUp">
 +
<li class="logo"><a href="https://2018.igem.org/Team:ZJU-China">
 +
<!--<img src="url(img/logo.png)" />-->
 +
</a></li>
 +
<li class="dropdown">
 +
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Project</a>
 +
<ul class="dropdown-menu">
 +
<li><a href="https://2018.igem.org/Team:ZJU-China/Demonstrate">Demonstrate</a></li>
 +
<li><a href="https://2018.igem.org/Team:ZJU-China/EnzymeScaffold">Enzyme Scaffold</a></li>
 +
<li><a href="https://2018.igem.org/Team:ZJU-China/LogicGate">Logic Gate</a></li>
 +
<li><a href="https://2018.igem.org/Team:ZJU-China/Matrix">Matrix</a></li>
 +
<li><a href="https://2018.igem.org/Team:ZJU-China/Electrodes">Electrodes</a></li>
  
  <img class="blank" src="img/ZJUChina_blank.jpg">
 
   
 
  
<!--Sponsors-->
+
<!--div class="sponsors">
+
</ul>
+
</li>
<div id="carousel-example-generic" class="carousel slide one_slide" data-ride="carousel" data-pause="">
+
<li class="dropdown">
      <div class="carousel-inner center slide_img" >
+
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Applied Design</a>
        <div class="item active "><img src="img/ZJUChina_home_undergraduate.png" /></div>
+
<ul class="dropdown-menu">
    <div class="item "><img src="img/ZJUChina_home_cls.png" /></div>
+
<li><a href="https://2018.igem.org/Team:ZJU-China/Applied_Design">Product Design</a></li>
</div>
+
<li><a href="https://2018.igem.org/Team:ZJU-China/Hardware">Hardware</a></li>
    </div>
+
<div id="carousel-example-generic" class="carousel slide one_slide" data-ride="carousel" data-pause="">
+
      <div class="carousel-inner center slide_img" style="text-align:center">
+
        <div class="item active "><img src="img/ZJUChina_home_biolab.png" /></div>
+
        <div class="item "><img src="img/ZJUChina_home_ckc.png" /></div>
+
        </div>
+
    </div>
+
<div id="carousel-example-generic" class="carousel slide one_slide" data-ride="carousel" data-pause="">
+
      <div class="carousel-inner center slide_img" style="text-align:center">
+
        <div class="item active "><img src="img/ZJUChina_home_foundation.png" /></div>
+
        <div class="item "><img src="img/ZJUChina_home_cs.png" /></div>
+
        </div>
+
    </div>
+
<div id="carousel-example-generic" class="carousel slide one_slide" data-ride="carousel" data-pause="">
+
      <div class="carousel-inner center slide_img" style="text-align:center">
+
        <div class="item active "><img src="img/ZJUChina_home_science.png" /></div>
+
        <div class="item "><img src="img/ZJUChina_home_medicine.png" /></div>
+
        </div>
+
    </div>
+
   
+
<div class="addr">
+
<p>Copyright © 2018 ZJU-IGEM | <a href="www.zju.edu.cn">Zhejiang University</a> |</p>
+
</div>
+
+
</div-->
+
<div class="container">
+
  
  <ul class="vmcarousel-centered vmc-centered">
 
  <li><img src="img/ZJUChina_home_cls.png" alt="" width="200"></li>
 
  <li><img src="img/ZJUChina_home_undergraduate.png" alt="" width="200"></li>
 
  <li><img src="img/ZJUChina_home_ckc.png" alt="" width="200"></li>
 
  <li><img src="img/ZJUChina_home_biolab.png" alt="" width="200"></li>
 
  <li><img src="img/ZJUChina_home_medicine.png" alt="" width="200"></li>
 
  <li><img src="img/ZJUChina_home_cs.png" alt="" width="200"></li>
 
  <li><img src="img/ZJUChina_home_foundation.png" alt="" width="200"></li>
 
  <li><img src="img/ZJUChina_home_science.png" alt="" width="200"></li>
 
  </ul>
 
  <div class="addr">
 
<p>Copyright © 2018 ZJU-IGEM | <a href="www.zju.edu.cn">Zhejiang University</a> |</p>
 
</div>
 
  
 +
 +
</ul>
 +
</li>
 +
<li><a href="https://2018.igem.org/Team:ZJU-China/Model">Model</a></li>
 +
<li class="dropdown" style="min-width: 250px;">
 +
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Human Practice</a>
 +
<ul class="dropdown-menu">
 +
 +
<li><a href="https://2018.igem.org/Team:ZJU-China/Human_Practices" class="dropdown-toggle" data-toggle="dropdown" >Silver&Gold</a></li>
 +
 +
 +
 +
<li><a href="https://2018.igem.org/Team:ZJU-China/Public_Engagement" class="dropdown-toggle" data-toggle="dropdown" >Public Engagement</a>
 +
 +
</li>
 +
 +
<li><a href="https://2018.igem.org/Team:ZJU-China/Collaborations">Collaborations</a></li>
 +
</ul>
 +
</li>
 +
<li class="dropdown">
  
 
+
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Parts</a>
 +
<ul class="dropdown-menu">
 +
<li><a href="https://2018.igem.org/Team:ZJU-China/AllParts">All parts</a></li>
 +
<li><a href="https://2018.igem.org/Team:ZJU-China/BasicPart">Basic Parts</a></li>
 +
<li><a href="https://2018.igem.org/Team:ZJU-China/CompositePart
 +
">Composite Parts</a></li>
 +
<li><a href="https://2018.igem.org/Team:ZJU-China/Collection">Collection</a></li>
 +
<li><a href="https://2018.igem.org/Team:ZJU-China/Improve">Improved Parts</a></li>
 +
</ul>
 +
</li>
 +
 +
 +
<li class="dropdown">
 +
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Team</a>
 +
<ul class="dropdown-menu">
 +
<li class="dropdown">
  
 
+
<li><a href="https://2018.igem.org/Team:ZJU-China/Team">Members</a></li>
 +
<li><a href="https://2018.igem.org/Team:ZJU-China/Attributions">Attributions</a></li>
 +
 +
<li class="dropdown">
 +
<a href="#" class="dropdown-toggle" data-toggle="dropdown" >Notebook</a>
 +
<ul class="dropdown-menu">
 +
<li><a href="https://2018.igem.org/Team:ZJU-China/Notebook">Lab book</a></li>
 +
<li><a href="https://2018.igem.org/Team:ZJU-China/Protocols">Protocols</a></li>
 +
</ul>
 +
</li>
 +
</ul>
 +
</li>
 +
  
 +
 +
 +
 +
 +
<li><a href="https://2018.igem.org/Team:ZJU-China/InterLab">InterLab</a></li>
 +
<li><a href="https://2018.igem.org/Team:ZJU-China/Safety" class="dropdown-toggle" data-toggle="dropdown">Safety</a></li>
 +
 +
 +
 +
<!--<li class="dropdown">
 +
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>
 +
<ul class="dropdown-menu">
 +
<li><a href="#">Custom Menu</a></li>
 +
<li><a href="#">Custom Menu</a></li>
 +
<li class="dropdown">
 +
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>
 +
<ul class="dropdown-menu multi-dropdown">
 +
<li><a href="#">Custom Menu</a></li>
 +
<li><a href="#">Custom Menu</a></li>
 +
<li><a href="#">Custom Menu</a></li>
 +
<li><a href="#">Custom Menu</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="#">Custom Menu</a></li>
 +
</ul>
 +
</li>-->
 +
</ul>
 +
</li>
 +
 +
</ul>
 +
</div>
 +
</nav>
 +
</div>
 +
</div>
 +
</div>
 
</div>
 
</div>
 +
 +
 +
 +
<!--<div class="topImg" style="background-image: url(img/improve_part.png) ;"></div>-->
 +
 +
 +
<!--<div class="element1">
 +
 +
</div>-->
 
 
<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
+
<script type="text/javascript" src="js/template.js" ></script>
+
<div class="main">
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
+
<img class="kite" src="https://static.igem.org/mediawiki/2018/6/67/T--ZJU-China--kite.gif">
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
+
<video controls="controls" src="https://static.igem.org/mediawiki/2018/f/f0/T--ZJU-China--mainv1.mp4"  width="35%" height="auto" style="position:absolute; top:30%;margin-left:53%; border:0px solid #000000; z-index:800;">
<script src="js/bootstrap.min.js"></script>
+
  your browser don't support html5.
<script src="dist/jquery.vm-carousel.js"></script>
+
  </video>
<script type="text/javascript">
+
                                <img class="a2" src="https://static.igem.org/mediawiki/2018/4/4a/T--ZJU-China--F2.png">
jQuery(function($){
+
<div class="high1"><p class="high1">Highlight1: <a style="line-height:110%" href="https://2018.igem.org/Team:ZJU-China/Matrix" class="high1">Matrix</a></p>
  $('.vmcarousel-centered').vmcarousel({
+
                                                 
centered: true,
+
                                </div>
start_item: 2,
+
<div class="high2"><p class="high2">Highlight2: <a style="line-height:110%" href="https://2018.igem.org/Team:ZJU-China/EnzymeScaffold" class="high1">Protein Scaffold</a></p>
autoplay: false,
+
                                                 
infinite: false
+
                                </div>
  });
+
<div class="high3"><p class="high3">Products: <a style="line-height:110%" href="https://2018.igem.org/Team:ZJU-China/Electrodes" class="high1">Electrodes</a></p>
 +
                                                 
 +
                                </div>
 +
<div class="high4"><p class="high4"><a style="line-height:110%" href="https://2018.igem.org/Team:ZJU-China/Human_Practices" class="high1">Human Practice</a></p>
 +
                                                 
 +
                                </div>
  
  $('.vmcarousel-centered-infitine').vmcarousel({
 
centered: true,
 
start_item: 1,
 
autoplay: false,
 
infinite: true
 
  });
 
  
  $('.vmcarousel-normal').vmcarousel({
+
centered: false,
+
                        </div>
start_item: 0,
+
autoplay: false,
+
infinite: false
+
  });
+
  });
+
</script>
+
  
 +
 +
<!---->
 +
 +
<!---->
 +
 +
<div class="sponsors">
 +
<!--p class="sponsor_ttl">Our Sponsors</p-->
 +
<img src="https://static.igem.org/mediawiki/2018/6/68/T--ZJU-China--home--biolab.png" />
 +
<img src="https://static.igem.org/mediawiki/2018/f/f1/T--ZJU-China--genscript.png" />
 +
<img src="https://static.igem.org/mediawiki/2018/b/b2/T--ZJU-China--home--undergraduate.png" />
 +
<img src="https://static.igem.org/mediawiki/2018/5/5f/T--ZJU-China--foundation.png" />
 +
<img src="https://static.igem.org/mediawiki/2018/7/7f/T--ZJU-China--hospital.png" />
 +
</div>
 +
 +
<div class="address">
 +
<img src="https://static.igem.org/mediawiki/2018/c/c9/T--ZJU-China--FirstPageBottom.png" />
 +
</div>
 +
<!--<hr />-->
 +
<script type="text/javascript">
 +
var dom = document.getElementById("container");
 +
var myChart = echarts.init(dom);
 +
var app = {};
 +
option = null;
 +
var dataAxis = ['', '', '', '', ''];
 +
var data = [2993, 62815.05, 53126.97, 22837.41, 41658.86];
 +
var yMax = 500;
 +
var dataShadow = [];
  
 +
for (var i = 0; i < data.length; i++) {
 +
    dataShadow.push(yMax);
 +
}
 +
 +
option = {
 +
    title: {
 +
        text: '            ',
 +
        textStyle: {
 +
            color: '#999999',
 +
            fontFamily: 'crimson',
 +
            fontWeight: 'normal',
 +
            align: 'center',
 +
        }
 +
//      subtext: 'yAxis: Absolute fluorescence unit \ OD600',
 +
       
 +
    },
 +
    xAxis: {
 +
    type: 'category',
 +
        data: ['BBa_R0085(wild type)', 'BBa_K2721000', 'BBa_K2721001', 'BBa_K2721002', 'BBa_K2721003'],
 +
    axisLabel: {
 +
            inside: false,
 +
            textStyle: {
 +
                color: '#999999'
 +
            }
 +
        },
 +
        axisTick: {
 +
            show: false
 +
        },
 +
        axisLine: {
 +
            show: false
 +
        },
 +
        z: 10
 +
    },
 +
    yAxis: {
 +
    name: 'Absolute fluorescence unit \ OD600',
 +
    nameRotate: 90,
 +
    nameGap: -300,
 +
   
 +
//  offset: 'start',
 +
        axisLine: {
 +
            show: false
 +
        },
 +
        axisTick: {
 +
            show: false
 +
        },
 +
        axisLabel: {
 +
            textStyle: {
 +
                color: '#999'
 +
            }
 +
        }
 +
    },
 +
    dataZoom: [
 +
        {
 +
            type: 'inside'
 +
        }
 +
    ],
 +
    series: [
 +
        { // For shadow
 +
            type: 'bar',
 +
            itemStyle: {
 +
                normal: {color: 'rgba(0,0,0,0.05)'}
 +
            },
 +
            barGap:'-100%',
 +
            barCategoryGap:'80%',
 +
            data: dataShadow,
 +
            animation: false
 +
        },
 +
        {
 +
            type: 'bar',
 +
            itemStyle: {
 +
                normal: {
 +
                    color: new echarts.graphic.LinearGradient(
 +
                        0, 0, 0, 1,
 +
                        [
 +
                            {offset: 0, color: 'steelblue'},
 +
                            {offset: 0.4, color: 'steelblue'},
 +
                            {offset: 1, color: 'steelblue'}
 +
                        ]
 +
                    )
 +
                },
 +
                emphasis: {
 +
                    color: new echarts.graphic.LinearGradient(
 +
                        0, 0, 0, 1,
 +
                        [
 +
                            {offset: 0, color: 'lightsteelblue'},
 +
                            {offset: 0.7, color: 'lightsteelblue'},
 +
                            {offset: 1, color: 'lightsteelblue'}
 +
                        ]
 +
                    )
 +
                }
 +
            },
 +
            data: data
 +
        }
 +
    ]
 +
};
 +
 +
// Enable data zoom when user click bar.
 +
//var zoomSize = 6;
 +
//myChart.on('click', function (params) {
 +
//  console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
 +
//  myChart.dispatchAction({
 +
//      type: 'dataZoom',
 +
//      startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
 +
//      endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
 +
//  });
 +
//});
 +
if (option && typeof option === "object") {
 +
    myChart.setOption(option, true);
 +
}
 +
      </script>
 +
        <!--<script type="text/javascript" src="js/bootsnav.js"></script>-->
 +
        <script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Team:ZJU-China/bootnavJS&action=raw&ctype=text/javascript"></script>
 +
        <script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Team:ZJU-China/pageJS&action=raw&ctype=text/javascript"></script>
 
</body>
 
</body>
 +
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Team:ZJU-China/pageCSS&action=raw&ctype=text/css" />
 +
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Team:ZJU-China/sponsorCSS&action=raw&ctype=text/css" />
 +
 
</html>
 
</html>

Latest revision as of 03:21, 18 October 2018

Improve Part

Highlight1: Matrix

Highlight2: Protein Scaffold

Products: Electrodes