Difference between revisions of "Team:CU-Boulder"

 
(104 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
 
 
{{Team:CU-Boulder/Templates/Navigation}}
 
{{Team:CU-Boulder/Templates/Navigation}}
  
 
<html>
 
<html>
  
−
<script>
+
<style>
−
 
+
−
window.onscroll = function() {FunctionOne(),FunctionTwo(),FunctionThree(),FunctionFour()};
+
−
 
+
−
function FunctionOne() {
+
−
    if (document.body.scrollTop > 50 ) {
+
−
        document.getElementById("blah").className = "testLeft";
+
−
    } else {
+
−
        document.getElementById("blah").className = "";
+
−
    }
+
−
}
+
  
 +
@media(max-width: 1200px) {
  
 +
section > titleImageOne { display: none; }
 +
section > titleSmallImageTwo { display: none; }
 +
section > titleSmallImageTwoFlipped { display: none; }
  
−
function FunctionTwo() {
 
−
    if (document.body.scrollTop > 550 ) {
 
−
        document.getElementById("blahTwo").className = "testLeft";
 
−
    } else {
 
−
        document.getElementById("blahTwo").className = "";
 
−
    }
 
 
}
 
}
  
−
function FunctionThree() {
+
@media (max-width: 800px) {
−
    if (document.body.scrollTop > 1000 ) {
+
section { flex-wrap: wrap; }
−
        document.getElementById("blahThree").className = "testLeft";
+
−
    } else {
+
−
        document.getElementById("blahThree").className = "";
+
−
    }
+
−
}
+
  
−
function FunctionFour() {
 
−
    if (document.body.scrollTop > 1400 ) {
 
−
        document.getElementById("blahFour").className = "testLeft";
 
−
    } else {
 
−
        document.getElementById("blahFour").className = "";
 
−
    }
 
 
}
 
}
−
 
−
</script>
 
−
 
−
<style>
 
  
 
body{
 
body{
 
   background-color: black;
 
   background-color: black;
−
  height: 5000px;
 
 
}
 
}
  
Line 61: Line 32:
  
 
section {
 
section {
−
  margin: 0 auto;
 
 
   height:100vh;
 
   height:100vh;
 
   position:relative;
 
   position:relative;
 
   justify-content: center;
 
   justify-content: center;
 
   display: flex;
 
   display: flex;
−
   flex-wrap: wrap;
+
   flex-wrap: nowrap;
−
   align-items: flex-start;
+
   align-items: center;
 
   background-color: black;
 
   background-color: black;
−
border-color: white;
 
−
  border: solid;
 
−
  padding-top: 80px;
 
 
}
 
}
 +
 
section > divOne {
 
section > divOne {
  
Line 87: Line 55:
 
   text-align:center;
 
   text-align:center;
 
   animation-name: fade-in;
 
   animation-name: fade-in;
−
   animation-duration: 3s;
+
   animation-duration: 1s;
 
   animation-direction: alternate;
 
   animation-direction: alternate;
 
   animation-iteration-count: infinite;
 
   animation-iteration-count: infinite;
−
  max-width: 500px;
 
−
  flex-grow: 2;
 
 
}
 
}
  
−
.titleImageOne{
+
section > titleImageOne img{
−
    flex-grow: 1;
+
     max-width: 400px;
−
     max-width: 300px;
+
−
    padding-top: 40px;
+
 
     transform: scaleX(-1);
 
     transform: scaleX(-1);
 
     filter: FlipV;
 
     filter: FlipV;
  
 
}
 
}
−
.titleImageTwo{
+
section > titleImageTwo img{
−
     flex-grow: 1;
+
     max-width: 250px;
−
     max-width: 300px
+
     margin-right: 50px;
 +
    margin-bottom: 80px;
  
 
}
 
}
−
.titleImageThree{
+
 
−
     flex-grow: 2;
+
section > titleSmallImageTwo img{
 +
     max-width: 100px;
 +
    margin-top: 150px;
 +
    transform: scaleX(-1);
 +
    filter: FlipH;
 +
  overflow: hidden;
 +
 
 +
}
 +
 
 +
section > titleSmallImageTwoFlipped img{
 +
    max-width: 100px;
 +
    margin-bottom: 150px;
 +
    overflow: hidden;
 +
 
 +
}
 +
 
 +
section > titleImageTwoFlipped img{
 +
    max-width: 250px;
 +
    margin-left: 50px;
 +
    margin-top: 80px;
 +
    transform: scaleX(-1);
 +
    filter: FlipH;
 +
 
 +
 
 +
}
 +
section > titleImageThree img{
 
     max-width: 700px;
 
     max-width: 700px;
  
 
}
 
}
  
−
.titleImageThreeFlipped{
+
section > titleImageThreeFlipped img {
−
    flex-grow: 2;
+
     max-width: 700px;
−
     max-width: 600px;
+
 
     transform: scaleX(-1);
 
     transform: scaleX(-1);
 
     filter: FlipH;
 
     filter: FlipH;
 +
}
 +
 +
section > twoCells{
 +
    background: radial-gradient(red, yellow, green);
 +
    max-width: 600px;
 +
 
}
 
}
  
Line 138: Line 133:
 
}
 
}
  
−
.bodyHead{
+
section > bodyHead{
−
  margin: auto;
+
 
   text-align: justify;
 
   text-align: justify;
 
   font-family: inconsolata, sans-serif;
 
   font-family: inconsolata, sans-serif;
 
   line-height: 60px;
 
   line-height: 60px;
 
   font-size: 30px;
 
   font-size: 30px;
−
   max-width: 725px;
+
   max-width: 750px;
−
  margin-top: 25%;
+
−
  clear: right;
+
−
  visibility: hidden;
+
 
   color: white;
 
   color: white;
 +
  padding-bottom: 15px;
 +
  padding-top: 15px;
 +
  border-top: 2px solid white;
 +
  border-bottom: 2px solid white;
 +
  margin-right: 30px;
 
}
 
}
  
−
.floatLeft{
+
section > floatLeft{
 
   float: left;
 
   float: left;
 
   font-family: inconsolata, sans-serif;
 
   font-family: inconsolata, sans-serif;
 
   font-size: 25px;
 
   font-size: 25px;
 
   max-width: 350px;
 
   max-width: 350px;
−
  margin-left: 10%;
 
−
  margin-top: 25%;
 
 
   clear: right;
 
   clear: right;
−
  visibility: hidden;
 
 
   color: white;
 
   color: white;
 
   text-align: justify;
 
   text-align: justify;
 +
  margin-right: 150px;
  
 
}
 
}
  
−
.floatRight{
+
section > floatRight{
 +
  margin-left: 150px;
 
   float: right;
 
   float: right;
 
   font-family: inconsolata, sans-serif;
 
   font-family: inconsolata, sans-serif;
 
   font-size: 25px;
 
   font-size: 25px;
 
   max-width: 400px;
 
   max-width: 400px;
−
  margin-right: 10%;
 
−
  margin-top: 25%;
 
 
   clear: left;
 
   clear: left;
−
  visibility: hidden;
 
 
   color: white;
 
   color: white;
 
   text-align: justify;
 
   text-align: justify;
 
}
 
}
  
−
.floatLast{
+
section > floatLast{
 
   float: left;
 
   float: left;
 
   font-family: inconsolata, sans-serif;
 
   font-family: inconsolata, sans-serif;
 
   font-size: 25px;
 
   font-size: 25px;
 
   max-width: 400px;
 
   max-width: 400px;
−
  margin-left: 10%;
 
−
  margin-top: 60%;
 
−
  margin-bottom: 30%;
 
 
   text-align: justify;
 
   text-align: justify;
 
   clear: left;
 
   clear: left;
−
  visibility: hidden;
 
 
   color: white;
 
   color: white;
 
}
 
}
Line 198: Line 186:
  
  
 +
<section>
 +
  <titleImageThree><img src = "https://static.igem.org/mediawiki/2017/5/5a/T-CU-Boulder--CellThree.gif"></titleImageThree>
  
 +
</section>
 
   <section>
 
   <section>
−
    <img class = "titleImageThree" src = "https://static.igem.org/mediawiki/2017/5/5a/T-CU-Boulder--CellThree.gif"></img>
+
<divOne>     
−
    <img class = "titleImageTwo" src = "https://static.igem.org/mediawiki/2017/b/b8/T-CU-Boulder--CellTwo.gif"></img>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
    <!--This is the title box -->
+
−
    <divOne>     
+
 
       <span style="color: red"><b>&mu;</b></span>
 
       <span style="color: red"><b>&mu;</b></span>
 
       s t o r a g e
 
       s t o r a g e
 
     </divOne>
 
     </divOne>
−
    <img class = "titleImageOne" src = "https://static.igem.org/mediawiki/2017/2/2f/T-CU-Boulder--CellOne.gif"></img>
+
</section>
−
    <img class = "titleImageThreeFlipped" src = "https://static.igem.org/mediawiki/2017/5/5a/T-CU-Boulder--CellThree.gif"></img>
+
−
    <img class = "titleImageTwo" src = "https://static.igem.org/mediawiki/2017/b/b8/T-CU-Boulder--CellTwo.gif"></img>
+
  
−
  </section>
 
 
<section>
 
<section>
−
<div class = "bodyHead"> <p id = "blah">
+
  <bodyHead> <p id = "blah">
−
  Bacterial microcompartments are subcellular structures naturally produced by certain microbial populations.  
+
    Bacterial microcompartments are subcellular structures naturally produced by certain microbial populations...  
−
  </p>
+
    </p>
−
</div>
+
  </bodyhead>
−
    <div class = "floatRight">
+
<titleImageOne><img src = "https://static.igem.org/mediawiki/2017/2/2f/T-CU-Boulder--CellOne.gif"></titleImageOne>
 +
 
 +
</section>
 +
<section>
 +
<twoCells><img src = "https://static.igem.org/mediawiki/2017/1/12/T-CU-Boulder--TwoCells.gif"></twoCells>
 +
    <floatRight>
 
   <p id = "blahTwo">
 
   <p id = "blahTwo">
−
     These compartments act in nature to either localize and concentrat substrates, or to sequester harmful intermediates.
+
     These compartments act in nature to either localize and concentrate substrates, or to sequester harmful metabolic intermediates...
−
     </p>  
+
     </p>
−
</div>
+
</floatRight>
−
     <div class = "floatLeft">
+
</section>
 +
<section>  
 +
     <floatLeft>
 
   <p id = "blahThree">
 
   <p id = "blahThree">
−
     Our group has manipulated recombinant compartments in order to achieve remote control over the rapid assembly and dissasembly of the structures.
+
     Our group has designed recombinant compartments in order to achieve remote control over the rapid assembly and dissasembly of the structures...
 
       </p>  
 
       </p>  
−
</div>  
+
</floatLeft>
−
<div class = "floatLast">
+
<img src = "https://static.igem.org/mediawiki/2017/4/48/T-CU-Boulder--Splosion.gif">
 +
</section>
 +
<section>
 +
<titleSmallImageTwo><img src = "https://static.igem.org/mediawiki/2017/b/b8/T-CU-Boulder--CellTwo.gif"></titleSmallImageTwo>
 +
<titleImageTwo><img src = "https://static.igem.org/mediawiki/2017/b/b8/T-CU-Boulder--CellTwo.gif"></titleImageTwo>
 +
<floatLast>
 
   <p id = "blahFour">
 
   <p id = "blahFour">
−
     Using this method...</br></br> Our compartments could potentially act as next-generation drug delivery systems, or as a solution to sequester diffuse and harmful environmental toxins.
+
     Using this method...</br></br> Our compartments could potentially act as next-generation drug delivery systems, biosensors, or as a solution to sequester diffuse and harmful environmental toxins.</br></br> Continue to our project description to learn more...  </p></floatLast>
−
    </p>  
+
<titleImageTwoFlipped><img src = "https://static.igem.org/mediawiki/2017/b/b8/T-CU-Boulder--CellTwo.gif"></titleImageTwoFlipped>
−
</div>
+
<titleSmallImageTwoFlipped><img src = "https://static.igem.org/mediawiki/2017/b/b8/T-CU-Boulder--CellTwo.gif"></titleSmallImageTwoFlipped>
−
 
+
</section>
 
</body>
 
</body>
  
 
</html>
 
</html>

Latest revision as of 08:31, 20 October 2017

μ s t o r a g e

Bacterial microcompartments are subcellular structures naturally produced by certain microbial populations...

These compartments act in nature to either localize and concentrate substrates, or to sequester harmful metabolic intermediates...

Our group has designed recombinant compartments in order to achieve remote control over the rapid assembly and dissasembly of the structures...

Using this method...

Our compartments could potentially act as next-generation drug delivery systems, biosensors, or as a solution to sequester diffuse and harmful environmental toxins.

Continue to our project description to learn more...