Difference between revisions of "Team:BIT-China"

 
(24 intermediate revisions by 5 users not shown)
Line 25: Line 25:
 
     height:18px;
 
     height:18px;
 
}
 
}
 
+
.footer .social-icons a {
 +
    background-color: #47326b;
 +
    border: 1px solid #654d6f;
 +
    color: #ffffff;
 +
}
 
.footer-widgets .widget-title {
 
.footer-widgets .widget-title {
 
     margin-top: 0;
 
     margin-top: 0;
Line 38: Line 42:
 
     padding: 0;
 
     padding: 0;
 
}
 
}
 +
 +
.overview-content img{
 +
    max-width:100%;
 +
}
 +
 
         .tabdown-toggle{
 
         .tabdown-toggle{
 
             text-shadow: 0 1px 5px rgba(198,24,0,0.3);
 
             text-shadow: 0 1px 5px rgba(198,24,0,0.3);
Line 166: Line 175:
 
         }
 
         }
  
         .home-nav-txt:nth-child(2){
+
 
             margin-top: 20px;
+
         .home-nav-txt:nth-child(even){
 +
             margin-top: 0px;
 
             font-family:inherit;;
 
             font-family:inherit;;
 
             font-weight: bolder !important;
 
             font-weight: bolder !important;
Line 207: Line 217:
 
         .overview-item-img img{
 
         .overview-item-img img{
 
             margin: auto;
 
             margin: auto;
             width: 300px;
+
             width: 290px;
 
             height: auto;
 
             height: auto;
 
         }
 
         }
Line 230: Line 240:
 
</head>
 
</head>
 
<body >
 
<body >
 
<!--加载界面-->
 
<div class="site-cover" id="site-cover" style="display: table;">
 
    <span class="circle-wrapper" style="display: table-cell;vertical-align: middle">
 
        <div class="sk-circle">
 
            <div class="sk-circle1 sk-child"></div>
 
            <div class="sk-circle2 sk-child"></div>
 
            <div class="sk-circle3 sk-child"></div>
 
            <div class="sk-circle4 sk-child"></div>
 
            <div class="sk-circle5 sk-child"></div>
 
            <div class="sk-circle6 sk-child"></div>
 
            <div class="sk-circle7 sk-child"></div>
 
            <div class="sk-circle8 sk-child"></div>
 
            <div class="sk-circle9 sk-child"></div>
 
            <div class="sk-circle10 sk-child"></div>
 
            <div class="sk-circle11 sk-child"></div>
 
            <div class="sk-circle12 sk-child"></div>
 
        </div>
 
    </span>
 
</div>
 
  
 
<div class="col-sm-12" style="padding:0;background:url(https://static.igem.org/mediawiki/2016/4/45/T--BIT-China--content_bg.jpg)">
 
<div class="col-sm-12" style="padding:0;background:url(https://static.igem.org/mediawiki/2016/4/45/T--BIT-China--content_bg.jpg)">
Line 258: Line 248:
 
                                 ">
 
                                 ">
  
     <!--需要动态显示的导航栏-->
+
     <!--显示在顶部的导航栏——不固定-->
     <div class="col-sm-12 roll-nav roll-nav-hide content-wrap" id="nav-hide">
+
     <div class="col-sm-12 clearfix " style="padding: 0;height: 106px;">
         <div class="header-container clearfix" id="home-copy-container"
+
         <div class="header-container clearfix home-img" id="header-container"
             style="margin-top: 10px" >
+
             style="margin-top: 20px;z-index: 10" >
            <a href="https://2016.igem.org/Team:BIT-China">
+
 
                    <div class="site-logo center-block col-sm-1" style="display: table;padding: 0;">
+
            <a href="https://2016.igem.org/Team:BIT-China">
 +
                <div class="site-logo center-block col-sm-1" style="display: table;padding: 0;height: 100%;">
 
                     <span style="display: table-cell;vertical-align: middle;">
 
                     <span style="display: table-cell;vertical-align: middle;">
 
                     <img src="https://static.igem.org/mediawiki/2016/e/e2/T--BIT-China--img--logo-purple.png"
 
                     <img src="https://static.igem.org/mediawiki/2016/e/e2/T--BIT-China--img--logo-purple.png"
Line 275: Line 266:
 
                     <li class="tabdown">
 
                     <li class="tabdown">
 
                         <a class="tabdown-toggle" data-toggle="tabdown" data-target="#" href="javascript:;">
 
                         <a class="tabdown-toggle" data-toggle="tabdown" data-target="#" href="javascript:;">
                             <img style="height: 35px;" src="https://static.igem.org/mediawiki/2016/9/95/T--BIT-China--img--achievements.png"
+
                             <img style="height: 30px;" src="https://static.igem.org/mediawiki/2016/9/95/T--BIT-China--img--achievements.png"
 
                                 alt="achievements">
 
                                 alt="achievements">
 
                             <!--Achievements &nbsp;<i class="fa fa-sort-desc" aria-hidden="true"></i>-->
 
                             <!--Achievements &nbsp;<i class="fa fa-sort-desc" aria-hidden="true"></i>-->
Line 287: Line 278:
 
                     <li class="tabdown tabdown-megamenu">
 
                     <li class="tabdown tabdown-megamenu">
 
                         <a class="tabdown-toggle" data-toggle="tabdown" data-target="#" href="javascript:;">
 
                         <a class="tabdown-toggle" data-toggle="tabdown" data-target="#" href="javascript:;">
                             <img style="height: 35px;" src="https://static.igem.org/mediawiki/2016/4/46/T--BIT-China--img--project.png"
+
                             <img style="height: 30px;" src="https://static.igem.org/mediawiki/2016/4/46/T--BIT-China--img--project.png"
 
                                 alt="project">
 
                                 alt="project">
 
                             <!--Project &nbsp;<i class="fa fa-sort-desc" aria-hidden="true"></i>-->
 
                             <!--Project &nbsp;<i class="fa fa-sort-desc" aria-hidden="true"></i>-->
Line 301: Line 292:
 
                     </li>
 
                     </li>
 
                     <li class="tabdown">
 
                     <li class="tabdown">
                         <a class="tabdown-toggle" data-toggle="tabdown" data-target="#" href="javascript:;">
+
                         <a class="tabdown-toggle" href="https://2016.igem.org/Team:BIT-China/Model">
                             <img style="height: 35px;" src="https://static.igem.org/mediawiki/2016/2/24/T--BIT-China--img--modeling.png"
+
                             <img style="height: 30px;" src="https://static.igem.org/mediawiki/2016/2/24/T--BIT-China--img--modeling.png"
 
                                 alt="modeling">
 
                                 alt="modeling">
 
                             <!--Modeling &nbsp;<i class="fa fa-sort-desc" aria-hidden="true"></i>-->
 
                             <!--Modeling &nbsp;<i class="fa fa-sort-desc" aria-hidden="true"></i>-->
 
                         </a>
 
                         </a>
 
                        <ul class="tabdown-menu">
 
                            <li><a href="https://2016.igem.org/Team:BIT-China/Model">Experiment Part</a></li>
 
                            <li><a href="https://2016.igem.org/Team:BIT-China/Model">Application Part</a></li>
 
                        </ul>
 
 
                     </li>
 
                     </li>
 
                     <li class="tabdown">
 
                     <li class="tabdown">
 
                         <a class="tabdown-toggle" data-toggle="tabdown" data-target="#" href="javascript:;">
 
                         <a class="tabdown-toggle" data-toggle="tabdown" data-target="#" href="javascript:;">
                             <img style="height: 35px;" src="https://static.igem.org/mediawiki/2016/4/44/T--BIT-China--img--notebook.png"
+
                             <img style="height: 30px;" src="https://static.igem.org/mediawiki/2016/4/44/T--BIT-China--img--notebook.png"
 
                                 alt="notebook">
 
                                 alt="notebook">
 
                             <!--Notebook &nbsp;<i class="fa fa-sort-desc" aria-hidden="true"></i>-->
 
                             <!--Notebook &nbsp;<i class="fa fa-sort-desc" aria-hidden="true"></i>-->
Line 321: Line 307:
 
                             <li><a href="https://2016.igem.org/Team:BIT-China/Notebook">Lab Book</a></li>
 
                             <li><a href="https://2016.igem.org/Team:BIT-China/Notebook">Lab Book</a></li>
 
                             <li><a href="https://2016.igem.org/Team:BIT-China/Protocol">Protocol</a></li>
 
                             <li><a href="https://2016.igem.org/Team:BIT-China/Protocol">Protocol</a></li>
                             <li><a href="https://2016.igem.org/Team:BIT-China/E_M">Equipments && Materials</a></li>
+
                             <li><a href="https://2016.igem.org/Team:BIT-China/E_M">Equipments & Materials</a></li>
 
                             <li><a href="https://2016.igem.org/Team:BIT-China/Safety">Safety</a></li>
 
                             <li><a href="https://2016.igem.org/Team:BIT-China/Safety">Safety</a></li>
 
                         </ul>
 
                         </ul>
Line 327: Line 313:
 
                     <li class="tabdown">
 
                     <li class="tabdown">
 
                         <a class="tabdown-toggle" data-toggle="tabdown" data-target="#" href="javascript:;">
 
                         <a class="tabdown-toggle" data-toggle="tabdown" data-target="#" href="javascript:;">
                             <img style="height: 35px;" src="https://static.igem.org/mediawiki/2016/6/6e/T--BIT-China--img--team.png"
+
                             <img style="height: 30px;" src="https://static.igem.org/mediawiki/2016/6/6e/T--BIT-China--img--team.png"
 
                                 alt="team">
 
                                 alt="team">
 
                             <!--Team &nbsp;<i class="fa fa-sort-desc" aria-hidden="true"></i>-->
 
                             <!--Team &nbsp;<i class="fa fa-sort-desc" aria-hidden="true"></i>-->
Line 336: Line 322:
 
                             <li><a href="https://2016.igem.org/Team:BIT-China/Collaborations">Collaborations</a></li>
 
                             <li><a href="https://2016.igem.org/Team:BIT-China/Collaborations">Collaborations</a></li>
 
                             <li><a href="https://2016.igem.org/Team:BIT-China/Attributions">Attributions</a></li>
 
                             <li><a href="https://2016.igem.org/Team:BIT-China/Attributions">Attributions</a></li>
 +
                            <li><a href="https://2016.igem.org/Team:BIT-China/Team/Gallery">Gallery</a></li>
 +
                            <li><a href="https://2016.igem.org/Team:BIT-China/Team/Gaint_Jamboree">Gaint Jamboree</a></li>
 
                         </ul>
 
                         </ul>
 
                     </li>
 
                     </li>
 +
 
                     <li class="tabdown">
 
                     <li class="tabdown">
 
                         <a class="tabdown-toggle" data-toggle="tabdown" data-target="#" href="javascript:;">
 
                         <a class="tabdown-toggle" data-toggle="tabdown" data-target="#" href="javascript:;">
                             <img style="height: 35px;" src="https://static.igem.org/mediawiki/2016/3/3c/T--BIT-China--img--hp.png"
+
                             <img style="height: 30px;" src="https://static.igem.org/mediawiki/2016/3/3c/T--BIT-China--img--hp.png"
 
                                 alt="hp">
 
                                 alt="hp">
 
                             <!--Human Practice-->
 
                             <!--Human Practice-->
Line 354: Line 343:
 
             </div>
 
             </div>
 
             <!-- END NAVIGATION -->
 
             <!-- END NAVIGATION -->
        </div>
 
    </div>
 
 
    <!--显示在顶部的导航栏——不固定-->
 
    <div class="col-sm-12" style="padding: 0;">
 
        <div class="header-container clearfix home-img" id="header-container"
 
            style="margin-top: 20px" >
 
 
         </div>
 
         </div>
 
     </div>
 
     </div>
Line 385: Line 367:
 
             <img src="https://static.igem.org/mediawiki/2016/e/e5/T--BIT-China--img--home_title_down.png" alt="home_title_down" class="col-sm-4 col-sm-offset-4">
 
             <img src="https://static.igem.org/mediawiki/2016/e/e5/T--BIT-China--img--home_title_down.png" alt="home_title_down" class="col-sm-4 col-sm-offset-4">
 
         </div>
 
         </div>
         <div class="home-nav-txt ">
+
         <div class="home-nav-txt">
            Kill the Slacker
+
            Plasmid-Sensing Logically and Adjustably Cell Killer
 
         </div>
 
         </div>
 
         <div class="home-nav-txt">
 
         <div class="home-nav-txt">
            Monitoring Plasmid Numbers
+
            Monitoring Plasmid Numbers
 +
        </div>
 +
        <div class="home-nav-txt " style="font-weight:100">
 +
            Kill the Slacker
 
         </div>
 
         </div>
 
     </div>
 
     </div>
Line 402: Line 387:
 
     </div>
 
     </div>
 
     <div class="col-sm-12" style="padding: 0;">
 
     <div class="col-sm-12" style="padding: 0;">
         <div class="container center-block" style="background: white;margin-top: 1em;margin-bottom:1em;padding: 0;border-radius: 10px">
+
         <div class="container center-block" style="background: url(https://static.igem.org/mediawiki/2016/5/59/T--BIT-China--img--basic_bg3.png);margin-top: 1em;margin-bottom:1em;padding: 0;border-radius: 10px">
 
             <div class="overview-content clearfix" style="border:1px dashed #333333;
 
             <div class="overview-content clearfix" style="border:1px dashed #333333;
 
             border-radius: 10px;margin: 0.5em;padding: 10px 50px;">
 
             border-radius: 10px;margin: 0.5em;padding: 10px 50px;">
Line 462: Line 447:
 
                         <span>
 
                         <span>
 
                           Here is killer’s basic rule:<br>
 
                           Here is killer’s basic rule:<br>
                             Kill the slackers (Plasmid numbers are above a
+
                             Kill the slackers (Plasmid number is below the
 
                             <br>threshold);<br>
 
                             <br>threshold);<br>
                             Save the workers (Plasmid numbers are below
+
                             Save the workers (Plasmid number is above
                             <br>the threshold).
+
                             <br>the threshold).<br>
 +
                            <span style="margin-top:1em;color:#923F91">Worker-P:Cell containing our P-SLACKiller.</span><br>
 
                         </span>
 
                         </span>
 
                     </span>
 
                     </span>
Line 494: Line 480:
 
         </div>
 
         </div>
 
     </div>
 
     </div>
</div>
+
</div>  
 
+
 
+
<!--分界线-->
+
<hr class="col-sm-12" style="height: 1px;background: #999999;
+
border-radius: 10px;border:none;padding: 0;" />
+
  
 
<!-- 导航部分 -->
 
<!-- 导航部分 -->
Line 505: Line 486:
 
     <div class="container">
 
     <div class="container">
  
         <div class="container center-block" style="background: white;margin-top: 1em;margin-bottom:1em;padding: 0;border-radius: 10px">
+
         <div class="container center-block" style="background: url(https://static.igem.org/mediawiki/2016/5/59/T--BIT-China--img--basic_bg3.png);margin-top: 1em;margin-bottom:1em;padding: 0;border-radius: 10px">
 
             <div class="overview-content clearfix" style="border:1px dashed #333333;
 
             <div class="overview-content clearfix" style="border:1px dashed #333333;
 
             border-radius: 10px;margin: 0.5em;padding: 10px;">
 
             border-radius: 10px;margin: 0.5em;padding: 10px;">
  
        <div class="col-sm-12">
+
                <div class="col-sm-12">
            <h4 class="home-nav-info">
+
                    <h4 class="home-nav-info">
                Our team divide the experiment into <span style="font-weight: 900;color: #650043;">4</span> parts as below.
+
                        Our team divide the project into <span style="font-weight: 900;color: #650043;">4</span> parts as below.
                <br>Why not click and have a look?
+
                        <br>Why not click and have a look?
            </h4>
+
                    </h4>
        </div>
+
        <div class="col-sm-12">
+
            <div class="col-sm-3">
+
                <div class="clearfix" style="padding: 0;">
+
                    <img src="https://2016.igem.org/File:T--BIT-China--img--home_optimization.png"
+
                        alt="home-basic" class="col-sm-12 center-block" />
+
 
                 </div>
 
                 </div>
                 <h3 class="header-xsmall">Our P-SLACKiller</h3>
+
                 <div class="col-sm-12">
                <div class="bottom-title margin-bottom-10">
+
                    <div class="row">
                    Plasmids are losing, and the production efficiency is decreasing. Let’s equip the bacteria with a plasmid-sensing logically adjustable killer (P-SLACKiller) to kill slackers with less plasmids among bacteria!                </div>
+
            </div>
+
  
            <div class="col-sm-3 home-services-2">
+
                        <div class="col-sm-6">
                <div class="clearfix" style="padding: 0;">
+
                            <div class="clearfix" style="padding: 0 20%;">
                    <img src="https://static.igem.org/mediawiki/2016/7/72/T--BIT-China--img--home_pslackiller.png"
+
                                <img src="https://static.igem.org/mediawiki/2016/7/72/T--BIT-China--img--home_pslackiller.png"
                        alt="home-basic" class="col-sm-12">
+
                                    alt="home-basic" class="col-sm-12 center-block" />
                </div>
+
                            </div><a href="https://2016.igem.org/Team:BIT-China/Design#our_p-slackiller">
                <h3 class="header-xsmall">Threshold Device</h3>
+
                            <h3 class="header-xsmall">Our P-SLACKiller</h3></a>
                <div class="bottom-title margin-bottom-10">
+
                            <div class="bottom-title margin-bottom-10">
                    In what situation can the bacteria be judged as slackers? There must have a threshold concerning plasmid numbers. Let’s find it out and adjust it accordingly.               </div>
+
                                Plasmids are losing, and the production efficiency is decreasing. Let’s equip the bacteria with a plasmid-sensing logically adjustable cell killer (P-SLACKiller) to kill slackers with less plasmids among bacteria!               </div>
            </div>
+
                        </div>
  
            <div class="col-sm-3 home-services-2">
+
                        <div class="col-sm-6 home-services-2">
 +
                            <div class="clearfix" style="padding: 0 20%;">
 +
                                <img src="https://static.igem.org/mediawiki/2016/0/0f/T--BIT-China--img--home_threshold.png"
 +
                                    alt="home-basic" class="col-sm-12">
 +
                            </div><a href="https://2016.igem.org/Team:BIT-China/Design#threshold_device"
 +
                            <h3 class="header-xsmall">Threshold Device</h3></a>
 +
                            <div class="bottom-title margin-bottom-10">
 +
                                In what situation can the bacteria be judged as slackers? There must have a threshold concerning plasmid numbers. Let’s find it out and adjust it accordingly.                </div>
 +
                        </div>
 +
                    </div>
 +
                    <div class="row">
 +
                        <div class="col-sm-6 home-services-2">
  
                <div class="clearfix" style="padding: 0;">
+
                            <div class="clearfix" style="padding: 0 20%;">
                    <img src="https://static.igem.org/mediawiki/2016/2/2c/T--BIT-China--img--home_killer.png"
+
                                <img src="https://static.igem.org/mediawiki/2016/2/2c/T--BIT-China--img--home_killer.png"
                        alt="home-basic" class="col-sm-12">
+
                                    alt="home-basic" class="col-sm-12">
                </div>
+
                            </div><a href="https://2016.igem.org/Team:BIT-China/Design#killer_device">
                <h3 class="header-xsmall">Killer Device</h3>
+
                            <h3 class="header-xsmall">Killer Device</h3></a>
                <div class="bottom-title margin-bottom-10">
+
                            <div class="bottom-title margin-bottom-10">
                    For the slackers, they should be able to turn on the self-killing switch. We tried toxin proteins and double strand break (DSB) to produce the lethal effect.                </div>
+
                                For the slackers, they should be able to turn on the self-killing switch. We tried toxin proteins to produce the lethal effect.                </div>
            </div>
+
                        </div>
  
            <div class="col-sm-3 home-services-2">
+
                        <div class="col-sm-6 home-services-2">
                <div class="clearfix" style="padding: 0;">
+
                            <div class="clearfix" style="padding: 0 20%;">
                    <img src="https://static.igem.org/mediawiki/2016/a/a1/T--BIT-China--img--home_optimization.png"
+
                                <img src="https://static.igem.org/mediawiki/2016/a/a1/T--BIT-China--img--home_optimization.png"
                        alt="home-basic" class="col-sm-12">
+
                                    alt="home-basic" class="col-sm-12">
 +
                            </div><a href="https://2016.igem.org/Team:BIT-China/Design#upgraded_p-slackiller">
 +
                            <h3 class="header-xsmall">Optimization</h3></a>
 +
                            <div class="bottom-title margin-bottom-10">
 +
                                The executor killer should be stably maintained, so we integrated killer device into the genome. Moreover, we mutated promoters to adjust the threshold.                </div>
 +
                        </div>
 +
                    </div>
 
                 </div>
 
                 </div>
                <h3 class="header-xsmall">Optimization</h3>
 
                <div class="bottom-title margin-bottom-10">
 
                    The executor killer should be stably maintained, so we integrated killer device into the genome. Moreover, we mutated promoters to adjust the threshold.                </div>
 
 
             </div>
 
             </div>
 
         </div>
 
         </div>
</div></div>
 
 
     </div>
 
     </div>
 
</div>
 
</div>
Line 581: Line 567:
  
 
     window.onscroll = function () {
 
     window.onscroll = function () {
        if($(window).scrollTop()>180){
 
            $("#nav-hide").removeClass("roll-nav-hide");
 
        }
 
        else{
 
            $("#nav-hide").addClass("roll-nav-hide");
 
        }
 
    }
 
  
    var header_nav=$("#home-copy-container").children("").clone();
+
        //滚动监听,实现导航栏平滑固定
    $("#header-container").append(header_nav);
+
        var scroll = $(window).scrollTop();
 +
        var header=$("#header-container");
 +
        if (scroll >= 100) {
 +
            if(header.css("position") != "fixed"){
 +
                header.css({position:"fixed",top:"-70px"}).animate({
 +
                    top:"0",width:"100%",marginTop:"1.2em"
 +
                },100,"linear");
 +
            }
  
 +
            //添加导航下拉class,删除两侧padding
 +
            header.addClass("roll-nav");
 +
            header.removeClass("home-img");
 +
        }else if (scroll <= 100) {
 +
            if(header.css("position") != "static"){
 +
                header.animate({
 +
                    top:"-70px",marginTop:"20px"
 +
                },100,"linear",function(){
 +
                    header.css({position:"static"})
 +
                });
 +
            }
 +
 +
            //删除导航下拉class,增加两侧padding
 +
            header.removeClass("roll-nav");
 +
            header.addClass("home-img");
 +
        }
 +
        //导航栏平滑滚动——END
 +
    }
  
 
         $('.tabdown>a').on("mouseover",function () {
 
         $('.tabdown>a').on("mouseover",function () {
Line 598: Line 602:
 
             });
 
             });
 
         })
 
         })
</script>
+
</script>  
 
+
<script>
+
    //检测网页加载完毕
+
    var stateChange = function () {
+
        if(document.readyState == "complete"){
+
            $("#site-cover").fadeOut(1000);
+
        }
+
    };
+
    document.onreadystatechange=stateChange;
+
</script>
+
  
 
</body>
 
</body>

Latest revision as of 03:57, 3 December 2016

overtop
overview1 In the procedure of large-scale industrial
production, due to the random distribution of
plasmids in the process of bacteria proliferation
and division, the bacteria containing less
plasmids will gradually become the
“slackers”.
overview2 Generally, we aim to avoid these undesired
bacteria become the dominant population.
There is no efficient way to prevent the birth of
plasmid-free bacteria and the applied ways are
only limited to the laboratory-use.
overview3
What about equipping the bacteria with a
plasmid-sensing logically adjustable cell killer
(P-SLACKiller)?
Here is killer’s basic rule:
Kill the slackers (Plasmid number is below the
threshold);
Save the workers (Plasmid number is above
the threshold).
Worker-P:Cell containing our P-SLACKiller.
overview4
Surprise! We can guarantee the microbial
population structure stay optimal
now!
overview5

Our team divide the project into 4 parts as below.
Why not click and have a look?

home-basic

Our P-SLACKiller

Plasmids are losing, and the production efficiency is decreasing. Let’s equip the bacteria with a plasmid-sensing logically adjustable cell killer (P-SLACKiller) to kill slackers with less plasmids among bacteria!
home-basic
Threshold Device
In what situation can the bacteria be judged as slackers? There must have a threshold concerning plasmid numbers. Let’s find it out and adjust it accordingly.
home-basic

Killer Device

For the slackers, they should be able to turn on the self-killing switch. We tried toxin proteins to produce the lethal effect.
home-basic

Optimization

The executor killer should be stably maintained, so we integrated killer device into the genome. Moreover, we mutated promoters to adjust the threshold.