Team:HUST-China/Project

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{:Team:HUST-China/template/reset}}
+
<html>
-
<!DOCTYPE html>
+
<style>
-
<html lang="en">
+
#top-section{
-
<body>
+
    position: absolute;
-
<div class="navbar navbar-inverse navbar-fixed-top">
+
    width: 100%;
 +
    height: 0;
 +
    border: none;
 +
}
 +
#top-section #menubar.left-menu{
 +
    position: absolute;
 +
    top: 0; left: 0;
 +
    font-size:10px;
 +
}
 +
#top-section #menubar.right-menu{
 +
    position: absolute;
 +
    top: 0; right: 0;
 +
    font-size:10px;
 +
}
 +
.editsection,
 +
#top-section #p-logo,
 +
#top-section #search-controls,
 +
#content h1.firstHeading,#footer-box,
 +
#content #bodyContent #contentSub,
 +
#content #bodyContent p,    /* holly crap, they have p element for script tag and no id and no class... */
 +
#catlinks{
 +
    display: none;
 +
}
 +
#globalWrapper,
 +
#globalWrapper #content{
 +
    background: none;
 +
    margin: 0;
 +
    padding: 0;
 +
    border: none;
 +
    width: auto;
 +
}
 +
 
 +
 
 +
/* because I hide p element in #bodyContent */
 +
#content #bodyContent div p{
 +
    display: block;
 +
}
 +
</style>
 +
<style>
 +
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, code, em, img, q, small, strong, dd, dl, dt, li, ol, ul, fieldset, form, label, table, tbody, tr, th, td, input {
 +
margin:0px;
 +
border:0px;
 +
padding:0px;}
 +
body{
 +
font-size:14px;
 +
font-family:Tahoma,Helvetica,Simsun,STHeiti,
 +
Georgia,"Lucida Grande", Verdana, Lucida,Arial, Helvetica, 宋体,sans-serif;
 +
cursor:default;
 +
/*color:#fff;*/
 +
background: #e7e9e6;
 +
position: relative;
 +
}
 +
h1{ text-shadow: 1px 1px 1px #ccc;}
 +
h1, h2, h3, h4, h5, h6 {
 +
font-family: Verdana, Lucida,Arial, Helvetica,‘Corben’, Georgia, Times, serif;
 +
}
 +
p, div {
 +
font-family: Verdana, Lucida,Arial, Helvetica,‘Nobile’, Helvetica, Arial, sans-serif;
 +
}
 +
a{
 +
transition-duration:0.4s;
 +
transition-property:color;
 +
transition-timing-function:ease-out;
 +
-o-transition-duration:0.4s;
 +
-o-transition-property:color;
 +
-o-transition-timing-function:ease-out;
 +
-webkit-transition-duration:0.4s;
 +
-webkit-transition-property: color, background-color;
 +
-webkit-transition-timing-function:ease-out;
 +
-moz-transition-duration:0.4s;
 +
-moz-transition-property:color;
 +
-moz-transition-timing-function:ease-out;
 +
-ms-transition-duration:0.4s;
 +
-ms-transition-property:color;
 +
-ms-transition-timing-function:ease-out;
 +
}
 +
.standout{
 +
box-shadow: 0 0 1em 1em #ccceee;
 +
}
 +
.header{
 +
padding: 55px 0 10px;
 +
position: relative;
 +
color: #ffffff;
 +
text-align: center;
 +
text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
 +
border-bottom: 4px dashed #f2f2f2;
 +
/*background: #020031;*/
 +
background: linear-gradient(45deg, #020031 0%,#6d3353 100%);
 +
background: -ms-linear-gradient(45deg, #020031 0%,#6d3353 100%);
 +
background: -moz-linear-gradient(45deg, #020031 0%,#6d3353 100%);
 +
background: -webkit-linear-gradient(45deg, #020031 0%,#6d3353 100%);
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 );
 +
-webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
 +
-moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
 +
-ms-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
 +
-o-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
 +
box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
 +
/*opacity: 0.7;
 +
filter:opacity=70;*/
 +
}
 +
.container{
 +
background: url(../images/1.png) repeat 0 0;
 +
margin:15px 0 15px 20;
 +
}
 +
.footer{
 +
text-align:center;
 +
color:#333;
 +
padding:60px 0 30px;
 +
}
 +
#up{
 +
position:fixed;
 +
width: 75px;
 +
height:74px;
 +
bottom:20px;
 +
right:20px;
 +
background: url(../images/top.png) 0 0 no-repeat;
 +
cursor: pointer;
 +
-moz-transition:background-position .5s ease-in .1s;
 +
-webkit-transition:background-position .5s ease-in .1s;
 +
-o-transition:background-position .5s ease-in .1s;
 +
transition:background-position .5s ease-in .1s;
 +
}
 +
#up:hover{
 +
background-position: 0 -74px;
 +
-moz-transition:background-position .5s ease-in .1s;
 +
-webkit-transition:background-position .5s ease-in .1s;
 +
-o-transition:background-position .5s ease-in .1s;
 +
transition:background-position .5s ease-in .1s;
 +
}
 +
 
 +
.bs-docs-sidenav {
 +
  width: 228px;
 +
  margin: 30px 0 0;
 +
  padding: 0;
 +
  background-color: #fff;
 +
  -webkit-border-radius: 6px;
 +
    -moz-border-radius: 6px;
 +
          border-radius: 6px;
 +
  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
 +
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
 +
          box-shadow: 0 1px 4px rgba(0,0,0,.065);
 +
}
 +
.bs-docs-sidenav > li > a {
 +
  display: block;
 +
  width: 190px \9;
 +
  margin: 0 0 -1px;
 +
  padding: 8px 14px;
 +
  border: 1px solid #e5e5e5;
 +
}
 +
.bs-docs-sidenav > li:first-child > a {
 +
  -webkit-border-radius: 6px 6px 0 0;
 +
    -moz-border-radius: 6px 6px 0 0;
 +
          border-radius: 6px 6px 0 0;
 +
}
 +
.bs-docs-sidenav > li:last-child > a {
 +
  -webkit-border-radius: 0 0 6px 6px;
 +
    -moz-border-radius: 0 0 6px 6px;
 +
          border-radius: 0 0 6px 6px;
 +
}
 +
.bs-docs-sidenav > .active > a {
 +
  position: relative;
 +
  z-index: 2;
 +
  padding: 9px 15px;
 +
  border: 0;
 +
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
 +
  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
 +
    -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
 +
          box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
 +
}
 +
/* Chevrons */
 +
.bs-docs-sidenav .icon-chevron-right {
 +
  float: right;
 +
  margin-top: 2px;
 +
  margin-right: -6px;
 +
  opacity: .25;
 +
}
 +
.bs-docs-sidenav > li > a:hover {
 +
  background-color: #f5f5f5;
 +
}
 +
.bs-docs-sidenav a:hover .icon-chevron-right {
 +
  opacity: .5;
 +
}
 +
.bs-docs-sidenav .active .icon-chevron-right,
 +
.bs-docs-sidenav .active a:hover .icon-chevron-right {
 +
  background-image: url(../img/glyphicons-halflings-white.png);
 +
  opacity: 1;
 +
}
 +
.bs-docs-sidenav.affix {
 +
  top: 40px;
 +
}
 +
.bs-docs-sidenav.affix-bottom {
 +
  position: absolute;
 +
  top: auto;
 +
  bottom: 270px;
 +
}
 +
</style>
 +
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
 +
<script type="text/javascript">
 +
(function(a){a.backstretch=function(l,b,j){function m(c){try{h={left:0,top:0},e=f.width(),d=e/k,d>=f.height()?(i=(d-f.height())/2,g.centeredY&&a.extend(h,{top:"-"+i+"px"})):(d=f.height(),e=d*k,i=(e-f.width())/2,g.centeredX&&a.extend(h,{left:"-"+i+"px"})),a("#backstretch, #backstretch img:not(.deleteable)").width(e).height(d).filter("img").css(h)}catch(b){}"function"==typeof c&&c()}var n={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||n;c.data("settings");var f="onorientationchange"in window?a(document):a(window),k,e,d,i,h;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(j=b);a(document).ready(function(){if(l){var b;0==c.length?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:"fixed",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999}).bind("load",function(b){var d=a(this),e;d.css({width:"auto",height:"auto"});e=this.width||a(b.target).width();b=this.height||a(b.target).height();k=e/b;m(function(){d.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof j&&j()})})}).appendTo(c);0==a("body #backstretch").length&&a("body").append(c);c.data("settings",g);b.attr("src",l);a(window).resize(m)}});return this}})(jQuery);
 +
</script>
 +
<body>
 +
              <div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner"  
<div class="navbar-inner"  
style="background:none;background-image:url(images/bg.png);border-bottom:4px dashed #f2f2f2">
style="background:none;background-image:url(images/bg.png);border-bottom:4px dashed #f2f2f2">
Line 31: Line 232:
        </div>
        </div>
</div>
</div>
-
<div id="showcase" class="header">
+
                <div class="modal-footer footer">
-
<div id="showcase-cont" class="pr mc h oflowh"  style="overflow: visible;">
+
-
<div class="showcase-ones" style="display: none; position: relative; left: 0px; top: 0px;" style="left: 0px;">
+
-
<img class="showcase-left" src="./images/ig.png" style="left: 0px;"/>
+
-
<img class="showcase-right" src="./images/em.png" title="" />
+
-
      </div>
+
-
      <div class="showcase-ones" style="display: none; position: relative; left: 0px; top: 0px;" style="left: 0px;">
+
-
<img class="showcase-left" src="./images/igem.png" title="" />
+
-
<img class="showcase-right" src="./images/2013.png" title="" />
+
-
      </div>
+
-
      <div class="showcase-ones" style="display: none; position: relative; left: 0px; top: 0px;" style="left: 0px;">
+
-
<img class="showcase-left" src="./images/igem2013.png" title="" />
+
-
<img class="showcase-right" src="./images/hustchina.png" title="" />
+
-
      </div>
+
-
      <div class="showcase-ones" style="display: none; position: relative; left: 0px; top: 0px;" style="left: 0px;">
+
-
<img class="showcase-left" src="./images/hustintro1.png" title="" />
+
-
<img class="showcase-right" src="./images/hustintro2.png" title="" />
+
-
      </div>
+
-
      <div class="showcase-inner none" id="showcase-inner" style="display: block;">
+
-
          <!--[if lte IE 8]>
+
-
              <xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" /><style>v\:* { behavior: url(#default#VML);}</style>
+
-
                  <style>v\:roundrect{behavior:url(#default#VML);}</style>
+
-
              <![endif]-->
+
-
              <a id="showcase-prev" href="javascript:;"><b class="arrow_pre"></b></a>
+
-
              <a id="showcase-next" href="javascript:;"><b class="arrow_next"></b></a>
+
-
          </div>
+
-
      </div>
+
-
</div>
+
-
<div class="main container" style="width:1000px">
+
-
<div class="row" >
+
-
<div class="span3 bs-docs-sidebar" id="navbar">
+
-
<ul class="nav nav-list bs-docs-sidenav">
+
-
          <li class="active"><a href="#abstract"><i class="icon-chevron-right"></i>Abstract</a></li>
+
-
          <li><a href="#overview"><i class="icon-chevron-right"></i>Overview</a></li>
+
-
          <li><a href="#reference"><i class="icon-chevron-right"></i>Reference</a></li>
+
-
        </ul>
+
-
  </div>
+
-
  <div class="span9" style="padding-left:20px">
+
-
              <div id="scrollspy">
+
-
            <div id="abstract">
+
-
            <h1 class="page-header">Abstract</h1>
+
-
            <p>Hypertension is sometimes called "<strong>silent killer</strong>", for you don't have any symptoms when actually your blood pressure is far beyond the healthy level, and for it has been identified as a risk factor for coronary artery disease (CAD) and Chronic renal failure (CRF). Although it causes grave concern worldwide for its notoriety, there are not many therapeutic methods to hypertension besides a wide selection among various antihypertensive drugs. However, this comes along with heavy financial burden to the developing countries or underdeveloped countries. In addition, almost all these drugs have side effects to liver and renal.<br>
+
-
Suppose there is a group of friendly engineering bacteria in the human intestine and they can produce short-chain fatty acids (SCFA) periodically and naturally to help maintain the blood pressure in safe level. Will it be a novel method to treat Hypertension?<br>
+
-
<strong>SCFA</strong>, especially acetate and propionate, has been proved to induce vasodilatation and ensuing hypotensive response via receptors in smooth muscle cells of vessels. This year, iGEM-HUST have found a metabolic pathway in Escherichia coli (E.coil) that converts succinate to propionate through Wood-Werkman reaction. An operon consisting four genes encodes enzymes in this pathway. By combining bio-oscillator and key gene together, we want to make E. Coli release propionate periodically in patients’ intestine periodically. Once the E.coli is delivered into human body as probiotics, the propionate can be taken by the circulatory system and act with the receptors. However, all the works we have done at present were processed in vitro since we are not sure about the effective concentration for therapy in different patients. And what we are considering is how to prolong the period of propionate and correspond with the peak valley of blood pressure.
+
-
            </p>
+
-
            </div>
+
-
            <div  id="overview">
+
-
            <h1 class="page-header">Overview</h1>
+
-
            <p>
+
-
            <strong class="lead">A four gene operon Figure1 in Escherichia coli genome which include sbm(scpA) ygfG ygfH ygfD, is significant in the metabolic pathway that converts succinate to propionate through Wood-Werkman reaction. </strong>
+
-
<blockquote>Sbm encodes methylmalonyl-CoA epimerase which catalyzes the reversible reaction of succinyl-CoA and methylmalonyl-CoA, the first step in the propionate synthetic pathway. YgfG encoding by the third gene in the operon, catalyzes the decarboxylation of methylmalonyl-CoA to propionyl-CoA. And YgfH catalyzes a CoA transferase reaction from propionyl-CoA to succinyl, generating propionate. Yet the function of YgfD is not as clear as the remaining three. According to Toomas Haller, the protein encoded by the second gene, YgfD, contains a consensus binding sequence for ATP. They thought it might be a succinate (or propionate) CoA ligase, or a novel (biotin-independent) propionyl-CoA carboxylase. So far, what we confirm is its indispensable importance in the pathway.</blockquote>
+
-
 
+
-
            </p>
+
-
            </div>
+
-
            <div id="reference">
+
-
            <h1 class="page-header">Reference</h1>
+
-
            <p>
+
-
            <ol>
+
-
            <li>Jennifer L. Pluznick, Ryan J. Protzko, Haykanush Gevorgyan, Zita Peterlin, Arnold Sipos, Jinah Han,ect. Olfactory receptor responding to gut microbiota-derived signals plays a role in renin secretion and blood pressure regulation. PNAS Early Edition, Approved January 4, 2013.</li>
+
-
            <li>RIVERS SINGLETON, JR. Heterotrophic CO2-Fixation, Mentors, and Students: The Wood-Werkman ReactionS. Journal of the History of Biology 30: 91–120, 1997</li>
+
-
            <li>Anne Thierry, Stéphanie-Marie Deutsch, Hélène Falentin, Marion Dalmasso, Fabien J. Cousin, Gwenaël Jan. New insights into physiology and metabolism of Propionibacterium freudenreichii. International Journal of Food Microbiology 149 (2011) 19 – 27</li>
+
-
            <li>Toomas Haller, Thomas Buckel, Ja ´nos Re´tey, and John A. Gerlt. Discovering New Enzymes and Metabolic Pathways: Conversion of Succinate to Propionate by Escherichia coli. Biochemistry2000, 39, 4622-4629</li>
+
-
            </ol>
+
-
            </p>
+
-
            </div>
+
-
              </div>
+
-
  </div>
+
-
  </div>
+
-
</div>
+
-
<div class="modal-footer footer">
+
<div >
<div >
<div>
<div>
Line 110: Line 242:
</div>
</div>
</div>
</div>
-
<div id="up"><a href="javascript:;"></a></div>
+
<script>
-
 
+
$.backstretch("https://static.igem.org/mediawiki/2013/6/6f/HUST-bghust.png");
-
    <script type="text/javascript">
+
</script>
-
    $(function(){
+
-
    //nav side bar scroll event
+
-
    $(window).scroll(function(){
+
-
    var scroll = $(document).scrollTop();
+
-
    var navli = $("#navbar .nav li");
+
-
var abstract = $("#abstract").outerHeight();
+
-
var overview = $("#overview").outerHeight();
+
-
var reference = $("#reference").outerHeight();//alert(scroll < 470 + abstract);return;
+
-
if(scroll > 470){
+
-
$(".bs-docs-sidenav").removeClass("affix-top").addClass("affix");
+
-
if (scroll < 470 + abstract ){
+
-
$("#navbar .nav li").removeClass("active");
+
-
$("#navbar .nav li:eq(0)").addClass("active");
+
-
}else if (scroll >= 470 + abstract && scroll < 470 + abstract + overview){
+
-
$("#navbar .nav li").removeClass("active");
+
-
$("#navbar .nav li:eq(1)").addClass("active");
+
-
}else if (scroll >= 470 + abstract + overview && scroll < 470 + abstract + overview + reference){
+
-
$("#navbar .nav li").removeClass("active");
+
-
$("#navbar .nav li:eq(2)").addClass("active");
+
-
}
+
-
}else{
+
-
$(".bs-docs-sidenav").removeClass("affix").addClass("affix-top");
+
-
navli.eq(0).addClass("active");
+
-
}
+
-
});
+
-
 
+
-
+
-
 
+
-
    });
+
-
    $.backstretch("images/bghust.png");
+
-
    </script>
+

Revision as of 09:13, 21 September 2013