Difference between revisions of "Template:Virginia/index"

Line 1: Line 1:
−
<!--
 
−
* This page and wiki was built with the help of igem-wikibrick, a tool created by Virginia iGEM 2018
 
−
* @version v0.7.3
 
−
* @link https://github.com/Virginia-iGEM/igem-wikibrick
 
−
* @license MIT
 
−
*-->
 
 
<header></header>
 
<header></header>
 
<script>
 
<script>
 
  $(function() {
 
  $(function() {
−
     $('header').load('https://2018.igem.org/Template:Virginia/header?action=raw&ctype=text/javascript');
+
     $('header').load('/templates/header.html');
 
  });
 
  });
 
</script>
 
</script>
Line 14: Line 8:
 
<article class="banner">
 
<article class="banner">
 
   <section>
 
   <section>
−
     <img src="https://static.igem.org/mediawiki/2018/3/3c/T--Virginia--2018_dark.svg" alt="logo">
+
     <img src="/images/logos/dark.svg" alt="logo">
 
     <h3>Microbial Symphony</h3>
 
     <h3>Microbial Symphony</h3>
 
   </section>
 
   </section>
Line 22: Line 16:
  
 
   <section>
 
   <section>
−
     <div class="spacer" style="height: 150vh"></div>
+
     <div class="spacer" style="height: 110vh"></div>
 
     <div class="card">
 
     <div class="card">
−
       <p>By transforming these cells with our own plasmids, we can produce proteins of interest. This is the foundational goal of biomanufacturing.</p>
+
      <h2>1.1</h3>
−
    </div>
+
       <p>By transforming these cells with our own synthetic genes, we can produce proteins of interest. This is the foundational goal of biomanufacturing.</p>
−
    <div class="spacer" style="height: 50vh"></div>
+
       <img src="/images/landing_page/Plasmid-Gallery.svg">
−
    <div class="card">
+
−
       <h3>Constitutive Expression</h3>
+
−
      <!-- <img src="/images/landing_page/lp_wildtype.svg" alt="constitutive expression"></img> -->
+
−
      <p>This system involves hookin a gene of interest up to a constitutive promoter, resulting in constant expression. The primary benefit of this "system" is its inherent simplicity - expression will always just occur. However, when optimizing yields, a flaw in this system becomes evident; low yields.</p>
+
−
      <button class="constitutive_button">Click to see it in action</button>
+
 
     </div>
 
     </div>
 
   </section>
 
   </section>
Line 40: Line 29:
 
       <p>These are normal Escheri coli cells. Given nutrients and space, they will grow, producing various proteins.</p>
 
       <p>These are normal Escheri coli cells. Given nutrients and space, they will grow, producing various proteins.</p>
 
     </div>
 
     </div>
−
     <div class="sticky">
+
     <div class="sticky" tabIndex="-1">
 
       <div class="spacer" style="height: 10vh"></div>
 
       <div class="spacer" style="height: 10vh"></div>
 
       <div class="petri">
 
       <div class="petri">
 
       </div>
 
       </div>
 
       <p>
 
       <p>
−
         <strong>Strain:</strong> Unmodified E. coli
+
         <strong>Strain:</strong> <span>Unmodified E. coli</span>
 
       </p>
 
       </p>
 
       <p>
 
       <p>
−
         <strong>Division Time:</strong> 60 Minutes
+
         <strong>Division Time:</strong> <span>1 hour</span>
 +
      </p>
 +
      <p>
 +
        <strong>Yield:</strong> <span>N/A</span>
 
       </p>
 
       </p>
 
       <div class="spacer" style="height: 20vh"></div>
 
       <div class="spacer" style="height: 20vh"></div>
 
     </div>
 
     </div>
 +
    <div class="spacer" style="height: 50vh"></div>
 +
  </section>
 +
 +
  <section>
 +
    <div class="spacer" style="height: 220vh"></div>
 +
    <div class="card">
 +
      <h2>1.2</h2>
 +
      <p>
 +
        An important component of these genes is their promoter, which determines how and when they are expressed. There are two common ways genes are induced in biomanufacturing; constitutive and inducible expression.
 +
      </p>
 +
    </div>
 +
    <div class="spacer" style="height: 40vh"></div>
 +
  </section>
 +
 +
</article>
 +
 +
<article id="constitutive-article">
 +
 +
  <section>
 +
    <div class="spacer" style="height: 50vh"></div>
 +
    <div class="card" id="constitutive-card">
 +
      <h3>2.1 Constitutive Expression</h3>
 +
      <!-- <img src="/images/landing_page/lp_wildtype.svg" alt="constitutive expression"></img> -->
 +
      <p>Constitutive promoters result in constant expression. The primary benefit of this "system" is its inherent simplicity - expression will occur with no intervention. A cell will always be producing the protein of interest, from its first division to its last.</p>
 +
      <!-- <button class="constitutive_button">Click to see it in action</button> -->
 +
    </div>
 +
    <div class="spacer" style="height: 120vh"></div>
 +
    <div class="card">
 +
      <p>
 +
        Very little protein of interest is produced because the colony isn't given the chance to mature - so many of the cells' resources are committed towards producing the protein that the colony's growth rate is reduced.
 +
      </p>
 +
    </div>
 +
    <div class="spacer" style="height: 50vh"></div>
 +
  </section>
 +
 
 +
  <section class="scroll-action">
 +
    <div class="card">
 +
      <h1>2. Constitutive Expression</h1>
 +
      <p>These E. coli have been modified with a constitutively promoted gene of interest.</p>
 +
    </div>
 +
    <div class="sticky" tabIndex="-1">
 +
      <div class="spacer" style="height: 10vh"></div>
 +
      <div class="petri">
 +
      </div>
 +
      <p>
 +
        <strong>Strain:</strong> <span>E. coli with constitutive expression</span>
 +
      </p>
 +
      <p>
 +
        <strong>Division Time:</strong> <span>3 hours</span>
 +
      </p>
 +
      <p>
 +
        <strong>Yield:</strong> <span>Low</span>
 +
      </p>
 
       <div class="spacer" style="height: 20vh"></div>
 
       <div class="spacer" style="height: 20vh"></div>
 +
    </div>
 +
    <div class="spacer" style="height: 50vh"></div>
 
   </section>
 
   </section>
  
Line 58: Line 105:
 
     <div class="spacer" style="height: 150vh"></div>
 
     <div class="spacer" style="height: 150vh"></div>
 
     <div class="card">
 
     <div class="card">
−
       <h3>Inducible Expression</h3>
+
      <p>
 +
        While this is appropriate for experimentation, when optimizing for biomanufacturing, constitutive promoters begin to show their flaws.
 +
      </p>
 +
    </div>
 +
  </section>
 +
</article>
 +
 
 +
<article id="inducible-article">
 +
  <section>
 +
    <div class="spacer" style="height: 50vh"></div>
 +
    <div class="card">
 +
       <h3>3.1 Inducible Expression</h3>
 
       <!-- <img src="/images/landing_page/lp_quorus.svg" alt="induced expression"></img> -->
 
       <!-- <img src="/images/landing_page/lp_quorus.svg" alt="induced expression"></img> -->
−
       <p>This system involves hooking the gene in question up to an inducible promoter. Growth occurs an at an accelerated rate because no metabolic activity is put towards production. Once the culture has grown to an optimal density, an artificial inducer can be added, switching production on.</p>
+
       <p>Inducible promoters are an improvement over constitutive expression because they give the manufacturer a degree of control over the gene.</p>
−
       <button class="inducible_button">Click to see it in action</button>
+
       <!-- <button class="inducible_button">Click to see it in action</button> -->
 
     </div>
 
     </div>
 
   </section>
 
   </section>
 +
  <section class="scroll-action">
 +
    <div class="card">
 +
      <h1>3. Inducible Expression</h1>
 +
      <p>These E. coli have been modified with an artificially inducible gene of interest.</p>
 +
    </div>
 +
    <div class="sticky" tabIndex="-1">
 +
      <div class="spacer" style="height: 10vh"></div>
 +
      <div class="petri">
 +
      </div>
 +
      <p>
 +
        <strong>Strain:</strong> <span>Inducible E. coli</span>
 +
      </p>
 +
      <p>
 +
        <strong>Division Time:</strong> <span>1 hours</span>
 +
      </p>
 +
      <p>
 +
        <strong>Yield:</strong> <span>High</span>
 +
      </p>
 +
      <div class="spacer" style="height: 20vh"></div>
 +
    </div>
 +
    <div class="spacer" style="height: 50vh"></div>
 +
  </section>
 +
  <section>
 +
    <div class="spacer" style="height: 150vh"></div>
 +
    <div class="card">
 +
      <p>
 +
        These promoters will only express the protein of interest in the presence of some inducer - such as the artificial inducer IPTG - is added to the culture or bioreactor.
 +
      </p>
 +
      <button class="inducible_button">Add some IPTG</button>
 +
    </div>
 +
  </section>
 +
</article>
 +
 +
<article id="quorus-article">
  
 
</article>
 
</article>
Line 70: Line 162:
 
<script>
 
<script>
 
  $(function() {
 
  $(function() {
−
     $('footer').load('https://2018.igem.org/Template:Virginia/footer?action=raw&ctype=text/javascript');
+
     $('footer').load('/templates/footer.html');
 
  });
 
  });
 
</script>
 
</script>
 
<!--SMOOTH SCROLL UP-->
 
<!--SMOOTH SCROLL UP-->
−
<div class="scrolltop">
+
<div class='scrolltop'>
−
   <div class="scroll icon"><i class="fa fa-4x fa-angle-up"></i></div>
+
   <div class='scroll icon'><i class="fa fa-4x fa-angle-up"></i></div>
 
</div>
 
</div>
  
 
<script>
 
<script>
 
  $(function() {
 
  $(function() {
−
   $('header').load('https://2018.igem.org/Template:Virginia/header?action=raw&ctype=text/javascript');
+
   $('header').load('/templates/header.html');
−
   $('footer').load('https://2018.igem.org/Template:Virginia/footer?action=raw&ctype=text/javascript');
+
   $('footer').load('/templates/footer.html');
 
  });
 
  });
 
</script>
 
</script>

Revision as of 00:03, 10 October 2018

<header></header> <script> 

$(function() {
   $('header').load('/templates/header.html');
});

</script>

<article class="banner"> 

 <section>
   <img src="/images/logos/dark.svg" alt="logo">

Microbial Symphony

 </section>

</article>

<article class="call-to-action"> 

 <section>

1.1</h3>

By transforming these cells with our own synthetic genes, we can produce proteins of interest. This is the foundational goal of biomanufacturing.

     <img src="/images/landing_page/Plasmid-Gallery.svg">
   </div>
 </section>

 <section class="scroll-action">

1. Background

These are normal Escheri coli cells. Given nutrients and space, they will grow, producing various proteins.

Strain: Unmodified E. coli

Division Time: 1 hour

Yield: N/A 

 </section>

 <section>

     <h2>1.2</h2>

An important component of these genes is their promoter, which determines how and when they are expressed. There are two common ways genes are induced in biomanufacturing; constitutive and inducible expression. 

 </section>

</article>

<article id="constitutive-article"> 

 <section>

2.1 Constitutive Expression

Constitutive promoters result in constant expression. The primary benefit of this "system" is its inherent simplicity - expression will occur with no intervention. A cell will always be producing the protein of interest, from its first division to its last.

Very little protein of interest is produced because the colony isn't given the chance to mature - so many of the cells' resources are committed towards producing the protein that the colony's growth rate is reduced. 

 </section>
 
 <section class="scroll-action">

2. Constitutive Expression

These E. coli have been modified with a constitutively promoted gene of interest.

Strain: E. coli with constitutive expression

Division Time: 3 hours

Yield: Low 

 </section>

 <section>

While this is appropriate for experimentation, when optimizing for biomanufacturing, constitutive promoters begin to show their flaws. 

 </section>

</article>

<article id="inducible-article"> 

 <section>

3.1 Inducible Expression

Inducible promoters are an improvement over constitutive expression because they give the manufacturer a degree of control over the gene.

 </section>
 <section class="scroll-action">

3. Inducible Expression

These E. coli have been modified with an artificially inducible gene of interest.

Strain: Inducible E. coli

Division Time: 1 hours

Yield: High 

 </section>
 <section>

These promoters will only express the protein of interest in the presence of some inducer - such as the artificial inducer IPTG - is added to the culture or bioreactor. 

     <button class="inducible_button">Add some IPTG</button>

 </section>

</article>

<article id="quorus-article">

</article>

<footer></footer> <script> 

$(function() {
   $('footer').load('/templates/footer.html');
});

</script>

<script> 

$(function() {
  $('header').load('/templates/header.html');
  $('footer').load('/templates/footer.html');
});
</script>