Difference between revisions of "Team:FAFU-CHINA"

 
(215 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 +
{{FAFU-CHINA}}
 +
{{FAFU-CHINA/Bootstrap.js}}
 +
{{FAFU-CHINA/Bootstrap.css}}
 
<html>
 
<html>
 +
<head><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />   
 +
<meta name="apple-mobile-web-app-capable" content="yes" />   
 +
<meta name="format-detection" content="telephone=no" /> </head>
 +
<body>
  
<head>
+
<style>
    <meta charset="utf-8">
+
body{
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
opacity: 0.9;
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
    background-color: #F1e6ce
    <title>iGEM 2017_FAFU-CHINA</title>
+
;
    <link href="https://2016.igem.org/Template:Tec-Monterrey/css/bootstrap?action=raw&ctype=text/css" rel="stylesheet">
+
<link href="https://2016.igem.org/Template:Tec-Monterrey/css/style?action=raw&ctype=text/css" rel="stylesheet">
+
}
<link href="https://2016.igem.org/Template:Tec-Monterrey/css/styleNote?action=raw&ctype=text/css" rel="stylesheet">
+
</head>
+
<body>
+
  
    <style>
+
.imagestyle{
body {
+
width: 100%;
  margin: 0;
+
height: 500px;
 +
top:30px;
 
}
 
}
@media print {
+
.introducetext{
  * {
+
      margin-top: 8px;
    color: #000 !important;
+
     margin-left: 44%;
     text-shadow: none !important;
+
     font-style: italic;
     background: transparent !important;
+
     color: #BC464C;
     -webkit-box-shadow: none !important;
+
    margin-top:77px;
            box-shadow: none !important;
+
 
  }
+
 
}
 
}
a {
+
.introducetext2{
  color: #428bca;
+
    width: 80%;
  text-decoration: none;
+
    padding: 20px;
 +
    margin: 12px;
 +
    background-color: #D0E090;
 +
    border: 15px solid #BC464C;
 +
    border-style: initial;
 +
    margin-top: 30px;
 +
    font-size: 18px;
 +
    margin:0 auto;
 +
    margin-top:20px;
 +
    border-radius:20px 20px 20px 20px
 
}
 
}
.text-left {
+
 
  text-align: left;
+
.imagestyle1{
 +
    width: 396px;
 +
    height: 400px;
 +
    margin-left: 28%;
 
}
 
}
.text-right {
+
.lastpart{
  text-align: right;
+
    height: 300px;
 
}
 
}
.text-center {
+
 
  text-align: center;
+
.logoo2{
 +
      float:left;
 +
      width:200px;
 +
    }
 +
.logimg{
 +
    /*height: 50%;*/
 +
    width: 143%;
 +
    margin-top: -139%;}
 +
 +
.logoo1{
 +
    height:auto;
 +
    width: 200px;
 +
    float: right;
 +
    margin-top: -207px}
 +
.logoo1 img{
 +
    width: 60%;
 +
    height: 60%;
 +
    /*margin-top: -6%*/
 +
    }
 +
 
 +
 
 +
.lasttupian{width: 80%;
 +
margin-top:93px;
 +
border-radius:20px
 
}
 
}
.container {
+
.zuobain{
  padding-right: 15px;
+
float:left;
  padding-left: 15px;
+
width: 30%
  margin-right: auto;
+
  margin-left: auto;
+
 
}
 
}
@media (min-width: 768px) { .col-sm-12 {
+
</style>
     float: left;
+
 
 +
 
 +
 
 +
<style>
 +
  .navbar-default {
 +
     background-color: #93bd46;
 +
    border-color: #6a8d2c;
 
   }
 
   }
   .col-sm-12 {
+
   .navbar-default .navbar-brand {
     width: 100%;
+
     color: #e9f9e7 !important;
 
   }
 
   }
}
+
  .navbar-default .navbar-brand:hover,
@media (min-width: 992px) { .col-md-12 {
+
  .navbar-default .navbar-brand:focus {
     float: left;
+
     color: #ffffff;
 
   }
 
   }
   .col-md-12 {
+
   .navbar-default .navbar-text {
     width: 100%;
+
     color: #e9f9e7 !important;
 
   }
 
   }
}
+
  .navbar-default .navbar-nav > li > a {
@media (min-width: 1200px) { .col-lg-12 {
+
    color: #e9f9e7 !important;
     float: left;
+
  }
 +
  .navbar-default .navbar-nav > li > a:hover,
 +
  .navbar-default .navbar-nav > li > a:focus {
 +
    color: #ffffff !important;
 +
  }
 +
  .navbar-default .navbar-nav > li > .dropdown-menu {
 +
     background-color: #93bd46;
 +
  }
 +
  .navbar-default .navbar-nav > li > .dropdown-menu > li > a {
 +
    color: #e9f9e7 !important;
 +
  }
 +
  .navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
 +
  .navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
 +
    color: #ffffff !important;
 +
    background-color: #6a8d2c;
 +
  }
 +
  .navbar-default .navbar-nav > li > .dropdown-menu > li.divider {
 +
    background-color: #6a8d2c;
 +
  }
 +
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
 +
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
 +
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
 +
    color: #ffffff !important;
 +
    background-color: #6a8d2c;
 +
  }
 +
  .navbar-default .navbar-nav > .active > a,
 +
  .navbar-default .navbar-nav > .active > a:hover,
 +
  .navbar-default .navbar-nav > .active > a:focus {
 +
    color: #ffffff !important;
 +
    background-color: #6a8d2c;
 +
  }
 +
  .navbar-default .navbar-nav > .open > a,
 +
  .navbar-default .navbar-nav > .open > a:hover,
 +
  .navbar-default .navbar-nav > .open > a:focus {
 +
    color: #ffffff !important;
 +
    background-color: #6a8d2c;
 +
  }
 +
  .navbar-default .navbar-toggle {
 +
    border-color: #6a8d2c;
 
   }
 
   }
   .col-lg-12 {
+
   .navbar-default .navbar-toggle:hover,
     width: 100%;
+
  .navbar-default .navbar-toggle:focus {
 +
     background-color: #6a8d2c;
 
   }
 
   }
}
+
   .navbar-default .navbar-toggle .icon-bar {
.btn-default {
+
    background-color: #e9f9e7 !important;
   color: #333;
+
   }
  background-color: #fff;
+
   .navbar-default .navbar-collapse,
  border-color: #ccc;
+
   .navbar-default .navbar-form {
}
+
    border-color: #e9f9e7 !important;
.btn-default:hover,
+
   }
.btn-default:focus,
+
   .navbar-default .navbar-link {
.btn-default:active,
+
    color: #e9f9e7 !important;
.btn-default.active,
+
   }
.open > .dropdown-toggle.btn-default {
+
   .navbar-default .navbar-link:hover {
  color: #333;
+
    color: #ffffff !important;
  background-color: #e6e6e6;
+
   }
   border-color: #adadad;
+
 
}
+
   @media (max-width: 767px) {
.btn-default:active,
+
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
.btn-default.active,
+
     color: #e9f9e7 !important;
.open > .dropdown-toggle.btn-default {
+
   background-image: none;
+
}
+
.btn-default.disabled,
+
.btn-default[disabled],
+
fieldset[disabled] .btn-default,
+
.btn-default.disabled:hover,
+
.btn-default[disabled]:hover,
+
fieldset[disabled] .btn-default:hover,
+
.btn-default.disabled:focus,
+
.btn-default[disabled]:focus,
+
fieldset[disabled] .btn-default:focus,
+
.btn-default.disabled:active,
+
.btn-default[disabled]:active,
+
fieldset[disabled] .btn-default:active,
+
.btn-default.disabled.active,
+
.btn-default[disabled].active,
+
fieldset[disabled] .btn-default.active {
+
   background-color: #fff;
+
  border-color: #ccc;
+
}
+
.btn-default .badge {
+
  color: #fff;
+
  background-color: #333;
+
}
+
.btn-primary {
+
  color: #fff;
+
  background-color: #428bca;
+
  border-color: #357ebd;
+
}
+
.btn-primary:hover,
+
.btn-primary:focus,
+
.btn-primary:active,
+
.btn-primary.active,
+
.open > .dropdown-toggle.btn-primary {
+
   color: #fff;
+
  background-color: #3071a9;
+
  border-color: #285e8e;
+
}
+
.btn-primary:active,
+
.btn-primary.active,
+
.open > .dropdown-toggle.btn-primary {
+
   background-image: none;
+
}
+
.btn-primary.disabled,
+
.btn-primary[disabled],
+
fieldset[disabled] .btn-primary,
+
.btn-primary.disabled:hover,
+
.btn-primary[disabled]:hover,
+
fieldset[disabled] .btn-primary:hover,
+
.btn-primary.disabled:focus,
+
.btn-primary[disabled]:focus,
+
fieldset[disabled] .btn-primary:focus,
+
.btn-primary.disabled:active,
+
.btn-primary[disabled]:active,
+
fieldset[disabled] .btn-primary:active,
+
.btn-primary.disabled.active,
+
.btn-primary[disabled].active,
+
fieldset[disabled] .btn-primary.active {
+
  background-color: #428bca;
+
   border-color: #357ebd;
+
}
+
.btn-primary .badge {
+
   color: #428bca;
+
  background-color: #fff;
+
}
+
.btn-success {
+
  color: #fff;
+
  background-color: #5cb85c;
+
  border-color: #4cae4c;
+
}
+
.btn-success:hover,
+
.btn-success:focus,
+
.btn-success:active,
+
.btn-success.active,
+
.open > .dropdown-toggle.btn-success {
+
  color: #fff;
+
   background-color: #449d44;
+
  border-color: #398439;
+
}
+
.btn-success:active,
+
.btn-success.active,
+
.open > .dropdown-toggle.btn-success {
+
   background-image: none;
+
}
+
.btn-success.disabled,
+
.btn-success[disabled],
+
fieldset[disabled] .btn-success,
+
.btn-success.disabled:hover,
+
.btn-success[disabled]:hover,
+
fieldset[disabled] .btn-success:hover,
+
.btn-success.disabled:focus,
+
.btn-success[disabled]:focus,
+
fieldset[disabled] .btn-success:focus,
+
.btn-success.disabled:active,
+
.btn-success[disabled]:active,
+
fieldset[disabled] .btn-success:active,
+
.btn-success.disabled.active,
+
.btn-success[disabled].active,
+
fieldset[disabled] .btn-success.active {
+
  background-color: #5cb85c;
+
  border-color: #4cae4c;
+
}
+
.btn-success .badge {
+
  color: #5cb85c;
+
  background-color: #fff;
+
}
+
.btn-info {
+
  color: #fff;
+
  background-color: #5bc0de;
+
  border-color: #46b8da;
+
}
+
.btn-info:hover,
+
.btn-info:focus,
+
.btn-info:active,
+
.btn-info.active,
+
.open > .dropdown-toggle.btn-info {
+
  color: #fff;
+
  background-color: #31b0d5;
+
  border-color: #269abc;
+
}
+
.btn-info:active,
+
.btn-info.active,
+
.open > .dropdown-toggle.btn-info {
+
  background-image: none;
+
}
+
.btn-info.disabled,
+
.btn-info[disabled],
+
fieldset[disabled] .btn-info,
+
.btn-info.disabled:hover,
+
.btn-info[disabled]:hover,
+
fieldset[disabled] .btn-info:hover,
+
.btn-info.disabled:focus,
+
.btn-info[disabled]:focus,
+
fieldset[disabled] .btn-info:focus,
+
.btn-info.disabled:active,
+
.btn-info[disabled]:active,
+
fieldset[disabled] .btn-info:active,
+
.btn-info.disabled.active,
+
.btn-info[disabled].active,
+
fieldset[disabled] .btn-info.active {
+
  background-color: #5bc0de;
+
  border-color: #46b8da;
+
}
+
.btn-info .badge {
+
  color: #5bc0de;
+
  background-color: #fff;
+
}
+
.btn-warning {
+
  color: #fff;
+
  background-color: #f0ad4e;
+
  border-color: #eea236;
+
}
+
.btn-warning:hover,
+
.btn-warning:focus,
+
.btn-warning:active,
+
.btn-warning.active,
+
.open > .dropdown-toggle.btn-warning {
+
  color: #fff;
+
  background-color: #ec971f;
+
  border-color: #d58512;
+
}
+
.btn-warning:active,
+
.btn-warning.active,
+
.open > .dropdown-toggle.btn-warning {
+
  background-image: none;
+
}
+
.btn-warning.disabled,
+
.btn-warning[disabled],
+
fieldset[disabled] .btn-warning,
+
.btn-warning.disabled:hover,
+
.btn-warning[disabled]:hover,
+
fieldset[disabled] .btn-warning:hover,
+
.btn-warning.disabled:focus,
+
.btn-warning[disabled]:focus,
+
fieldset[disabled] .btn-warning:focus,
+
.btn-warning.disabled:active,
+
.btn-warning[disabled]:active,
+
fieldset[disabled] .btn-warning:active,
+
.btn-warning.disabled.active,
+
.btn-warning[disabled].active,
+
fieldset[disabled] .btn-warning.active {
+
  background-color: #f0ad4e;
+
  border-color: #eea236;
+
}
+
.btn-warning .badge {
+
  color: #f0ad4e;
+
  background-color: #fff;
+
}
+
.btn-danger {
+
  color: #fff;
+
  background-color: #d9534f;
+
  border-color: #d43f3a;
+
}
+
.btn-danger:hover,
+
.btn-danger:focus,
+
.btn-danger:active,
+
.btn-danger.active,
+
.open > .dropdown-toggle.btn-danger {
+
  color: #fff;
+
  background-color: #c9302c;
+
  border-color: #ac2925;
+
}
+
.btn-danger:active,
+
.btn-danger.active,
+
.open > .dropdown-toggle.btn-danger {
+
  background-image: none;
+
}
+
.btn-danger.disabled,
+
.btn-danger[disabled],
+
fieldset[disabled] .btn-danger,
+
.btn-danger.disabled:hover,
+
.btn-danger[disabled]:hover,
+
fieldset[disabled] .btn-danger:hover,
+
.btn-danger.disabled:focus,
+
.btn-danger[disabled]:focus,
+
fieldset[disabled] .btn-danger:focus,
+
.btn-danger.disabled:active,
+
.btn-danger[disabled]:active,
+
fieldset[disabled] .btn-danger:active,
+
.btn-danger.disabled.active,
+
.btn-danger[disabled].active,
+
fieldset[disabled] .btn-danger.active {
+
  background-color: #d9534f;
+
  border-color: #d43f3a;
+
}
+
.btn-danger .badge {
+
  color: #d9534f;
+
  background-color: #fff;
+
}
+
.btn-link {
+
  font-weight: normal;
+
  color: #428bca;
+
  cursor: pointer;
+
  border-radius: 0;
+
}
+
.btn-link,
+
.btn-link:active,
+
.btn-link[disabled],
+
fieldset[disabled] .btn-link {
+
  background-color: transparent;
+
  -webkit-box-shadow: none;
+
          box-shadow: none;
+
}
+
.btn-link,
+
.btn-link:hover,
+
.btn-link:focus,
+
.btn-link:active {
+
  border-color: transparent;
+
}
+
.btn-link:hover,
+
.btn-link:focus {
+
  color: #2a6496;
+
  text-decoration: underline;
+
  background-color: transparent;
+
}
+
.btn-link[disabled]:hover,
+
fieldset[disabled] .btn-link:hover,
+
.btn-link[disabled]:focus,
+
fieldset[disabled] .btn-link:focus {
+
  color: #777;
+
  text-decoration: none;
+
}
+
.btn-lg,
+
.btn-group-lg > .btn {
+
  padding: 10px 16px;
+
  font-size: 18px;
+
  line-height: 1.33;
+
  border-radius: 6px;
+
}
+
.btn-sm,
+
.btn-group-sm > .btn {
+
  padding: 5px 10px;
+
  font-size: 12px;
+
  line-height: 1.5;
+
  border-radius: 3px;
+
}
+
.btn-xs,
+
.btn-group-xs > .btn {
+
  padding: 1px 5px;
+
  font-size: 12px;
+
  line-height: 1.5;
+
  border-radius: 3px;
+
}
+
.btn-block {
+
  display: block;
+
  width: 100%;
+
}
+
.btn-block + .btn-block {
+
  margin-top: 5px;
+
}
+
.home-sec {
+
    padding-top: 10px;
+
    padding-bottom: 60px;
+
    background: url(https://static.igem.org/mediawiki/2017/f/f4/T--FAFU-CHINA--2.jpg) no-repeat center center;
+
    padding: 0;
+
    -webkit-background-size: cover;
+
    background-size: cover;
+
     color: #fff;
+
    background-attachment: fixed;
+
}
+
    .home-sec .overlay {
+
        background: rgba(38, 57, 88, 0.89);
+
        min-height: 500px;
+
 
     }
 
     }
     .home-sec h1 {
+
     .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
        color: #fff;
+
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        font-weight: 900;
+
    color: #ffffff !important;
        font-size: 50px;
+
        text-transform: uppercase;
+
        padding-bottom: 35px;
+
 
     }
 
     }
     .home-sec h3 {
+
     .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
        text-transform: uppercase;
+
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
 +
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
 +
    color: #ffffff !important;
 +
    background-color: #6a8d2c;
 
     }
 
     }
.set-flexi {
+
  }
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0);
+
  .dropdown-menu li a{
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0);
+
     background-color: #93bd46;
    -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0);
+
  }
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0);
+
  .dropdown-menu .active a{
     background-color: transparent;
+
     background-color:#6a8d2c;  
    border: 0px solid #000;
+
  }
    padding-top: 120px;
+
}
+
.flex-control-nav {
+
    display: none!important;
+
}
+
.set-flexi a {
+
     margin: 5px;
+
}
+
h1::after {
+
    content: " ";
+
    border: solid 2px #2f9484;
+
    display: block;
+
    width: 200px;
+
    margin: 12px auto;
+
}
+
</style>
+
   
+
  
 +
 
 +
  body,html{
 +
    padding:0;
 +
    margin:0;
 +
  }
 +
  .dropdown ul li,.dropdown ul{
 +
    background-color:gainsboro;
 +
  }
 +
  .navbar .nav > li .dropdown-menu { 
 +
    margin: 0; 
 +
  } 
 +
  .navbar .nav > li:hover .dropdown-menu { 
 +
    display: block; 
 +
  }
 +
  .noma{
 +
    width:70%;
 +
    margin:0 auto;
 +
    padding:0;
 +
  }
  
  
 +
</style>
 +
<nav class="navbar navbar-default " style="margin-top:145px;z-index: 888">
 +
  <div class="container-fluid noma">
  
  
 +
    <!-- Collect the nav links, forms, and other content for toggling -->
 +
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 +
<ul class="nav navbar-nav">
 +
<li class="active"><a href="#">Home</a></li>
  
<style>
+
<li class="dropdown">
.headss{
+
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Project <span class="caret"></span></a>
width:100%;
+
  <ul class="dropdown-menu">
}
+
<li><a href="https://2017.igem.org/Team:FAFU-CHINA/Design">Design</a></li>
.containerss {
+
<li><a href="https://2017.igem.org/Team:FAFU-CHINA/Applied_Design">Background</a></li>
position:absolute;
+
<li><a href="https://2017.igem.org/Team:FAFU-CHINA/InterLab">Interlab</a></li>
     width: 80%;
+
<li class="chooseone"><a href="https://2017.igem.org/Team:FAFU-CHINA/Plant">Module 1: Phyto-route</a></li>
margin-left:15%;
+
<li class="choosetwo"><a href="https://2017.igem.org/Team:FAFU-CHINA/Experiments#sss2">Module 2: Metal-trap</a></li>
margin-top:-63px;
+
<li class="choosethree"><a href="https://2017.igem.org/Team:FAFU-CHINA/Experiments#sss3">Module 3: Safeguard</a></li>
}
+
  </ul>
 +
</li>
 +
<li class="dropdown">
 +
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Achievements <span class="caret"></span></a>
 +
  <ul class="dropdown-menu">
 +
<li><a href="https://2017.igem.org/Team:FAFU-CHINA/Demonstrate">Demonstrate</a></li>
 +
<li><a href="https://2017.igem.org/Team:FAFU-CHINA/Judging_Form">Judging Form</a></li>
 +
<!--<li><a href="https://2017.igem.org/Team:Example2/Entrepreneurship">Community</a></li>-->
 +
  </ul>
 +
</li>
 +
<li class="dropdown">
 +
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Extras <span class="caret"></span></a>
 +
  <ul class="dropdown-menu">
 +
<li><a href="https://2017.igem.org/Team:FAFU-CHINA/Collaborations">Collaborations</a></li>
 +
<li><a href="https://2017.igem.org/Team:FAFU-CHINA/Protocols ">Protocols</a></li>
 +
<li><a href="https://2017.igem.org/Team:FAFU-CHINA/Notebook">Notebook</a></li>
 +
  </ul>
 +
</li>
 +
 +
<li><a href="https://2017.igem.org/Team:FAFU-CHINA/Parts">Parts</a></li>
 +
<!-- <li class="dropdown">
 +
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Results <span class="caret"></span></a>
 +
  <ul class="dropdown-menu">
 +
<li><a href="https://2017.igem.org/Team:FAFU-CHINA/Results">Overview</a></li>
 +
<li><a href="https://2017.igem.org/Team:FAFU-CHINA/Measurement">Measurement</a></li>
 +
<li><a href="https://2017.igem.org/Team:FAFU-CHINA/HP/Gold_Integrated">Gold Integrated</a></li>
 +
<li><a href="https://2017.igem.org/Team:Example2/Entrepreneurship">Entrepreneurship</a></li>
 +
<li><a href="hhttps://2017.igem.org/Team:Example2/Software">Software</a></li>
 +
<li><a href="https://2017.igem.org/Team:Example2/Hardware">Hardware</a></li>
 +
<li><a href="https://2017.igem.org/Team:Example2/Plant">Plant</a></li>
 +
  </ul>
 +
</li>-->
 +
<li><a href="https://2017.igem.org/Team:FAFU-CHINA/Model">Model</a></li>
 +
<li><a href="https://2017.igem.org/Team:FAFU-CHINA/Human_Practices">Human Practice</a></li>
 +
<li class="dropdown">
 +
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Team <span class="caret"></span></a>
 +
  <ul class="dropdown-menu">
 +
<li><a href="https://2017.igem.org/Team:FAFU-CHINA/Team">Team members</a></li>
 +
<li><a href="https://2017.igem.org/Team:FAFU-CHINA/Attributions">Attributions</a></li>
 +
  </ul>
 +
</li>
 +
</ul>
 +
     </div><!-- /.navbar-collapse -->
 +
    </div><!-- /.navbar-collapse -->
 +
</nav>
 +
    <!--logo图片位置-->
 +
    <div class="logstyle">
 +
        <div class="logoo2"><img class="logimg" src="https://static.igem.org/mediawiki/2017/a/ae/T--FAFU-CHINA--006.jpg" ></div>
 +
        <div class="logoo1"><img src="https://static.igem.org/mediawiki/2017/c/c7/T--FAFU-CHINA--007.png" ></div>
 +
    </div>
 +
   
 +
  <div class="introducetext">
 +
            <h1 >
 +
          Overview
 +
          </h1>
 +
    </div>
 +
   
 +
    <div class="introducetext2">
 +
    <div><p  style="text-align:center; color: #6a8d2c ; font-size:25px;font-family:inherit;">Synergism of Phosphate-solubilizing microoranisms-plant</p>
 +
        <p style="text-align: center; color: #6a8d2c; font-size:25px;font-family: inherit;">interactions for bioremediation of metalliferous soils</p></div>
 +
        <div>
 +
            <span class="span1">
 +
          <p style="font-family: -webkit-body;font-size: 15px;">We hope to establish a sustainable, regulable and reusable project to solve the soil polluted by heavy metals. Phosphate-solubilizing bacteria have important functions. In our project, we used the mechanism of the alliance between microbe and plant, by manufacturing <i>Bacillus megaterium</i>, which is a kind of phosphate-solubilizing microorganism exists in the root system, forcing it enhance the plant remediation from two aspects, accumulating heavy metals and defend adversity stress. To achieve the goal of spatial specificity, we make most of the expression system which is regulated by root organic acid. We also used MBP (metal binding protein) and ACC deaminase to make accumulation of heavy metal in root system’s soil success. Finally, heavy metals will transfer to plant itself. A series of transformation we made in phosphate-solubilizing bacteria in our project will solve the weakness of hyper-accumulators, therefore, the remediation method will be put into use widely.
 +
<br/>&nbsp;&nbsp;&nbsp;&nbsp;</p></span>
 +
           
 +
            </span>
 +
        </div>
 +
    </div>
 +
    </div>
  
.menuss, .menuss ul {
 
    list-style: none;
 
    padding: 0;
 
    margin: 0;
 
}
 
.menuss {
 
height: 58px;
 
color: #505050;
 
}
 
.menuss li {
 
    background: -moz-linear-gradient(#292929, #252525);
 
    background: -ms-linear-gradient(#292929, #252525);
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
 
    background: -webkit-linear-gradient(#292929, #252525);
 
    background: -o-linear-gradient(#292929, #252525);
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
 
    background: linear-gradient(#292929, #252525);
 
  
     border-bottom: 2px solid #181818;
+
 
     border-top: 2px solid #303030;
+
<style type="text/css">
     min-width: 200px;
+
     .liuchengtu{
+
    width: 60%
}
+
     margin: 0 auto
.menuss > li {
+
     height:auto;
     display: block;
+
    }
     float: left;
+
    .liuchengtu1{
     position: relative;
+
     width: 50%;
}
+
     margin-top: 100px
.menuss > li:first-child {
+
     }
    border-radius: 20px 0 0;
+
    </style>
}
+
<div align="center" class="liuchengtu">
 +
  <img class="liuchengtu1" src="https://static.igem.org/mediawiki/2017/e/e0/T--FAFU-CHINA--009.png">
 +
</div>
  
.menussj{border-radius:0 20px 0 0;}
 
.menuss a {
 
    border-left: 3px solid rgba(0, 0, 0, 0);
 
    color: #808080;
 
    display: block;
 
    font-family: 'Lucida Console';
 
    font-size: 18px;
 
    line-height: 54px;
 
    padding: 0 25px;
 
    text-decoration: none;
 
    text-transform: uppercase;
 
}
 
  
.menuss li:hover {
 
    background-color: #1c1c1c;
 
    background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
 
    background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
 
    background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
 
    background: -o-linear-gradient(#1c1c1c, #1b1b1b);
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
 
    background: linear-gradient(#1c1c1c, #1b1b1b);
 
  
    border-bottom: 2px solid #222222;
+
 
    border-top: 2px solid #1B1B1B;
+
<style>
}
+
.secondbg{
.menuss li:hover > a {
+
background-color: #D0E090;
     border-radius: 5px 0 0 0;
+
margin:0 auto;
    border-left: 3px solid #C4302B;
+
padding:0;
    color: #C4302B;
+
width:90%;
}
+
     display:inline;
 +
}
 +
/* entire container, keeps perspective */
 +
.flip-container {
 +
perspective: 1000;
 +
}
 +
/* flip the pane when hovered */
 +
.flip-container:hover .flipper {
 +
transform: rotateY(180deg);
 +
}
  
.submenuss {
+
.flip-container, .front,.back{
    left: 0;
+
width: 320px;
    max-height: 0;
+
height: 490px;
    position: absolute;
+
}
    top: 100%;
+
    z-index: 0;
+
  
    -webkit-perspective: 400px;
+
/* flip speed goes here */
    -moz-perspective: 400px;
+
.flipper {
    -ms-perspective: 400px;
+
transition: 0.4s;
    -o-perspective: 400px;
+
transform-style: preserve-3d;
    perspective: 400px;
+
}
+
.submenuss li {
+
    opacity: 0;
+
  
    -webkit-transform: rotateY(90deg);
+
position: relative;
    -moz-transform: rotateY(90deg);
+
    -ms-transform: rotateY(90deg);
+
    -o-transform: rotateY(90deg);
+
    transform: rotateY(90deg);
+
  
    -webkit-transition: opacity .4s, -webkit-transform .5s;
+
}
    -moz-transition: opacity .4s, -moz-transform .5s;
+
    -ms-transition: opacity .4s, -ms-transform .5s;
+
    -o-transition: opacity .4s, -o-transform .5s;
+
    transition: opacity .4s, transform .5s;
+
}
+
.menuss .submenuss li:hover a {
+
    border-left: 3px solid #454545;
+
    border-radius: 0;
+
    color: #ffffff;
+
}
+
.menuss > li:hover .submenuss, .menuss > li:focus .submenuss {
+
    max-height: 2000px;
+
    z-index: 10;
+
}
+
.menuss > li:hover .submenuss li, .menuss > li:focus .submenuss li {
+
    opacity: 1;
+
  
    -webkit-transform: none;
+
/* hide back of pane during swap */
     -moz-transform: none;
+
.front, .back {
    -ms-transform: none;
+
-webkit-backface-visibility: hidden;
    -o-transform: none;
+
     -moz-backface-visibility: hidden;
    transform: none;
+
}
+
  
.menuss li:hover .submenuss li:nth-child(1) {
+
-ms-backface-visibility: hidden;
    -webkit-transition-delay: 0s;
+
-o-backface-visibility: hidden;
    -moz-transition-delay: 0s;
+
    -ms-transition-delay: 0s;
+
    -o-transition-delay: 0s;
+
    transition-delay: 0s;
+
}
+
.menuss li:hover .submenuss li:nth-child(2) {
+
    -webkit-transition-delay: 50ms;
+
    -moz-transition-delay: 50ms;
+
    -ms-transition-delay: 50ms;
+
    -o-transition-delay: 50ms;
+
    transition-delay: 50ms;
+
}
+
.menuss li:hover .submenuss li:nth-child(3) {
+
    -webkit-transition-delay: 100ms;
+
    -moz-transition-delay: 100ms;
+
    -ms-transition-delay: 100ms;
+
    -o-transition-delay: 100ms;
+
    transition-delay: 100ms;
+
}
+
.menuss li:hover .submenuss li:nth-child(4) {
+
    -webkit-transition-delay: 150ms;
+
    -moz-transition-delay: 150ms;
+
    -ms-transition-delay: 150ms;
+
    -o-transition-delay: 150ms;
+
    transition-delay: 150ms;
+
}
+
.menuss li:hover .submenuss li:nth-child(5) {
+
    -webkit-transition-delay: 200ms;
+
    -moz-transition-delay: 200ms;
+
    -ms-transition-delay: 200ms;
+
    -o-transition-delay: 200ms;
+
    transition-delay: 200ms;
+
}
+
.menuss li:hover .submenuss li:nth-child(6) {
+
    -webkit-transition-delay: 250ms;
+
    -moz-transition-delay: 250ms;
+
    -ms-transition-delay: 250ms;
+
    -o-transition-delay: 250ms;
+
    transition-delay: 250ms;
+
}
+
.menuss li:hover .submenuss li:nth-child(7) {
+
    -webkit-transition-delay: 300ms;
+
    -moz-transition-delay: 300ms;
+
    -ms-transition-delay: 300ms;
+
    -o-transition-delay: 300ms;
+
    transition-delay: 300ms;
+
}
+
.menuss li:hover .submenuss li:nth-child(8) {
+
    -webkit-transition-delay: 350ms;
+
    -moz-transition-delay: 350ms;
+
    -ms-transition-delay: 350ms;
+
    -o-transition-delay: 350ms;
+
    transition-delay: 350ms;
+
}
+
  
.submenuss li:nth-child(1) {
+
position: absolute;
    -webkit-transition-delay: 350ms;
+
top: 0;
    -moz-transition-delay: 350ms;
+
left: 0;
    -ms-transition-delay: 350ms;
+
     border-radius:30px
     -o-transition-delay: 350ms;
+
}
    transition-delay: 350ms;
+
}
+
.submenuss li:nth-child(2) {
+
    -webkit-transition-delay: 300ms;
+
    -moz-transition-delay: 300ms;
+
    -ms-transition-delay: 300ms;
+
    -o-transition-delay: 300ms;
+
    transition-delay: 300ms;
+
}
+
.submenuss li:nth-child(3) {
+
    -webkit-transition-delay: 250ms;
+
    -moz-transition-delay: 250ms;
+
    -ms-transition-delay: 250ms;
+
    -o-transition-delay: 250ms;
+
    transition-delay: 250ms;
+
}
+
.submenuss li:nth-child(4) {
+
    -webkit-transition-delay: 200ms;
+
    -moz-transition-delay: 200ms;
+
    -ms-transition-delay: 200ms;
+
    -o-transition-delay: 200ms;
+
    transition-delay: 200ms;
+
}
+
.submenuss li:nth-child(5) {
+
    -webkit-transition-delay: 150ms;
+
    -moz-transition-delay: 150ms;
+
    -ms-transition-delay: 150ms;
+
    -o-transition-delay: 150ms;
+
    transition-delay: 150ms;
+
}
+
.submenuss li:nth-child(6) {
+
    -webkit-transition-delay: 100ms;
+
    -moz-transition-delay: 100ms;
+
    -ms-transition-delay: 100ms;
+
    -o-transition-delay: 100ms;
+
    transition-delay: 100ms;
+
}
+
.submenuss li:nth-child(7) {
+
    -webkit-transition-delay: 50ms;
+
    -moz-transition-delay: 50ms;
+
    -ms-transition-delay: 50ms;
+
    -o-transition-delay: 50ms;
+
    transition-delay: 50ms;
+
}
+
.submenuss li:nth-child(8) {
+
    -webkit-transition-delay: 0s;
+
    -moz-transition-delay: 0s;
+
    -ms-transition-delay: 0s;
+
    -o-transition-delay: 0s;
+
    transition-delay: 0s;
+
}
+
</style>
+
  
 +
/* front pane, placed above back */
 +
.front {
 +
z-index: 1;
 +
}
  
<div class="home-sec" id="home" style="margin-top:-12px;">
+
/* back, initially hidden pane */
<div class="overlay">
+
.back {
                              <div class="container">
+
transform: rotateY(180deg);
<div class="row text-center ">
+
background-color: #D0E090;
 +
font-size: 20px
 +
}
 +
.front img{
 +
width:300px;
 +
}
 +
.back div {
 +
width:300px;
 +
height:450px;
 +
    margin-left: 10px
 +
/*background-color:#EBE6E6;*/
 +
}
 +
.toopp{
 +
padding:0;
 +
margin:0;
 +
}
 +
.picleft{
 +
float:right;
 +
margin:0;
 +
padding:0;
 +
width:40%;
 +
}
 +
.picleft img{
 +
width:100%;
 +
}
 +
.lleft{
 +
float:left;
 +
width:60%;
 +
}
 +
.lleft img{
 +
width:65%;
 +
float:left;
 +
margin:150px 0 0 100px;
 +
}
 +
.fgx{
 +
border:1px #D4CCCC solid;
 +
width:100%;
 +
opacity:0.5;
 +
}
 +
.fgx2{
 +
margin:10px 0;
 +
padding:0;
 +
border:1px #D4CCCC solid;
 +
box-shadow: 10px 10px 5px #888888;
 +
opacity:0.5;
 +
}
 +
.botpic{
 +
margin:0 0 0 50px;
 +
padding:0;
 +
float:left;
  
<div class="col-lg-12  col-md-12 col-sm-12">
+
}
 
+
</style>
      <ul class="slides move-me">
+
<div>
<!-- Slider 01 -->
+
<div class="secondbg">
<li style="list-style-type:none;">
+
<div class="fgx2"></div>
<h3>project</h3>
+
<div class="botpic">
<h1>project</h1>
+
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<a href="demo3.html" class="btn btn-info btn-lg">
+
<div class="flipper">
课程介绍
+
<div class="front">
</a>
+
<!-- 前面内容 -->
<a href="demo1.html" class="btn btn-success btn-lg">
+
          <img src="https://static.igem.org/mediawiki/2017/3/32/T--FAFU-CHINA--012.png">
团队介绍
+
</div>
</a>
+
<div class="back">
</li>
+
<!-- 背面内容 -->
<!-- End Slider 01 -->
+
<div><p style="font-size:16px;font-family: -webkit-body;"><br/>Soil polluted by heavy metals represent an important environmental problem due to the toxic effects of metals, their accumulations throughout the food chain and the additional risk of groundwater contamination.
 
+
Continued worldwide industrialization has caused extensive environmental and human health problems. A wide variety of chemicals, e.g., heavy metals, pesticides, chlorinated solvents, etc., have been detected in different natural resources such as soil, water, and air. Among the pollutants, the heavy metals are of concern to human health due to their cytotoxicity, mutagenicity, and carcinogenicity.
                                                               
+
<br/>&nbsp;&nbsp;&nbsp;&nbsp;</p></div>
+
</ul>
+
 
+
 
+
 
+
</div>
+
 
+
</div>
+
 
</div>
 
</div>
 
 
</div>
 
</div>
 
 
</div>
 
</div>
 +
</div>
  
<div class="headss">
+
     <div class="containerss" style="width:1500px;">
+
        <ul class="menuss">
+
<div class="botpic">
            <li><a href="https://2017.igem.org/Team:FAFU-CHINA">Home</a></li>
+
     <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
            <li><a href="javascript:void(0)">Project</a>
+
      <div class="flipper">
                <ul class="submenuss">
+
        <div class="front">
                  <li><a href="https://2017.igem.org/Team:FAFU-CHINA/Description">Description</a></li>
+
          <!-- 前面内容 -->
                  <li><a href="https://2017.igem.org/Team:FAFU-CHINA/Experiments">Experiments</a></li><!--实验细节-->
+
          <img src="https://static.igem.org/mediawiki/2017/d/d9/T--FAFU-CHINA--014.png">
                  <li><a href="https://2017.igem.org/Team:FAFU-CHINA/Results">Results</a></li>
+
        </div>
                  <li><a href="https://2017.igem.org/Team:FAFU-CHINA/Model">Model</a></li><li><a href="https://2017.igem.org/Team:FAFU-CHINA/Parts">Parts</a></li>
+
        <div class="back">
              </ul>
+
          <!-- 背面内容 -->
            </li>
+
          <div style="font-family: -webkit-body;"><br/><br/>Phytoextraction is based on the use of hyperaccumulator plants, which can tolerate and accumulate high concentration of metals. Ideal hyperaccumulators require the characteristics of deep rooted, rapid growth and a high amount of biomass. In fact, many hyperaccumulators are slow in growth, produce low bow biomass and cannot grow in metal-stress soil. </div>
            <li><a href="https://2017.igem.org/Team:FAFU-CHINA/Human_Practices">Human Practices</a></li>
+
        </div>
            <li><a href="https://2017.igem.org/Team:FAFU-CHINA/Safety">Safety</a></li>
+
      </div>
            <li><a href="https://2017.igem.org/Team:FAFU-CHINA/notebook.html">Notebook</a></li>
+
    </div>
            <li class="menussj"><a href="https://2017.igem.org/Team:FAFU-CHINA/Team">Team</a>
+
            </li>
+
        </ul>
+
 
   </div>
 
   </div>
</div>
 
  
  
 +
  
 +
<div class="botpic">
 +
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
 +
<div class="flipper">
 +
<div class="front">
 +
<!-- 前面内容 -->
 +
<img src="https://static.igem.org/mediawiki/2017/0/0d/T--FAFU-CHINA--013.png">
 +
</div>
 +
<div class="back">
 +
<!-- 背面内容 -->
 +
<div><p style="font-size:16px;font-family: -webkit-body;">&nbsp;&nbsp;&nbsp;Phosphorus is the second important key element after nitrogen as a mineral nutrient in terms of quantitative plant equirement. However, plants can use only a small amount of this P since 75–90% of added P is precipitated by metal–cation complexes, and rapidly becomes fixed in soils. In this regard, phosphate solubilizing microbes are considered as the most efficient and eco-friendly means for phytoremediation of metalliferous soils.
 +
          Although, several bacterial strains have been identified as PSB their performance under in situ conditions is not reliable. Therefore,we genetically engineered our chassis B. megaterium as a new strategy to accelerate phytoremediation process.</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
  
  
 +
<div class="botpic">
 +
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
 +
      <div class="flipper">
 +
        <div class="front">
 +
         
 +
          <img src="https://static.igem.org/mediawiki/2017/b/bf/T--FAFU-CHINA--015.png">
 +
        </div>
 +
        <div class="back">
 +
         
 +
          <div><p style="font-family: -webkit-body;font-size: 18px" ><br/>In our project, the circuit uses a genetic ‘toggle switch’ architecture in which reciprocal repression by the LacI and TetR transcription factors form transcription states that are maintained by the circuit’s linked feedback loops. Inhibition of TetR expression by anhydrotetracy-cline (ATc), a compound that is not normally found in nature, is necessary for expression of LacI. Removal of ATc from the environment activates the expression of TetR, which leads to cell death.
 +
          </p></div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
  </div>
 +
  </div>
 +
  <div style="clear:both;"></div>
  
 
+
</div>
 
+
<br/><br/><br/><br/><br/>
 
+
<p style="text-align: center"><img src="https://static.igem.org/mediawiki/2017/8/8d/T--FAFU-CHINA--zuixinbanhezuotu.png" style="width:80%;border-radius:20px 20px 20px 20px"/></p>
 
+
  </div>
 
+
<br/><br/><br/>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
<table width="100%" border="0" cellspacing="0" cellpadding="0" background="https://static.igem.org/mediawiki/2017/7/70/T--FAFU-CHINA--slider-bg-2.jpg">
+
  <tr>
+
    <td height="667" width="40%"><img src="https://static.igem.org/mediawiki/2017/0/04/T--FAFU-CHINA---1.png" width="556" height="667"></td>
+
    <td><table width="100%" height="667" border="0" cellpadding="0" cellspacing="0">
+
      <tr>
+
        <td></td>
+
        <td width="470" height="200" align="center" valign="bottom"><img src="https://static.igem.org/mediawiki/2017/a/a7/T--FAFU-CHINA--11.png" width="450" height="72"></td>
+
        <td>&nbsp;</td>
+
      </tr>
+
      <tr>
+
        <td width="10%">&nbsp;</td>
+
        <td valign="top"><p></p>
+
          <p>&nbsp;&nbsp;&nbsp;&nbsp;Soil polluted by heavy metals represent an  important environmental problem due to the toxic effects of metals, their  accumulations throughout the food chain and the additional risk of groundwater  contamination.</p>
+
          <p>&nbsp;&nbsp;&nbsp;&nbsp;Metal remediation through common  physico-chemical techniques is expensive and unsuitable in the case of  extensive and unsuitable in the case of extensive areas. Therefore biotechnological  approaches have received a great deal of attention in recent years.  Bioremediaton, as a way of natural attenuation, adds phytoremediation, the use  of plants for reclamation and microbe(PSB) together as a strategy for either  enhancing(PSB-assisted Phytoextraction) or reducing the bioavailability of  metal contaminants in the soil, especially in the rhizosphere as well as  accelerating plant biomass production and growth.</p></td>
+
        <td>&nbsp;</td>
+
      </tr>
+
    </table></td>
+
  </tr>
+
</table>
+
 
+
 
+
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 02:49, 2 November 2017

Overview

Synergism of Phosphate-solubilizing microoranisms-plant

interactions for bioremediation of metalliferous soils

We hope to establish a sustainable, regulable and reusable project to solve the soil polluted by heavy metals. Phosphate-solubilizing bacteria have important functions. In our project, we used the mechanism of the alliance between microbe and plant, by manufacturing Bacillus megaterium, which is a kind of phosphate-solubilizing microorganism exists in the root system, forcing it enhance the plant remediation from two aspects, accumulating heavy metals and defend adversity stress. To achieve the goal of spatial specificity, we make most of the expression system which is regulated by root organic acid. We also used MBP (metal binding protein) and ACC deaminase to make accumulation of heavy metal in root system’s soil success. Finally, heavy metals will transfer to plant itself. A series of transformation we made in phosphate-solubilizing bacteria in our project will solve the weakness of hyper-accumulators, therefore, the remediation method will be put into use widely.
    


Soil polluted by heavy metals represent an important environmental problem due to the toxic effects of metals, their accumulations throughout the food chain and the additional risk of groundwater contamination. Continued worldwide industrialization has caused extensive environmental and human health problems. A wide variety of chemicals, e.g., heavy metals, pesticides, chlorinated solvents, etc., have been detected in different natural resources such as soil, water, and air. Among the pollutants, the heavy metals are of concern to human health due to their cytotoxicity, mutagenicity, and carcinogenicity.
    



Phytoextraction is based on the use of hyperaccumulator plants, which can tolerate and accumulate high concentration of metals. Ideal hyperaccumulators require the characteristics of deep rooted, rapid growth and a high amount of biomass. In fact, many hyperaccumulators are slow in growth, produce low bow biomass and cannot grow in metal-stress soil.

   Phosphorus is the second important key element after nitrogen as a mineral nutrient in terms of quantitative plant equirement. However, plants can use only a small amount of this P since 75–90% of added P is precipitated by metal–cation complexes, and rapidly becomes fixed in soils. In this regard, phosphate solubilizing microbes are considered as the most efficient and eco-friendly means for phytoremediation of metalliferous soils. Although, several bacterial strains have been identified as PSB their performance under in situ conditions is not reliable. Therefore,we genetically engineered our chassis B. megaterium as a new strategy to accelerate phytoremediation process.


In our project, the circuit uses a genetic ‘toggle switch’ architecture in which reciprocal repression by the LacI and TetR transcription factors form transcription states that are maintained by the circuit’s linked feedback loops. Inhibition of TetR expression by anhydrotetracy-cline (ATc), a compound that is not normally found in nature, is necessary for expression of LacI. Removal of ATc from the environment activates the expression of TetR, which leads to cell death.