Difference between revisions of "Team:HUST-China"

Line 147: Line 147:
 
     }
 
     }
  
−
/*################################################################################################*/
+
/*#################################main.css#############################################*/
 
#tab_header{width:100%;height:100px;background-color:#600808;}
 
#tab_header{width:100%;height:100px;background-color:#600808;}
 
#header_image1{width:auto;height:100px;float:left;margin-left:100px;}
 
#header_image1{width:auto;height:100px;float:left;margin-left:100px;}
Line 153: Line 153:
 
#header_image3{width:auto;height:100px;float:right;margin-right:100px;}
 
#header_image3{width:auto;height:100px;float:right;margin-right:100px;}
  
−
/*################################################################################################*/
+
#tab_menu{width:100%;height:40px;background-color:#600808; margin-top:-440px;}
 +
#tab_menu ul{margin:0 auto; width:930px;}
 +
#tab_menu ul li{
 +
color:#FFF;
 +
font-size:20px;
 +
line-height:40px; text-align:center;
 +
padding-left:20px; padding-right:20px; float:left;
 +
width:auto; height:40px; background-color:#600808;
 +
position:relative;
 +
}
 +
#tab_menu ul li a{color:#FFF;text-decoration:none}
 +
#tab_menu ul li:hover{ opacity:0.8;/*主浏览器*/filter:alpha(opacity:0.8);/*for IE*/ -moz-opacity:0.8;/*针对火狐*/cursor:pointer;}
 +
#tab_menu ul li ul{position:absolute;left:0px;top:40px;}
 +
#tab_menu ul li ul li{display:none;width:160px;height:24px;line-height:24px;
 +
float:none;background-color:#600808;position:relative;font-size:16px;}
 +
#tab_menu ul li:hover ul li{ display:block;}
 +
#tab_menu ul li ul li:hover{ opacity:0.8;/*主浏览器*/filter:alpha(opacity:0.8);/*for IE*/ -moz-opacity:0.8;/*针对火狐*/cursor:pointer;}
 +
#tab_menu ul li ul li a{color:#FFF;text-decoration:none;}
 +
 
 +
#tab_image{width:100%;height:400px;background-color:none;overflow:hidden;margin-top:40px;}
 +
.tab-item a{color:#FFF;text-decoration:none}
 +
 +
#tab_body{width:900px;min-height:500px;background-color:#f9f9f9;margin:0 auto; margin-top:400px;}
 +
.body_header1{width:100%;height:60px;font-size:36px;line-height:60px;background-color:#006;text-align:center;color:#FFF}
 +
.body_word1{width:880px;height:60px;margin:0 auto;background-color:#f9f9f9;padding:10px;font-size:18px;color:#000; font-family:Verdana, Geneva, sans-serif;}
 +
.body_image1{width:900px;height:600px;margin:0 auto; background-image:url(../frame/555c3ff149391.jpg); overflow:hidden;}
 +
.body_header2{width:500px;padding-left:20px;padding-right:20px;height:40px;font-size:24px;line-height:40px;
 +
            text-align:center;color:#003; border-bottom:#006 5px solid;margin:0 auto;}
 +
.body_word2{width:880px;height:220px;margin:0 auto;background-color:#f9f9f9;padding:10px;font-size:18px;color:#000; font-family:Verdana, Geneva, sans-serif;}
 +
 
 +
#tab_foot{width:100%;height:200px;background-color:#600808; text-align:center;line-height:50px;color:#FFF; font-size:24p; padding-top:40px;}
 +
/*#########################################banner.css#######################################################*/
 +
#divSmallBox{overflow:hidden;*display:inline;*zoom:1;width:10px;height:10px;margin:0 5px;border-radius:10px;background:#ffffff;}
 +
#playBox{ width:100%; height:400px; margin:0px auto; background:#333; position:relative; overflow:hidden;}
 +
#playBox .oUlplay { width:99999px; position:absolute; left:0px; top:0;}
 +
#playBox .oUlplay li{ float:left;}
 +
#playBox .pre{ cursor:pointer; width:45px; height:45px; background:url(../images/l.png) no-repeat; position:absolute; top:190px; left:10px; z-index:10;}
 +
#playBox .next{ cursor:pointer; width:45px; height:45px; background:url(../images/r.png) no-repeat; position:absolute; top:190px; right:10px; z-index:10;}
 +
#playBox .smalltitle {width:100%; height:10px; position:absolute; bottom:15px; z-index:10;}
 +
#playBox .smalltitle ul{ width:120px; margin:0 auto;}
 +
#playBox .smalltitle ul li{ width:10px; height:10px; margin:0 5px; border-radius:10px; background:#ffffff; float:left; overflow:hidden;*display:inline;*zoom:1;}
 +
#playBox .smalltitle .thistitle{ background:#69aaec;}
 +
/*###########################################vedio_style.css#########################################################*/
 +
.jp-video {
 +
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
 +
position:relative;
 +
 
 +
-webkit-box-shadow:0px 0px 20px rgba(0,0,0,.3);
 +
-moz-box-shadow:0px 0px 20px rgba(0,0,0,.3);
 +
box-shadow:0px 0px 20px rgba(0,0,0,.3);
 +
background:#000;
 +
}
 +
.jp-video-360p {
 +
width:570px;
 +
margin: 20px auto;
 +
}
 +
.jp-video-full {
 +
width:480px;
 +
height:270px;
 +
position:static !important;
 +
position:relative;
 +
}
 +
.jp-video-full .jp-jplayer {
 +
top: 0;
 +
left: 0;
 +
position: fixed !important; position: relative; /* Rules for IE6 (full-screen) */
 +
overflow: hidden;
 +
z-index:1000;
 +
}
 +
 
 +
.jp-video-full .jp-gui {
 +
position: fixed !important; position: static; /* Rules for IE6 (full-screen) */
 +
top: 0;
 +
left: 0;
 +
width:100%;
 +
height:100%;
 +
z-index:1000;
 +
}
 +
 
 +
.jp-video-full .jp-interface {
 +
position: absolute !important; position: relative; /* Rules for IE6 (full-screen) */
 +
bottom: 0;
 +
left: 0;
 +
z-index:1000;
 +
}
 +
 
 +
 
 +
.jp-interface {
 +
position: relative;
 +
width:100%;
 +
height: 35px;
 +
 
 +
background-image: -webkit-linear-gradient(top, rgb(242, 242, 242), rgb(209, 209, 209));
 +
background-image: -moz-linear-gradient(top, rgb(242, 242, 242), rgb(209, 209, 209));
 +
background-image: -o-linear-gradient(top, rgb(242, 242, 242), rgb(209, 209, 209));
 +
background-image: -ms-linear-gradient(top, rgb(242, 242, 242), rgb(209, 209, 209));
 +
background-image: linear-gradient(top, rgb(242, 242, 242), rgb(209, 209, 209));
 +
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f2f2f2', EndColorStr='#d1d1d1');
 +
 
 +
-webkit-box-shadow:
 +
inset 0px 1px 0px #f7f7f7,
 +
inset 0px -1px 0px #e2e2e2;
 +
-moz-box-shadow:
 +
inset 0px 1px 0px #f7f7f7,
 +
inset 0px -1px 0px #e2e2e2;
 +
box-shadow:
 +
inset 0px 1px 0px #f7f7f7,
 +
inset 0px -1px 0px #e2e2e2;
 +
}
 +
 
 +
div.jp-controls-holder {
 +
clear: both;
 +
width:570px;
 +
margin: 0 auto;
 +
 +
position: relative;
 +
overflow:hidden;
 +
}
 +
 
 +
a.jp-play,
 +
a.jp-pause {
 +
width:40px;
 +
height:35px;
 +
float:left;
 +
text-indent:-9999px;
 +
outline:none;
 +
}
 +
 
 +
a.jp-play {
 +
background: url(../images/sprite.png) 0 0 no-repeat;
 +
}
 +
 
 +
a.jp-pause {
 +
background: url(../images/sprite.png) -40px 0 no-repeat;
 +
display: none;
 +
}
 +
 
 +
#separator {
 +
background-image:url(../images/separator.png);
 +
background-repeat:no-repeat;
 +
width: 2px;
 +
height: 35px;
 +
float:left;
 +
margin-top: 7px;
 +
margin-right: 10px;
 +
}
 +
 
 +
.jp-progress {
 +
background: #706d6d;
 +
 
 +
-webkit-border-radius:5px;
 +
-moz-border-radius:5px;
 +
border-radius:5px;
 +
 
 +
-webkit-box-shadow:
 +
inset 0px 1px 4px rgba(0,0,0,.4),
 +
0px 1px 0px rgba(255,255,255,.4);
 +
-moz-box-shadow:
 +
inset 0px 1px 4px rgba(0,0,0,.4),
 +
0px 1px 0px rgba(255,255,255,.4);
 +
box-shadow:
 +
inset 0px 1px 4px rgba(0,0,0,.4),
 +
0px 1px 0px rgba(255,255,255,.4);
 +
 
 +
width:280px;
 +
height:10px;
 +
float:left;
 +
margin-top: 13px;
 +
}
 +
 
 +
.jp-seek-bar {
 +
width:0px;
 +
height:100%;
 +
cursor: pointer;
 +
}
 +
 
 +
.jp-seeking-bg {
 +
background:#575555;
 +
-webkit-border-radius:5px;
 +
-moz-border-radius:5px;
 +
border-radius:5px;
 +
}
 +
 
 +
.jp-play-bar {
 +
background: url(../images/play-bar.png) left repeat-x;
 +
width:0px;
 +
height:10px;
 +
position:relative;
 +
z-index: 9999;
 +
 +
-webkit-border-radius:5px;
 +
-moz-border-radius:5px;
 +
border-radius:5px;
 +
}
 +
 
 +
.jp-play-bar span {
 +
position:absolute;
 +
top: -3px;
 +
right: -12px;
 +
 
 +
background:url(../images/handle.png) no-repeat center;
 +
width: 16px;
 +
height: 17px;
 +
}
 +
 
 +
.jp-current-time,
 +
.jp-duration {
 +
font-size:11px;
 +
font-family:Arial;
 +
color:#444444;
 +
margin-top: 12px;
 +
float:left;
 +
}
 +
.jp-current-time {
 +
float: left;
 +
display:inline;
 +
}
 +
.jp-duration {
 +
float: left;
 +
display:inline;
 +
text-align: right;
 +
}
 +
.jp-video .jp-current-time {
 +
margin-left:10px;
 +
}
 +
.jp-video .jp-duration {
 +
margin-right:10px;
 +
}
 +
.time-sep {
 +
float:left;
 +
margin: 13px 3px 0 3px;
 +
 
 +
font-size:11px;
 +
font-family:Arial;
 +
color:#444444;
 +
}
 +
 
 +
 
 +
.jp-video a.jp-mute,
 +
.jp-video a.jp-unmute {
 +
text-indent:-9999px;
 +
float:left;
 +
 +
height: 35px;
 +
outline:none;
 +
}
 +
 
 +
.jp-mute {
 +
float:left;
 +
background: url(../images/sprite.png) -80px 0 no-repeat;
 +
margin-top: 1px;
 +
margin-left: -10px;
 +
width: 35px;
 +
}
 +
 
 +
a.jp-unmute {
 +
background: url(../images/sprite.png) -115px 0 no-repeat;
 +
margin-top: 1px;
 +
margin-left: -13px;
 +
display: none;
 +
width: 38px;
 +
}
 +
 
 +
.jp-volume-bar {
 +
float:left;
 +
margin-top: 13px;
 +
margin-right: 10px;
 +
overflow:hidden;
 +
width:70px;
 +
height:10px;
 +
cursor: pointer;
 +
 
 +
background: #706d6d;
 +
 
 +
-webkit-border-radius:5px;
 +
-moz-border-radius:5px;
 +
border-radius:5px;
 +
 
 +
-webkit-box-shadow:
 +
inset 0px 1px 4px rgba(0,0,0,.4),
 +
0px 1px 0px rgba(255,255,255,.4);
 +
-moz-box-shadow:
 +
inset 0px 1px 4px rgba(0,0,0,.4),
 +
0px 1px 0px rgba(255,255,255,.4);
 +
box-shadow:
 +
inset 0px 1px 4px rgba(0,0,0,.4),
 +
0px 1px 0px rgba(255,255,255,.4);
 +
}
 +
 
 +
.jp-volume-bar-value {
 +
background: rgba(112,109,109.01);
 +
width:0px;
 +
height:10px;
 +
position: relative;
 +
}
 +
 
 +
.jp-volume-bar-value span {
 +
position:absolute;
 +
top: 0px;
 +
right: 0px;
 +
 
 +
background:url(../images/volume.png) no-repeat center;
 +
width: 11px;
 +
height: 10px;
 +
}
 +
 
 +
.jp-full-screen {
 +
background: url(../images/sprite.png) -150px 0 no-repeat;
 +
float:left;
 +
width: 40px;
 +
height: 35px;
 +
text-indent:-9999px;
 +
margin-left: -15px;
 +
outline:none;
 +
}
 +
 
 +
.jp-restore-screen {
 +
background: url(../images/sprite.png) -150px 0 no-repeat;
 +
float:left;
 +
width: 40px;
 +
height: 35px;
 +
text-indent:-9999px;
 +
margin-left: -15px;
 +
outline:none;
 +
 +
}
 
     </style>
 
     </style>
 
</head>
 
</head>
Line 160: Line 485:
 
<body>
 
<body>
 
  <div class="container-fluid how-work">
 
  <div class="container-fluid how-work">
 +
<!--#################################################################################################-->
 
         <div id="tab_header" style>
 
         <div id="tab_header" style>
−
                <img src="./Team_HUST-China - 2016.igem.org_files/T--HUST-China--banner-image.png" alt="" class="img-responsive center-block" style="width: 80%;">
 
 
             <div id="header_image1"><img src="./Team_HUST-China - 2016.igem.org_files/T--HUST-China--banner-image.png" alt="" /></div>
 
             <div id="header_image1"><img src="./Team_HUST-China - 2016.igem.org_files/T--HUST-China--banner-image.png" alt="" /></div>
 
                 <div id="header_image2"><img src="logo/T--HUST-China--logo.gif"/></div>
 
                 <div id="header_image2"><img src="logo/T--HUST-China--logo.gif"/></div>
 
                 <div id="header_image3"><img src="logo/HQ_menu_logo.png"></div>     
 
                 <div id="header_image3"><img src="logo/HQ_menu_logo.png"></div>     
 
         </div>
 
         </div>
−
<img src="./Team_HUST-China - 2016.igem.org_files/T--HUST-China--banner-image.png" alt="" class="img-responsive center-block" style="width: 80%;">
+
 
 +
        <div id="tab_image">
 +
        <div id="playBox">
 +
            <div class="pre"></div>
 +
            <div class="next"></div>
 +
            <div class="smalltitle">
 +
              <ul>
 +
                <li class="thistitle"></li>
 +
                <li></li>
 +
                <li></li>
 +
                <li></li>
 +
                <li></li>
 +
                <li></li>
 +
              </ul>
 +
            </div>
 +
            <ul class="oUlplay">
 +
              <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="images/1.png"</a></li>
 +
              <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="images/2.png"</a></li>
 +
              <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="images/3.png"</a></li>
 +
              <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="images/4.png"</a></li>
 +
              <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="images/5.png"</a></li>
 +
              <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="images/6.png"</a></li>
 +
            </ul>
 +
        </div>
 +
        </div>
 +
        <div id="tab_menu" >
 +
            <ul>
 +
                <li><a href="http://www.16css.com">HOME</a></li>
 +
                <li>PROJECT
 +
                    <ul>
 +
                        <li><a href="http://www.16css.com">Background</a></li>
 +
                        <li><a href="http://www.16css.com">Description</a></li>
 +
                        <li><a href="http://www.16css.com">Proof Of Concept</a></li>
 +
                        <li><a href="http://www.16css.com">Application</a></li>
 +
                        <li><a href="http://www.16css.com">Previous Improvement</a></li>
 +
                        <li><a href="http://www.16css.com">Safety</a></li>
 +
                    </ul>
 +
                </li>
 +
                <li>WETLAB
 +
                    <ul>
 +
                        <li><a href="http://www.16css.com">Experiments</a></li>
 +
                        <li><a href="http://www.16css.com">Results</a></li>
 +
                        <li><a href="http://www.16css.com">Interlab</a></li>
 +
                        <li><a href="http://www.16css.com">Notebook</a></li>
 +
                        <li><a href="http://www.16css.com">Protocols</a></li>
 +
                    </ul>
 +
                </li>
 +
                <li>MODELING
 +
                    <ul>
 +
                        <li><a href="http://www.16css.com">Overview</a></li>
 +
                        <li><a href="http://www.16css.com">Prokaryotic Circuit</a></li>
 +
                        <li><a href="http://www.16css.com">Eukaryotic Circuit</a></li>
 +
                        <li><a href="http://www.16css.com">Application Circuit</a></li>
 +
                    </ul>
 +
                </li>
 +
                <li>PARTS
 +
                    <ul>
 +
                        <li><a href="http://www.16css.com">Summary</a></li>
 +
                        <li><a href="http://www.16css.com">Basic Part</a></li>
 +
                        <li><a href="http://www.16css.com">Composite Part</a></li>
 +
                        <li><a href="http://www.16css.com">Part Collection</a></li>
 +
                       
 +
                    </ul>
 +
                </li>
 +
                <li>HUMAN PRACTICES
 +
                    <ul>
 +
                        <li><a href="http://www.16css.com">Integrated HP</a></li>
 +
                        <li><a href="http://www.16css.com">Collaborations</a></li>
 +
                    </ul>
 +
                </li>
 +
                <li>TEAM
 +
                    <ul>
 +
                        <li><a href="http://www.16css.com">Team Roster</a></li>
 +
                        <li><a href="http://www.16css.com">Attributions</a></li>
 +
                    </ul>
 +
                </li>
 +
            </ul>
 +
        </div>
 +
 
 +
<!--##################################################################################################-->
 
         <div class="container">
 
         <div class="container">
 
             <div class="work-header">
 
             <div class="work-header">

Revision as of 08:27, 1 September 2017

Team:HUST-China

WHAT WE ARE WORKING ON ?

This year iGEM HUST-China focus on the enrichment of rare earth elements. Through the engineering bacteria we enrich rare earth element and recover wastewater. Our final goal is to build a highly intelligent & efficient engineering bacteria with logical combination of artificial peptides.

WHY WE FOCUS ON THIS ?

The rare-earth elements (REEs) are becoming increasingly important due to their essential role in permanent magnets, catalysts, rechargeable batteries and other high tech product[1]. However, mining, refining, and recycling of rare earths have serious environmental consequences if not properly managed. For example, toxic acids are required during the refining process and they are particularly prone to be released into the general water supply[2]. So, we need an effective way to improve the existing production methods, that’s why we turn to synthetic biology.

HOW WE ACHIEVE OUR GOAL ?

Our system consists the sensing part and the capture part which base on artificial peptides.We combine lanthanide binding peptide and surface display system to capture rare earth ions. The sensing part is a transformation of membrane protein which can sense the ferric ion. We also use the design from 2015 iGEM HUST-China to help us regain our bacterial.

1.Binnemans K, Jones P T, Blanpain B, et al. Recycling of rare earths: a critical review[J]. Journal of Cleaner Production, 2013, 51(14):1–22.

2.Bradsher, Keith (October 29, 2010). "After China's Rare Earth Embargo, a New Calculus". The New York Times. Retrieved October 30, 2010.