Difference between revisions of "Team:Tsinghua"

Line 13: Line 13:
 
     <!--    =============================================-->
 
     <!--    =============================================-->
 
     <!-- <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png">
 
     <!-- <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png">
+
        <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png">
+
        <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png">
    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicons/favicon.ico">
+
        <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicons/favicon.ico">
    <link rel="manifest" href="assets/images/favicons/manifest.json">
+
        <link rel="manifest" href="assets/images/favicons/manifest.json">
    <link rel="mask-icon" href="assets/images/favicons/safari-pinned-tab.svg" color="#5bbad5">
+
        <link rel="mask-icon" href="assets/images/favicons/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileImage" content="assets/images/favicons/mstile-150x150.png">
+
        <meta name="msapplication-TileImage" content="assets/images/favicons/mstile-150x150.png">
    <meta name="theme-color" content="#ffffff">
+
        <meta name="theme-color" content="#ffffff">
    -->
+
    -->
 
     <!--    Stylesheets-->
 
     <!--    Stylesheets-->
 
     <!--    =============================================-->
 
     <!--    =============================================-->
Line 26: Line 26:
 
     <!-- <link href="assets/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> -->
 
     <!-- <link href="assets/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> -->
 
     <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/css/bootstrap.min.css&action=raw&ctype=text/css" >
 
     <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/css/bootstrap.min.css&action=raw&ctype=text/css" >
 
+
   
 
     <!-- Template specific stylesheets-->
 
     <!-- Template specific stylesheets-->
 
     <!-- <link href="assets/lib/loaders.css/loaders.min.css" rel="stylesheet"> -->
 
     <!-- <link href="assets/lib/loaders.css/loaders.min.css" rel="stylesheet"> -->
Line 35: Line 35:
 
     <!-- <link href="assets/lib/flexslider/flexslider.css" rel="stylesheet"> -->
 
     <!-- <link href="assets/lib/flexslider/flexslider.css" rel="stylesheet"> -->
 
     <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/css/flexslider.css&action=raw&ctype=text/css" >
 
     <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/css/flexslider.css&action=raw&ctype=text/css" >
 
+
   
 
     <!-- Main stylesheet and color file-->
 
     <!-- Main stylesheet and color file-->
 
     <!-- <link href="assets/css/style.css" rel="stylesheet"> -->
 
     <!-- <link href="assets/css/style.css" rel="stylesheet"> -->
 
     <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/css/font-awesome.min.css&action=raw&ctype=text/css">
 
     <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/css/font-awesome.min.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 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"> </head> -->
 
     <!-- <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" >
 
+
   
 
     <body data-spy="scroll" data-target=".inner-link" data-offset="60">
 
     <body data-spy="scroll" data-target=".inner-link" data-offset="60">
 
         <main>
 
         <main>
Line 397: Line 397:
 
                         <div class = "col-4">
 
                         <div class = "col-4">
 
                             <div style="position:relative">
 
                             <div style="position:relative">
                                 <img src="https://static.igem.org/mediawiki/2019/c/c2/T--Tsinghua--indexhighlight4.jpg" width="90%">
+
                                 <img src="https://static.igem.org/mediawiki/2019/c/c2/T--Tsinghua--indexhighlight5.jpg" width="90%">
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
Line 412: Line 412:
 
                     <div style="height: 90px;"></div>
 
                     <div style="height: 90px;"></div>
 
                     <div class = "row" id="highlight6">
 
                     <div class = "row" id="highlight6">
                            <div class="col-2">
+
                        <div class="col-2">
 
                              
 
                              
                                </div>
+
                        </div>
 
                         <div class="col-5">
 
                         <div class="col-5">
 
                             <div class="circle" style="position: absolute;left: -30px;top:3px;background-image: linear-gradient(to right, #a8ff78,#78ffd6);;"></div>
 
                             <div class="circle" style="position: absolute;left: -30px;top:3px;background-image: linear-gradient(to right, #a8ff78,#78ffd6);;"></div>
                             <div class="index_para" style="width: 90%;"><h1>Downstream reactions</h1>
+
                             <div class="index_para" style="width: 90%;"><h1>More possibilities</h1>
                                 <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;">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>
+
                                 <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;">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 right, #a8ff78,#78ffd6);">Read more</button>
+
                                <button style="background-image: linear-gradient(to right, #a8ff78,#78ffd6);">Read more</button>
 
                             </div>
 
                             </div>
 
                              
 
                              
Line 440: Line 440:
 
                         <div class="col-6">
 
                         <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="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>
+
                             <div class="index_para" style="width: 84%;"><h1>Hardware</h1>
                                 <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;">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>
+
                                 <p class="fs-3" style="margin: 1cm 0 1cm 0; text-indent: 1cm;">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, #f8ffae,#43c6ac);">Read more</button>
 
                                 <button style="background-image: linear-gradient(to right, #f8ffae,#43c6ac);">Read more</button>
 
                             </div>
 
                             </div>
Line 449: Line 449:
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
+
               
 
                  
 
                  
 
                 <div class="container">
 
                 <div class="container">
Line 455: Line 455:
 
                 </div>
 
                 </div>
 
             </section>
 
             </section>
             <section class="text-center text-lg-left py-9 background-white" id="target-down-indicator">
+
           
 +
             <section class="text-center pb-3">
 +
                <div class="background-holder overlay overlay-2" style="background-image:url(assets/images/footer-bg.jpg);background-position: top;"> </div>
 +
                <!--/.background-holder-->
 
                 <div class="container">
 
                 <div class="container">
                     <div class="row">
+
                     <div class="row justify-content-center">
                         <div class="col-lg-4">
+
                         <div class="col-12">
                             <a href="gallery.html">
+
                             <h4 class="mb-2 color-white">Join the
                                 <div class="hoverbox">
+
                                 <em>Hideaway </em>Newsletters</h4>
                                    <img src="assets/images/thumb-gallery.jpg" alt="" />
+
                                <p class="mb-0 color-9">Subscribe to our mailing list to receive updates and promotional offers.</p>
                                     <div class="hoverbox-primary-content as-hoverbox-content d-flex align-items-center justify-content-center h-100">
+
                            </div>
                                         <h3 class="color-white">Gallery</h3>
+
                            <div class="col-md-10 col-lg-7 col-xl-5 mt-4">
                                    </div>
+
                                <form method="post">
                                    <div class="hoverbox-content p-4">
+
                                     <div class="row align-items-center no-gutters">
                                        <div class="hoverbox-bg d-flex align-items-center justify-content-center h-100"></div>
+
                                         <div class="col-md-8 px-2">
                                    </div>
+
                                            <input class="form-control" type="hidden" name="to" value="username@domain.extension" />
 +
                                            <input class="form-control border-color-white" type="text" placeholder="Enter Email Here" /> </div>
 +
                                            <div class="col-md-4 px-2 mt-3 mt-md-0">
 +
                                                <button class="btn btn-block btn-white" type="submit">
 +
                                                    <span>Submit</span>
 +
                                                </button>
 +
                                            </div>
 +
                                        </div>
 +
                                    </form>
 
                                 </div>
 
                                 </div>
                             </a>
+
                             </div>
                        </div>
+
                            <div class="row mt-8 fs--1">
                        <div class="col-lg-4 mt-4 mt-lg-0">
+
                                <div class="col-lg-auto ml-lg-auto order-lg-2 mb-2 mb-lg-0">
                            <a href="amenities.html">
+
                                    <a class="d-inline-block mx-2 color-8" href="#">Home</a>
                                <div class="hoverbox">
+
                                     <a class="d-inline-block mx-2 color-8" href="#">Book Now</a>
                                     <img src="assets/images/thumb-amneities.jpg" alt="" />
+
                                     <a class="d-inline-block mx-2 color-8" href="#">Contact</a>
                                     <div class="hoverbox-primary-content as-hoverbox-content d-flex align-items-center justify-content-center h-100">
+
                                    <a class="d-inline-block mx-2 color-8" href="#">Events</a>
                                        <h3 class="color-white">Amneities</h3>
+
                                     <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="hoverbox-content p-4">
+
                                        <div class="hoverbox-bg d-flex align-items-center justify-content-center h-100"></div>
+
                                    </div>
+
 
                                 </div>
 
                                 </div>
                            </a>
+
                                <div class="col-lg text-lg-left">
                        </div>
+
                                    <div class="color-8">&copy; Hideaway 2018 | Template crafted by
                        <div class="col-lg-4 mt-4 mt-lg-0">
+
                                        <a class="color-8" href="https://themewagon.com/" target="_blank">Themewagon</a>
                            <a href="packages.html">
+
                                <div class="hoverbox">
+
                                    <img src="assets/images/thumb-packages.jpg" alt="" />
+
                                    <div class="hoverbox-primary-content as-hoverbox-content d-flex align-items-center justify-content-center h-100">
+
                                        <h3 class="color-white">Packages</h3>
+
 
                                     </div>
 
                                     </div>
                                    <div class="hoverbox-content p-4">
 
                                        <div class="hoverbox-bg d-flex align-items-center justify-content-center h-100"></div>
 
                                    </div>
 
                                </div>
 
                            </a>
 
                        </div>
 
                    </div>
 
                    <div class="row mt-6">
 
                        <div class="col-lg-4">
 
                            <h3 class="color-primary ls">An
 
                                <em>inviting </em>escape</h3>
 
                            </div>
 
                            <div class="col-lg-8">
 
                                <p>Crafted with Bootstrap 4, Hideaway is perfectly responsive to every devices available. Thousands of CSS helper classes let you customize this template in any way you want, without writing any code. This is a dummy text that
 
                                    you can change customize as you like with your description.</p>
 
                                    <a class="btn btn-outline-primary mt-2 mt-lg-4 py-lg-3 px-lg-4 fw-300" href="#">Our History</a>
 
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 513: Line 500:
 
                         <!--/.container-->
 
                         <!--/.container-->
 
                     </section>
 
                     </section>
                    <section class="text-center overflow-hidden py-11">
+
                </main>
                        <div class="background-holder overlay overlay-2 parallax" style="background-image:url(assets/images/cta.jpg);" data-rellax-percentage="0.5"> </div>
+
                <!--  -->
                        <!--/.background-holder-->
+
                <!--    JavaScripts-->
                        <div class="container">
+
                <!--    =============================================-->
                            <div class="row">
+
                <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> -->
                                <div class="col">
+
                <script src="assets/lib/jquery/dist/jquery.min.js"></script>
                                    <h1 class="color-white fs-4 fs-lg-7 mb-5">Eagerly
+
                <!-- <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> -->
                                        <em>waiting </em>to welcome you.</h1>
+
                <!-- <script src="assets/lib/bootstrap/dist/js/bootstrap.min.js"></script> -->
                                        <a class="btn btn-outline-white btn-lg d-none d-lg-inline-block" href="#">Book Your Stay</a>
+
                <!-- <script src="assets/js/googlemap.js"></script> -->
                                        <a class="btn btn-outline-white d-lg-none" href="#">Book Your Stay</a>
+
               
                                    </div>
+
                <!-- <script src="assets/lib/imagesloaded/imagesloaded.pkgd.min.js"></script> -->
                                </div>
+
                <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>
                                <!--/.row-->
+
                <!-- <script src="assets/lib/jquery-menu-aim/jquery.menu-aim.js"></script> -->
                            </div>
+
                <!-- <script src="assets/lib/gsap/src/minified/TweenMax.min.js"></script> -->
                            <!--/.container-->
+
                <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>
                        </section>
+
               
                        <section class="text-center py-9">
+
                <!-- <script src="assets/lib/gsap/src/minified/plugins/ScrollToPlugin.min.js"></script> -->
                            <div class="container">
+
                <!-- <script src="assets/lib/CustomEase.min.js"></script> -->
                                <div class="row">
+
                <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>
                                    <div class="col-xl-6">
+
               
                                        <h6 class="fs-0 mb-4 color-primary">123 Fake Street, Stone Ridge, NY 12345</h6>
+
                <!-- <script src="assets/js/config.js"></script> -->
                                        <div class="p-2">
+
                <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/config.js&action=raw&ctype=text/javascript"></script>
                                            <div class="row">
+
               
                                                <div class="col">
+
                <!-- <script src="assets/lib/rellax/rellax.min.js"></script> -->
                                                    <div class="googlemap" data-latlng="41.8333925,-88.0123393" data-scrollwheel="false" data-icon="assets/images/map-marker.png" data-zoom="15" data-theme="Default" style="height: 353px;">
+
                <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>
                                                        <div class="marker-content py-3">
+
               
                                                            <h5 class="color-primary">The
+
                <!-- <script src="assets/js/zanimation.js"></script> -->
                                                                <em>Hideaway </em>Resort</h5>
+
                <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/zanimation.js&action=raw&ctype=text/javascript"></script>
                                                                <p class="fs--1">A nice description about your place
+
               
                                                                    <br/>Customize it as you want.</p>
+
                <!-- <script src="assets/js/inertia.js"></script> -->
                                                                </div>
+
                <!-- <script src="assets/lib/lightbox2/dist/js/lightbox.js"></script> -->
                                                            </div>
+
                <!-- <script src="assets/lib/flexslider/jquery.flexslider-min.js"></script> -->
                                                        </div>
+
                <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>
                                                    </div>
+
               
                                                </div>
+
                <!-- <script src="assets/js/core.js"></script> -->
                                            </div>
+
                <!-- <script src="assets/js/main.js"></script> -->
                                            <div class="col-xl-6 mt-6 mt-xl-0">
+
                <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/main.js&action=raw&ctype=text/javascript"></script>
                                                <a class="d-inline-block mx-1 mx-lg-2 font-1 color-primary mb-lg-4" href="#">Instagram</a>
+
                <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/core.js&action=raw&ctype=text/javascript"></script>
                                                <span>/</span>
+
                <!-- <script src="assets/js/particleanimate.js"></script> -->
                                                <a class="d-inline-block mx-1 mx-lg-2 font-1 color-primary mb-lg-4" href="#">Facebook</a>
+
                <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/particleanimate.js&action=raw&ctype=text/javascript"></script>
                                                <span>/</span>
+
            </body>
                                                <a class="d-inline-block mx-1 mx-lg-2 font-1 color-primary mb-lg-4" href="#">Twitter</a>
+
            </html>
                                                <div class="row no-gutters mt-4 mt-lg-0">
+
                                                    <div class="col-md-6 col-lg-4 p-1">
+
                                                        <a href="assets/images/feature/3.jpg" data-lightbox="image" data-title="my caption">
+
                                                            <img src="assets/images/feature/3.jpg" alt="" />
+
                                                        </a>
+
                                                    </div>
+
                                                    <div class="col-md-6 col-lg-4 p-1">
+
                                                        <a href="assets/images/feature/8.jpg" data-lightbox="image" data-title="my caption">
+
                                                            <img src="assets/images/feature/8.jpg" alt="" />
+
                                                        </a>
+
                                                    </div>
+
                                                    <div class="col-md-6 col-lg-4 p-1">
+
                                                        <a href="assets/images/feature/5.jpg" data-lightbox="image" data-title="my caption">
+
                                                            <img src="assets/images/feature/5.jpg" alt="" />
+
                                                        </a>
+
                                                    </div>
+
                                                    <div class="col-md-6 col-lg-4 p-1">
+
                                                        <a href="assets/images/feature/1.jpg" data-lightbox="image" data-title="my caption">
+
                                                            <img src="assets/images/feature/1.jpg" alt="" />
+
                                                        </a>
+
                                                    </div>
+
                                                    <div class="col-md-6 col-lg-4 p-1">
+
                                                        <a href="assets/images/feature/6.jpg" data-lightbox="image" data-title="my caption">
+
                                                            <img src="assets/images/feature/6.jpg" alt="" />
+
                                                        </a>
+
                                                    </div>
+
                                                    <div class="col-md-6 col-lg-4 p-1">
+
                                                        <a href="assets/images/feature/12.jpg" data-lightbox="image" data-title="my caption">
+
                                                            <img src="assets/images/feature/12.jpg" alt="" />
+
                                                        </a>
+
                                                    </div>
+
                                                </div>
+
                                            </div>
+
                                        </div>
+
                                        <!--/.row-->
+
                                    </div>
+
                                    <!--/.container-->
+
                                </section>
+
                                <section class="text-center pb-3">
+
                                    <div class="background-holder overlay overlay-2" style="background-image:url(assets/images/footer-bg.jpg);background-position: top;"> </div>
+
                                    <!--/.background-holder-->
+
                                    <div class="container">
+
                                        <div class="row justify-content-center">
+
                                            <div class="col-12">
+
                                                <h4 class="mb-2 color-white">Join the
+
                                                    <em>Hideaway </em>Newsletters</h4>
+
                                                    <p class="mb-0 color-9">Subscribe to our mailing list to receive updates and promotional offers.</p>
+
                                                </div>
+
                                                <div class="col-md-10 col-lg-7 col-xl-5 mt-4">
+
                                                    <form method="post">
+
                                                        <div class="row align-items-center no-gutters">
+
                                                            <div class="col-md-8 px-2">
+
                                                                <input class="form-control" type="hidden" name="to" value="username@domain.extension" />
+
                                                                <input class="form-control border-color-white" type="text" placeholder="Enter Email Here" /> </div>
+
                                                                <div class="col-md-4 px-2 mt-3 mt-md-0">
+
                                                                    <button class="btn btn-block btn-white" type="submit">
+
                                                                        <span>Submit</span>
+
                                                                    </button>
+
                                                                </div>
+
                                                            </div>
+
                                                        </form>
+
                                                    </div>
+
                                                </div>
+
                                                <div class="row mt-8 fs--1">
+
                                                    <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="#">Home</a>
+
                                                        <a class="d-inline-block mx-2 color-8" href="#">Book Now</a>
+
                                                        <a class="d-inline-block mx-2 color-8" href="#">Contact</a>
+
                                                        <a class="d-inline-block mx-2 color-8" href="#">Events</a>
+
                                                        <a class="d-inline-block mx-2 color-8" href="#">Policies</a>
+
                                                        <a class="d-inline-block mx-2 color-8" href="#">Term + Conditions</a>
+
                                                    </div>
+
                                                    <div class="col-lg text-lg-left">
+
                                                        <div class="color-8">&copy; Hideaway 2018 | Template crafted by
+
                                                            <a class="color-8" href="https://themewagon.com/" target="_blank">Themewagon</a>
+
                                                        </div>
+
                                                    </div>
+
                                                </div>
+
                                                <!--/.row-->
+
                                            </div>
+
                                            <!--/.container-->
+
                                        </section>
+
                                    </main>
+
                                    <!--  -->
+
                                    <!--    JavaScripts-->
+
                                    <!--    =============================================-->
+
                                    <!-- <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 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/js/googlemap.js"></script> -->
+
                                   
+
                                    <!-- <script src="assets/lib/imagesloaded/imagesloaded.pkgd.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 src="assets/lib/jquery-menu-aim/jquery.menu-aim.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/TweenMax.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 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/js/config.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 src="assets/lib/rellax/rellax.min.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 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 src="assets/lib/lightbox2/dist/js/lightbox.js"></script> -->
+
                                    <!-- <script src="assets/lib/flexslider/jquery.flexslider-min.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/core.js"></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 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/particleanimate.js"></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>
+
                                </body>
+
                                </html>
+

Revision as of 09:36, 19 October 2019

iGEM Tsinghua
  • Tsinghua 2019

    LIGHT-INDUCED PHASE SEPARATION

  • Tsinghua 2019

    LIGHT-INDUCED PHASE SEPARATION

  • Tsinghua 2019

    LIGHT-INDUCED PHASE SEPARATION

  • Tsinghua 2019

    LIGHT-INDUCED PHASE SEPARATION

  • 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.

Join the Hideaway Newsletters

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

© Hideaway 2018 | Template crafted by Themewagon