Difference between revisions of "Template:Virginia/index"

Line 11: Line 11:
 
  });
 
  });
 
</script>
 
</script>
 +
 
<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" class="center">
 
     <img src="https://static.igem.org/mediawiki/2018/3/3c/T--Virginia--2018_dark.svg" alt="logo" class="center">
−
  <h3>Microbial Symphony</h3>
+
    <h3>Microbial Symphony</h3>
 
   </section>
 
   </section>
 
</article>
 
</article>
 +
 
<article class="call-to-action">
 
<article class="call-to-action">
 +
 
   <section>
 
   <section>
−
     <h3>Constitutive Expression</h3>
+
     <div class="spacer" style="height: 150vh"></div>
−
    <!-- <img src="/images/landing_page/lp_wildtype.svg" alt="constitutive expression"></img> -->
+
    <div class="card">
−
    <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>
+
      <p>By transforming these cells with our own plasmids, we can produce proteins of interest. This is the foundational goal of biomanufacturing.</p>
−
    <button class="constitutive_button">Click to see it in action</button>
+
    </div>
 +
    <div class="spacer" style="height: 50vh"></div>
 +
    <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>
 
   </section>
 
   </section>
 +
 
   <section class="scroll-action">
 
   <section class="scroll-action">
−
     <h1>The Problem</h1>
+
     <div class="card" id="first-card">
−
    <p>In biomanufacturing, there are two common systems for inducing expression of some gene of interest.</p>
+
      <h1>1. Background</h1>
−
     <div class="petri"></div>
+
      <p>These are normal Escheri coli cells. Given nutrients and space, they will grow, producing various proteins.</p>
 +
    </div>
 +
     <div class="sticky">
 +
      <div class="spacer" style="height: 10vh"></div>
 +
      <div class="petri">
 +
      </div>
 +
      <p>
 +
        <strong>Strain:</strong> Unmodified E. coli
 +
      </p>
 +
      <p>
 +
        <strong>Division Time:</strong> 60 Minutes
 +
      </p>
 +
      <div class="spacer" style="height: 20vh"></div>
 +
    </div>
 +
      <div class="spacer" style="height: 20vh"></div>
 
   </section>
 
   </section>
 +
 
   <section>
 
   <section>
−
     <h3>Inducible Expression</h3>
+
     <div class="spacer" style="height: 150vh"></div>
−
    <!-- <img src="/images/landing_page/lp_quorus.svg" alt="induced expression"></img> -->
+
    <div class="card">
−
    <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>
+
      <h3>Inducible Expression</h3>
−
    <button class="inducible_button">Click to see it in action</button>
+
      <!-- <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>
 +
      <button class="inducible_button">Click to see it in action</button>
 +
    </div>
 
   </section>
 
   </section>
−
</article>
 
−
<article class="main-content">
 
−
  <section>
 
−
    <p>
 
−
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta tellus non fringilla rhoncus. Pellentesque in arcu dignissim, consectetur neque eu, tristique diam. Nam vel rhoncus nibh. Vestibulum vel suscipit nibh. Integer placerat neque leo, non molestie lacus gravida in. Etiam tristique metus rhoncus sem fermentum, sit amet venenatis libero sodales. Suspendisse hendrerit tellus non tortor faucibus vestibulum. Morbi nulla purus, scelerisque quis cursus id, ullamcorper eget mi. Pellentesque diam ex, cursus vel pharetra vitae, rutrum non nisi. Proin a tellus mattis, luctus libero vel, aliquet diam. Fusce magna enim, venenatis non tempor at, sollicitudin sit amet felis.
 
−
    </p>
 
−
 
−
    <p>
 
−
Maecenas vulputate risus nec porta malesuada. Vivamus ac odio et magna viverra viverra eget eu est. Donec sit amet lorem ut arcu porta gravida ac sit amet nunc. Mauris iaculis sagittis euismod. Aenean ac eros at nibh congue dapibus. Etiam mollis facilisis scelerisque. Maecenas condimentum convallis malesuada. Cras vel elementum neque. Aenean eu porta nisl. Nulla facilisi. Donec feugiat nisl eu elit tincidunt pharetra. Morbi dictum quis magna nec commodo.
 
−
    </p>
 
−
 
−
    <p>
 
−
Pellentesque ac nibh faucibus justo iaculis aliquam vitae quis tellus. Vivamus placerat ac nunc id vulputate. Duis tincidunt urna neque, eget vulputate lectus vulputate quis. Phasellus pulvinar condimentum urna nec tincidunt. Proin congue urna dui, sed tempor ipsum dapibus in. Integer aliquam consequat leo, ac tempor risus placerat cursus. Ut eget lacinia dui, quis ultricies lacus. Phasellus porttitor condimentum ultricies. Aliquam efficitur libero in lacus ullamcorper rutrum. Duis eget dui sed massa posuere condimentum. Morbi vitae turpis nec ex pharetra commodo. Ut blandit diam vitae accumsan rutrum. Nullam eleifend, eros nec commodo congue, ante nibh fringilla nulla, ut fermentum nisi urna a nibh. Sed tempor, diam ac consectetur cursus, libero purus mollis nibh, vel sagittis velit mi ac augue.
 
−
    </p>
 
  
−
    <p>
+
</article>
−
Phasellus in mi ac orci vestibulum porta. Phasellus faucibus tincidunt dui, in rutrum metus posuere ac. Cras varius auctor porttitor. Mauris et risus porta augue ornare maximus vel at ipsum. Ut rutrum nibh elementum, dignissim leo suscipit, congue lacus. Cras eleifend a metus nec lacinia. Donec eget scelerisque quam, in facilisis erat. Vestibulum feugiat, lacus vitae placerat porttitor, magna velit vestibulum odio, vitae vulputate neque dui non eros. Proin facilisis lorem a leo consectetur, sit amet mattis elit ultricies. Nulla aliquet quam vel odio dictum suscipit. Maecenas elementum massa ut urna rhoncus, eget porta massa eleifend. Nullam ultrices non felis vitae egestas.
+
−
    </p>
+
  
−
    <p>
 
−
Fusce semper sollicitudin arcu, ac ultrices felis auctor nec. Proin et justo sollicitudin, efficitur ex ac, maximus ipsum. Quisque vitae vestibulum risus. Sed est neque, egestas in ullamcorper eleifend, commodo non magna. Etiam sem est, tincidunt non hendrerit auctor, sollicitudin sit amet lacus. Integer consequat sem sit amet sodales sodales. Ut metus urna, faucibus a orci eget, molestie rutrum lectus. Phasellus pellentesque aliquam erat eget laoreet. Donec blandit tincidunt ultricies. Duis sed semper ante.
 
−
    </p>
 
−
  </section>
 
−
</article>
 
 
<footer></footer>
 
<footer></footer>
 
<script>
 
<script>
Line 71: Line 79:
  
 
<script>
 
<script>
−
    $(function() {
+
$(function() {
−
    $('header').load('https://2018.igem.org/Template:Virginia/header?action=raw&ctype=text/javascript');
+
  $('header').load('https://2018.igem.org/Template:Virginia/header?action=raw&ctype=text/javascript');
−
    $('footer').load('https://2018.igem.org/Template:Virginia/footer?action=raw&ctype=text/javascript');
+
  $('footer').load('https://2018.igem.org/Template:Virginia/footer?action=raw&ctype=text/javascript');
−
    });
+
});
 
</script>
 
</script>

Revision as of 01:41, 9 October 2018

<header></header> <script> 

$(function() {
   $('header').load('https://2018.igem.org/Template:Virginia/header?action=raw&ctype=text/javascript');
});

</script>

<article class="banner"> 

 <section>
   <img src="https://static.igem.org/mediawiki/2018/3/3c/T--Virginia--2018_dark.svg" alt="logo" class="center">

Microbial Symphony

 </section>

</article>

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

 <section>

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

Constitutive Expression

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.

     <button class="constitutive_button">Click to see it in action</button>

 </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: 60 Minutes 

 </section>

 <section>

Inducible Expression

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.

     <button class="inducible_button">Click to see it in action</button>

 </section>

</article>

<footer></footer> <script> 

$(function() {
   $('footer').load('https://2018.igem.org/Template:Virginia/footer?action=raw&ctype=text/javascript');
});

</script>

<script> 

$(function() {
  $('header').load('https://2018.igem.org/Template:Virginia/header?action=raw&ctype=text/javascript');
  $('footer').load('https://2018.igem.org/Template:Virginia/footer?action=raw&ctype=text/javascript');
});

</script>