Difference between revisions of "Team:Tsinghua"

Line 41: Line 41:
 
     <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/css/style.css&action=raw&ctype=text/css" >
 
     <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/css/style.css&action=raw&ctype=text/css" >
 
      
 
      
−
     <!-- <link href="assets/css/custom.css" rel="stylesheet"> -->
+
     <!-- <link href="assets/css/custom.css" rel="stylesheet"> </head> -->
 
     <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/css/custom.css&action=raw&ctype=text/css" >
 
     <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/css/custom.css&action=raw&ctype=text/css" >
−
    </head>
+
</head>  
−
    <body data-spy="scroll" data-target=".inner-link" data-offset="60">
+
<body data-spy="scroll" data-target=".inner-link" data-offset="60">
−
        <main>
+
    <main>
−
           
+
       
−
            <div class="loading" id="preloader">
+
        <div class="loading" id="preloader">
−
                <div class="h-100vh d-flex align-items-center justify-content-center background-white">
+
            <div class="h-100vh d-flex align-items-center justify-content-center background-white">
−
                    <div>                         
+
                <div>                         
−
                        <img src="https://static.igem.org/mediawiki/2019/1/15/T--Tsinghua--loading.gif" style="width:5%;  position:absolute; left: 46%; top: 43%">
+
                    <img src="https://static.igem.org/mediawiki/2019/1/15/T--Tsinghua--loading.gif" style="width:5%;  position:absolute; left: 46%; top: 43%">
−
                    </div>
+
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
            <div class="znav-container znav-transparent mt-4" id="znav-container">
+
        </div>
−
                <div class="container">
+
        <div class="znav-container znav-transparent mt-4" id="znav-container">
−
                   
+
            <div class="container">
−
                    <nav class="navbar navbar-expand-lg">
+
               
−
                        <a class="navbar-brand overflow-hidden pr-3 fs-3" href="https://2019.igem.org/Team:Tsinghua">iGEM
+
                <nav class="navbar navbar-expand-lg">
−
                            <span class="d-none d-lg-inline-block">Tsinghua</span>
+
                    <a class="navbar-brand overflow-hidden pr-3 fs-3" href="https://2019.igem.org/Team:Tsinghua">iGEM
−
                        </a>
+
                        <span class="d-none d-lg-inline-block">Tsinghua</span>
−
                        <!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+
                    </a>
−
                            <div class="hamburger hamburger--emphatic">
+
                    <!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
−
                                <div class="hamburger-box">
+
                        <div class="hamburger hamburger--emphatic">
−
                                    <div class="hamburger-inner"></div>
+
                            <div class="hamburger-box">
−
                                   
+
                                <div class="hamburger-inner"></div>
−
                                 </div>
+
                                  
 
                             </div>
 
                             </div>
−
                         </button> -->
+
                         </div>
−
                        <div class="collapse navbar-collapse" id="navbarNavDropdown">
+
                    </button> -->
−
                            <ul class="navbar-nav font-2 fs-1">
+
                    <div class="collapse navbar-collapse" id="navbarNavDropdown">
−
                                <li>
+
                        <ul class="navbar-nav font-2 fs-1">
−
                                    <a href="https://2019.igem.org/Team:Tsinghua"><span class="fa fa-home"></span> Home</a>
+
                            <li>
 +
                                <a href="https://2019.igem.org/Team:Tsinghua"><span class="fa fa-home"></span> Home</a>
 +
                               
 +
                            </li>
 +
                            <li>
 +
                                <a href="https://2019.igem.org/Team:Tsinghua/Team">Team</a>
 +
                            </li>
 +
                            <li>
 +
                                <a href="JavaScript:void(0)">Project</a>
 +
                                <ul class="dropdown fs-0">
 +
                                    <li>
 +
                                        <a href="https://2019.igem.org/Team:Tsinghua/Description">Description</a>
 +
                                    </li>
 +
                                    <li>
 +
                                        <a href="https://2019.igem.org/Team:Tsinghua/Experiments">Experiments</a>
 +
                                    </li>
 +
                                    <li>
 +
                                        <a href="https://2019.igem.org/Team:Tsinghua/Demonstrate">Results</a>
 +
                                    </li>
 +
                                    <li>
 +
                                        <a href="https://2019.igem.org/Team:Tsinghua/Notebook">Notebook</a>
 +
                                    </li>
 
                                      
 
                                      
−
                                </li>
+
                                     <li>
−
                                <li>
+
                                         <a href="https://2019.igem.org/Team:Tsinghua/Attributions">Attributions</a>
−
                                     <a href="https://2019.igem.org/Team:Tsinghua/Team">Team</a>
+
                                    </li>
−
                                </li>
+
                                </ul>
−
                                <li>
+
                            </li>
−
                                    <a href="JavaScript:void(0)">Project</a>
+
                            <li>
−
                                    <ul class="dropdown fs-0">
+
                                <a href="JavaScript:void(0)">Model</a>
−
                                         <li>
+
                                <ul class="dropdown fs-0">
−
                                            <a href="https://2019.igem.org/Team:Tsinghua/Description">Description</a>
+
                                    <li>
−
                                        </li>
+
                                        <a href="https://2019.igem.org/Team:Tsinghua/Model">Part I</a>
−
                                        <li>
+
                                    </li>
−
                                            <a href="https://2019.igem.org/Team:Tsinghua/Experiments">Experiments</a>
+
                                    <li>
−
                                        </li>
+
                                        <a href="Model2.html">Part II</a>
−
                                        <li>
+
                                    </li>
−
                                            <a href="https://2019.igem.org/Team:Tsinghua/Demonstrate">Results</a>
+
                                    <li>
−
                                        </li>
+
                                        <a href="Model3.html">Part III</a>
−
                                        <li>
+
                                    </li>
−
                                            <a href="https://2019.igem.org/Team:Tsinghua/Notebook">Notebook</a>
+
                                </ul>
−
                                        </li>
+
                            </li>
−
                                       
+
                            <li>
−
                                        <li>
+
                                <a href="JavaScript:void(0)">Parts</a>
−
                                            <a href="https://2019.igem.org/Team:Tsinghua/Attributions">Attributions</a>
+
                                <ul class="dropdown fs-0">
−
                                        </li>
+
                                    <li>
−
                                    </ul>
+
                                        <a href="Basic.html">Basic</a>
−
                                </li>
+
                                    </li>
−
                                <li>
+
                                    <li>
−
                                    <a href="JavaScript:void(0)">Model</a>
+
                                        <a href="Composite.html">Composite</a>
−
                                    <ul class="dropdown fs-0">
+
                                    </li>
−
                                        <li>
+
                                    <li>
−
                                            <a href="https://2019.igem.org/Team:Tsinghua/Model">Part I</a>
+
                                        <a href="Improve.html">Improve</a>
−
                                        </li>
+
                                    </li>
−
                                        <li>
+
                                    <li>
−
                                            <a href="Model2.html">Part II</a>
+
                                        <a href="Characterization.html">Characterization</a>
−
                                        </li>
+
                                     </li>
−
                                        <li>
+
                                 </ul>
−
                                            <a href="Model3.html">Part III</a>
+
                            </li>
−
                                        </li>
+
−
                                    </ul>
+
−
                                </li>
+
−
                                <li>
+
−
                                    <a href="JavaScript:void(0)">Parts</a>
+
−
                                    <ul class="dropdown fs-0">
+
−
                                        <li>
+
−
                                            <a href="Basic.html">Basic</a>
+
−
                                        </li>
+
−
                                        <li>
+
−
                                            <a href="Composite.html">Composite</a>
+
−
                                        </li>
+
−
                                        <li>
+
−
                                            <a href="Improve.html">Improve</a>
+
−
                                        </li>
+
−
                                        <li>
+
−
                                            <a href="Characterization.html">Characterization</a>
+
−
                                        </li>
+
−
                                     </ul>
+
−
                                </li>
+
−
                               
+
−
                                 <li>
+
−
                                    <a href="JavaScript:void(0)">Human Practices</a>
+
−
                                    <ul class="dropdown fs-0">
+
−
                                        <li>
+
−
                                            <a href="Human_Practices.html">Overview</a>
+
−
                                        </li>
+
−
                                        <li>
+
−
                                            <a href="General.html">General</a>
+
−
                                        </li>
+
−
                                        <li>
+
−
                                            <a href="Integrated.html">Integrated</a>
+
−
                                        </li>
+
−
                                        <li>
+
−
                                            <a href="Safety.html">Safety</a>
+
−
                                        </li>
+
−
                                        <li>
+
−
                                            <a href="Collaborations.html">Collaborations</a>
+
−
                                        </li>
+
−
                                    </ul>
+
−
                                </li>
+
−
                            </ul>
+
 
                              
 
                              
−
                         </div>
+
                            <li>
 +
                                <a href="JavaScript:void(0)">Human Practices</a>
 +
                                <ul class="dropdown fs-0">
 +
                                    <li>
 +
                                        <a href="Human_Practices.html">Overview</a>
 +
                                    </li>
 +
                                    <li>
 +
                                        <a href="General.html">General</a>
 +
                                    </li>
 +
                                    <li>
 +
                                        <a href="Integrated.html">Integrated</a>
 +
                                    </li>
 +
                                    <li>
 +
                                        <a href="Safety.html">Safety</a>
 +
                                    </li>
 +
                                    <li>
 +
                                        <a href="Collaborations.html">Collaborations</a>
 +
                                    </li>
 +
                                </ul>
 +
                            </li>
 +
                         </ul>
 
                          
 
                          
−
                     </nav>
+
                     </div>
 
                      
 
                      
−
                 </div>
+
                 </nav>
 +
               
 +
            </div>
 +
        </div>
 +
       
 +
        <div class="flexslider flexslider-simple h-box parallax">
 +
            <div id="whiteMask"><a href="#afterwhiteMask">
 +
                <img src="https://static.igem.org/mediawiki/2019/1/11/T--Tsinghua--whitemask.png"></a>
 
             </div>
 
             </div>
 
              
 
              
−
             <div class="flexslider flexslider-simple h-box parallax">
+
             <canvas id="myCanvas" width="1536" height="673"></canvas>
−
                <div id="whiteMask"><a href="#afterwhiteMask">
+
            <ul class="slides">
−
                    <img src="https://static.igem.org/mediawiki/2019/1/11/T--Tsinghua--whitemask.png"></a>
+
                <li data-zanim-timeline="{}">
−
                </div>
+
                    <section class="py-0 text-center">
−
               
+
                        <div class="background-holder overlay" style="background-image:url(https://static.igem.org/mediawiki/2019/a/a1/T--Tsinghua--indexSlider1.jpg);"> </div>
−
                <canvas id="myCanvas" width="1536" height="673"></canvas>
+
                        <!--/.background-holder-->
−
                <ul class="slides">
+
                        <div class="container">
−
                    <li data-zanim-timeline="{}">
+
                            <a class="down-indicator" href="#target-down-indicator"></a>
−
                        <section class="py-0 text-center">
+
                            <div class="row align-items-center py-8 parallax h-box" data-inertia='{"weight":1.5}' data-rellax-speed="2">
−
                            <div class="background-holder overlay" style="background-image:url(https://static.igem.org/mediawiki/2019/a/a1/T--Tsinghua--indexSlider1.jpg);"> </div>
+
                                <div class="col">
−
                            <!--/.background-holder-->
+
                                    <div class="overflow-hidden">
−
                            <div class="container">
+
                                        <h2 class="color-white fs-5 fs-lg-7" data-zanim='{"delay":0.1}'>PhASE | Photo-Activated Switch in <i>E.coli</i></h2>
−
                                <a class="down-indicator" href="#target-down-indicator"></a>
+
                                    </div>
−
                                <div class="row align-items-center py-8 parallax h-box" data-inertia='{"weight":1.5}' data-rellax-speed="2">
+
                                    <div class="overflow-hidden">
−
                                    <div class="col">
+
                                        <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Tsinghua 2019</h6>
−
                                        <div class="overflow-hidden">
+
−
                                            <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Tsinghua 2019</h6>
+
−
                                        </div>
+
−
                                        <div class="overflow-hidden">
+
−
                                            <h1 class="color-white fs-5 fs-lg-7" data-zanim='{"delay":0.1}'>LIGHT-INDUCED PHASE SEPARATION</h1>
+
−
                                        </div>
+
 
                                     </div>
 
                                     </div>
 
                                 </div>
 
                                 </div>
−
                                <!--/.row-->
 
 
                             </div>
 
                             </div>
−
                             <!--/.container-->
+
                             <!--/.row-->
−
                         </section>
+
                         </div>
−
                     </li>
+
                        <!--/.container-->
−
                    <li data-zanim-timeline="{}">
+
                     </section>
−
                        <section class="py-0 text-center">
+
                </li>
−
                            <div class="background-holder overlay" style="background-image:url(https://static.igem.org/mediawiki/2019/2/24/T--Tsinghua--indexSlider2.jpg);"> </div>
+
                <li data-zanim-timeline="{}">
−
                            <!--/.background-holder-->
+
                    <section class="py-0 text-center">
−
                            <div class="container">
+
                        <div class="background-holder overlay" style="background-image:url(https://static.igem.org/mediawiki/2019/2/24/T--Tsinghua--indexSlider2.jpg);"> </div>
−
                                <a class="down-indicator" href="#target-down-indicator"></a>
+
                        <!--/.background-holder-->
−
                                <div class="row align-items-center py-8 parallax h-box" data-inertia='{"weight":1.5}' data-rellax-speed="2">
+
                        <div class="container">
−
                                    <div class="col">
+
                            <a class="down-indicator" href="#target-down-indicator"></a>
−
                                        <div class="overflow-hidden">
+
                            <div class="row align-items-center py-8 parallax h-box" data-inertia='{"weight":1.5}' data-rellax-speed="2">
−
                                            <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Tsinghua 2019</h6>
+
                                <div class="col">
−
                                        </div>
+
                                    <div class="overflow-hidden">
−
                                        <div class="overflow-hidden">
+
                                        <h2 class="color-white fs-5 fs-lg-7" data-zanim='{"delay":0.1}'>PhASE | Photo-Activated Switch in <i>E.coli</i></h2>
−
                                            <h1 class="color-white fs-5 fs-lg-7" data-zanim='{"delay":0.1}'>LIGHT-INDUCED PHASE SEPARATION
+
                                    </div>
−
                                            </h1>
+
                                    <div class="overflow-hidden">
−
                                        </div>
+
                                        <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Tsinghua 2019</h6>
 
                                     </div>
 
                                     </div>
 
                                 </div>
 
                                 </div>
−
                                <!--/.row-->
 
 
                             </div>
 
                             </div>
−
                             <!--/.container-->
+
                             <!--/.row-->
−
                         </section>
+
                         </div>
−
                     </li>
+
                        <!--/.container-->
−
                    <li data-zanim-timeline="{}">
+
                     </section>
−
                        <section class="py-0 text-center">
+
                </li>
−
                            <div class="background-holder overlay" style="background-image:url(https://static.igem.org/mediawiki/2019/e/e3/T--Tsinghua--indexSlider3.jpg);"> </div>
+
                <li data-zanim-timeline="{}">
−
                            <!--/.background-holder-->
+
                    <section class="py-0 text-center">
−
                            <div class="container">
+
                        <div class="background-holder overlay" style="background-image:url(https://static.igem.org/mediawiki/2019/e/e3/T--Tsinghua--indexSlider3.jpg);"> </div>
−
                                <a class="down-indicator" href="#target-down-indicator"></a>
+
                        <!--/.background-holder-->
−
                                <div class="row align-items-center py-8 parallax h-box" data-inertia='{"weight":1.5}' data-rellax-speed="2">
+
                        <div class="container">
−
                                    <div class="col">
+
                            <a class="down-indicator" href="#target-down-indicator"></a>
−
                                       
+
                            <div class="row align-items-center py-8 parallax h-box" data-inertia='{"weight":1.5}' data-rellax-speed="2">
−
                                        <div class="overflow-hidden">
+
                                <div class="col">
−
                                            <h1 class="color-white fs-5 fs-lg-7" data-zanim='{"delay":0.1}'>PhASE | Photo-Activated Switch in E.coli</h1>
+
                                   
−
                                        </div>
+
                                    <div class="overflow-hidden">
−
                                        <div class="overflow-hidden">
+
                                        <h2 class="color-white fs-5 fs-lg-7" data-zanim='{"delay":0.1}'>PhASE | Photo-Activated Switch in <i>E.coli</i></h2>
−
                                            <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Tsinghua 2019</h6>
+
                                    </div>
−
                                        </div>
+
                                    <div class="overflow-hidden">
 +
                                        <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Tsinghua 2019</h6>
 
                                     </div>
 
                                     </div>
 
                                 </div>
 
                                 </div>
−
                                <!--/.row-->
 
 
                             </div>
 
                             </div>
−
                             <!--/.container-->
+
                             <!--/.row-->
−
                         </section>
+
                         </div>
−
                     </li>
+
                        <!--/.container-->
−
                    <li data-zanim-timeline="{}">
+
                     </section>
−
                        <section class="py-0 text-center">
+
                </li>
−
                            <div class="background-holder overlay" style="background-image:url(https://static.igem.org/mediawiki/2019/6/6c/T--Tsinghua--indexSlider4.jpg);"> </div>
+
                <li data-zanim-timeline="{}">
−
                            <!--/.background-holder-->
+
                    <section class="py-0 text-center">
−
                            <div class="container">
+
                        <div class="background-holder overlay" style="background-image:url(https://static.igem.org/mediawiki/2019/6/6c/T--Tsinghua--indexSlider4.jpg);"> </div>
−
                                <a class="down-indicator" href="#target-down-indicator"></a>
+
                        <!--/.background-holder-->
−
                                <div class="row align-items-center py-8 parallax h-box" data-inertia='{"weight":1.5}' data-rellax-speed="2">
+
                        <div class="container">
−
                                    <div class="col">
+
                            <a class="down-indicator" href="#target-down-indicator"></a>
−
                                        <div class="overflow-hidden">
+
                            <div class="row align-items-center py-8 parallax h-box" data-inertia='{"weight":1.5}' data-rellax-speed="2">
−
                                            <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Tsinghua 2019</h6>
+
                                <div class="col">
−
                                        </div>
+
                                    <div class="overflow-hidden">
−
                                        <div class="overflow-hidden">
+
                                        <h2 class="color-white fs-5 fs-lg-7" data-zanim='{"delay":0.1}'>PhASE | Photo-Activated Switch in <i>E.coli</i></h2>
−
                                            <h1 class="color-white fs-5 fs-lg-7" data-zanim='{"delay":0.1}'>LIGHT-INDUCED PHASE SEPARATION</h1>
+
                                    </div>
−
                                        </div>
+
                                    <div class="overflow-hidden">
 +
                                        <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Tsinghua 2019</h6>
 
                                     </div>
 
                                     </div>
 
                                 </div>
 
                                 </div>
−
                                <!--/.row-->
 
 
                             </div>
 
                             </div>
−
                             <!--/.container-->
+
                             <!--/.row-->
−
                         </section>
+
                         </div>
−
                     </li>
+
                        <!--/.container-->
−
                    <li data-zanim-timeline="{}">
+
                     </section>
−
                        <section class="py-0 text-center">
+
                </li>
−
                            <div class="background-holder overlay" style="background-image:url(https://static.igem.org/mediawiki/2019/2/2a/T--Tsinghua--indexSlider5.jpg);"> </div>
+
                <li data-zanim-timeline="{}">
−
                            <!--/.background-holder-->
+
                    <section class="py-0 text-center">
−
                            <div class="container">
+
                        <div class="background-holder overlay" style="background-image:url(https://static.igem.org/mediawiki/2019/2/2a/T--Tsinghua--indexSlider5.jpg);"> </div>
−
                                <a class="down-indicator" href="#target-down-indicator"></a>
+
                        <!--/.background-holder-->
−
                                <div class="row align-items-center py-8 parallax h-box" data-inertia='{"weight":1.5}' data-rellax-speed="2">
+
                        <div class="container">
−
                                    <div class="col">
+
                            <a class="down-indicator" href="#target-down-indicator"></a>
−
                                        <div class="overflow-hidden">
+
                            <div class="row align-items-center py-8 parallax h-box" data-inertia='{"weight":1.5}' data-rellax-speed="2">
−
                                            <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Tsinghua 2019</h6>
+
                                <div class="col">
−
                                        </div>
+
                                    <div class="overflow-hidden">
−
                                        <div class="overflow-hidden">
+
                                        <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Tsinghua 2019</h6>
−
                                            <h1 class="color-white fs-5 fs-lg-7" data-zanim='{"delay":0.1}'>LIGHT-INDUCED PHASE SEPARATION</h1>
+
                                    </div>
−
                                        </div>
+
                                    <div class="overflow-hidden">
 +
                                        <h1 class="color-white fs-5 fs-lg-7" data-zanim='{"delay":0.1}'>LIGHT-INDUCED PHASE SEPARATION</h1>
 
                                     </div>
 
                                     </div>
 
                                 </div>
 
                                 </div>
−
                                <!--/.row-->
 
 
                             </div>
 
                             </div>
−
                             <!--/.container-->
+
                             <!--/.row-->
−
                         </section>
+
                         </div>
−
                     </li>
+
                        <!--/.container-->
−
                    <li data-zanim-timeline="{}">
+
                     </section>
−
                        <section class="py-0 text-center">
+
                </li>
−
                            <div class="background-holder overlay" style="background-image:url(https://static.igem.org/mediawiki/2019/3/34/T--Tsinghua--indexSlider6.jpg);"> </div>
+
                <li data-zanim-timeline="{}">
−
                            <!--/.background-holder-->
+
                    <section class="py-0 text-center">
−
                            <div class="container">
+
                        <div class="background-holder overlay" style="background-image:url(https://static.igem.org/mediawiki/2019/3/34/T--Tsinghua--indexSlider6.jpg);"> </div>
−
                                <a class="down-indicator" href="#target-down-indicator"></a>
+
                        <!--/.background-holder-->
−
                                <div class="row align-items-center py-8 parallax h-box" data-inertia='{"weight":1.5}' data-rellax-speed="2">
+
                        <div class="container">
−
                                    <div class="col">
+
                            <a class="down-indicator" href="#target-down-indicator"></a>
−
                                        <div class="overflow-hidden">
+
                            <div class="row align-items-center py-8 parallax h-box" data-inertia='{"weight":1.5}' data-rellax-speed="2">
−
                                            <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Tsinghua 2019</h6>
+
                                <div class="col">
−
                                        </div>
+
                                    <div class="overflow-hidden">
−
                                        <div class="overflow-hidden">
+
                                        <h6 class="text-uppercase color-white fs--1 fs-lg-0 font-2 ls" data-zanim='{"delay":0.2}'>Tsinghua 2019</h6>
−
                                            <h1 class="color-white fs-5 fs-lg-7" data-zanim='{"delay":0.1}'>LIGHT-INDUCED PHASE SEPARATION</h1>
+
                                    </div>
−
                                        </div>
+
                                    <div class="overflow-hidden">
 +
                                        <h1 class="color-white fs-5 fs-lg-7" data-zanim='{"delay":0.1}'>LIGHT-INDUCED PHASE SEPARATION</h1>
 
                                     </div>
 
                                     </div>
 
                                 </div>
 
                                 </div>
−
                                <!--/.row-->
 
 
                             </div>
 
                             </div>
−
                             <!--/.container-->
+
                             <!--/.row-->
−
                         </section>
+
                         </div>
−
                     </li>
+
                        <!--/.container-->
−
                 </ul>
+
                     </section>
−
                <span id="afterwhiteMask"></span>
+
                 </li>
 +
            </ul>
 +
            <span id="afterwhiteMask"></span>
 +
        </div>
 +
        <section class="text-center text-lg-left py-9 background-white">
 +
            <div id="highlight_head">
 +
                <div style="position: absolute;top:180px;left:16%;height: 200px;width: 25px;background-image:linear-gradient(to bottom, rgb(252, 106, 8), rgb(0, 162, 255));">
 +
                   
 +
                </div>
 +
                <p style="position: relative; top: 0px; font-size:35px; text-indent: 60px; left: 20%; width: 60%; word-spacing: 15px;">
 +
                    In order to precisely control the velocity of biochemical reactions, we applied phase separation system coupled with light induction in E.coli.
 +
                </p>
 +
               
 
             </div>
 
             </div>
−
             <section class="text-center text-lg-left py-9 background-white">
+
             <div style="height: 10px;"></div>
−
                <div id="highlight_head">
+
            <div style="height:1px; width=100%; background: black"></div>
−
                    <div style="position: absolute;top:180px;left:16%;height: 200px;width: 25px;background-image:linear-gradient(to bottom, rgb(252, 106, 8), rgb(0, 162, 255));">
+
            <div style="height: 20px;"></div>
 +
            <div>
 +
               
 +
               
 +
               
 +
               
 +
                <div class = "row" id="highlight1">
 +
                    <div class="col-1"></div>
 +
                    <div class = "col-4">
 +
                        <div style="position:relative">
 +
                            <img src="https://static.igem.org/mediawiki/2019/a/a6/T--Tsinghua--indexhighlight1.png" width="80%">
 +
                        </div>
 +
                    </div>
 +
                    <div class="col-6">
 +
                        <div class="circle" style="position: absolute;left: -30px;top:3px;background-image: linear-gradient(to right, #2f80ed,#56ccf2);;"></div>
 +
                        <div class="index_para" style="width: 90%;"><h1>Phase separation system</h1>
 +
                            <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm; text-align: justify;">We constructed the first artificial phase separation system ever in prokaryotes. These droplets in E.coli exhibit similar spherical shape and high fluidity as they were in eukaryotes. By creating membraneless organelles in a cell, phases could realize the redistribution of various targets, including proteins and small organic molecules.</p>
 +
                            <button style="background-image: linear-gradient(to right, #2f80ed,#56ccf2);">Read more</button>
 +
                        </div>
 
                          
 
                          
 +
                        <div class="col-1"></div>
 
                     </div>
 
                     </div>
−
                    <p style="position: relative; top: 0px; font-size:35px; text-indent: 60px; left: 20%; width: 60%; word-spacing: 15px;">
 
−
                        In order to precisely control the velocity of biochemical reactions, we applied phase separation system coupled with light induction in E.coli.
 
−
                    </p>
 
−
                   
 
 
                 </div>
 
                 </div>
−
                 <div style="height: 10px;"></div>
+
                 <div style="height:100px"></div>
−
                 <div style="height:1px; width=100%; background: black"></div>
+
                 <div class = "row" id="highlight2">
−
                <div style="height: 20px;"></div>
+
                    <div class="col-2">
−
                <div>
+
                       
 +
                    </div>
 +
                    <div class="col-5">
 +
                        <div class="circle" style="position: absolute;left: -30px;top:3px;background-image: linear-gradient(to right,#fbc7d4, #9796f0);"></div>
 +
                        <div class="index_para" style="width: 100%;"><h1>Photo-activated switch</h1>
 +
                            <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;text-align: justify;">We use laser as a switch to control our system in a high spatial-temporal resolution. Within a few seconds, target proteins would redistribute into existing phases. After incubated in dark for several minutes, targets can reverse to previous smear state.</p>
 +
                            <button style="background-image: linear-gradient(to right, #fbc7d4, #9796f0);">Read more</button>
 +
                        </div>
 +
                       
 +
                    </div>
 
                      
 
                      
−
                   
+
                     <div class = "col-4">
−
                   
+
                         <div style="position:relative">
−
                   
+
                            <img src="https://static.igem.org/mediawiki/2019/2/23/T--Tsinghua--indexhighlight2.png" width="100%">
−
                     <div class = "row" id="highlight1">
+
−
                        <div class="col-1"></div>
+
−
                         <div class = "col-4">
+
−
                            <div style="position:relative">
+
−
                                <img src="https://static.igem.org/mediawiki/2019/a/a6/T--Tsinghua--indexhighlight1.png" width="80%">
+
−
                            </div>
+
 
                         </div>
 
                         </div>
−
                        <div class="col-6">
+
                    </div>
−
                            <div class="circle" style="position: absolute;left: -30px;top:3px;background-image: linear-gradient(to right, #2f80ed,#56ccf2);;"></div>
+
                    <div class="col-1"></div>
−
                            <div class="index_para" style="width: 90%;"><h1>Phase separation system</h1>
+
                </div>
−
                                <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm; text-align: justify;">We constructed the first artificial phase separation system ever in prokaryotes. These droplets in E.coli exhibit similar spherical shape and high fluidity as they were in eukaryotes. By creating membraneless organelles in a cell, phases could realize the redistribution of various targets, including proteins and small organic molecules.</p>
+
                <div class = "row" id="highlight3">
−
                                <button style="background-image: linear-gradient(to right, #2f80ed,#56ccf2);">Read more</button>
+
                    <div class="col-1"></div>
−
                            </div>
+
                    <div class = "col-4">
−
                           
+
                        <div style="position:relative">
−
                             <div class="col-1"></div>
+
                             <img src="https://static.igem.org/mediawiki/2019/4/43/T--Tsinghua--indexhighlight3.jpg" width="80%">
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
−
                    <div style="height:100px"></div>
+
                     <div class="col-6">
−
                     <div class = "row" id="highlight2">
+
                         <div class="circle" style="position: absolute;left: -30px;top:3px;background-image: linear-gradient(to right, #ffafbd,#ffc3a0);"></div>
−
                        <div class="col-2">
+
                        <div class="index_para" style="width: 85%;"><h1>Modelling our system</h1>
−
                           
+
                            <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;text-align: justify;">We modelled the phase separation system and coupled enzymatic reactions using a differential equation model and a collision model of chemical reactions. The model conceptually explained how phase separation would regulate downstream reactions, and provided insights for enzyme concentration and phase separation system selection. In addition, an interactive interface based on the model is presented on our wiki.</p>
−
                         </div>
+
                            <button style="background-image: linear-gradient(to right, #ffafbd,#ffc3a0);">Read more</button>
−
                        <div class="col-5">
+
−
                            <div class="circle" style="position: absolute;left: -30px;top:3px;background-image: linear-gradient(to right,#fbc7d4, #9796f0);"></div>
+
−
                            <div class="index_para" style="width: 100%;"><h1>Photo-activated switch</h1>
+
−
                                <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;text-align: justify;">We use laser as a switch to control our system in a high spatial-temporal resolution. Within a few seconds, target proteins would redistribute into existing phases. After incubated in dark for several minutes, targets can reverse to previous smear state.</p>
+
−
                                <button style="background-image: linear-gradient(to right, #fbc7d4, #9796f0);">Read more</button>
+
−
                            </div>
+
−
                           
+
 
                         </div>
 
                         </div>
 
                          
 
                          
−
                        <div class = "col-4">
 
−
                            <div style="position:relative">
 
−
                                <img src="https://static.igem.org/mediawiki/2019/2/23/T--Tsinghua--indexhighlight2.png" width="100%">
 
−
                            </div>
 
−
                        </div>
 
 
                         <div class="col-1"></div>
 
                         <div class="col-1"></div>
 
                     </div>
 
                     </div>
−
                    <div class = "row" id="highlight3">
+
                </div>
−
                        <div class="col-1"></div>
+
               
−
                        <div class = "col-4">
+
                <div style="height:150px"></div>
−
                            <div style="position:relative">
+
                <div class = "row" id="highlight4">
−
                                <img src="https://static.igem.org/mediawiki/2019/4/43/T--Tsinghua--indexhighlight3.jpg" width="80%">
+
                    <div class="col-2">
−
                            </div>
+
                       
−
                        </div>
+
                    </div>
−
                        <div class="col-6">
+
                    <div class="col-5">
−
                            <div class="circle" style="position: absolute;left: -30px;top:3px;background-image: linear-gradient(to right, #ffafbd,#ffc3a0);"></div>
+
                        <div class="circle" style="position: absolute;left: -30px;top:3px;background-image: linear-gradient(to right, #ffe259,#ffa751);;"></div>
−
                            <div class="index_para" style="width: 85%;"><h1>Modelling our system</h1>
+
                        <div class="index_para" style="width: 90%;"><h1>Downstream reactions</h1>
−
                                <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;text-align: justify;">We modelled the phase separation system and coupled enzymatic reactions using a differential equation model and a collision model of chemical reactions. The model conceptually explained how phase separation would regulate downstream reactions, and provided insights for enzyme concentration and phase separation system selection. In addition, an interactive interface based on the model is presented on our wiki.</p>
+
                            <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;text-align: justify;">Enzymes of proper size could be recruited into phases by using photo-activated switch. Selecting substrates of proper solubility according to our model, we realized the regulation of enzymatic reactions.</p>
−
                                <button style="background-image: linear-gradient(to right, #ffafbd,#ffc3a0);">Read more</button>
+
                            <button style="background-image: linear-gradient(to right, #ffe259,#ffa751);">Read more</button>
−
                            </div>
+
−
                           
+
−
                            <div class="col-1"></div>
+
 
                         </div>
 
                         </div>
 +
                       
 
                     </div>
 
                     </div>
 
                      
 
                      
−
                     <div style="height:150px"></div>
+
                     <div class = "col-4">
−
                    <div class = "row" id="highlight4">
+
                        <div style="position:relative">
−
                        <div class="col-2">
+
                            <img src="https://static.igem.org/mediawiki/2019/c/c2/T--Tsinghua--indexhighlight4.jpg" style="float:right" width="80%">
−
                           
+
 
                         </div>
 
                         </div>
−
                        <div class="col-5">
+
                    </div>
−
                             <div class="circle" style="position: absolute;left: -30px;top:3px;background-image: linear-gradient(to right, #ffe259,#ffa751);;"></div>
+
                    <div class="col-1"></div>
−
                            <div class="index_para" style="width: 90%;"><h1>Downstream reactions</h1>
+
                </div>
−
                                <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;text-align: justify;">Enzymes of proper size could be recruited into phases by using photo-activated switch. Selecting substrates of proper solubility according to our model, we realized the regulation of enzymatic reactions.</p>
+
                <div style="height: 10px;"></div>
−
                                <button style="background-image: linear-gradient(to right, #ffe259,#ffa751);">Read more</button>
+
                <div class = "row" id="highlight5">
−
                            </div>
+
                    <div class="col-1"></div>
−
                           
+
                    <div class = "col-4">
 +
                        <div style="position:relative">
 +
                             <img src="https://static.igem.org/mediawiki/2019/9/91/T--Tsinghua--indexhighlight5.png" width="90%">
 +
                        </div>
 +
                    </div>
 +
                    <div class="col-6">
 +
                        <div class="circle" style="position: absolute;left: -30px;top:3px;background-image: linear-gradient(to right, #f8ffae,#43c6ac);;"></div>
 +
                        <div class="index_para" style="width: 84%;"><h1>Improvement</h1>
 +
                            <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;text-align: justify;">Enrichment of CRY2 in phase include both homo-aggregation of itself and hetero-aggregation of CRY2 and CIB1. By introducing point mutation to C terminal of CRY2, we attenuate homo-aggregation of CRY2 in dark, increasing the threshold of light induction. This improvement may also be helpful for teams who want to modify the sensitivity of their light-controlled information-processing system.</p>
 +
                            <button style="background-image: linear-gradient(to right, #f8ffae,#43c6ac);">Read more</button>
 
                         </div>
 
                         </div>
 
                          
 
                          
−
                        <div class = "col-4">
 
−
                            <div style="position:relative">
 
−
                                <img src="https://static.igem.org/mediawiki/2019/c/c2/T--Tsinghua--indexhighlight4.jpg" style="float:right" width="80%">
 
−
                            </div>
 
−
                        </div>
 
 
                         <div class="col-1"></div>
 
                         <div class="col-1"></div>
 
                     </div>
 
                     </div>
−
                    <div style="height: 10px;"></div>
+
                </div>
−
                    <div class = "row" id="highlight5">
+
                <div style="height: 90px;"></div>
−
                        <div class="col-1"></div>
+
                <div class = "row" id="highlight6">
−
                        <div class = "col-4">
+
                    <div class="col-2">
−
                            <div style="position:relative">
+
                       
−
                                <img src="https://static.igem.org/mediawiki/2019/9/91/T--Tsinghua--indexhighlight5.png" width="90%">
+
                    </div>
−
                             </div>
+
                    <div class="col-5">
 +
                        <div class="circle" style="position: absolute;left: -30px;top:3px;background-image: linear-gradient(to left, #a8ff78,#78ffd6);;"></div>
 +
                        <div class="index_para" style="width: 90%;"><h1>More possibilities</h1>
 +
                            <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;text-align: justify;">Upon introducing this powerful tool in E.coli, there are much more prosperous applications waiting to be developed. We propose that by isolating specific material in phase, a uniform E.coli colony could grow into a society with cell differentiation.</p>
 +
                             <button style="background-image: linear-gradient(to left, #a8ff78,#78ffd6);">Read more</button>
 
                         </div>
 
                         </div>
−
                         <div class="col-6">
+
                          
−
                            <div class="circle" style="position: absolute;left: -30px;top:3px;background-image: linear-gradient(to right, #f8ffae,#43c6ac);;"></div>
+
                    </div>
−
                             <div class="index_para" style="width: 84%;"><h1>Improvement</h1>
+
                   
−
                                <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;text-align: justify;">Enrichment of CRY2 in phase include both homo-aggregation of itself and hetero-aggregation of CRY2 and CIB1. By introducing point mutation to C terminal of CRY2, we attenuate homo-aggregation of CRY2 in dark, increasing the threshold of light induction. This improvement may also be helpful for teams who want to modify the sensitivity of their light-controlled information-processing system.</p>
+
                    <div class = "col-4">
−
                                <button style="background-image: linear-gradient(to right, #f8ffae,#43c6ac);">Read more</button>
+
                        <div style="position:relative">
−
                            </div>
+
                             <img src="https://static.igem.org/mediawiki/2019/4/48/T--Tsinghua--indexhighlight6.png" style="float:right" width="80%">
−
                           
+
−
                            <div class="col-1"></div>
+
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
−
                     <div style="height: 90px;"></div>
+
                     <div class="col-1"></div>
−
                    <div class = "row" id="highlight6">
+
                </div>
−
                        <div class="col-2">
+
                <div class = "row" id="highlight7">
−
                              
+
                    <div class="col-1"></div>
 +
                    <div class = "col-4">
 +
                        <div style="position:relative">
 +
                             <img src="https://static.igem.org/mediawiki/2019/a/a9/T--Tsinghua--indexhighlight7.png" width="90%">
 
                         </div>
 
                         </div>
−
                        <div class="col-5">
+
                    </div>
−
                            <div class="circle" style="position: absolute;left: -30px;top:3px;background-image: linear-gradient(to left, #a8ff78,#78ffd6);;"></div>
+
                    <div class="col-6">
−
                            <div class="index_para" style="width: 90%;"><h1>More possibilities</h1>
+
                        <div class="circle" style="position: absolute;left: -30px;top:3px;background-image: linear-gradient(to right, #f8ffae,#43c6ac);;"></div>
−
                                <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;text-align: justify;">Upon introducing this powerful tool in E.coli, there are much more prosperous applications waiting to be developed. We propose that by isolating specific material in phase, a uniform E.coli colony could grow into a society with cell differentiation.</p>
+
                        <div class="index_para" style="width: 84%;"><h1>Hardware</h1>
−
                                <button style="background-image: linear-gradient(to left, #a8ff78,#78ffd6);">Read more</button>
+
                            <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;text-align: justify;">Depending on the manner of reversible amplification in phase, specific proteins can be used to create a biological register. Responding to laser stimulation, the distribution of fluorescence proteins would change, resulting in the variation in FRET signal, which can be detected by fluorescence reader.</p>
−
                            </div>
+
                            <button style="background-image: linear-gradient(to right, #74ebd5,#acb6e5);">Read more</button>
−
                           
+
 
                         </div>
 
                         </div>
 
                          
 
                          
−
                        <div class = "col-4">
 
−
                            <div style="position:relative">
 
−
                                <img src="https://static.igem.org/mediawiki/2019/4/48/T--Tsinghua--indexhighlight6.png" style="float:right" width="80%">
 
−
                            </div>
 
−
                        </div>
 
 
                         <div class="col-1"></div>
 
                         <div class="col-1"></div>
−
                    </div>
 
−
                    <div class = "row" id="highlight7">
 
−
                        <div class="col-1"></div>
 
−
                        <div class = "col-4">
 
−
                            <div style="position:relative">
 
−
                                <img src="https://static.igem.org/mediawiki/2019/a/a9/T--Tsinghua--indexhighlight7.png" width="90%">
 
−
                            </div>
 
−
                        </div>
 
−
                        <div class="col-6">
 
−
                            <div class="circle" style="position: absolute;left: -30px;top:3px;background-image: linear-gradient(to right, #74ebd5,#acb6e5);;"></div>
 
−
                            <div class="index_para" style="width: 84%;"><h1>Hardware</h1>
 
−
                                <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;text-align: justify;">Depending on the manner of reversible amplification in phase, specific proteins can be used to create a biological register. Responding to laser stimulation, the distribution of fluorescence proteins would change, resulting in the variation in FRET signal, which can be detected by fluorescence reader.</p>
 
−
                                <button style="background-image: linear-gradient(to right, #74ebd5,#acb6e5);">Read more</button>
 
−
                            </div>
 
−
                           
 
−
                            <div class="col-1"></div>
 
−
                        </div>
 
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 +
            </div>
 +
           
 +
           
 +
            <div class="container">
 
                  
 
                  
−
               
+
            </div>
−
                <div class="container">
+
        </section>
−
                   
+
       
−
                </div>
+
        <section class="text-center pb-3">
−
            </section>
+
            <div class="background-holder overlay overlay-2" style="background-image:url(https://static.igem.org/mediawiki/2019/6/61/T--Tsinghua--subpage4_model.jpg);background-position: top;"> </div>
−
           
+
            <!--/.background-holder-->
−
            <section class="text-center pb-3">
+
            <div class="container">
−
                <div class="background-holder overlay overlay-2" style="background-image:url(https://static.igem.org/mediawiki/2019/6/61/T--Tsinghua--subpage4_model.jpg);background-position: top;"> </div>
+
                <div class="row justify-content-center">
−
                <!--/.background-holder-->
+
                    <div class="col-12">
−
                <div class="container">
+
                        <h4 class="mb-2 color-white">PhASE</h4>
−
                    <div class="row justify-content-center">
+
                        <p class="mb-0 color-9">Subscribe to our mailing list to receive updates and promotional offers.</p>
−
                        <div class="col-12">
+
                    </div>
−
                            <h4 class="mb-2 color-white">PhASE</h4>
+
                    <div class="col-md-10 col-lg-7 col-xl-5 mt-4">
−
                            <p class="mb-0 color-9">Subscribe to our mailing list to receive updates and promotional offers.</p>
+
                        <form method="post">
−
                        </div>
+
                            <div class="row align-items-center no-gutters">
−
                        <div class="col-md-10 col-lg-7 col-xl-5 mt-4">
+
                                <div class="col-md-8 px-2">
−
                            <form method="post">
+
                                    <input class="form-control" type="hidden" name="to" value="username@domain.extension" />
−
                                <div class="row align-items-center no-gutters">
+
                                    <input class="form-control border-color-white" type="text" placeholder="Enter Email Here" /> </div>
−
                                    <div class="col-md-8 px-2">
+
                                    <div class="col-md-4 px-2 mt-3 mt-md-0">
−
                                        <input class="form-control" type="hidden" name="to" value="username@domain.extension" />
+
                                        <button class="btn btn-block btn-white" type="submit">
−
                                        <input class="form-control border-color-white" type="text" placeholder="Enter Email Here" /> </div>
+
                                            <span>Submit</span>
−
                                        <div class="col-md-4 px-2 mt-3 mt-md-0">
+
                                        </button>
−
                                            <button class="btn btn-block btn-white" type="submit">
+
−
                                                <span>Submit</span>
+
−
                                            </button>
+
−
                                        </div>
+
 
                                     </div>
 
                                     </div>
−
                                 </form>
+
                                 </div>
−
                             </div>
+
                             </form>
 
                         </div>
 
                         </div>
−
                        <div class="row mt-8 fs--1">
+
                    </div>
−
                            <div class="col-lg-auto ml-lg-auto order-lg-2 mb-2 mb-lg-0">
+
                    <div class="row mt-8 fs--1">
−
                                <a class="d-inline-block mx-2 color-8" href="#">Home</a>
+
                        <div class="col-lg-auto ml-lg-auto order-lg-2 mb-2 mb-lg-0">
−
                                <a class="d-inline-block mx-2 color-8" href="#">Book Now</a>
+
                            <a class="d-inline-block mx-2 color-8" href="#">Home</a>
−
                                <a class="d-inline-block mx-2 color-8" href="#">Contact</a>
+
                            <a class="d-inline-block mx-2 color-8" href="#">Book Now</a>
−
                                <a class="d-inline-block mx-2 color-8" href="#">Events</a>
+
                            <a class="d-inline-block mx-2 color-8" href="#">Contact</a>
−
                                <a class="d-inline-block mx-2 color-8" href="#">Policies</a>
+
                            <a class="d-inline-block mx-2 color-8" href="#">Events</a>
−
                                <a class="d-inline-block mx-2 color-8" href="#">Term + Conditions</a>
+
                            <a class="d-inline-block mx-2 color-8" href="#">Policies</a>
−
                            </div>
+
                            <a class="d-inline-block mx-2 color-8" href="#">Term + Conditions</a>
−
                            <div class="col-lg text-lg-left">
+
                        </div>
−
                                <div class="color-8">&copy; Tsinghua iGEM 2019
+
                        <div class="col-lg text-lg-left">
−
                                </div>
+
                            <div class="color-8">&copy; Tsinghua iGEM 2019
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
−
                        <!--/.row-->
 
 
                     </div>
 
                     </div>
−
                     <!--/.container-->
+
                     <!--/.row-->
−
                 </section>
+
                 </div>
−
             </main>
+
                <!--/.container-->
−
            <!--  -->
+
             </section>
−
            <!--    JavaScripts-->
+
        </main>
−
            <!--    =============================================-->
+
        <!--  -->
−
            <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> -->
+
        <!--    JavaScripts-->
−
            <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/modernizr.min.js&action=raw&ctype=text/javascript"></script>
+
        <!--    =============================================-->
−
           
+
        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> -->
−
            <!-- <script src="assets/lib/jquery/dist/jquery.min.js"></script> -->
+
        <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/modernizr.min.js&action=raw&ctype=text/javascript"></script>
−
            <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> -->
+
       
−
            <!-- <script src="assets/lib/bootstrap/dist/js/bootstrap.min.js"></script> -->
+
        <!-- <script src="assets/lib/jquery/dist/jquery.min.js"></script> -->
−
            <!-- <script src="assets/js/googlemap.js"></script> -->
+
        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> -->
−
           
+
        <!-- <script src="assets/lib/bootstrap/dist/js/bootstrap.min.js"></script> -->
−
            <!-- <script src="assets/lib/imagesloaded/imagesloaded.pkgd.min.js"></script> -->
+
        <!-- <script src="assets/js/googlemap.js"></script> -->
−
            <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/imagesloaded.pkgd.min.js&action=raw&ctype=text/javascript"></script>
+
       
−
            <!-- <script src="assets/lib/jquery-menu-aim/jquery.menu-aim.js"></script> -->
+
        <!-- <script src="assets/lib/imagesloaded/imagesloaded.pkgd.min.js"></script> -->
−
            <!-- <script src="assets/lib/gsap/src/minified/TweenMax.min.js"></script> -->
+
        <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/imagesloaded.pkgd.min.js&action=raw&ctype=text/javascript"></script>
−
            <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/TweenMax.min.js&action=raw&ctype=text/javascript"></script>
+
        <!-- <script src="assets/lib/jquery-menu-aim/jquery.menu-aim.js"></script> -->
−
           
+
        <!-- <script src="assets/lib/gsap/src/minified/TweenMax.min.js"></script> -->
−
            <!-- <script src="assets/lib/gsap/src/minified/plugins/ScrollToPlugin.min.js"></script> -->
+
        <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/TweenMax.min.js&action=raw&ctype=text/javascript"></script>
−
            <!-- <script src="assets/lib/CustomEase.min.js"></script> -->
+
       
−
            <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/CustomEase.min.js&action=raw&ctype=text/javascript"></script>
+
        <!-- <script src="assets/lib/gsap/src/minified/plugins/ScrollToPlugin.min.js"></script> -->
−
           
+
        <!-- <script src="assets/lib/CustomEase.min.js"></script> -->
−
            <!-- <script src="assets/js/config.js"></script> -->
+
        <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/CustomEase.min.js&action=raw&ctype=text/javascript"></script>
−
            <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/config.js&action=raw&ctype=text/javascript"></script>
+
       
−
           
+
        <!-- <script src="assets/js/config.js"></script> -->
−
            <!-- <script src="assets/lib/rellax/rellax.min.js"></script> -->
+
        <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/config.js&action=raw&ctype=text/javascript"></script>
−
            <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/rellax.min.js&action=raw&ctype=text/javascript"></script>
+
       
−
           
+
        <!-- <script src="assets/lib/rellax/rellax.min.js"></script> -->
−
            <!-- <script src="assets/js/zanimation.js"></script> -->
+
        <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/rellax.min.js&action=raw&ctype=text/javascript"></script>
−
            <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/zanimation.js&action=raw&ctype=text/javascript"></script>
+
       
−
            <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/inertia.js&action=raw&ctype=text/javascript"></script>
+
        <!-- <script src="assets/js/zanimation.js"></script> -->
−
           
+
        <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/zanimation.js&action=raw&ctype=text/javascript"></script>
−
            <!-- <script src="assets/js/inertia.js"></script> -->
+
        <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/inertia.js&action=raw&ctype=text/javascript"></script>
−
            <!-- <script src="assets/lib/lightbox2/dist/js/lightbox.js"></script> -->
+
       
−
            <!-- <script src="assets/lib/flexslider/jquery.flexslider-min.js"></script> -->
+
        <!-- <script src="assets/js/inertia.js"></script> -->
−
            <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/jquery.flexslider-min.js&action=raw&ctype=text/javascript"></script>
+
        <!-- <script src="assets/lib/lightbox2/dist/js/lightbox.js"></script> -->
−
           
+
        <!-- <script src="assets/lib/flexslider/jquery.flexslider-min.js"></script> -->
−
            <!-- <script src="assets/js/core.js"></script> -->
+
        <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/jquery.flexslider-min.js&action=raw&ctype=text/javascript"></script>
−
            <!-- <script src="assets/js/main.js"></script> -->
+
       
−
            <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/main.js&action=raw&ctype=text/javascript"></script>
+
        <!-- <script src="assets/js/core.js"></script> -->
−
            <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/core.js&action=raw&ctype=text/javascript"></script>
+
        <!-- <script src="assets/js/main.js"></script> -->
−
            <!-- <script src="assets/js/particleanimate.js"></script> -->
+
        <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/main.js&action=raw&ctype=text/javascript"></script>
−
            <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/particleanimate.js&action=raw&ctype=text/javascript"></script>
+
        <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/core.js&action=raw&ctype=text/javascript"></script>
−
        </body>
+
        <!-- <script src="assets/js/particleanimate.js"></script> -->
−
        </html>
+
        <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/particleanimate.js&action=raw&ctype=text/javascript"></script>
 +
    </body>
 +
    </html>

Revision as of 16:11, 20 October 2019

iGEM Tsinghua

  • PhASE | Photo-Activated Switch in E.coli

    Tsinghua 2019

  • PhASE | Photo-Activated Switch in E.coli

    Tsinghua 2019

  • PhASE | Photo-Activated Switch in E.coli

    Tsinghua 2019

  • PhASE | Photo-Activated Switch in E.coli

    Tsinghua 2019
  • Tsinghua 2019

    LIGHT-INDUCED PHASE SEPARATION

  • Tsinghua 2019

    LIGHT-INDUCED PHASE SEPARATION

In order to precisely control the velocity of biochemical reactions, we applied phase separation system coupled with light induction in E.coli.

Phase separation system

We constructed the first artificial phase separation system ever in prokaryotes. These droplets in E.coli exhibit similar spherical shape and high fluidity as they were in eukaryotes. By creating membraneless organelles in a cell, phases could realize the redistribution of various targets, including proteins and small organic molecules.

Photo-activated switch

We use laser as a switch to control our system in a high spatial-temporal resolution. Within a few seconds, target proteins would redistribute into existing phases. After incubated in dark for several minutes, targets can reverse to previous smear state.

Modelling our system

We modelled the phase separation system and coupled enzymatic reactions using a differential equation model and a collision model of chemical reactions. The model conceptually explained how phase separation would regulate downstream reactions, and provided insights for enzyme concentration and phase separation system selection. In addition, an interactive interface based on the model is presented on our wiki.

Downstream reactions

Enzymes of proper size could be recruited into phases by using photo-activated switch. Selecting substrates of proper solubility according to our model, we realized the regulation of enzymatic reactions.

Improvement

Enrichment of CRY2 in phase include both homo-aggregation of itself and hetero-aggregation of CRY2 and CIB1. By introducing point mutation to C terminal of CRY2, we attenuate homo-aggregation of CRY2 in dark, increasing the threshold of light induction. This improvement may also be helpful for teams who want to modify the sensitivity of their light-controlled information-processing system.

More possibilities

Upon introducing this powerful tool in E.coli, there are much more prosperous applications waiting to be developed. We propose that by isolating specific material in phase, a uniform E.coli colony could grow into a society with cell differentiation.

Hardware

Depending on the manner of reversible amplification in phase, specific proteins can be used to create a biological register. Responding to laser stimulation, the distribution of fluorescence proteins would change, resulting in the variation in FRET signal, which can be detected by fluorescence reader.

PhASE

Subscribe to our mailing list to receive updates and promotional offers.

Home Book Now Contact Events Policies Term + Conditions
© Tsinghua iGEM 2019