Difference between revisions of "Team:CU-Boulder"

 
(131 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
{{Team:CU-Boulder/Templates/Navigation}}
 +
 
<html>
 
<html>
  
 
<style>
 
<style>
−
body {
+
 
−
  margin:0;
+
@media(max-width: 1200px) {
 +
 
 +
section > titleImageOne { display: none; }
 +
section > titleSmallImageTwo { display: none; }
 +
section > titleSmallImageTwoFlipped { display: none; }
 +
 
 
}
 
}
−
#page {
+
 
−
  position:absolute;
+
@media (max-width: 800px) {
−
  top:0;
+
section { flex-wrap: wrap; }
−
  left:0;
+
 
−
  right:0;
+
}
 +
 
 +
body{
 +
  background-color: black;
 
}
 
}
  
Line 16: Line 26:
 
   to{border: solid rgba(255,255,255,1);}
 
   to{border: solid rgba(255,255,255,1);}
 
}
 
}
−
  @keyframes colorChange{
+
 
−
    from{font-color: white}
+
background, html{
−
    to{font-color: red}
+
  background-color: black;
−
}
+
}
−
 
+
 
 
section {
 
section {
 
   height:100vh;
 
   height:100vh;
 
   position:relative;
 
   position:relative;
−
   display:flex;
+
  justify-content: center;
−
   align-items:center;
+
   display: flex;
−
   justify-content:center;
+
  flex-wrap: nowrap;
 +
   align-items: center;
 +
   background-color: black;
 
}
 
}
 +
 
section > divOne {
 
section > divOne {
 +
 
   padding-left: 30px;
 
   padding-left: 30px;
 
   padding-right: 30px;
 
   padding-right: 30px;
−
   padding-bottom: 10px;
+
   padding-bottom: 50px;
−
   padding-top: 10px;
+
   padding-top: 50px;
 
   font-size: 60px;
 
   font-size: 60px;
 
   font-family: inconsolata, sans-serif;
 
   font-family: inconsolata, sans-serif;
Line 38: Line 52:
 
   border: solid;
 
   border: solid;
 
   border-color: white;
 
   border-color: white;
−
   color:#FFF;
+
   color: white;
 
   text-align:center;
 
   text-align:center;
 
   animation-name: fade-in;
 
   animation-name: fade-in;
−
   animation-duration: 10s;
+
   animation-duration: 1s;
 +
  animation-direction: alternate;
 +
  animation-iteration-count: infinite;
 
}
 
}
−
section > divTwo {
+
 
−
  font-family: Times New Roman;
+
section > titleImageOne img{
−
  font-weight:bold;
+
    max-width: 400px;
−
  font-size:45px;
+
    transform: scaleX(-1);
−
  color:black;
+
    filter: FlipV;
−
  text-align:center;
+
 
 
}
 
}
 +
section > titleImageTwo img{
 +
    max-width: 250px;
 +
    margin-right: 50px;
 +
    margin-bottom: 80px;
  
−
section > divThree {
 
−
  font-family: inconsolata, sans-serif;
 
−
  font-weight:bold;
 
−
  color:black;
 
−
  text-align:center;
 
 
}
 
}
  
−
divThree > Header{
+
section > titleSmallImageTwo img{
−
  font-size: 60px;
+
    max-width: 100px;
−
  position: relative;
+
    margin-top: 150px;
−
  border-bottom: solid;
+
    transform: scaleX(-1);
−
  border-top: solid;
+
    filter: FlipH;
−
  padding-bottom: 10px;
+
  overflow: hidden;
−
  padding-top: 10px;
+
 
−
  transition-duration: 0.5s;
+
−
  color: white;
+
 
}
 
}
−
divThree > Footer1{
+
 
−
  padding: 20px;
+
section > titleSmallImageTwoFlipped img{
−
  font-size: 30px;
+
    max-width: 100px;
−
  opacity: 0;
+
    margin-bottom: 150px;
−
  color: white;
+
    overflow: hidden;
 +
 
 
}
 
}
−
divThree > Footer2{
+
 
−
  padding: 20px;
+
section > titleImageTwoFlipped img{
−
  font-size: 30px;
+
    max-width: 250px;
−
  opacity: 0;
+
    margin-left: 50px;
−
  color: white;
+
    margin-top: 80px;
−
}
+
    transform: scaleX(-1);
−
divThree > Footer3{
+
    filter: FlipH;
−
  padding: 20px;
+
 
−
  font-size: 30px;
+
 
−
  opacity: 0;
+
−
  color: white;
+
 
}
 
}
 +
section > titleImageThree img{
 +
    max-width: 700px;
  
−
Header:hover {
 
−
  font-size: 70px;
 
 
}
 
}
  
−
Header:hover ~ footer1{
+
section > titleImageThreeFlipped img {
−
  opacity: 1;
+
    max-width: 700px;
−
  transition-duration: 0.5s;
+
    transform: scaleX(-1);
−
  transition-delay: 1s;
+
    filter: FlipH;
−
  padding-top: 30px;
+
−
 
+
 
}
 
}
  
−
Header:hover ~ footer2{
+
section > twoCells{
−
  opacity: 1;
+
    background: radial-gradient(red, yellow, green);
−
  transition-duration: 0.5s;
+
    max-width: 600px;
−
  transition-delay: 2s;
+
 
 
}
 
}
  
−
Header:hover ~ footer3{
+
 
−
   opacity: 1;
+
@keyframes scrollUp{
−
  transition-duration: 0.5s;
+
   from{opacity: 0; }
−
   transition-delay: 3s;
+
   to{opacity: 1; }
 
}
 
}
  
−
@keyframes nextAnimation{
+
.testLeft{
−
   from {opacity: 0}
+
   visibility: visible;
−
   to { opacity: 1}
+
   animation-name: scrollUp;
 +
  animation-duration: 1s;
 
}
 
}
  
−
.next {
+
.testFinal{
−
  position:absolute;
+
   animation-name: scrollUp;
−
  bottom: 5px;
+
−
  cursor:pointer;
+
−
   animation-name: nextAnimation;
+
 
   animation-duration: 1s;
 
   animation-duration: 1s;
−
  animation-iteration-count: infinite;
+
 
−
  animation-direction: alternate;
+
 
}
 
}
  
−
.one {
+
section > bodyHead{
−
   background: black;
+
   text-align: justify;
−
   background-size: cover;
+
   font-family: inconsolata, sans-serif;
 +
  line-height: 60px;
 +
  font-size: 30px;
 +
  max-width: 750px;
 +
  color: white;
 +
  padding-bottom: 15px;
 +
  padding-top: 15px;
 +
  border-top: 2px solid white;
 +
  border-bottom: 2px solid white;
 +
  margin-right: 30px;
 
}
 
}
  
−
.two{
+
section > floatLeft{
−
   background-color:black;
+
   float: left;
 +
  font-family: inconsolata, sans-serif;
 +
  font-size: 25px;
 +
  max-width: 350px;
 +
  clear: right;
 +
  color: white;
 +
  text-align: justify;
 +
  margin-right: 150px;
 +
 
 
}
 
}
  
−
.paragraphLeft{
+
section > floatRight{
 +
  margin-left: 150px;
 +
  float: right;
 
   font-family: inconsolata, sans-serif;
 
   font-family: inconsolata, sans-serif;
 
   font-size: 25px;
 
   font-size: 25px;
 +
  max-width: 400px;
 +
  clear: left;
 +
  color: white;
 +
  text-align: justify;
 +
}
 +
 +
section > floatLast{
 
   float: left;
 
   float: left;
−
   padding: 20px;
+
   font-family: inconsolata, sans-serif;
−
   margin-left: 20px;
+
   font-size: 25px;
−
    
+
   max-width: 400px;
−
    
+
   text-align: justify;
 +
  clear: left;
 +
  color: white;
 
}
 
}
  
 
</style>
 
</style>
 +
<head>
 +
</head>
 +
<body>
  
  
−
<divTwo id="page">
+
<section>
−
   <section class="one">
+
   <titleImageThree><img src = "https://static.igem.org/mediawiki/2017/5/5a/T-CU-Boulder--CellThree.gif"></titleImageThree>
−
    <!--This is the title box -->
+
 
−
    <divOne>     
+
</section>
−
       <span style="color: red"><b>&mu;</b>         </span>
+
  <section>
 +
<divOne>     
 +
       <span style="color: red"><b>&mu;</b></span>
 
       s t o r a g e
 
       s t o r a g e
 
     </divOne>
 
     </divOne>
−
    <divTwo class="next">. . . </divTwo>
+
</section>
−
  </section>
+
−
  <section class="two">
+
−
    <divThree>
+
−
      <header>
+
−
    The Future is <span style="color: red">H</span>ere
+
−
      </header>
+
−
      </br></br></br>
+
−
      <footer1>
+
−
        Re<span style="color: red">m</span>ote release. </footer1>
+
−
      </br></br></br>
+
−
      <footer2>
+
−
        Site-specific d<span style="color: red">e</span>livery.
+
−
        </footer2>
+
−
</br></br></br>
+
−
      <footer3>
+
−
        <span style="color: red">M</span>odular Cargo. </footer3>
+
−
<divTwo class = "next"> Continue Scrolling
+
−
</divTwo>
+
−
    </divThree>
+
−
  </section>
+
−
  <section class="two">
+
−
    <div class = "paragraphLeft">
+
−
      <p1> Blah Blah </p1>
+
−
      </div>
+
−
    </section>
+
  
−
+
<section>
−
</div>
+
  <bodyHead> <p id = "blah">
−
 
+
    Bacterial microcompartments are subcellular structures naturally produced by certain microbial populations...  
−
<script>
+
    </p>
−
 
+
   </bodyhead>
−
var page = document.getElementById('page');
+
<titleImageOne><img src = "https://static.igem.org/mediawiki/2017/2/2f/T-CU-Boulder--CellOne.gif"></titleImageOne>
−
var sections = page.getElementsByTagName('section');
+
−
var transition = 'top .8s ease-in';
+
−
page.style.transition = transition;
+
−
page.onclick = slideDown;
+
−
 
+
−
function slideDown(e) {
+
−
 
+
−
   // Delegate.
+
−
  if (e.target.className != 'next') {
+
−
    return;
+
−
  }
+
−
 
+
−
  // Prevent firing simultaneously.
+
−
  page.onclick = '';
+
−
  self = e.target.parentNode;
+
−
  var offset = self.getBoundingClientRect();
+
−
  var scroll = self.offsetTop;
+
−
 
+
−
  // CSS Transition slide.
+
−
  page.style.top = (-offset.height-offset.top) + 'px';
+
−
 
+
−
  setTimeout(function () {
+
−
    // Reposition the real scrollbar.
+
−
    page.style.transition = 'none';
+
−
    page.style.top = '';
+
−
    window.scrollTo(0, offset.height+scroll);
+
−
    page.style.transition = transition;
+
−
    // Reattach event.
+
−
    page.onclick = slideDown;
+
−
  }, 800);
+
−
}
+
  
 +
</section>
 +
<section>
 +
<twoCells><img src = "https://static.igem.org/mediawiki/2017/1/12/T-CU-Boulder--TwoCells.gif"></twoCells>
 +
    <floatRight>
 +
  <p id = "blahTwo">
 +
    These compartments act in nature to either localize and concentrate substrates, or to sequester harmful metabolic intermediates...
 +
    </p>
 +
</floatRight>
 +
</section>
 +
<section>
 +
    <floatLeft>
 +
  <p id = "blahThree">
 +
    Our group has designed recombinant compartments in order to achieve remote control over the rapid assembly and dissasembly of the structures...
 +
      </p>
 +
</floatLeft>
 +
<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">
 +
    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>
 +
<titleImageTwoFlipped><img src = "https://static.igem.org/mediawiki/2017/b/b8/T-CU-Boulder--CellTwo.gif"></titleImageTwoFlipped>
 +
<titleSmallImageTwoFlipped><img src = "https://static.igem.org/mediawiki/2017/b/b8/T-CU-Boulder--CellTwo.gif"></titleSmallImageTwoFlipped>
 +
</section>
 +
</body>
  
−
</script>
 
 
</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...