Difference between revisions of "Team:Lund"

(Undo revision 171261 by Trnjonny (talk))
Line 1: Line 1:
 
{{Lund}}
 
{{Lund}}
 +
<!-- ******************** STYLE START ******************** -->
 +
<style>
 +
/******************** HEADER, LANDING PAGE********************/
 +
header {
 +
  background: linear-gradient(to bottom right, #862d21, #FC6C58);
 +
  background-attachment: fixed;
 +
  height: 950px;
 +
}
  
 +
.team-page-header {
 +
  height: 300px;
 +
}
  
−
<html>
+
/* Header image */
 +
.header-content {
 +
  margin: 0 auto;
 +
  padding: 150px;
 +
  text-align: center;
 +
}
  
 +
.header-content img {
 +
  height: 500px;
 +
}
  
 +
/* Bottom to content */
 +
.scroll-to-content {
 +
  display: block;
 +
  margin: 0 auto;
 +
  text-align: center;
 +
}
  
−
<header class="results-landing">
+
.scroll-to-content a {
 +
  color: rgba(255, 255, 255, 0.60);
 +
  font-size: 60px;
 +
}
  
−
<script>
+
.scroll-to-content a:hover {
−
$('p').each(function(index, item) {
+
  color: #fff;
−
    if($.trim($(item).text()) === "") {
+
}
−
        $(item).slideUp(); // $(item).remove();
+
 
−
    }
+
/* Content */
−
});
+
#content-wrapper {
−
</script>
+
  padding: 75px 0;
−
   <div class="container">
+
}
−
     <h1 class="display">Home</h1>
+
 
 +
#content-wrapper p {
 +
  border-bottom: 1px solid #cacaca;
 +
  padding-bottom: 10px;
 +
}
 +
 
 +
#content-wrapper .fas {
 +
  margin-left: 5px;
 +
}
 +
 
 +
.content-page {
 +
  padding: 75px 0;
 +
}
 +
 
 +
.content-page h1 {
 +
  padding: 0 0 10px 0;
 +
  margin: 0;
 +
}
 +
 
 +
.btn {
 +
  background-color: white;
 +
  margin: 0;
 +
  padding: 0;
 +
  color: #FC6C58;
 +
}
 +
 
 +
.btn:hover {
 +
  color: #862d21;
 +
}
 +
 
 +
.bottom-cards p {
 +
  padding: 25px 0 10px 0;
 +
  width: 300px;
 +
}
 +
 
 +
</style>
 +
 
 +
<!-- ******************** HTML START ******************** -->
 +
 
 +
<header>
 +
   <div class="header-content">
 +
     <img src="https://static.igem.org/mediawiki/2018/3/3e/T--Lund--igem_lund_logo_animation_white.gif" alt="iGEM Lund Logo Animation">
 +
  </div>
 +
 
 +
  <div class="scroll-to-content">
 +
    <a href="#content-wrapper"><i class="fas fa-angle-down"></i></a>
 
   </div>
 
   </div>
 
</header>
 
</header>
  
−
<div class="container" >
+
<!-- Content Page -->
−
<h1> Welcome to iGEM Lund 2018! </h1>
+
<div id="content-wrapper">
  
−
<p>Microorganisms are used to produce many valuable products such as pharmaceuticals, food additives and enzymes. However, the production process can be expensive and achieving a high yield is sometimes difficult, with the oxygen supply being a common bottleneck. One approach in combating this problem is the co-expression of <i>Vitreoscilla</i> hemoglobin (VHb). The co-expression is often linked with increased cell densities and higher protein yields. However, few studies have to our knowledge investigated to what degree the protein should be expressed in order to provide beneficial effects. In addition, we have not found any standardized approach in implementing VHb into already existing systems. </p>
 
  
−
<font size="3">
+
  <div class="container content-page">
−
<i>Vitreoscilla</i> hemoglobin is a protein found in the aerobic bacterium <i>Vitreoscilla</i>. It has been proposed that its main role is to deliver oxygen to terminal respiratory oxidases and thereby increase respiration when the oxygen availability is low, and it may also function as a terminal oxidase itself<sup>1</sup>. Several studies have shown that expression of the gene coding for VHb, <i>vgb</i>, can improve cell growth<sup>2,3,4</sup>
+
    <div class="row submenu">
−
as well as increase the production of, among other things, enzymes<sup>5,6</sup>, antifungals<sup>7</sup> and ethanol<sup>8</sup>. </p>
+
      <div class="col-md-8">
 +
        <h1>Our project</h1>
 +
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
 +
        <button class="btn">Read more <i class="fas fa-arrow-right"></i></button>
 +
      </div>
  
−
We hypothesize that expressing only a small amount of <i>vgb</i> will lead to an insufficient oxygen utilization and consequently non-optimal cell productivity. On the other hand, overexpressing <i>vgb</i> will result in a depletion of cell resources as the relative amount of energy gained from the increased metabolism will be overtaken by the amount of protein expressed, The optimal conditions should therefore be approachable by an expression level which is somewhere in-between. </p>
+
      <div class="col-md-4">
 +
          <img  class="submenu_image" src="https://via.placeholder.com/300x200">
 +
      </div>
  
−
To investigate the hypothesis, our aim is to co-express VHb under promoters of varying strength along with a target protein in <i>Escherichia coli</i>. This will be accomplished by using the library of Anderson promoters from the iGEM registry, which are characterized by their RNA polymerase binding strengths. Consequently, we want to measure various properties such as protein yields, cell densities and metabolite concentrations in order to study the effect of increased VHb expression. As such, we wish to first investigate the effect of increased VHb levels and then test our system in a real upscale setting. </p>
+
    </div>
 +
  </div>
  
−
In our contribution to iGEM, our ambition is to provide a library of <i>vgb</i> expression systems with varying promoter strengths. With this available, the amount of increased oxygen uptake can be tailored specifically for the intended application. This gives a new degree of freedom in the experimental design when considering the use of oxygen carriers in synthetic biological systems. The parts could for example be used to increase protein yields under upscaling or increase cell survivability in low oxygen environments.</p>
+
  <div class="container content-page">
−
</font>
+
    <div class="row submenu">
−
<hr>
+
−
<font size="1">
+
−
[1] Stark, B. C., Dikshit, K. L. and Pagilla, K. R. (2012). The Biochemistry of <i>Vitreoscilla</i> hemoglobin. <i>Computational and Structural Biotechnology Journal</i> 3, e201210002. http://doi.org/10.5936/csbj.201210002 <br>
+
−
[2] Khosla, C., and Bailey, J. (1988) Heterologous expression of a bacterial haemoglobin improves the growth properties of recombinant <i>Escherichia coli</i>. <i>Nature</i> 331, 633-635.<br>
+
−
[3] Wu, JM. and Fu, WC. (2012) Intracellular co-expression of <i>Vitreoscilla</i> hemoglobin enhances cell performance and β-galactosidase production in <i>Pichia pastoris. J Biosci Bioeng</i> 113(3), 332–337.<br>
+
  
−
[4] Pablos, T. E., Mora, E. M., Le Borgne, S., Ramírez, O. T., Gosset, G. and Lara, A. R. (2011), <i>Vitreoscilla</i> hemoglobin expression in engineered <i>Escherichia coli</i>: Improved performance in high cell‐density batch cultivations. <i>Biotechnology Journal</i>, 6: 993-1002. doi:10.1002/biot.201000405 <br>
+
      <div class="col-md-4">
 +
        <img  class="submenu_image" src="https://via.placeholder.com/300x200">
 +
      </div>
  
−
[5] Khosravi, M., Webster D. A. and Stark, B.C. (1990). Presence of the bacterial hemoglobin gene improves α-amylase production of a recombinant <i>Escherichia coli</i> strain. <i>Plasmid</i> 24(3), 190-194. <br>
+
      <div class="col-md-8">
 +
        <h1>Our project</h1>
 +
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
 +
        <button class="btn">Read more <i class="fas fa-arrow-right"></i></button>
 +
      </div>
  
−
[6] Wu, JM., Wang, SY., Fu, WC. (2012). Lower Temperature Cultures Enlarge the Effects of <i>Vitreoscilla</i> Hemoglobin Expression on Recombinant <i>Pichia pastoris. Int. J. Mol. Sci.</i> 13(10), 13212-13226; doi:10.3390/ijms131013212 <br>
+
    </div>
 +
  </div>
  
−
[7] Wang S, Liu F, Hou Z, Zong G, Zhu X, Ling P. Enhancement of natamycin production on <i>Streptomyces gilvosporeus</i> by chromosomal integration of the <i>Vitreoscilla</i> hemoglobin gene (<i>vgb</i>) <i>World J Microb Biot</i>. 2014;30:1369–1376. doi: 10.1007/s11274-013-1561-4 <br>
 
  
−
[8] Sanny, T., Arnaldos, M., Kunkel, S.A. et al (2010). Engineering of ethanolic <i>E. coli</i> with the <i>Vitreoscilla</i> hemoglobin gene enhances ethanol production from both glucose and xylose. <i>Appl Microbiol Biotechnol</i> 88, 1103-1112. https://doi.org/10.1007/s00253-010-2817-7
 
−
</p>
 
−
</font>
 
  
−
<i> Contact: igemlund@gmail.com </i>
+
  <div class="container content-page">
 +
    <div class="row submenu">
 +
      <div class="col-md-8">
 +
        <h1>Our project</h1>
 +
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
 +
        <button class="btn">Read more <i class="fas fa-arrow-right"></i></button>
 +
      </div>
  
−
</div>
+
      <div class="col-md-4">
 +
          <img  class="submenu_image" src="https://via.placeholder.com/300x200">
 +
      </div>
  
 +
    </div>
 +
  </div>
 +
 +
 +
<section class="bottom-cards">
 +
  <div class="container content-page">
 +
    <div class="row submenu">
 +
      <div class="col-md-4">
 +
        <h2>Human Practices</h2>
 +
        <img  class="submenu_image" src="https://via.placeholder.com/300x200">
 +
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 +
        <button class="btn">Read more <i class="fas fa-arrow-right"></i></button>
 +
      </div>
 +
 +
      <div class="col-md-4">
 +
        <h2>Human Practices</h2>
 +
        <img  class="submenu_image" src="https://via.placeholder.com/300x200">
 +
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 +
        <button class="btn">Read more <i class="fas fa-arrow-right"></i></button>
 +
      </div>
 +
 +
      <div class="col-md-4">
 +
        <h2>Human Practices</h2>
 +
        <img  class="submenu_image" src="https://via.placeholder.com/300x200">
 +
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 +
        <button class="btn">Read more <i class="fas fa-arrow-right"></i></button>
 +
      </div>
 +
 +
    </div>
 +
  </div>
 +
</section>
 +
 +
</div>
 +
<!-- ******************** SCRIPT START ******************** -->
 +
<script>
 +
// Smooth scroll
 +
function scrollNav() {
 +
  $('a').click(function(){
 +
    $('html, body').stop().animate({
 +
        scrollTop: $( $(this).attr('href') ).offset().top - 75
 +
    }, 600);
 +
  });
 +
}
 +
scrollNav();
 +
</script>
  
 
</html>
 
</html>
 +
{{Lund/footer}}

Revision as of 17:55, 10 October 2018

<style> /******************** HEADER, LANDING PAGE********************/ header { 

 background: linear-gradient(to bottom right, #862d21, #FC6C58);
 background-attachment: fixed;
 height: 950px;

}

.team-page-header { 

 height: 300px;

}

/* Header image */ .header-content { 

 margin: 0 auto;
 padding: 150px;
 text-align: center;

}

.header-content img { 

 height: 500px;

}

/* Bottom to content */ .scroll-to-content { 

 display: block;
 margin: 0 auto;
 text-align: center;

}

.scroll-to-content a { 

 color: rgba(255, 255, 255, 0.60);
 font-size: 60px;

}

.scroll-to-content a:hover { 

 color: #fff;

}

/* Content */

  1. content-wrapper {
 padding: 75px 0;

}

  1. content-wrapper p {
 border-bottom: 1px solid #cacaca;
 padding-bottom: 10px;

}

  1. content-wrapper .fas {
 margin-left: 5px;

}

.content-page { 

 padding: 75px 0;

}

.content-page h1 { 

 padding: 0 0 10px 0;
 margin: 0;

}

.btn { 

 background-color: white;
 margin: 0;
 padding: 0;
 color: #FC6C58;

}

.btn:hover { 

 color: #862d21;

}

.bottom-cards p { 

 padding: 25px 0 10px 0;
 width: 300px;

}

</style>


<header> 

   <img src="T--Lund--igem_lund_logo_animation_white.gif" alt="iGEM Lund Logo Animation">

   <a href="#content-wrapper"></a>

</header>


Our project

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

       <button class="btn">Read more </button>

         <img  class="submenu_image" src="https://via.placeholder.com/300x200">

       <img  class="submenu_image" src="https://via.placeholder.com/300x200">

Our project

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 

       <button class="btn">Read more </button>


Our project

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

       <button class="btn">Read more </button>

         <img  class="submenu_image" src="https://via.placeholder.com/300x200">


<section class="bottom-cards">

Human Practices

       <img  class="submenu_image" src="https://via.placeholder.com/300x200">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

       <button class="btn">Read more </button>

Human Practices

       <img  class="submenu_image" src="https://via.placeholder.com/300x200">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

       <button class="btn">Read more </button>

Human Practices

       <img  class="submenu_image" src="https://via.placeholder.com/300x200">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

       <button class="btn">Read more </button>

</section>

<script> // Smooth scroll function scrollNav() { 

 $('a').click(function(){
   $('html, body').stop().animate({
       scrollTop: $( $(this).attr('href') ).offset().top - 75
   }, 600);
 });

} scrollNav(); </script>

</html>

Gant Logo LMK Logo Lund Logo Kunskappsartner Logo