Difference between revisions of "Team:FAFU-CHINA"

 
(260 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(../img/header.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 {
+
  body,html{
     display: none!important;
+
     padding:0;
}
+
     margin:0;
.set-flexi a {
+
  }
     margin: 5px;
+
  .dropdown ul li,.dropdown ul{
}
+
     background-color:gainsboro;
h1::after {
+
  }
    content: " ";
+
  .navbar .nav > li .dropdown-menu {
    border: solid 2px #2f9484;
+
     margin: 0;
     display: block;
+
  }
     width: 200px;
+
  .navbar .nav > li:hover .dropdown-menu {
     margin: 12px auto;
+
     display: block;
}
+
  }
 +
  .noma{
 +
     width:70%;
 +
     margin:0 auto;
 +
    padding:0;
 +
  }
 +
 
 +
 
 
</style>
 
</style>
   
+
<nav class="navbar navbar-default " style="margin-top:145px;z-index: 888">
<style>
+
  <div class="container-fluid noma">
.headss{
+
width:100%;
+
}
+
.containerss {
+
position:absolute;
+
    width: 80%;
+
margin-left:13%;
+
}
+
  
.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;
+
     <!-- Collect the nav links, forms, and other content for toggling -->
     border-top: 2px solid #303030;
+
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    min-width: 200px;
+
<ul class="nav navbar-nav">
+
<li class="active"><a href="#">Home</a></li>
}
+
.menuss > li {
+
    display: block;
+
    float: left;
+
    position: relative;
+
}
+
.menuss > li:first-child {
+
    border-radius: 20px 0 0;
+
}
+
  
.menussj{border-radius:0 20px 0 0;}
+
<li class="dropdown">
.menuss a {
+
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Project <span class="caret"></span></a>
     border-left: 3px solid rgba(0, 0, 0, 0);
+
  <ul class="dropdown-menu">
     color: #808080;
+
<li><a href="https://2017.igem.org/Team:FAFU-CHINA/Design">Design</a></li>
    display: block;
+
<li><a href="https://2017.igem.org/Team:FAFU-CHINA/Applied_Design">Background</a></li>
    font-family: 'Lucida Console';
+
<li><a href="https://2017.igem.org/Team:FAFU-CHINA/InterLab">Interlab</a></li>
    font-size: 18px;
+
<li class="chooseone"><a href="https://2017.igem.org/Team:FAFU-CHINA/Plant">Module 1: Phyto-route</a></li>
    line-height: 54px;
+
<li class="choosetwo"><a href="https://2017.igem.org/Team:FAFU-CHINA/Experiments#sss2">Module 2: Metal-trap</a></li>
    padding: 0 25px;
+
<li class="choosethree"><a href="https://2017.igem.org/Team:FAFU-CHINA/Experiments#sss3">Module 3: Safeguard</a></li>
    text-decoration: none;
+
  </ul>
    text-transform: uppercase;
+
</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 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 type="text/css">
}
+
     .liuchengtu{
.menuss li:hover > a {
+
    width: 60%
     border-radius: 5px 0 0 0;
+
     margin: 0 auto
     border-left: 3px solid #C4302B;
+
    height:auto;
     color: #C4302B;
+
    }
}
+
    .liuchengtu1{
 +
     width: 50%;
 +
     margin-top: 100px
 +
     }
 +
    </style>
 +
<div align="center" class="liuchengtu">
 +
  <img class="liuchengtu1" src="https://static.igem.org/mediawiki/2017/e/e0/T--FAFU-CHINA--009.png">
 +
</div>
  
.submenuss {
 
    left: 0;
 
    max-height: 0;
 
    position: absolute;
 
    top: 100%;
 
    z-index: 0;
 
  
    -webkit-perspective: 400px;
 
    -moz-perspective: 400px;
 
    -ms-perspective: 400px;
 
    -o-perspective: 400px;
 
    perspective: 400px;
 
}
 
.submenuss li {
 
    opacity: 0;
 
  
    -webkit-transform: rotateY(90deg);
+
 
    -moz-transform: rotateY(90deg);
+
<style>
    -ms-transform: rotateY(90deg);
+
.secondbg{
     -o-transform: rotateY(90deg);
+
background-color: #D0E090;
    transform: rotateY(90deg);
+
margin:0 auto;
 +
padding:0;
 +
width:90%;
 +
     display:inline;
 +
}
 +
/* entire container, keeps perspective */
 +
.flip-container {
 +
perspective: 1000;
 +
}
 +
/* flip the pane when hovered */
 +
.flip-container:hover .flipper {
 +
transform: rotateY(180deg);
 +
}
  
    -webkit-transition: opacity .4s, -webkit-transform .5s;
+
.flip-container, .front,.back{
    -moz-transition: opacity .4s, -moz-transform .5s;
+
width: 320px;
    -ms-transition: opacity .4s, -ms-transform .5s;
+
height: 490px;
    -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: 999;
+
}
+
.menuss > li:hover .submenuss li, .menuss > li:focus .submenuss li {
+
    opacity: 1;
+
  
    -webkit-transform: none;
+
/* flip speed goes here */
    -moz-transform: none;
+
.flipper {
    -ms-transform: none;
+
transition: 0.4s;
    -o-transform: none;
+
transform-style: preserve-3d;
    transform: none;
+
}
+
  
.menuss li:hover .submenuss li:nth-child(1) {
+
position: relative;
    -webkit-transition-delay: 0s;
+
    -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) {
+
}
    -webkit-transition-delay: 350ms;
+
    -moz-transition-delay: 350ms;
+
    -ms-transition-delay: 350ms;
+
    -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>
+
<div class="headss">
+
    <div class="containerss" style="width:1500px;">
+
        <ul class="menuss">
+
            <li><a href="https://2017.igem.org/Team:FAFU-CHINA">Home</a></li>
+
            <li><a href="javascript:void(0)">Project</a>
+
                <ul class="submenuss">
+
                  <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><!--实验细节-->
+
                  <li><a href="https://2017.igem.org/Team:FAFU-CHINA/Results">Results</a></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/Parts">Parts</a></li>
+
              </ul>
+
            </li>
+
            <li><a href="https://2017.igem.org/Team:FAFU-CHINA/Human_Practices">Human Practices</a></li>
+
            <li><a href="https://2017.igem.org/Team:FAFU-CHINA/Safety">Safety</a></li>
+
            <li><a href="https://2017.igem.org/Team:FAFU-CHINA/notebook.html">Notebook</a></li>
+
            <li class="menussj"><a href="https://2017.igem.org/Team:FAFU-CHINA/Team">Team</a>
+
            </li>
+
        </ul>
+
  </div>
+
</div>
+
  
 +
/* hide back of pane during swap */
 +
.front, .back {
 +
-webkit-backface-visibility: hidden;
 +
    -moz-backface-visibility: hidden;
  
<div class="home-sec" id="home">
+
-ms-backface-visibility: hidden;
<div class="overlay">
+
-o-backface-visibility: hidden;
                              <div class="container">
+
<div class="row text-center ">
+
  
<div class="col-lg-12  col-md-12 col-sm-12">
+
position: absolute;
 +
top: 0;
 +
left: 0;
 +
    border-radius:30px
 +
}
  
      <ul class="slides move-me">
+
/* front pane, placed above back */
<!-- Slider 01 -->
+
.front {
<li style="list-style-type:none;">
+
z-index: 1;
<h3>project</h3>
+
}
<h1>project</h1>
+
<a href="demo3.html" class="btn btn-info btn-lg">
+
课程介绍
+
</a>
+
<a href="demo1.html" class="btn btn-success btn-lg">
+
团队介绍
+
</a>
+
</li>
+
<!-- End Slider 01 -->
+
  
                                                               
+
/* back, initially hidden pane */
+
.back {
</ul>
+
transform: rotateY(180deg);
 +
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;
  
 +
}
 +
</style>
 +
<div>
 +
<div class="secondbg">
 +
<div class="fgx2"></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/3/32/T--FAFU-CHINA--012.png">
 +
</div>
 +
<div class="back">
 +
<!-- 背面内容 -->
 +
<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>
 +
</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/d/d9/T--FAFU-CHINA--014.png">
 +
        </div>
 +
        <div class="back">
 +
          <!-- 背面内容 -->
 +
          <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>
 +
        </div>
 +
      </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/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>
 
</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/>
 
</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.