Difference between revisions of "Team:Worldshaper-XSHS/Model"

 
(40 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
<style type="text/css">
+
    <style type="text/css">
 +
 
 +
    html body{
 +
        font-family:purista  !important;
 +
    }
 +
    section>p{
 +
        font-family: arial!important;
 +
        font-weight:600!important;
 +
        width: 1100px!important;
 +
    }
 
     .dropdown .dropdown-menu > ul {
 
     .dropdown .dropdown-menu > ul {
         background-color: #212121!important
+
         background-color: rgba(132,176,110,0.6)!important
 
     }  
 
     }  
    figure .img-wrapper img {
+
    .myheader{
            width: 100%;
+
        box-shadow:none !important;
            height:300px
+
         background:rgba(132,176,110,0.6) !important;
         }
+
         border:none !important;
           
+
    }
        figure figcaption{
+
     .positiontitle{
            padding: 20px 25px;
+
            margin-top: 0;
+
            color: #333;
+
            height: 330px
+
         }
+
        .dropdown-menu > ul{
+
        background-color: #09b0ff!important
+
        }
+
 
+
     .positiontitle {
+
 
         position: relative;
 
         position: relative;
         top: 200px;
+
         top:500px;
 
         font-size: 68px;
 
         font-size: 68px;
         color: #fff;
+
         color:#fff;
 
         z-index: 100;
 
         z-index: 100;
 
         letter-spacing: 0.0588235em;
 
         letter-spacing: 0.0588235em;
 
     }
 
     }
 
+
     .colul .colactive a{
     .colul .colactive a {
+
         font-size:22px;
         font-size: 22px;
+
 
         color: #00746b !important;
 
         color: #00746b !important;
 
     }
 
     }
 
+
     .v1{
     .v1 {
+
         font-family: purista !important;
         font-family: proxima-nova !important;
+
 
         font-weight: 600 !important;
 
         font-weight: 600 !important;
 
         font-style: normal !important;
 
         font-style: normal !important;
Line 43: Line 40:
 
         color: #4a4a4a !important;
 
         color: #4a4a4a !important;
 
     }
 
     }
 
+
     #top_menu_14{
     #top_menu_14 {
+
         height:auto !important;
         height: auto !important;
+
 
     }
 
     }
 +
    .colul a:hover{
  
    .colul a:hover {
+
         color: #00746b !important;  
       
+
         color: #00746b !important;
+
 
     }
 
     }
 
+
     .colul li a{
     .colul li a {
+
         font-family: arial !important;
         font-family: adobe-garamond-pro !important;
+
 
         font-weight: 400;
 
         font-weight: 400;
 
         font-style: normal;
 
         font-style: normal;
Line 62: Line 56:
 
         text-decoration: none;
 
         text-decoration: none;
 
         line-height: 1.2em;
 
         line-height: 1.2em;
         color: rgba(26, 26, 26, .7);
+
         color: rgba(26,26,26,.7);
 
         margin-bottom: .5em;
 
         margin-bottom: .5em;
 
+
     
 
     }
 
     }
 
 
     .ulfixed {
 
     .ulfixed {
 
         position: fixed !important;
 
         position: fixed !important;
 +
       
 
         top: 90px;
 
         top: 90px;
 
     }
 
     }
 
+
     .myheader{
     .myheader {
+
         box-shadow:none !important;
         box-shadow: none !important;
+
         background:rgba(132,176,110,0.4) !important;
         background: rgba(0, 0, 0, .4) !important;
+
         border:none !important;
         border: none !important;
+
 
     }
 
     }
 
+
     .itemstyle{
     .itemstyle {
+
         font-family: arial !important;
         font-family: adobe-garamond-pro !important;
+
         font-weight: 600 !important;
         font-weight: 400 !important;
+
 
         font-style: normal !important;
 
         font-style: normal !important;
        font-size: 16px !important;
 
 
         letter-spacing: 0px !important;
 
         letter-spacing: 0px !important;
 
         line-height: 1.6em !important;
 
         line-height: 1.6em !important;
         color: rgba(26, 26, 26, .7) !important;
+
         color: rgba(26,26,26,.7) !important;
 +
        text-align: left;!important;
 
     }
 
     }
  
     .footer {
+
        }
         background: rgba(0, 0, 0, 1) !important;
+
     .footer{
 +
         background:rgba(12, 61, 12, 0.8509803921568627) !important;
 
     }
 
     }
 
     #back-to-top{
 
     #back-to-top{
position:fixed;
+
        position:fixed;
bottom:100px;
+
    }
left:80px;
+
    #back-to-top a{
}
+
        text-align:center;
#back-to-top a{
+
        text-decoration:none;
text-align:center;
+
        color:#d1d1d1;
text-decoration:none;
+
        display:block;
color:#d1d1d1;
+
        width:80px;
display:block;
+
        /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
width:60px;
+
        -moz-transition:color 1s;  
/*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
+
        -webkit-transition:color 1s;
-moz-transition:color 1s;  
+
        -o-transition:color 1s;
-webkit-transition:color 1s;
+
    }
-o-transition:color 1s;
+
    #back-to-top a img{
}
+
        background:#d1d1d1;
#back-to-top a img{
+
        border-radius:6px;
background:#d1d1d1;
+
        display:block;
border-radius:6px;
+
        height:80px;
display:block;
+
        width:80px;
height:60px;
+
        margin-bottom:5px;
width:60px;
+
        -moz-transition:background 1s;
margin-bottom:5px;
+
        -webkit-transition:background 1s;
-moz-transition:background 1s;
+
        -o-transition:background 1s;
-webkit-transition:background 1s;
+
    }
-o-transition:background 1s;
+
    @font-face
}
+
{
+
    font-family: purista;
</style>
+
    src: url('https://static.igem.org/mediawiki/2018/4/44/T--worldshaper-XSHS--semibold.otf'),
<link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/wiki_edit.css">
+
    url('https://static.igem.org/mediawiki/2018/4/44/T--worldshaper-XSHS--semibold.otf');
<link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/bootstrap.min.css">
+
}
<link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/ionicons.min.css">
+
</style><!-- style -->
<link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/animate.css">
+
    <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/wiki_edit.css">
<link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/slider.css">
+
    <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/owl.carousel.css">
+
    <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/ionicons.min.css">
<link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/owl.theme.css">
+
    <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/animate.css">
<link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/jquery.fancybox.css">
+
    <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/slider.css">
<link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/main.css">
+
    <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/responsive.css">
+
    <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/owl.theme.css">
<script src="http://igem2017.worldshaper.cn/XSHS/js/vendor/modernizr-2.6.2.min.js"></script>
+
    <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/jquery.fancybox.css">
<script src="http://igem2017.worldshaper.cn/XSHS/js/jquery.min.js"></script>
+
    <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/main.css">
<script src="http://igem2017.worldshaper.cn/XSHS/js/owl.carousel.min.js"></script>
+
    <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/responsive.css">
<script src="http://igem2017.worldshaper.cn/XSHS/js/bootstrap.min.js"></script>
+
    <script src="http://igem2017.worldshaper.cn/XSHS/js/vendor/modernizr-2.6.2.min.js"></script>
<script src="http://igem2017.worldshaper.cn/XSHS/js/wow.min.js"></script>
+
    <script src="http://igem2017.worldshaper.cn/XSHS/js/jquery.min.js"></script>
<script src="http://igem2017.worldshaper.cn/XSHS/js/slider.js"></script>
+
    <script src="http://igem2017.worldshaper.cn/XSHS/js/owl.carousel.min.js"></script>
<script src="http://igem2017.worldshaper.cn/XSHS/js/jquery.fancybox.js"></script>
+
    <script src="http://igem2017.worldshaper.cn/XSHS/js/bootstrap.min.js"></script>
<script src="http://igem2017.worldshaper.cn/XSHS/js/main.js"></script>
+
    <script src="http://igem2017.worldshaper.cn/XSHS/js/wow.min.js"></script>
 +
    <script src="http://igem2017.worldshaper.cn/XSHS/js/slider.js"></script>
 +
    <script src="http://igem2017.worldshaper.cn/XSHS/js/jquery.fancybox.js"></script>
 +
    <script src="http://igem2017.worldshaper.cn/XSHS/js/main.js"></script>
 
<script type="text/javascript">
 
<script type="text/javascript">
 
     $(function () {
 
     $(function () {
Line 144: Line 140:
 
         window.onscroll = function () {
 
         window.onscroll = function () {
 
             var t = document.documentElement.scrollTop || document.body.scrollTop;  //获取距离页面顶部的距离
 
             var t = document.documentElement.scrollTop || document.body.scrollTop;  //获取距离页面顶部的距离
             var $x = $('#Members').offset().top
+
             var $x = $('#Ourteam').offset().top
 
             if (t >= $x - 80) {
 
             if (t >= $x - 80) {
 
                 console.log(t, $x)
 
                 console.log(t, $x)
Line 163: Line 159:
 
         })
 
         })
 
     })
 
     })
</script>
+
</script><!-- css and js -->
<p id="back-to-top">
+
    <a href="#top">
+
        <img src="https://static.igem.org/mediawiki/2018/e/e5/T--worldshaper-XSHS--back.png">
+
    </a>
+
</p>
+
<header id="top-bar" class="navbar-fixed-top animated-header  navbar navbar-default myheader">
+
    <div class="container">
+
        <div class="navbar-header">
+
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+
                <span class="sr-only">Toggle navigation</span>
+
                <span class="icon-bar"></span>
+
                <span class="icon-bar"></span>
+
                <span class="icon-bar"></span>
+
            </button>
+
            <div class="navbar-brand " style="display:block;color:#fff;margin-left:15px;font-size:20px">
+
                <a href="https://2018.igem.org/Team:Worldshaper-XSHS">
+
                    worldshaper-
+
                    <b>XSHS</b>
+
                </a>
+
            </div>
+
        </div>
+
        <nav class="collapse navbar-collapse navbar-right" role="navigation">
+
            <div class="main-menu">
+
                <ul class="nav navbar-nav navbar-right">
+
                    <li>
+
                        <a href="https://2018.igem.org/Team:Worldshaper-XSHS">Home</a>
+
                    </li>
+
                    <li class="dropdown">
+
                        <a class="dropdown-toggle" data-toggle="dropdown">
+
                            Team
+
                            <span class="caret"></span>
+
                        </a>
+
                        <div class="dropdown-menu">
+
                            <ul>
+
                                <li>
+
                                    <a href="https://2018.igem.org/Team:Worldshaper-XSHS/aboutus.html">about us</a>
+
                                </li>
+
                                <li>
+
                                    <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Team">Members</a>
+
                                </li>
+
                                <li>
+
                                    <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Collaborations">Collaborations</a>
+
                                </li>
+
                            </ul>
+
                        </div>
+
                    </li>
+
                    <li class="dropdown">
+
                        <a class="dropdown-toggle" data-toggle="dropdown">
+
                            Project
+
                            <span class="caret"></span>
+
                        </a>
+
                        <div class="dropdown-menu">
+
                            <ul>
+
                                <li>
+
                                    <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Background.html">Background</a>
+
                                </li>
+
                                <li>
+
                                    <a href="https://2018.igem.org/Team:Worldshaper-XSHS/design.html">Design</a>
+
                                </li>
+
                                <li>
+
                                    <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Protocols-methods.html">Protocols and methods</a>
+
                                </li>
+
                                <li>
+
                                    <a href="https://2018.igem.org/Team:Worldshaper-XSHS/result.html">Results</a>
+
                                </li>
+
                                <li>
+
                                    <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Future-plans.html">Future plans</a>
+
                                </li>
+
                                <li>
+
                                    <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Attributions">Attributions</a>
+
                                </li>
+
                                <li>
+
                                    <a href="https://2018.igem.org/Team:Worldshaper-XSHS/InterLab">Interlab</a>
+
                                </li>
+
                                <li>
+
                                    <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Model">Model</a>
+
                                </li>
+
                                <li>
+
                                    <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Demonstrate">Demonstrate</a>
+
                                </li>
+
  
                            </ul>
+
    <header id="top-bar" class="navbar-fixed-top animated-header  navbar navbar-default myheader"  >
                        </div>
+
        <div class="container">
                    </li>
+
            <div class="navbar-header" >
                    <li>
+
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <a href="https://2018.igem.org/Team:Worldshaper-XSHS/parts.html">Parts</a>
+
                    <span class="sr-only">Toggle navigation</span>
                    </li>
+
                    <span class="icon-bar"></span>
                    <li class="dropdown">
+
                    <span class="icon-bar"></span>
                        <a class="dropdown-toggle" data-toggle="dropdown">
+
                    <span class="icon-bar"></span>
                            HUMAN PRACTICES
+
        </button>
                            <span class="caret"></span>
+
                <div class="navbar-brand " style="display:block;color:#fff;margin-left:15px;font-size:20px">
                        </a>
+
                    <a href="https://2018.igem.org/Team:Worldshaper-XSHS">
                        <div class="dropdown-menu">
+
                        Worldshaper- <b>XSHS</b>
                            <ul>
+
                    </a>
                                <li>
+
                </div>
                                    <a href="https://2018.igem.org/Team:Worldshaper-XSHS/HP/Silver">Silver</a>
+
      </div>
                                </li>
+
            <nav class="collapse navbar-collapse navbar-right" role="navigation">
                                <li>
+
                <div class="main-menu">
                                    <a href="https://2018.igem.org/Team:Worldshaper-XSHS/HP/Gold_Integrated">Integrated and Gold</a>
+
                     <ul class="nav navbar-nav navbar-right">
                                </li>
+
                       
                                <li>
+
                        <li class="dropdown">
                                    <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Engagement">Engagement</a>
+
                            <a class="dropdown-toggle" data-toggle="dropdown">
                                </li>
+
                                Team
                            </ul>
+
                                <span class="caret"></span>
                        </div>
+
                            </a>
                    </li>
+
                            <div class="dropdown-menu">
                    <li>
+
                                 <ul>
                        <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Applied_Design">Applied Design</a>
+
                     </li>
+
                    <li class="dropdown">
+
                        <a class="dropdown-toggle" data-toggle="dropdown">
+
                            Achievement
+
                            <span class="caret"></span>
+
                        </a>
+
                        <div class="dropdown-menu">
+
                            <ul>
+
                                 <li>
+
                                    <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Medal-requirements.html">Medal requirements</a>
+
                                </li>
+
                            </ul>
+
                        </div>
+
                    </li>
+
                    <li>
+
                        <a href="https://2018.igem.org/Team:Worldshaper-XSHS/safety.html">Safety</a>
+
                    </li>
+
                </ul>
+
            </div>
+
        </nav>
+
    </div>
+
</header>
+
  
<section class="visual wow fadeInLeft text-center animated" data-wow-duration="500ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 500ms; animation-delay: 200ms; animation-name: fadeInLeft;">
+
                                    <li>
    <strong class="positiontitle">Background</strong>
+
                                        <a href="https://2018.igem.org/Team:Worldshaper-XSHS/aboutus.html">about us</a>
    <!-- 这里是大图的标题 -->
+
                                    </li>
    <img src="https://static.igem.org/mediawiki/2018/e/e6/T--worldshaper-XSHS--a001.png" alt="" class="bg-stretch" style="width:100%">
+
                                    <li>
    <!-- 这里是大图的图片链接 -->
+
                                        <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Team">Members</a>
</section>
+
                                    </li>
 
+
                                      
<section class="container">
+
                                 </ul>
    <div class="col-xs-2 xshs-box3  ">
+
        <ul class="colul text-left">
+
            <li class="colactive mt-1">
+
                <a href="#Members">Members</a>
+
            </li>
+
            <li class="mt-1">
+
                <a href="#Instructors">Instructors</a>
+
            </li>
+
            <!-- 这里是页面定位锚点  href 对应代码的 “id属性  例如 id='xxx'  ”-->
+
        </ul>
+
    </div>
+
    <div class="col-xs-10 ">
+
        <section class="service-page">
+
            <h2 id="Members" class="subtitle wow fadeInUp animated" data-wow-delay=".3s" data-wow-duration="500ms">Members</h2>
+
            <p class="subtitle-des wow fadeInUp animated" data-wow-delay=".5s" data-wow-duration="500ms"></p>
+
            <div class="row">
+
                <div class="clearfix">
+
                    <div class="col-sm-4">
+
                        <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
+
                            <div class="img-wrapper">
+
                                <video style="width:100%" src="https://static.igem.org/mediawiki/2018/9/99/T--worldshaper-XSHS--001.ogg" controls="controls"><!--这里视频 视频可以去掉控件按钮 controls 删掉即可-->
+
                                     your browser does not support the video tag
+
                                 </video>
+
 
                             </div>
 
                             </div>
                            <figcaption>
+
                        </li>
                                <h4>Name: Mei Yantao</h4>
+
                                    <li>
                                 <p class="itemstyle">Introduction: Although he is fat, he likes sports. His hobbies are playing games, reading
+
                                        <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Collaborations">Collaborations</a>
                                     books, listening to songs, playing musical instruments, aerial photography, robots, etc.
+
                                    </li>
                                     His favorite thing is to do homework.
+
                        <li class="dropdown">
                                </p>
+
                            <a class="dropdown-toggle" data-toggle="dropdown">
                            </figcaption>
+
                                Project
                        </figure>
+
                                 <span class="caret"></span>
                    </div>
+
                            </a>
 +
                            <div class="dropdown-menu">
 +
                                <ul>
 +
                                    <li>
 +
                                        <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Background.html">Background</a>
 +
                                     </li>
 +
                                    <li>
 +
                                        <a href="https://2018.igem.org/Team:Worldshaper-XSHS/design.html">Design</a>
 +
                                     </li>
 +
                                    <li>
 +
                                        <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Protocols-methods.html">Protocols and methods</a>
 +
                                    </li>
 +
                                    <li>
 +
                                        <a href="https://2018.igem.org/Team:Worldshaper-XSHS/result.html">Results</a>
 +
                                    </li>
 +
                                    <li>
 +
                                        <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Future-plans.html">Future plans</a>
 +
                                    </li>
 +
                                   
 +
                                    <li>
 +
                                        <a href="https://2018.igem.org/Team:Worldshaper-XSHS/InterLab">Interlab</a>
 +
                                    </li>
 +
                                    <li>
 +
                                        <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Model">Model</a>
 +
                                    </li>
 +
                                    <li>
 +
                                        <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Demonstrate">Demonstrate</a>
 +
                                    </li>
  
                    <div class="col-sm-4">
+
                                 </ul>
                        <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
+
                            <div class="img-wrapper">
+
                                 <img src="https://static.igem.org/mediawiki/2018/f/f7/T--worldshaper-XSHS--m002.png" class="img-responsive" alt="" />
+
 
                             </div>
 
                             </div>
                            <figcaption>
+
                        </li>
                                <h4>Name: Yu Yangkun</h4>
+
                        <li>
                                <p class="itemstyle">Introduction: Yu Yangkun is a cheerful, very humorous and sincere person. He has no bad habits
+
                            <a href="https://2018.igem.org/Team:Worldshaper-XSHS/parts.html">Parts</a>
                                    and is in good health. He is good at drawing and calligraphy. And he does things very
+
                         </li>
                                    seriously.</p>
+
                        <li class="dropdown">
                            </figcaption>
+
                            <a class="dropdown-toggle" data-toggle="dropdown">
                         </figure>
+
                                HP
                    </div>
+
                                <span class="caret"></span>
 
+
                            </a>
                    <div class="col-sm-4">
+
                             <div class="dropdown-menu">
                        <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
+
                                 <ul>
                             <div class="img-wrapper">
+
                                    <li>
                                 <img src="https://static.igem.org/mediawiki/2018/d/d4/T--worldshaper-XSHS--m003.png" class="img-responsive" alt="" />
+
                                        <a href="https://2018.igem.org/Team:Worldshaper-XSHS/HP/Silver">Silver</a>
 +
                                    </li>
 +
                                    <li>
 +
                                        <a href="https://2018.igem.org/Team:Worldshaper-XSHS/HP/Gold_Integrated">Integrated and Gold</a>
 +
                                    </li>
 +
                                    <li>
 +
                                        <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Engagement">Engagement</a>
 +
                                    </li>
 +
                                </ul>
 
                             </div>
 
                             </div>
                            <figcaption>
+
                        </li>
                                <h4>Name: He Xinyi</h4>
+
                        <li>
                                <p class="itemstyle">Introduction: She likes music, sports, and tries new things. She is more interested in novels
+
                            <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Applied_Design">Applied Design</a>
                                    and psychology books. She wants to be a free and independent person and do what she wants
+
                         </li>
                                    to do.</p>
+
                        <li class="dropdown">
                            </figcaption>
+
                            <a class="dropdown-toggle" data-toggle="dropdown">
                         </figure>
+
                                Achievement
                    </div>
+
                                <span class="caret"></span>
 
+
                            </a>
                    <div class="col-sm-4">
+
                             <div class="dropdown-menu">
                        <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
+
                                 <ul>
                             <div class="img-wrapper">
+
                                    <li>
                                 <img src="https://static.igem.org/mediawiki/2018/8/8b/T--worldshaper-XSHS--m004.png" class="img-responsive" alt="" />
+
                                        <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Medal-requirements.html">Medal requirements</a>
 +
                                    </li>
 +
                                </ul>
 
                             </div>
 
                             </div>
                            <figcaption>
+
                        </li>
                                <h4>Name: Pan Hui</h4>
+
                        <li>
 
+
                            <a href="https://2018.igem.org/Team:Worldshaper-XSHS/safety.html">Safety</a>
                                <p class="itemstyle">Introduction: She likes to participate in team activities and meet new people. She is curious
+
                        </li>
                                    about psychology, willing to read some books in the social sciences; she is more willing
+
                                     <li>
                                    to follow those efficient techniques. "Either don't do it, or do it." She expects to
+
                                        <a href="https://2018.igem.org/Team:Worldshaper-XSHS/Attributions">Attributions</a>
                                     do everything best.
+
                                    </li>
                                </p>
+
                     </ul>
                            </figcaption>
+
                        </figure>
+
                     </div>
+
 
                 </div>
 
                 </div>
                <div class="clearfix">
+
            </nav>
                    <div class="col-sm-4">
+
        </div>
                        <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
+
    </header><!-- header -->
                            <div class="img-wrapper">
+
                                <img src="https://static.igem.org/mediawiki/2018/9/90/T--worldshaper-XSHS--m005.png" class="img-responsive" alt="" />
+
                            </div>
+
                            <figcaption>
+
                                <h4>Name: Yang Jianing</h4>
+
  
                                <p class="itemstyle">Introduction: He is a very active person in the team, but he will complete the task on time
+
    <section class="visual wow fadeInLeft text-center animated" data-wow-duration="500ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 500ms; animation-delay: 200ms; animation-name: fadeInLeft;">
                                    and on time. He is very good at science because he only loves science.
+
        <strong  class="positiontitle">Modeling</strong><!-- 这里是大图的标题 -->
                                </p>
+
        <img src="https://static.igem.org/mediawiki/2018/5/57/T--Worldshaper-XSHS--ti011.jpg
                            </figcaption>
+
" alt="" class="bg-stretch" style="width:100%">
                        </figure>
+
        <!-- 这里是大图的图片链接 -->
                    </div>
+
    </section>
  
                    <div class="col-sm-4">
+
    <section class="pageInHere">
                        <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
+
        <div class="container">
                             <div class="img-wrapper">
+
            <div class="row">
                                 <img src="https://static.igem.org/mediawiki/2018/4/4c/T--worldshaper-XSHS--m006.png" class="img-responsive" alt="" />
+
             
 +
                <div class="col-xs-2 xshs-box3  ">
 +
                    <ul class="colul text-left"style="width: 180px;font-size: 15px!important">
 +
                        <li class="colactive mt-1"><a href="#Ourteam">Ⅰ. Correlation Modals and Detection </a></li>
 +
                        <hr>
 +
                        <li class="mt-1"><a href="#OurSchool">Ⅱ. The Growth Curves </a></li>
 +
                        <hr>
 +
                        <li class="mt-1"><a href="#Others">Ⅲ. Sensitivities and the Second Generation Detection Systems</a></li>
 +
                        <!-- 这里是页面定位锚点  href 对应代码的 “id属性  例如 id='xxx'  ”-->
 +
                        <li>
 +
                             <p id="back-to-top" style="margin-top: 50px;">
 +
                                <a href="#top">
 +
                                 <img src="https://static.igem.org/mediawiki/2018/e/e5/T--worldshaper-XSHS--back.png">
 +
                                TO Top
 +
                                </a>
 +
                            </p>
 +
                        </li>
 +
                    </ul> 
 +
                </div>
 +
               
 +
                <div class="col-xs-10 ">
 +
                    <div class="xshs-box3">
 +
                        <p class="v1" id="Ourteam" style="text-align:  center; ">
 +
                          Nicotine Detection System
 +
                        </p>
 +
                      <div style="
 +
                                width: 100%;
 +
                                margin-left: 0;
 +
                                margin-top: 0px;
 +
                                margin-bottom: -20px;
 +
                            ">
 +
                            <hr style="
 +
                                height: 3px;
 +
                                background-color: #0c3d0c99!important;
 +
                                width: 100%;
 +
                            ">
 +
                                <p style="
 +
                                margin-top: -18px;
 +
                                font-size: 13px;
 +
                                line-height: 20px;
 +
                                font-family: ration cans;
 +
                            " align="left">To better detect the existence of nicotine, we made a first and a second generation detection system. Built on the pSB1C3 backbone, the first generation system contains a nicA2 promoter and a GFP gene, while the second one adds a T7 RNA polymerase gene and a T7 promoter in the middle of the first generation design to enhance the expression of the fluorescence. Via experiments, we learnt that the activity of the nicA2 promoter is regulated by the concentration of nicotine, so we applied different concentrations to both generations of systems for testing, and used the results to build the following math models using MATLAB (R2018b).</p>
 
                             </div>
 
                             </div>
                            <figcaption>
 
                                <h4>Name: Yu Yangyang</h4>
 
  
                                <p class="itemstyle">Introduction:Yu Yangyang loves animation and games, and loves natural science. He likes to
 
                                    explore the unknown and hopes to become knowledgeable. His shortcoming is lack of self-control.
 
                                    </p>
 
                            </figcaption>
 
                        </figure>
 
 
                     </div>
 
                     </div>
 
+
                     <div class="xshs-box3">  
                     <div class="col-sm-4">
+
                         <div style="
                         <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
+
                            width: 5px;
                            <div class="img-wrapper">
+
                            height: 24px;
                                <img src="https://static.igem.org/mediawiki/2018/f/fd/T--worldshaper-XSHS--m007.png" class="img-responsive" alt="" />
+
                            background-color:  #0c3d0cd9;
                            </div>
+
                            /* text-align: left!important; */
                            <figcaption>
+
                            margin-left:  0px;
                                <h4>Name:CaoShuaijun</h4>
+
                            border:  none;
 
+
                            margin-top: 50px;
                                <p class="itemstyle">Introduction:His hobby is playing basketball and badminton. He likes physical chemistry.
+
                        "></div>
                                    Although he is fat, he likes to run around. Movies and food are his favorite. He likes
+
                        <p style="width: 800px;margin-left: 11px;margin-top: -23px;font-size: 22px;margin-bottom: 20px;"id="Ourteam">. Correlation Modals of Nicotine Concentration and Detection with the First Generation Detection System</p>
                                    to go to the bookstore with his friends. </p>
+
                            </figcaption>
+
                        </figure>
+
 
                     </div>
 
                     </div>
 +
                     
 +
                        <p class="itemstyle" style="font-size: 20px!important">
 +
                            A. Model Assumptions:
 +
                        </p>
 +
                        <p class="itemstyle">
 +
                            1. The growth of the E. coli strain is regarded as exponential within 4 hours.
 +
                            2. The concentration of nicotine in the environment is constant.
 +
                            3. The nicotine concentration is above the lower detection limit of the promoter.
 +
                            4. The fluorescent protein shows no significant signs of degradation.
  
                    <div class="col-sm-4">
+
                        </p>
                         <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
+
                         <p class="itemstyle" style="font-size: 20px!important">
                            <div class="img-wrapper">
+
                            B. Used Modal:
                                <img src="https://static.igem.org/mediawiki/2018/1/14/T--worldshaper-XSHS--m008.png" class="img-responsive" alt="" />
+
                        </p>
                            </div>
+
                            <figcaption>
+
                                <h4>Name: Pan Yangbo</h4>
+
 
+
                                <p class="itemstyle">Introduction:A boy who likes to try; a boy who can do everything. He is a procrastinator,
+
                                    but he can get things done in the end.He looked forward to this unusual experience, to
+
                                    this different growth, and to greeting this gold medal with his teammates.</p>
+
                            </figcaption>
+
                        </figure>
+
 
                     </div>
 
                     </div>
 
+
                     <div class="xshs-box2">
                     <div class="col-sm-4">
+
                         <p>
                         <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
+
                             <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/7/7e/T--Worldshaper-XSHS--mo012.png" />
                             <div class="img-wrapper">
+
                        </p>
                                <img src="https://static.igem.org/mediawiki/2018/9/92/T--worldshaper-XSHS--m009.png" class="img-responsive" alt="" />
+
                            </div>
+
                            <figcaption>
+
                                <h4>Name: ShenHongcheng</h4>
+
 
+
                                <p class="itemstyle">Introduction:He is a lovely boy. He likes to go all out to work because he will get plenty
+
                                    of exercise and happiness. He likes to make friends, like his friends to get along with
+
                                    each other, from mutual ignorance to mutual familiarity.</p>
+
                            </figcaption>
+
                        </figure>
+
 
                     </div>
 
                     </div>
 
+
                     <div class="xshs-box3">
                     <div class="col-sm-4">
+
                         <p class="itemstyle" style="margin-left: 201px">
                         <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
+
                          where t stands for time; k is the assumed coefficient of the bacteria growth, which is related to the concentration of nicotine; k_c is the coefficient of fluorescence expression.
                            <div class="img-wrapper">
+
                        </p>
                                <img src="https://static.igem.org/mediawiki/2018/c/c0/T--worldshaper-XSHS--m010.png" class="img-responsive" alt="" />
+
                        <p class="itemstyle" style="font-size: 20px!important;margin-left: 201px;">
                            </div>
+
                             C. Time-Varying Fluorescence Intensity Under Different Concentrations Of Nicotine
                            <figcaption>
+
                         </p>
                                <h4>Name: ShenYibin</h4>
+
 
+
                                <p class="itemstyle">Introduction:He is a super lively person, not to be deceived by his seemingly quiet appearance.
+
                                    He is very good at thinking. He will calm down and do experiments, trying to find out
+
                                    the deficiencies in the experiment and correct them.</p>
+
                             </figcaption>
+
                         </figure>
+
 
                     </div>
 
                     </div>
 
+
                     <!-- <div class="xshs-box2">
                     <div class="col-sm-4">
+
                         <p>
                         <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
+
                             <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/3/35/T--worldshaper-XSHS--c002.png" />
                             <div class="img-wrapper">
+
                        </p>
                                <img src="https://static.igem.org/mediawiki/2018/0/0e/T--worldshaper-XSHS--m011.png" class="img-responsive" alt="" />
+
                    </div> -->
                            </div>
+
                    <div class="xshs-box3">
                            <figcaption>
+
                      <p class="itemstyle" style="margin-left: 201px">
                                <h4>Name: Sun Zeyu</h4>
+
                          (1) When the concentration of nicotine is equal to 0.001 g/L, the fluorescence can be detected by the plate reader. As time goes by, the fluorescence expression appears to be increasing, which becomes significant at the point of 4h. The function is fitted as following:
 
+
                        </p>
                                <p class="itemstyle">Introduction:She likes to paint, especially the landscape paintings in Chinese paintings.
+
                                    She always thinks that landscape paintings are composed only of dotted lines, but there
+
                                    is an indescribable momentum and charm in the mountains and rivers. It is as simple as
+
                                    she is pursuing.</p>
+
                            </figcaption>
+
                        </figure>
+
 
                     </div>
 
                     </div>
 
+
                     <div class="xshs-box2">
                     <div class="col-sm-4">
+
                         <p>
                         <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
+
                             <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/5/50/T--Worldshaper-XSHS--mo002.png" />
                             <div class="img-wrapper">
+
                        </p>
                                <img src="https://static.igem.org/mediawiki/2018/b/b2/T--worldshaper-XSHS--m013.png" class="img-responsive" alt="" />
+
                            </div>
+
                            <figcaption>
+
                                <h4>Name: XuJie</h4>
+
 
+
                                <p class="itemstyle">Introduction:He is lively and helpful. He loves piano, basketball, travel... He also likes
+
                                    to explore something unknown, especially in the natural sciences. He firmly believes
+
                                    that to achieve something, the essential thing is perseverance. </p>
+
                            </figcaption>
+
                        </figure>
+
 
                     </div>
 
                     </div>
  
                     <div class="col-sm-4">
+
                     <!-- <div class="xshs-box3">
                         <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
+
                         <p class="v1" id="OurSchool"style="text-align:  center; "> Collaborations with other teams</p>
                            <div class="img-wrapper">
+
                        <div style="
                                <img src="https://static.igem.org/mediawiki/2018/b/b4/T--worldshaper-XSHS--m014.png" class="img-responsive" alt="" />
+
                            width: 100%;
                             </div>
+
                            margin: 0 auto;
                             <figcaption>
+
                            margin-top: -34px;
                                <h4>Name:Yu Yijie</h4>
+
                        ">
 +
                        <hr style="
 +
                            height: 3px;
 +
                            background-color: #0c3d0c99!important;
 +
                            margin-top: 40px;
 +
                        ">
 +
                        </div>
 +
                       
 +
                        <div style="
 +
                            width: 5px;
 +
                            height: 24px;
 +
                            background-color:  #0c3d0cd9;
 +
                            /* text-align: left!important; */
 +
                             margin-left:  0px;
 +
                            border:  none;
 +
                            margin-top: 50px;
 +
                        "></div>
 +
                             <p style="width: 800px;margin-left: 11px;margin-top: -23px;font-size: 22px;margin-bottom: 20px;">Collaboration with ZJU-China team.</p>
  
                                <p class="itemstyle">Introduction: She is a very cute and funny little girl. She is very positive and optimistic
+
                        <p class="itemstyle">
                                    about life. There are three things she likes the most: one is sleeping; the second is
+
                            The aspect about experimental problem: Because of the invalid homemade E. coli receptive state, we did experiments in the ZJU-China team’s laboratories by utilizing its commercial E. coli receptive state. This attempt provided enough opportunities for us to discuss the difference between the experiments, which exerted great advantage to solve such problems in the nest phase.
                                    smiling; the third is that she will relax by enjoying the lotus</p>
+
                        </p>
                            </figcaption>
+
                    </div> -->
                         </figure>
+
                    <div class="xshs-box3">
 +
                      <p class="itemstyle" style="margin-left: 201px">
 +
                          where, the growth coefficient is positive, meaning that the bacteria are still able to grow.
 +
                         </p>
 
                     </div>
 
                     </div>
 
+
                     <div class="xshs-box2">
                     <div class="col-sm-4">
+
                         <p>
                         <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
+
                             <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/1/19/T--Worldshaper-XSHS--mo003.png" />
                             <div class="img-wrapper">
+
                        </p>
                                <img src="https://static.igem.org/mediawiki/2018/0/0e/T--worldshaper-XSHS--m015.png" class="img-responsive" alt="" />
+
                            </div>
+
                            <figcaption>
+
                                <h4> Name:Yan Yihai</h4>
+
 
+
                                <p class="itemstyle">Introduction: He is very interested in science. Because his parents are engaged in scientific
+
                                    research, he also has the opportunity to see some advanced experimental equipment earlier,
+
                                    and thus generated interest in scientific research.</p>
+
                            </figcaption>
+
                        </figure>
+
 
                     </div>
 
                     </div>
        </section>
+
                     <div class="xshs-box3">
        <section class="service-page">
+
                         <p class="itemstyle" style="margin-left: 201px">
            <h2 id="Instructors" class="subtitle wow fadeInUp animated" data-wow-delay=".3s" data-wow-duration="500ms">Instructors</h2>
+
                          (2) When the concentration of nicotine is equal to 0.01 g/L, the plate reader can still detect fluorescence. But compared with when the concentration is 0.001 g/L, the fluorescence intensity is no longer increasing with time. The fitted function is
            <p class="subtitle-des wow fadeInUp animated" data-wow-delay=".5s" data-wow-duration="500ms"></p>
+
                        </p>
            <div class="row">
+
 
+
                <div class="clearfix">
+
                     <div class="col-sm-4">
+
                         <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
+
                            <div class="img-wrapper">
+
                                <img src="https://static.igem.org/mediawiki/2017/6/6c/T-worldshaper-XSHS-s013.png" class="img-responsive" alt="" />
+
                            </div>
+
                            <figcaption>
+
                                <h4>Dr. Dong Shan</h4>
+
                                <p class="itemstyle">Duties:Primary PI</p>
+
                                <p class="itemstyle">Dr. Dong Shan is very enthusiastic in guiding every thing of iGEM. His guidance advice is
+
                                    very helpful to us.</p>
+
                            </figcaption>
+
                        </figure>
+
 
                     </div>
 
                     </div>
 
+
                     <div class="xshs-box2">
                     <div class="col-sm-4">
+
                         <p>
                         <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
+
                             <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/2/2c/T--Worldshaper-XSHS--mo004.png" />
                             <div class="img-wrapper">
+
                        </p>
                                <img src="https://static.igem.org/mediawiki/2017/6/64/T-worldshaper-XSHS-s018.jpeg" class="img-responsive" alt="" />
+
                            </div>
+
                            <figcaption>
+
                                <h4>Guo Ting</h4>
+
                                <p class="itemstyle">Duties:Secondary PI</p>
+
                                <p class="itemstyle">a very lovely and responsible teacher.Biological group with the highest degree the teacher,
+
                                    she is a campus is peaceful and friendly, and the relationship between the team members
+
                                    is good, also gave the players a lot of constructive Suggestions and guidance.Believe
+
                                    under the charge of miss guo, teams will get satisfactory grades.</p>
+
                            </figcaption>
+
                        </figure>
+
 
                     </div>
 
                     </div>
 
+
                    <div class="xshs-box3">
                    <div class="col-sm-4">
+
                         <p class="itemstyle" style="margin-left: 201px">
                         <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
+
                          where the bacteria growth coefficient is 1.205, which is close to that of 0.001 g/L. Based on the models, we conjecture that under these two concentrations of nicotine, the growth of the bacteria is not affected.
                            <div class="img-wrapper">
+
                        </p>
                                <img src="https://static.igem.org/mediawiki/2017/a/a5/T-worldshaper-XSHS-s015.png" class="img-responsive" alt="" />
+
                            </div>
+
                            <figcaption>
+
                                <h4>Professor Zhu Xufen</h4>
+
                                <p class="itemstyle">college of life sciences,Zhejiang University.She mainly works on study of molecular biology
+
                                    and microbiology.
+
                                </p>
+
                            </figcaption>
+
                        </figure>
+
 
                     </div>
 
                     </div>
 
+
                    <div class="xshs-box2">
                    <div class="col-sm-4">
+
                         <p>
                         <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
+
                             <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/c/cc/T--Worldshaper-XSHS--mo005.png" />
                             <div class="img-wrapper">
+
                        </p>
                                <img src="https://static.igem.org/mediawiki/2017/c/cd/T-worldshaper-XSHS-s017.png" class="img-responsive" alt="" />
+
                            </div>
+
                            <figcaption>
+
                                <h4>Professor Xu Cheng</h4>
+
                                <p class="itemstyle">College of Life Sciences,Zhejiang University</p>
+
                                <p class="itemstyle">You might think he was serious when you first met him,but lately you’ll find he is affine.He
+
                                    makes team members fall in love with bioinformatics.</p>
+
                            </figcaption>
+
                        </figure>
+
 
                     </div>
 
                     </div>
 
+
                    <div class="xshs-box3">
                    <div class="col-sm-4">
+
                         <p class="itemstyle" style="margin-left: 201px">
                         <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
+
                          (3) When the concentration of nicotine is equal to 0. 1 g/L, the fluorescence intensities detected at several time points are substantially lower than those of the blank control, and are shown as negative numerically. We conjecture that at the concentration of 0.1 g/L, nicotine has significant toxicity to the strain, which may have caused a large number of damage to the bacteria or even death, resulting in a decrease in the fluorescence value. A peak of fluorescence expression appears at 4h, probably because the strongest induction effect of nicotine is shown at that time, offsetting some of the variation in fluorescence intensity caused by bacterial damage. The fitted function is:
                            <div class="img-wrapper">
+
                        </p>
                                <img src="https://static.igem.org/mediawiki/2018/2/2a/T--worldshaper-XSHS--mWeng_Huifang.png" class="img-responsive" alt="" />
+
                    </div>
                            </div>
+
                    <div class="xshs-box2">
                            <figcaption>
+
                        <p>
                                <h4>Weng Huifang</h4>
+
                            <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/b/b6/T--Worldshaper-XSHS--mo006.png" />
                                <p class="itemstyle">A very friendly teacher. Participate in practical activities with students. The main task
+
                        </p>
                                    is to organize and manage students to complete their tasks. Instruct students to complete
+
                                    various activities.
+
                                </p>
+
                            </figcaption>
+
                        </figure>
+
 
                     </div>
 
                     </div>
 
+
                     <div class="xshs-box3">
                     <div class="col-sm-4">
+
                         <p class="itemstyle" style="margin-left: 201px">
                         <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
+
                          where the growth coefficient is -3.65, indicating that this concentration of nicotine has seriously affected bacterial growth and thus lowered the expression of fluorescence.
                            <div class="img-wrapper">
+
                        </p>
                                <img src="https://static.igem.org/mediawiki/2017/5/57/T-worldshaper-XSHS-s016.png" class="img-responsive" alt="" />
+
                    </div>
                            </div>
+
                    <div class="xshs-box2">
                             <figcaption>
+
                        <p>
                                <h4>Jin Wentao</h4>
+
                            <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/9/9f/T--Worldshaper-XSHS--mo007.png" />
                                <p class="itemstyle">College of Life Sciences,Zhejiang University</p>
+
                        </p>
                                <p class="itemstyle">He is a rigorous guy who is very professional in doing experiments.</p>
+
                    </div>
                             </figcaption>
+
                    <div class="xshs-box3">
                         </figure>
+
                        <p class="itemstyle" style="margin-left: 201px">
 +
                          (4) When the concentration of nicotine is equal to 1 g/L, the fluorescence intensity is basically negative at all times. We suppose that this is due to the great damage caused by nicotine at this concentration to the bacteria. The fitted function is:
 +
                        </p>
 +
                    </div>
 +
                    <div class="xshs-box2">
 +
                        <p>
 +
                            <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/9/93/T--Worldshaper-XSHS--mo008.png" />
 +
                        </p>
 +
                    </div>
 +
                    <div class="xshs-box3">
 +
                        <p class="itemstyle" style="margin-left: 201px">
 +
                          where the growth coefficient is -71.06, indicating that the bacterial growth is significantly affected.
 +
                        </p>
 +
                    </div>
 +
                    <div class="xshs-box2">
 +
                        <p>
 +
                            <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/5/52/T--Worldshaper-XSHS--mo009.png" />
 +
                        </p>
 +
                    </div>
 +
                    <div class="xshs-box3">
 +
                        <p class="itemstyle" style="margin-left: 201px">
 +
                          (5) We analyzed the correlation between k (bacterial growth coefficient) and the concentration of nicotine, the results of which showed that k and pC (-lg c) had a significant positive correlation. The higher the concentration of nicotine, the smaller k will result in, that is, the stronger the inhibition of growth. The fitted function is as follows:
 +
                        </p>
 +
                    </div>
 +
                      <div class="xshs-box2">
 +
                        <p>
 +
                             <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/0/0c/T--Worldshaper-XSHS--mo010.png" />
 +
                        </p>
 +
                    </div>
 +
                    <div class="xshs-box3">
 +
                        <p class="itemstyle" style="margin-left: 201px">
 +
                          When the concentration of nicotine is around 〖10〗^(-1.5) g/L (approximately 0.032 g/L), the growth of bacteria begins to be inhibited. As the concentration increases, the inhibition increases. When it changes to 〖10〗^(-1) g/L (0.1 g/L), the bacteria growth is inhibited to a certain degree, where k is calculated to be -3.62038186 based on the formula. When the concentration increases to 〖10〗^(-0.5) g/L (around 0.32 g/L), the inhibition is significant, and k is calculated as -17.56950279.
 +
                        </p>
 +
                    </div>
 +
                    <div class="xshs-box2">
 +
                        <p>
 +
                            <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/2/2f/T--Worldshaper-XSHS--mo011.png" />
 +
                        </p>
 +
                    </div>
 +
                    <div class="xshs-box3">
 +
                        <p class="itemstyle" style="margin-left: 201px">
 +
                            (6) Conclusion: Nicotine exhibits two properties for the strain. On the one hand, it can activate the promoter and induce the expression of fluorescence; on the other, nicotine has a toxic effect on the bacteria. Under the combined effect of these two properties, our detection system detected a great variety of fluorescence intensities. Based on the above models, we analyzed that the inhibition effect is not significant when the concentration of nicotine is less than 0.03g/L, and the fluorescence intensity increases with time. When the concentration is greater than 0.3 g/L, the inhibition effect is significant. And if the concentration is too high, the inhibitory effect of nicotine on bacteria will be overwhelming, resulting in a significant decrease in fluorescence expression.
 +
                        </p>
 +
                    </div>
 +
                    <div class="xshs-box3">
 +
                        <div style="
 +
                             width: 5px;
 +
                            height: 24px;
 +
                            background-color:  #0c3d0cd9;
 +
                            /* text-align: left!important; */
 +
                            margin-left:  201px;
 +
                            border:  none;
 +
                            margin-top: 50px;
 +
                        "></div>
 +
                         <p style="width: 800px;margin-left: 212px;margin-top: -23px;font-size: 22px;margin-bottom: 20px;"id="OurSchool">Ⅱ. The Growth Curves under Different Nicotine Concentrations by the First Generation Detection System</p>
 
                     </div>
 
                     </div>
 
+
                        <p class="itemstyle" style="margin-left: 201px">
 +
                            To better explore the relationship between nicotine concentrations and bacterial growth, we prepared 10 different concentrations of nicotine solutions for testing, i.e. 0.02 g/L, 0.04 g/L, 0.08 g/L, 0.16 g/L, 0.32 g/L, 0.64 g/L, 1.28 g/L, 2.56 g/L, 5.12 g/L and 10.24g/ L. During the data analysis, we performed the following substitution of the concentration:
 +
                        </p>
 +
                    </div>
 +
                    <div class="xshs-box2">
 +
                        <p>
 +
                            <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/f/f8/T--Worldshaper-XSHS--mo013.png" />
 +
                        </p>
 +
                    </div>
 +
                    <div class="xshs-box3">
 +
                        <p class="itemstyle"style="margin-left: 195px">
 +
                          in order to better discover its relationship with OD600. For the X-axis, 1, 2, 3 until 10 respectively represent the 10 different concentrations of nicotine, i.e. 0.02 g/L, 0.04 g/L, 0.08 g/L, 0.16 g/L, 0.32 g/L, 0.64 g/L, 1.28 g/L, 2.56 g/L, 5.12 g/L and 10.24g/L. We can see that the OD values at 0h in different groups are all 0.05, which means that all the groups share the same starting point. At 2h, the OD values detected at various concentration groups are basically the same, and have not increased much since 0h. At 4h, the OD values of the low concentration groups increased significantly. And for the groups larger than 5 (that is, 0.32 g/L), there is a downward trend, that is, the toxicity of nicotine has begun to manifest. The critical value, the concentration of 0.32 g/L, is basically consistent with our conjecture based on the models in the first part. As time goes on, the toxicity of nicotine becomes more and more significant. At 12h, when the concentrations are greater than 0.32 g/L, the number of bacteria decreases significantly. And as the concentration increases, the inhibiting effect also increases. Based on this model, we speculate that the effect of nicotine on bacterial growth is related to time and nicotine concentration. When the exposure time is less than 4 hours and the concentration is lower than 0.32 g/L, the inhibition is not significant. While with the increase of time and nicotine concentration, its inhibitory effect gradually increases.
 +
                        </p>
 +
                    </div>
 +
                    <div class="xshs-box2">
 +
                        <p>
 +
                            <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/3/3a/T--Worldshaper-XSHS--mo014.png" />
 +
                        </p>
 +
                    </div>
 +
                    <div class="xshs-box3">
 +
                        <div style="
 +
                            width: 5px;
 +
                            height: 24px;
 +
                            background-color:  #0c3d0cd9;
 +
                            /* text-align: left!important; */
 +
                            margin-left:  201px;
 +
                            border:  none;
 +
                            margin-top: 50px;
 +
                        "></div>
 +
                        <p style="width: 800px;margin-left: 212px;margin-top: -23px;font-size: 22px;margin-bottom: 20px;"id="Others">Ⅲ. Sensitivities of the First and the Second Generation Detection Systems</p>
 +
                    </div>
 +
                        <p class="itemstyle" style="margin-left: 201px">
 +
                          Based on the structure of plasmids, we predict that the sensitivity of the second generation detection system should be higher than that of the first generation. In order to better test their sensitivities, we have chosen a very low nicotine concentration that can still induce fluorescence to do the experiment. The concentration is 0.0001 g/L. By analyzing the experiment data, we get the following models:
 +
                        </p>
 +
                    </div>
 +
                    <div class="xshs-box2">
 +
                        <p>
 +
                            <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/1/14/T--Worldshaper-XSHS--mo015.png" />
 +
                        </p>
 +
                    </div>
 +
                    <div class="xshs-box3">
 +
                        <p class="itemstyle" style="margin-left: 330px">
 +
                          We can see that the detected fluorescence of the second generation detection system is higher than the first generation detection system. The difference is most significant at 3h. However, the fluorescence intensity detected by the second-generation system was significantly decreased at 4h. We conjecture that this may be related to the toxic effect of nicotine on the bacteria. Although the first generation of detection system can detect fluorescence, it is not as sensitive as the second generation system.
 +
                        </p>
 +
                        <p class="itemstyle" style="margin-left: 330px">
 +
                          In conclusion, we should choose the second generation detection system to detect the nicotine concentration and the best detection time is at 3h. However, if the first generation system is selected, the detection is better done after 4 hours, with the optimal detection concentration of less than 0.32 g/L.
 +
                        </p>
 
                 </div>
 
                 </div>
 
 
 
             </div>
 
             </div>
         </section>
+
         </div>
     </div>
+
     </section>
</section>
+
  
 
+
  <footer class="footer" style="background: rgba(12, 61, 12, 0.8509803921568627)!important;">
 
+
        <div class="container">
<footer class="footer">
+
            <div class="foot-box">
    <div class="container">
+
                <ul class="clearfix">
        <div class="foot-box">
+
                    <li class="foot-box-c1">
            <ul class="clearfix">
+
                        <img src="https://static.igem.org/mediawiki/2017/7/71/T-worldshaper-XSHS-logoxshs.jpeg" alt="">
                <li class="foot-box-c1">
+
                    </li>
                    <img src="https://static.igem.org/mediawiki/2017/7/71/T-worldshaper-XSHS-logoxshs.jpeg" alt="">
+
                    <li class="foot-box-c2">
                </li>
+
                        <img src="https://static.igem.org/mediawiki/2017/c/ce/T-worldshaper-igemlogo.jpeg" alt="">
                <li class="foot-box-c2">
+
                    </li>
                    <img src="https://static.igem.org/mediawiki/2017/c/ce/T-worldshaper-igemlogo.jpeg" alt="">
+
                    <li class="foot-box-c3">
                </li>
+
                        <p>Worldshaper-XSHS, Xiaoshan High School</p>
                <li class="foot-box-c3">
+
                        <p>Adress: No.538,Gongxiu Road,Xiaoshan District,Hangzhou,Zhejiang Province,China</p>
                    <p>Worldshaper-XSHS, Xiaoshan High School</p>
+
                    </li>
                    <p>
+
                    <li class="foot-box-c4">
                        Adress: No.538,Gongxiu Road,Xiaoshan District,Hangzhou,Zhejiang Province,China
+
                        <img src="https://static.igem.org/mediawiki/2018/9/96/T--worldshaper-XSHS--wechat.png" alt="">
                    </p>
+
                    </li>
                </li>
+
                </ul>
                <li class="foot-box-c4">
+
            </div>
                    <img src="https://static.igem.org/mediawiki/2017/3/32/T-Worldshaper-XSHS-weixin.jpeg" alt="">
+
                </li>
+
            </ul>
+
 
         </div>
 
         </div>
     </div>
+
     </footer>
</footer>
+
  
 
</html>
 
</html>

Latest revision as of 18:58, 17 October 2018

Modeling

Nicotine Detection System


To better detect the existence of nicotine, we made a first and a second generation detection system. Built on the pSB1C3 backbone, the first generation system contains a nicA2 promoter and a GFP gene, while the second one adds a T7 RNA polymerase gene and a T7 promoter in the middle of the first generation design to enhance the expression of the fluorescence. Via experiments, we learnt that the activity of the nicA2 promoter is regulated by the concentration of nicotine, so we applied different concentrations to both generations of systems for testing, and used the results to build the following math models using MATLAB (R2018b).

Ⅰ. Correlation Modals of Nicotine Concentration and Detection with the First Generation Detection System

A. Model Assumptions:

1. The growth of the E. coli strain is regarded as exponential within 4 hours. 2. The concentration of nicotine in the environment is constant. 3. The nicotine concentration is above the lower detection limit of the promoter. 4. The fluorescent protein shows no significant signs of degradation.

B. Used Modal:

where t stands for time; k is the assumed coefficient of the bacteria growth, which is related to the concentration of nicotine; k_c is the coefficient of fluorescence expression.

C. Time-Varying Fluorescence Intensity Under Different Concentrations Of Nicotine

(1) When the concentration of nicotine is equal to 0.001 g/L, the fluorescence can be detected by the plate reader. As time goes by, the fluorescence expression appears to be increasing, which becomes significant at the point of 4h. The function is fitted as following:

where, the growth coefficient is positive, meaning that the bacteria are still able to grow.

(2) When the concentration of nicotine is equal to 0.01 g/L, the plate reader can still detect fluorescence. But compared with when the concentration is 0.001 g/L, the fluorescence intensity is no longer increasing with time. The fitted function is

where the bacteria growth coefficient is 1.205, which is close to that of 0.001 g/L. Based on the models, we conjecture that under these two concentrations of nicotine, the growth of the bacteria is not affected.

(3) When the concentration of nicotine is equal to 0. 1 g/L, the fluorescence intensities detected at several time points are substantially lower than those of the blank control, and are shown as negative numerically. We conjecture that at the concentration of 0.1 g/L, nicotine has significant toxicity to the strain, which may have caused a large number of damage to the bacteria or even death, resulting in a decrease in the fluorescence value. A peak of fluorescence expression appears at 4h, probably because the strongest induction effect of nicotine is shown at that time, offsetting some of the variation in fluorescence intensity caused by bacterial damage. The fitted function is:

where the growth coefficient is -3.65, indicating that this concentration of nicotine has seriously affected bacterial growth and thus lowered the expression of fluorescence.

(4) When the concentration of nicotine is equal to 1 g/L, the fluorescence intensity is basically negative at all times. We suppose that this is due to the great damage caused by nicotine at this concentration to the bacteria. The fitted function is:

where the growth coefficient is -71.06, indicating that the bacterial growth is significantly affected.

(5) We analyzed the correlation between k (bacterial growth coefficient) and the concentration of nicotine, the results of which showed that k and pC (-lg c) had a significant positive correlation. The higher the concentration of nicotine, the smaller k will result in, that is, the stronger the inhibition of growth. The fitted function is as follows:

When the concentration of nicotine is around 〖10〗^(-1.5) g/L (approximately 0.032 g/L), the growth of bacteria begins to be inhibited. As the concentration increases, the inhibition increases. When it changes to 〖10〗^(-1) g/L (0.1 g/L), the bacteria growth is inhibited to a certain degree, where k is calculated to be -3.62038186 based on the formula. When the concentration increases to 〖10〗^(-0.5) g/L (around 0.32 g/L), the inhibition is significant, and k is calculated as -17.56950279.

(6) Conclusion: Nicotine exhibits two properties for the strain. On the one hand, it can activate the promoter and induce the expression of fluorescence; on the other, nicotine has a toxic effect on the bacteria. Under the combined effect of these two properties, our detection system detected a great variety of fluorescence intensities. Based on the above models, we analyzed that the inhibition effect is not significant when the concentration of nicotine is less than 0.03g/L, and the fluorescence intensity increases with time. When the concentration is greater than 0.3 g/L, the inhibition effect is significant. And if the concentration is too high, the inhibitory effect of nicotine on bacteria will be overwhelming, resulting in a significant decrease in fluorescence expression.

Ⅱ. The Growth Curves under Different Nicotine Concentrations by the First Generation Detection System

To better explore the relationship between nicotine concentrations and bacterial growth, we prepared 10 different concentrations of nicotine solutions for testing, i.e. 0.02 g/L, 0.04 g/L, 0.08 g/L, 0.16 g/L, 0.32 g/L, 0.64 g/L, 1.28 g/L, 2.56 g/L, 5.12 g/L and 10.24g/ L. During the data analysis, we performed the following substitution of the concentration:

in order to better discover its relationship with OD600. For the X-axis, 1, 2, 3 until 10 respectively represent the 10 different concentrations of nicotine, i.e. 0.02 g/L, 0.04 g/L, 0.08 g/L, 0.16 g/L, 0.32 g/L, 0.64 g/L, 1.28 g/L, 2.56 g/L, 5.12 g/L and 10.24g/L. We can see that the OD values at 0h in different groups are all 0.05, which means that all the groups share the same starting point. At 2h, the OD values detected at various concentration groups are basically the same, and have not increased much since 0h. At 4h, the OD values of the low concentration groups increased significantly. And for the groups larger than 5 (that is, 0.32 g/L), there is a downward trend, that is, the toxicity of nicotine has begun to manifest. The critical value, the concentration of 0.32 g/L, is basically consistent with our conjecture based on the models in the first part. As time goes on, the toxicity of nicotine becomes more and more significant. At 12h, when the concentrations are greater than 0.32 g/L, the number of bacteria decreases significantly. And as the concentration increases, the inhibiting effect also increases. Based on this model, we speculate that the effect of nicotine on bacterial growth is related to time and nicotine concentration. When the exposure time is less than 4 hours and the concentration is lower than 0.32 g/L, the inhibition is not significant. While with the increase of time and nicotine concentration, its inhibitory effect gradually increases.

Ⅲ. Sensitivities of the First and the Second Generation Detection Systems

Based on the structure of plasmids, we predict that the sensitivity of the second generation detection system should be higher than that of the first generation. In order to better test their sensitivities, we have chosen a very low nicotine concentration that can still induce fluorescence to do the experiment. The concentration is 0.0001 g/L. By analyzing the experiment data, we get the following models:

We can see that the detected fluorescence of the second generation detection system is higher than the first generation detection system. The difference is most significant at 3h. However, the fluorescence intensity detected by the second-generation system was significantly decreased at 4h. We conjecture that this may be related to the toxic effect of nicotine on the bacteria. Although the first generation of detection system can detect fluorescence, it is not as sensitive as the second generation system.

In conclusion, we should choose the second generation detection system to detect the nicotine concentration and the best detection time is at 3h. However, if the first generation system is selected, the detection is better done after 4 hours, with the optimal detection concentration of less than 0.32 g/L.

  • Worldshaper-XSHS, Xiaoshan High School

    Adress: No.538,Gongxiu Road,Xiaoshan District,Hangzhou,Zhejiang Province,China