Difference between revisions of "Team:FAFU-CHINA"

Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
−
    <meta charset="utf-8">
+
    <meta charset="utf-8">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
Line 8: Line 8:
 
<link href="https://2016.igem.org/Template:Tec-Monterrey/css/styleNote?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>
 
</head>
−
<script type="text/javascript">
 
−
window.onload=function bannerSlide() {
 
−
    var i = 0;
 
−
    var banner = new Array//将图片创建为一个数组
 
−
    banner[0] = document.getElementById("banner1");
 
−
    banner[1] = document.getElementById("banner2");
 
−
    banner[2] = document.getElementById("banner3");
 
−
    sli = setInterval(slide, 5000); //轮播间隔时间
 
−
    function slide() {
 
−
        if (i == banner.length - 1) {
 
−
            banner[0].style.display = "block";
 
−
            banner[0].style.opacity = "1";
 
−
            banner[i].style.opacity = "0";
 
−
            setTimeout(function() {
 
−
                banner[i].style.display = "none";
 
−
                banner[i].style.zIndex = "1";
 
−
                banner[0].style.zIndex = "5";
 
−
                i = 0;
 
−
            }, 500)
 
−
        } else {
 
−
            banner[i + 1].style.display = "block";
 
−
            banner[i + 1].style.opacity = "1";
 
−
            banner[i].style.opacity = "0";
 
−
            setTimeout(function() {
 
−
                banner[i + 1].style.zIndex = "5";
 
−
                banner[i].style.display = "none";
 
−
                banner[i].style.zIndex = "1";
 
−
                i++;
 
−
            }, 500)
 
−
        }
 
−
    }
 
−
}
 
−
</script>
 
 
<style>
 
<style>
 
body{
 
body{
 
opacity: 0.9;
 
opacity: 0.9;
−
         background-color: #ce9c45;
+
         background-color: #262222;
 
 
 
}
 
}
−
/*注意 第一张图片z-index值是5，后面的图片值为1*/
 
−
*{margin: 0;padding: 0;}
 
−
.banner {
 
−
    width: 67%;
 
−
    height: 500px;
 
−
    position: relative;
 
−
    top: 50px;
 
−
    left: 17%;
 
−
}
 
−
.banner_slide_1 {
 
−
    position: absolute;
 
−
    top: 0;
 
−
    left: 0;
 
−
    width: 100%;
 
−
    display: block;
 
−
    transition: opacity 0.5s;
 
−
    opacity: 0;
 
−
    z-index: 5;
 
−
}
 
−
.banner_slide_2 {
 
−
    position: absolute;
 
−
    top: 0;
 
−
    left: 0;
 
−
    width: 100%;
 
−
    display: none;
 
−
    transition: opacity 0.5s;
 
−
    opacity: 0;
 
−
    z-index: 1;
 
−
}
 
−
 
−
.banner_slide_3 {
 
−
    position: absolute;
 
−
    top: 0;
 
−
    left: 0;
 
−
    width: 100%;
 
−
    display: none;
 
−
    transition: opacity 0.5s;
 
−
    opacity: 0;
 
−
    z-index: 1;
 
−
}
 
 
#bodic{
 
#bodic{
 
width: 100%;
 
width: 100%;
Line 101: Line 28:
 
     padding: 0;
 
     padding: 0;
 
     text-align: right;
 
     text-align: right;
 +
}
 +
#bodic div:hover{
 +
        width:10%;
 +
    background-color:rgba(102,102,102,0.5);
 +
    border-left:#C00 3px solid;
 +
    float:left;
 +
    font-size:20px;
 +
    color:#FFF;
 +
    padding:2px;
 +
    text-align:center;
 
}
 
}
 
#bodic div:first-child{
 
#bodic div:first-child{
Line 122: Line 59:
 
}
 
}
 
.introducetext{
 
.introducetext{
−
    margin-top: 66px;
+
      margin-top: 8px;
−
     margin-left: 34%;
+
     margin-left: 44%;
 
     font-style: italic;
 
     font-style: italic;
 +
    color: lavender;
 +
}
 +
.introducetext2{
 +
    width: 98%;
 +
    padding: 20px;
 +
    margin: 12px;
 +
    background-color: #aaa;
 +
    border: 15px solid rebeccapurple;
 +
    border-style: dotted;
 +
    margin-top: 30px;
 +
}
 +
.imagestyle1{
 +
    width: 396px;
 +
    height: 400px;
 +
    margin-left: 28%;
 +
}
 +
.lastpart{
 +
    height: 300px;
 +
}
 +
 +
</style>
 +
<style type="text/css">
 +
.eyes{
 +
perspective: 1000px;
 +
}
 +
.box{
 +
/*设置3D效果*/
 +
transform-style: preserve-3d;
 +
/*盒子的大小*/
 +
width: 200px;
 +
height: 200px;
 +
background: red;
 +
/*设置盒子的位置，便于观察*/
 +
margin: 90px auto;
 +
/*复合方式设置动画 三者分别为：动画名 执行一次时间 执行方式*/
 +
animation: zhuan 20s ease;
 +
/*令动画无限执行下去*/
 +
animation-iteration-count: infinite;
 +
animation-timing-function: linear;
 +
}
 +
.box div{
 +
width: 200px;
 +
height: 200px;
 +
opacity: 0.9;
 +
/*设置过渡*/
 +
transition: all 15s ease 0s;
 +
position: absolute;
 +
}
 +
/*调整位置，制作成一个六边形*/
 +
.box .div1{
 +
    background: blue;
 +
    background-image: url(https://static.igem.org/mediawiki/2017/8/84/T-FAFU-CHINA-002.png);
 +
    background-position: center;
 +
    background-size: 200px;
 +
    transform: translateZ(100px);
 +
}
 +
.box .div2{
 +
    background: green;
 +
    background-image: url(https://static.igem.org/mediawiki/2017/5/5b/T--FAFU-CHINA--001.png);
 +
    background-position: center;
 +
    background-size: 200px;
 +
    transform: translateZ(-100px);
 +
}
 +
.box .div3{
 +
    background: yellow;
 +
    background-image: url(https://static.igem.org/mediawiki/2017/7/74/233.png);
 +
    background-position: center;
 +
    background-size: 200px;
 +
    transform: rotateX(90deg) translateZ(100px);
 +
}
 +
.box .div4{
 +
background: green;
 +
transform: rotateX(270deg) translateZ(100px);
 +
}
 +
.box .div5{
 +
background: gray;
 +
transform: rotateY(-90deg) translateZ(100px);
 +
}
 +
.box .div6{
 +
background: brown;
 +
transform: rotateY(90deg) translateZ(100px);
 +
}
 +
/*添加3D旋转效果 让其绕X、Y轴同时旋转90度*/
 +
@keyframes zhuan{
 +
from{
 +
transform: rotateX(0deg) rotateY(0deg);
 +
}
 +
to{
 +
transform: rotateX(360deg) rotateY(360deg);
 +
}
 +
}
 +
/*给正方体添加一个hover效果*/
 +
.box:hover .div1{
 +
transform: translateZ(200px);
 +
}
 +
.box:hover .div2{
 +
transform: translateZ(-200px);
 +
}
 +
.box:hover .div3{
 +
transform: rotateX(90deg) translateZ(200px);
 +
}
 +
.box:hover .div4{
 +
transform: rotateX(270deg) translateZ(200px);
 +
}
 +
.box:hover .div5{
 +
transform: rotateY(-90deg) translateZ(200px);
 +
}
 +
.box:hover .div6{
 +
transform: rotateY(90deg) translateZ(200px)
 +
}
 +
.square{
 +
    width: 615px;
 +
    height: 492px;
 +
    border: 39px solid #8a6d3b;
 +
    margin-top: 64px;
 +
    background-color: #41beb8;
 +
    margin-left: 28%;
 +
    border-style: groove;
 +
}
 +
.logstyle{
 +
width: 200px;
 +
    height: 200px;
 +
    float: left;
 +
}
 +
.logimg{
 +
    height: 155px;
 +
    width: 155px;
 +
}
 +
.logtext{
 +
        font-size: 15px;
 +
    color: red;
 +
    margin-left: 2px;
 +
    padding: 1px;
 
}
 
}
 
</style>
 
</style>
Line 145: Line 215:
 
</div>
 
</div>
 
</div>
 
</div>
−
<!--图片轮播-->
+
    <!--log图片位置-->
−
<div class="banner">
+
    <div class="logstyle">
−
         <div class="banner_slide_1" id="banner1">
+
         <img class="logimg" src="https://static.igem.org/mediawiki/2017/f/fc/QQ%E5%9B%BE%E7%89%8720170628104754.png">
−
        <img class="imagestyle" src="https://static.igem.org/mediawiki/2017/7/74/233.png" alt="" />
+
        <span class="logtext">Welcome to FAFU-CHINA</span>
−
        </div>
+
    </div>
−
        <div class="banner_slide_2" id="banner2">
+
    <!--图片轮播-->
−
        <img class="imagestyle" src="https://static.igem.org/mediawiki/2017/8/84/T-FAFU-CHINA-002.png" />
+
    <div class="square">
−
        </div>
+
    <div class="eyes">
−
        <div class="banner_slide_3" id="banner3">
+
    <div class="box">
−
        <img class="imagestyle" src="https://static.igem.org/mediawiki/2017/5/5b/T--FAFU-CHINA--001.png" />
+
    <div class="div1"></div>
−
        </div>
+
    <div class="div2"></div>
−
  </div>
+
    <div class="div3"></div>
 +
    <div class="div4"></div>
 +
    <div class="div5"></div>
 +
    <div class="div6"></div>
 +
    </div>
 +
    </div>
 +
    </div>
 
   <!--其他介绍-->
 
   <!--其他介绍-->
 
   <div class="introducetext">
 
   <div class="introducetext">
−
<h2>
+
            <h2>
−
Welcome to FAFU-CHINA
+
          Overview
−
</h2>
+
            </h2>
−
  </div>
+
    </div>
 +
    <div class="introducetext2">
 +
        <div>
 +
            <span class="span1"> <p>&nbsp;&nbsp;&nbsp;&nbsp;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;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.<br/>&nbsp;&nbsp;&nbsp;&nbsp;Metal remediation through common physico-chemical techniques is expensive 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 uptake(PSB-assisted Phytoextraction) or reducing the bioavailability of metal contaminants(PSB-immobilized Phyto-promotion mechanism) in the soil, especially in the rhizosphere to accelerate plant biomass production and root enlongation.</p></span>
 +
            <img class="imagestyle1" src="https://static.igem.org/mediawiki/2017/0/04/T--FAFU-CHINA---1.png"  alt="" />
 +
            <span class="span2">
 +
                <p>&nbsp;&nbsp;&nbsp;&nbsp;In this module, our team designed a pathway that the Pb ions will bind to PbR protein when activated ions are in the soil environment. It induces downstream gene expression, and results in the tetR protein inhibition promoter PltetO1 expression. At the same time, the strong promoter P43 of B.megaterium stimulated the expression of MBP in the downstream lead-producing peptide. It makes the chelating peptide of Pb metal, which reduced the total amount of heavy metals in the soil to be harmless level. When there is no Pb ions presented in the environment, the expression of tetR was blocked and the inhibition of PltetO1 was released. It results in the lacI repressor binding to the lacO sequence, and leads to blocking the expression of MBP. This mechanism is effective in preventing the infinite expression of MBP against the B. megaterium itself.</p>
 +
            </span>
 +
        </div>
 +
    </div>
 +
    <div class="lastpart">
 +
 
 +
    </div>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 08:22, 5 October 2017

Welcome to FAFU-CHINA

Overview

    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.
    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.
    Metal remediation through common physico-chemical techniques is expensive 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 uptake(PSB-assisted Phytoextraction) or reducing the bioavailability of metal contaminants(PSB-immobilized Phyto-promotion mechanism) in the soil, especially in the rhizosphere to accelerate plant biomass production and root enlongation.

    In this module, our team designed a pathway that the Pb ions will bind to PbR protein when activated ions are in the soil environment. It induces downstream gene expression, and results in the tetR protein inhibition promoter PltetO1 expression. At the same time, the strong promoter P43 of B.megaterium stimulated the expression of MBP in the downstream lead-producing peptide. It makes the chelating peptide of Pb metal, which reduced the total amount of heavy metals in the soil to be harmless level. When there is no Pb ions presented in the environment, the expression of tetR was blocked and the inhibition of PltetO1 was released. It results in the lacI repressor binding to the lacO sequence, and leads to blocking the expression of MBP. This mechanism is effective in preventing the infinite expression of MBP against the B. megaterium itself.