Difference between revisions of "Team:Tsinghua"

(Prototype team page)
 
Line 2: Line 2:
 
<html>
 
<html>
  
 +
<head>
 +
<meta charset="UTF-8" />
  
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
<title>Tsinghua Documentation - 2019.igem.org</title>
 +
<meta name="generator" content="MediaWiki 1.24.1" />
 +
<link rel="shortcut icon" href="/favicon.ico" />
 +
<link rel="search" type="application/opensearchdescription+xml" href="/wiki/opensearch_desc.php" title="2019.igem.org (en)" />
 +
<link rel="alternate" hreflang="x-default" href="/Resources/Template_Documentation" />
 +
<link rel="copyright" href="https://creativecommons.org/licenses/by/3.0/" />
 +
<link rel="alternate" type="application/atom+xml" title="2019.igem.org Atom feed" href="/wiki/index.php?title=Special:RecentChanges&amp;feed=atom" />
 +
<link rel="stylesheet" href="https://2019.igem.org/wiki/load.php?debug=false&amp;lang=en&amp;modules=mediawiki.legacy.commonPrint%2Cshared%7Cmediawiki.skinning.content.externallinks%7Cmediawiki.skinning.interface%7Cmediawiki.ui.button%7Cskins.igem.styles&amp;only=styles&amp;skin=igem&amp;*" />
 +
<!--[if IE 6]><link rel="stylesheet" href="/wiki/skins/Igem/IE60Fixes.css?303" media="screen" /><![endif]-->
 +
<!--[if IE 7]><link rel="stylesheet" href="/wiki/skins/Igem/IE70Fixes.css?303" media="screen" /><![endif]--><meta name="ResourceLoaderDynamicStyles" content="" />
 +
<style>a:lang(ar),a:lang(kk-arab),a:lang(mzn),a:lang(ps),a:lang(ur){text-decoration:none}
 +
/* cache key: 2019_igem_org:resourceloader:filter:minify-css:7:35f114711b15fda1f15f5df02b43e4bc */</style>
 +
<script src="https://2019.igem.org/wiki/load.php?debug=false&amp;lang=en&amp;modules=startup&amp;only=scripts&amp;skin=igem&amp;*"></script>
 +
<script>if(window.mw){
 +
mw.config.set({"wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"Resources/Template_Documentation","wgTitle":"Resources/Template Documentation","wgCurRevisionId":2350,"wgRevisionId":2350,"wgArticleId":121,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":"Yunoinsky","wgUserGroups":["*","user","autoconfirmed"],"wgCategories":[],"wgBreakFrames":false,"wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgMonthNamesShort":["","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"wgRelevantPageName":"Resources/Template_Documentation","wgUserId":1817,"wgUserEditCount":0,"wgUserRegistration":1557059995000,"wgUserNewMsgRevisionId":null,"wgIsProbablyEditable":false,"wgRestrictionEdit":[],"wgRestrictionMove":[]});
 +
}</script><script>if(window.mw){
 +
mw.loader.implement("user.options",function($,jQuery){mw.user.options.set({"ccmeonemails":0,"cols":80,"date":"default","diffonly":0,"disablemail":0,"editfont":"default","editondblclick":0,"editsectiononrightclick":0,"enotifminoredits":0,"enotifrevealaddr":0,"enotifusertalkpages":1,"enotifwatchlistpages":1,"extendwatchlist":0,"fancysig":0,"forceeditsummary":0,"gender":"unknown","hideminor":0,"hidepatrolled":0,"imagesize":2,"math":1,"minordefault":0,"newpageshidepatrolled":0,"nickname":"","norollbackdiff":0,"numberheadings":0,"previewonfirst":0,"previewontop":1,"rcdays":7,"rclimit":50,"rows":25,"showhiddencats":0,"shownumberswatching":1,"showtoolbar":1,"skin":"igem","stubthreshold":0,"thumbsize":5,"underline":2,"uselivepreview":0,"usenewrc":1,"watchcreations":1,"watchdefault":1,"watchdeletion":0,"watchlistdays":3,"watchlisthideanons":0,"watchlisthidebots":0,"watchlisthideliu":0,"watchlisthideminor":0,"watchlisthideown":0,"watchlisthidepatrolled":0,"watchmoves":0,"watchrollback":0,
 +
"wllimit":250,"useeditwarning":1,"prefershttps":1,"language":"en","variant-gan":"gan","variant-iu":"iu","variant-kk":"kk","variant-ku":"ku","variant-shi":"shi","variant-sr":"sr","variant-tg":"tg","variant-uz":"uz","variant-zh":"zh","searchNs0":true,"searchNs1":false,"searchNs2":false,"searchNs3":false,"searchNs4":false,"searchNs5":false,"searchNs6":false,"searchNs7":false,"searchNs8":false,"searchNs9":false,"searchNs10":false,"searchNs11":false,"searchNs12":false,"searchNs13":false,"searchNs14":false,"searchNs15":false});},{},{});mw.loader.implement("user.tokens",function($,jQuery){mw.user.tokens.set({"editToken":"0a01daa1c813c6c2dc420febf993afe0+\\","patrolToken":"6bc9eb4357326fc0635615e4f27f0418+\\","watchToken":"151bcf6668aaf2784b71b46ac46a4579+\\"});},{},{});
 +
/* cache key: 2019_igem_org:resourceloader:filter:minify-js:7:7846161d434a545962d1f00908a98090 */
 +
}</script>
 +
<script>if(window.mw){
 +
mw.loader.load(["mediawiki.page.startup","mediawiki.legacy.wikibits","mediawiki.legacy.ajax"]);
 +
}</script>
  
  
−
<div class="column full_size" >
+
    <!--  -->
−
<h1> Welcome to iGEM 2019! </h1>
+
    <!--    Favicons-->
−
<p>Your team has been approved and you are ready to start the iGEM season! </p>
+
    <!--    =============================================-->
−
 
+
   
−
 
+
   
−
<img src="https://placehold.it/1080x320">
+
    <meta name="theme-color" content="#ffffff">
−
+
    <!--  -->
−
 
+
    <!--    Stylesheets-->
−
</div>  
+
    <!--    =============================================-->
−
 
+
    <!-- Default stylesheets-->
−
 
+
    <link href="assets/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
−
<div class="column full_size" >
+
    <!-- Template specific stylesheets-->
−
 
+
    <link href="assets/lib/loaders.css/loaders.min.css" rel="stylesheet">
−
<h3>Before you start</h3>
+
    <link href="https://fonts.googleapis.com/css?family=Hind+Madurai:300,400,500,600,700|Playfair+Display:400,400i,700,700i,900,900i" rel="stylesheet">
−
<p> Please read the following pages:</p>
+
    <link href="assets/lib/hamburgers/dist/hamburgers.min.css" rel="stylesheet">
−
<ul>
+
    <link href="assets/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
−
<li> <a href="https://2019.igem.org/Competition">Competition Hub</a> </li>
+
    <link href="assets/lib/lightbox2/dist/css/lightbox.css" rel="stylesheet">
−
<li> <a href="https://2019.igem.org/Competition/Deliverables/Wiki">Wiki Requirements page</a></li>
+
    <link href="assets/lib/flexslider/flexslider.css" rel="stylesheet">
−
<li> <a href="https://2019.igem.org/Resources/Template_Documentation">Template documentation</a></li>
+
    <!-- Main stylesheet and color file-->
−
</ul>
+
    <link href="assets/css/style.css" rel="stylesheet">
−
</div>
+
    <link href="assets/css/custom.css" rel="stylesheet">
−
 
+
</head>
−
 
+
−
<div class="clear extra_space"></div>
+
    <body data-spy="scroll" data-target=".inner-link" data-offset="60">
−
<div class="line_divider"></div>
+
        <main>
−
<div class="clear extra_space"></div>
+
           
−
 
+
            <div class="loading" id="preloader">
−
 
+
                <div class="h-100vh d-flex align-items-center justify-content-center background-white">
−
 
+
                    <div>                       
−
<div class="column full_size" >
+
                        <img src="assets/images/amenities.jpg" style="width:5%;  position:absolute; left: 46%; top: 43%">
−
<h3> Styling your wiki </h3>
+
                    </div>
−
<p>You may style this page as you like or you can simply leave the style as it is. You can easily keep the styling and edit the content of these default wiki pages with your project information and completely fulfill the requirement to document your project.</p>
+
                </div>
−
<p>While you may not win Best Wiki with this styling, your team is still eligible for all other awards. This default wiki meets the requirements, it improves navigability and ease of use for visitors, and you should not feel it is necessary to style beyond what has been provided.</p>  
+
            </div>
−
 
+
            <div class="znav-container znav-transparent mt-4" id="znav-container">
−
</div>
+
                <div class="container">
−
 
+
                   
−
 
+
                    <nav class="navbar navbar-expand-lg">
−
 
+
                        <a class="navbar-brand overflow-hidden pr-3 fs-3" href="index.html">iGEM
−
 
+
                            <span class="d-none d-lg-inline-block">Tsinghua</span>
−
<div class="clear extra_space"></div>
+
                        </a>
−
 
+
                        <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 hamburger--emphatic">
−
 
+
                                <div class="hamburger-box">
−
<div class="column third_size" >
+
                                    <div class="hamburger-inner"></div>
−
 
+
                                   
−
<h3> Uploading pictures and files </h3>
+
                                </div>
−
<p> You must upload any pictures and files to the iGEM 2019 server. Remember to keep all your pictures and files within your team's namespace or at least include your team's name in the file name. </p>
+
                            </div>
−
 
+
                        </button>
−
 
+
                        <div class="collapse navbar-collapse" id="navbarNavDropdown">
−
<p>When you upload, set the "Destination Filename" to <b> T--YourOfficialTeamName--NameOfFile.jpg</b>. (If you don't do this, someone else might upload a different file with the same "Destination Filename", and your file would be erased!)</p>
+
                            <ul class="navbar-nav font-2 fs-1">
−
 
+
                                <li>
−
<div class="button_link">
+
                                    <a href="index.html"><span class="fa fa-home"></span> Home</a>
−
<a href="https://2019.igem.org/Special:Upload">
+
                                   
−
UPLOAD FILES
+
                                </li>
−
</a>
+
                                <li>
−
</div>
+
                                    <a href="Team.html">Team</a>
−
 
+
                                </li>
−
</div>
+
                                <li>
−
 
+
                                    <a href="JavaScript:void(0)">Project</a>
−
<div class="column third_size" >
+
                                    <ul class="dropdown fs-0">
−
<h3> Wiki template information </h3>
+
                                        <li>
−
<p>We have created these wiki template pages to help you get started and to help you think about how your team will be evaluated. You can find a list of all the pages tied to awards here at the <a href="https://2019.igem.org/Judging/Pages_for_Awards">Pages for awards</a> link. You must edit these pages to be evaluated for medals and awards, but ultimately the design, layout, style and all other elements of your team wiki is up to you!</p>
+
                                            <a href="Description.html">Description</a>
−
 
+
                                        </li>
−
</div>  
+
                                        <li>
−
 
+
                                            <a href="Experiments.html">Experiments</a>
−
 
+
                                        </li>
−
 
+
                                        <li>
−
<div class="column third_size" >
+
                                            <a href="Demonstration.html">Results</a>
−
<div class="highlight decoration_B_full">
+
                                        </li>
−
<h3> Editing your wiki </h3>
+
                                        <li>
−
<p>On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world! </p>  
+
                                            <a href="Notebook.html">Notebook</a>
−
<p>Use WikiTools - Edit in the black menu bar to edit this page</p>
+
                                        </li>
−
 
+
                                       
−
<div class="button_link">
+
                                        <li>
−
<a href="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua&action=edit">  
+
                                            <a href="Attributions.html">Attributions</a>
−
EDIT PAGE
+
                                        </li>
−
</a>
+
                                    </ul>
−
</div>
+
                                </li>
−
 
+
                                <li>
−
 
+
                                    <a href="JavaScript:void(0)">Model</a>
−
</div>
+
                                    <ul class="dropdown fs-0">
−
</div>
+
                                        <li>
−
 
+
                                            <a href="Model.html">Part I</a>
−
 
+
                                        </li>
−
 
+
                                        <li>
−
 
+
                                            <a href="Model2.html">Part II</a>
−
 
+
                                        </li>
−
<div class="clear extra_space"></div>
+
                                        <li>
−
<div class="line_divider"></div>
+
                                            <a href="Model3.html">Part III</a>
−
<div class="clear extra_space"></div>
+
                                        </li>
−
 
+
                                    </ul>
−
 
+
                                </li>
−
 
+
                                <li>
−
<div class="column two_thirds_size" >
+
                                    <a href="JavaScript:void(0)">Parts</a>
−
<h3>Tips</h3>
+
                                    <ul class="dropdown fs-0">
−
<p>This wiki will be your team’s first interaction with the rest of the world, so here are a few tips to help you get started: </p>
+
                                        <li>
−
<ul>
+
                                            <a href="Basic.html">Basic</a>
−
<li>State your accomplishments! Tell people what you have achieved from the start. </li>
+
                                        </li>
−
<li>Be clear about what you are doing and how you plan to do this.</li>
+
                                        <li>
−
<li>You have a global audience! Consider the different backgrounds that your users come from.</li>
+
                                            <a href="Composite.html">Composite</a>
−
<li>Make sure information is easy to find; nothing should be more than 3 clicks away.  </li>
+
                                        </li>
−
<li>Avoid using very small fonts and low contrast colors; information should be easy to read.  </li>
+
                                        <li>
−
<li>Start documenting your project as early as possible; don’t leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the <a href="https://2019.igem.org/Calendar">iGEM 2019 calendar</a> </li>
+
                                            <a href="Improve.html">Improve</a>
−
<li>Have lots of fun! </li>
+
                                        </li>
−
</ul>  
+
                                        <li>
−
</div>
+
                                            <a href="Characterization.html">Characterization</a>
−
 
+
                                        </li>
−
 
+
                                    </ul>
−
<div class="column third_size">
+
                                </li>
−
<div class="highlight decoration_A_full">
+
                               
−
<h3>Inspiration</h3>
+
                                <li>
−
<p> You can also view other team wikis for inspiration! Here are some examples:</p>
+
                                    <a href="JavaScript:void(0)">Human Practices</a>
−
<ul>
+
                                    <ul class="dropdown fs-0">
−
<li> <a href="https://2014.igem.org/Team:SDU-Denmark/"> 2014 SDU Denmark </a> </li>
+
                                        <li>
−
<li> <a href="https://2014.igem.org/Team:Aalto-Helsinki">2014 Aalto-Helsinki</a> </li>
+
                                            <a href="Human_Practices.html">Overview</a>
−
<li> <a href="https://2014.igem.org/Team:LMU-Munich">2014 LMU-Munich</a> </li>
+
                                        </li>
−
<li> <a href="https://2014.igem.org/Team:Michigan"> 2014 Michigan</a></li>
+
                                        <li>
−
<li> <a href="https://2014.igem.org/Team:ITESM-Guadalajara">2014 ITESM-Guadalajara </a></li>
+
                                            <a href="General.html">General</a>
−
<li> <a href="https://2014.igem.org/Team:SCU-China"> 2014 SCU-China </a></li>
+
                                        </li>
−
</ul>
+
                                        <li>
−
</div>
+
                                            <a href="Integrated.html">Integrated</a>
−
</div>
+
                                        </li>
−
 
+
                                        <li>
−
 
+
                                            <a href="Safety.html">Safety</a>
 +
                                        </li>
 +
                                        <li>
 +
                                            <a href="Collaborations.html">Collaborations</a>
 +
                                        </li>
 +
                                    </ul>
 +
                                </li>
 +
                            </ul>
 +
                           
 +
                        </div>
 +
                       
 +
                    </nav>
 +
                   
 +
                </div>
 +
            </div>
 +
           
 +
            <div class="flexslider flexslider-simple h-box parallax">
 +
                <div id="whiteMask"><a href="#afterwhiteMask">
 +
                    <img src="assets/images/whitemask.png"></a>
 +
                </div>
 +
               
 +
                <canvas id="myCanvas" width="1536" height="673"></canvas>
 +
                <ul class="slides">
 +
                    <li data-zanim-timeline="{}">
 +
                        <section class="py-0 text-center">
 +
                            <div class="background-holder overlay" style="background-image:url(assets/images/indexSlider1.jpg);"> </div>
 +
                            <!--/.background-holder-->
 +
                            <div class="container">
 +
                                <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="col">
 +
                                        <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>
 +
                                <!--/.row-->
 +
                            </div>
 +
                            <!--/.container-->
 +
                        </section>
 +
                    </li>
 +
                    <li data-zanim-timeline="{}">
 +
                        <section class="py-0 text-center">
 +
                            <div class="background-holder overlay" style="background-image:url(assets/images/indexSlider2.jpg);"> </div>
 +
                            <!--/.background-holder-->
 +
                            <div class="container">
 +
                                <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="col">
 +
                                        <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>
 +
                                <!--/.row-->
 +
                            </div>
 +
                            <!--/.container-->
 +
                        </section>
 +
                    </li>
 +
                    <li data-zanim-timeline="{}">
 +
                        <section class="py-0 text-center">
 +
                            <div class="background-holder overlay" style="background-image:url(assets/images/indexSlider3.jpg);"> </div>
 +
                            <!--/.background-holder-->
 +
                            <div class="container">
 +
                                <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="col">
 +
                                        <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>
 +
                                <!--/.row-->
 +
                            </div>
 +
                            <!--/.container-->
 +
                        </section>
 +
                    </li>
 +
                    <li data-zanim-timeline="{}">
 +
                        <section class="py-0 text-center">
 +
                            <div class="background-holder overlay" style="background-image:url(assets/images/indexSlider4.jpg);"> </div>
 +
                            <!--/.background-holder-->
 +
                            <div class="container">
 +
                                <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="col">
 +
                                        <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>
 +
                                <!--/.row-->
 +
                            </div>
 +
                            <!--/.container-->
 +
                        </section>
 +
                    </li>
 +
                    <li data-zanim-timeline="{}">
 +
                        <section class="py-0 text-center">
 +
                            <div class="background-holder overlay" style="background-image:url(assets/images/indexSlider5.jpg);"> </div>
 +
                            <!--/.background-holder-->
 +
                            <div class="container">
 +
                                <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="col">
 +
                                        <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>
 +
                                <!--/.row-->
 +
                            </div>
 +
                            <!--/.container-->
 +
                        </section>
 +
                    </li>
 +
                    <li data-zanim-timeline="{}">
 +
                        <section class="py-0 text-center">
 +
                            <div class="background-holder overlay" style="background-image:url(assets/images/indexSlider6.jpg);"> </div>
 +
                            <!--/.background-holder-->
 +
                            <div class="container">
 +
                                <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="col">
 +
                                        <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>
 +
                                <!--/.row-->
 +
                            </div>
 +
                            <!--/.container-->
 +
                        </section>
 +
                    </li>
 +
                </ul>
 +
                <span id="afterwhiteMask"></span>
 +
            </div>
 +
            <section class="text-center text-lg-left py-9 background-white">
 +
                <div style="margin-left:auto;margin-right:auto;right: 0;width: 800px;" id="highlight_head">
 +
                    <div style="position: absolute;top:140px;left:220px;height: 280px;width: 30px;background-image:linear-gradient(to bottom, rgb(252, 106, 8), rgb(0, 162, 255));">
 +
                       
 +
                    </div>
 +
                    <p class="fs-5" style="text-indent: 60px;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 style="height: 10px;"></div>
 +
                <hr width="1100">
 +
                <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="assets/images/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;">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>
 +
                    <div style="height:100px"></div>
 +
                    <div class = "row" id="highlight2">
 +
                        <div class="col-2">
 +
                           
 +
                        </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;">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="assets/images/indexhighlight2.png" width="100%">
 +
                            </div>
 +
                        </div>
 +
                        <div class="col-1"></div>
 +
                    </div>
 +
                    <div class = "row" id="highlight3">
 +
                        <div class="col-1"></div>
 +
                        <div class = "col-4">
 +
                            <div style="position:relative">
 +
                                <img src="assets/images/indexhighlight3.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, #ffafbd,#ffc3a0);"></div>
 +
                            <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;">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>
 +
                                <button style="background-image: linear-gradient(to right, #ffafbd,#ffc3a0);">Read more</button>
 +
                            </div>
 +
                           
 +
                            <div class="col-1"></div>
 +
                        </div>
 +
                    </div>
 +
                   
 +
                    <div style="height:150px"></div>
 +
                    <div class = "row" id="highlight4">
 +
                        <div class="col-2">
 +
                           
 +
                        </div>
 +
                        <div class="col-5">
 +
                            <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: 90%;"><h1>Downstream reactions</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>
 +
                                <button style="background-image: linear-gradient(to right, #ffe259,#ffa751);">Read more</button>
 +
                            </div>
 +
                           
 +
                        </div>
 +
                       
 +
                        <div class = "col-4">
 +
                            <div style="position:relative">
 +
                                <img src="assets/images/indexhighlight4.png" style="float:right" width="80%">
 +
                            </div>
 +
                        </div>
 +
                        <div class="col-1"></div>
 +
                    </div>
 +
                    <div style="height: 10px;"></div>
 +
                    <div class = "row" id="highlight5">
 +
                        <div class="col-1"></div>
 +
                        <div class = "col-4">
 +
                            <div style="position:relative">
 +
                                <img src="assets/images/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;">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 class="col-1"></div>
 +
                        </div>
 +
                    </div>
 +
                    <div style="height: 90px;"></div>
 +
                    <div class = "row" id="highlight6">
 +
                            <div class="col-2">
 +
                           
 +
                                </div>
 +
                        <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="index_para" style="width: 90%;"><h1>Downstream reactions</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>
 +
                                        <button style="background-image: linear-gradient(to right, #a8ff78,#78ffd6);">Read more</button>
 +
                            </div>
 +
                           
 +
                        </div>
 +
                       
 +
                        <div class = "col-4">
 +
                            <div style="position:relative">
 +
                                <img src="assets/images/indexhighlight6.png" style="float:right" width="80%">
 +
                            </div>
 +
                        </div>
 +
                        <div class="col-1"></div>
 +
                    </div>
 +
                </div>
  
 +
               
 +
                <div class="container">
 +
                   
 +
                </div>
 +
            </section>
 +
            <section class="text-center text-lg-left py-9 background-white" id="target-down-indicator">
 +
                <div class="container">
 +
                    <div class="row">
 +
                        <div class="col-lg-4">
 +
                            <a href="gallery.html">
 +
                                <div class="hoverbox">
 +
                                    <img src="assets/images/thumb-gallery.jpg" alt="" />
 +
                                    <div class="hoverbox-primary-content as-hoverbox-content d-flex align-items-center justify-content-center h-100">
 +
                                        <h3 class="color-white">Gallery</h3>
 +
                                    </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 class="col-lg-4 mt-4 mt-lg-0">
 +
                            <a href="amenities.html">
 +
                                <div class="hoverbox">
 +
                                    <img src="assets/images/thumb-amneities.jpg" alt="" />
 +
                                    <div class="hoverbox-primary-content as-hoverbox-content d-flex align-items-center justify-content-center h-100">
 +
                                        <h3 class="color-white">Amneities</h3>
 +
                                    </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 class="col-lg-4 mt-4 mt-lg-0">
 +
                            <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 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>
 +
                            <!--/.row-->
 +
                        </div>
 +
                        <!--/.container-->
 +
                    </section>
 +
                    <section class="text-center overflow-hidden py-11">
 +
                        <div class="background-holder overlay overlay-2 parallax" style="background-image:url(assets/images/cta.jpg);" data-rellax-percentage="0.5"> </div>
 +
                        <!--/.background-holder-->
 +
                        <div class="container">
 +
                            <div class="row">
 +
                                <div class="col">
 +
                                    <h1 class="color-white fs-4 fs-lg-7 mb-5">Eagerly
 +
                                        <em>waiting </em>to welcome you.</h1>
 +
                                        <a class="btn btn-outline-white btn-lg d-none d-lg-inline-block" href="#">Book Your Stay</a>
 +
                                        <a class="btn btn-outline-white d-lg-none" href="#">Book Your Stay</a>
 +
                                    </div>
 +
                                </div>
 +
                                <!--/.row-->
 +
                            </div>
 +
                            <!--/.container-->
 +
                        </section>
 +
                        <section class="text-center py-9">
 +
                            <div class="container">
 +
                                <div class="row">
 +
                                    <div class="col-xl-6">
 +
                                        <h6 class="fs-0 mb-4 color-primary">123 Fake Street, Stone Ridge, NY 12345</h6>
 +
                                        <div class="p-2">
 +
                                            <div class="row">
 +
                                                <div class="col">
 +
                                                    <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;">
 +
                                                        <div class="marker-content py-3">
 +
                                                            <h5 class="color-primary">The
 +
                                                                <em>Hideaway </em>Resort</h5>
 +
                                                                <p class="fs--1">A nice description about your place
 +
                                                                    <br/>Customize it as you want.</p>
 +
                                                                </div>
 +
                                                            </div>
 +
                                                        </div>
 +
                                                    </div>
 +
                                                </div>
 +
                                            </div>
 +
                                            <div class="col-xl-6 mt-6 mt-xl-0">
 +
                                                <a class="d-inline-block mx-1 mx-lg-2 font-1 color-primary mb-lg-4" href="#">Instagram</a>
 +
                                                <span>/</span>
 +
                                                <a class="d-inline-block mx-1 mx-lg-2 font-1 color-primary mb-lg-4" href="#">Facebook</a>
 +
                                                <span>/</span>
 +
                                                <a class="d-inline-block mx-1 mx-lg-2 font-1 color-primary mb-lg-4" href="#">Twitter</a>
 +
                                                <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 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 src="assets/lib/CustomEase.min.js"></script>
 +
                                    <script src="assets/js/config.js"></script>
 +
                                    <script src="assets/lib/rellax/rellax.min.js"></script>
 +
                                    <script src="assets/js/zanimation.js"></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 src="assets/js/core.js"></script>
 +
                                    <script src="assets/js/main.js"></script>
 +
                                    <script src="assets/js/particleanimate.js"></script>
 +
                                </body>
  
 
</html>
 
</html>

Revision as of 12:16, 16 October 2019

Tsinghua Documentation - 2019.igem.org
  • 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.

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.

Gallery

Amneities

Packages

An inviting escape

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.

Our History

Eagerly waiting to welcome you.

Book Your Stay Book Your Stay
123 Fake Street, Stone Ridge, NY 12345
The Hideaway Resort

A nice description about your place
Customize it as you want.

Instagram / Facebook / Twitter

Join the Hideaway Newsletters

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

Home Book Now Contact Events Policies Term + Conditions
© Hideaway 2018 | Template crafted by Themewagon