Difference between revisions of "Team:Dalhousie/test5"

 
(170 intermediate revisions by the same user not shown)
Line 13: Line 13:
  
 
}
 
}
 +
 +
 
</style>
 
</style>
  
Line 30: Line 32:
 
#sideMenu, #top_title, .patrollink  {display:none;}
 
#sideMenu, #top_title, .patrollink  {display:none;}
 
#content { width:100%; padding:0px;  margin-top:-20px; margin-left:0px; background-color: white;}
 
#content { width:100%; padding:0px;  margin-top:-20px; margin-left:0px; background-color: white;}
−
body {background-color:white; }
+
body {background-color:white; height:100%; }
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 10px;  background-color: transparent; z-index:100;}
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px;  background-color: transparent; z-index:100;}
 
         .jumbotron {
 
         .jumbotron {
 
             height: 850px;
 
             height: 850px;
Line 37: Line 39:
 
            
 
            
 
             }
 
             }
−
</style>
+
.navbar-default .navbar-nav>.active>a, .nav > li > a:hover, .nav > li > a:focus {
−
 
+
  background-color: #C1D35D;
−
<!------------fadedivs-------------------------->
+
  text-decoration: none;
−
<style>
+
−
#grad1 {
+
−
    height: 833px;
+
−
    background: transparent; /* For browsers that do not support gradients */
+
−
    background: -webkit-linear-gradient(transparent 90%, rgba(27,22,16,1) ); /* For Safari 5.1 to 6.0 */
+
−
    background: -o-linear-gradient(transparent 90%, rgba(27,22,16,1)); /* For Opera 11.1 to 12.0 */
+
−
    background: -moz-linear-gradient(transparent 90%, rgba(27,22,16,1) ); /* For Firefox 3.6 to 15 */
+
−
    background: linear-gradient(transparent 90%, rgba(27,22,16,1)); /* Standard syntax (must be last) */
+
 
}
 
}
−
</style>
 
−
<style>
 
−
#grad2 {
 
−
position: absolute;
 
−
z-index:1;
 
−
height: 100%;
 
−
width:100%;
 
−
    background: transparent; /* For browsers that do not support gradients */
 
−
    background: -webkit-linear-gradient(rgba(27,22,16,1), transparent 80%, rgba(27,22,16,1)); /* For Safari 5.1 to 6.0 */
 
−
    background: -o-linear-gradient(rgba(27,22,16,1), transparent 80%, rgba(27,22,16,1)); /* For Opera 11.1 to 12.0 */
 
−
    background: -moz-linear-gradient(rgba(27,22,16,1), transparent 80%, rgba(27,22,16,1)); /* For Firefox 3.6 to 15 */
 
−
    background: linear-gradient(rgba(27,22,16,1), transparent 80%, rgba(27,22,16,1)); /* Standard syntax (must be last) */
 
−
}
 
−
 
−
 
 
</style>
 
</style>
  
Line 69: Line 48:
  
 
<body>
 
<body>
 +
  
 
<!-------------------navbar---------------------->
 
<!-------------------navbar---------------------->
Line 84: Line 64:
 
         </a>
 
         </a>
 
         <ul class="dropdown-menu" style=" background-color: rgba(193,211,93,0.8);">
 
         <ul class="dropdown-menu" style=" background-color: rgba(193,211,93,0.8);">
−
           <li><a href="https://2017.igem.org/Team:Dalhousie/Description" style=" color: white;" >Description</a></li>
+
           <li><a href="https://2017.igem.org/Team:Dalhousie/Description" >Description</a></li>
−
           <li><a href="https://2017.igem.org/Team:Dalhousie/Design"style=" color: white;">Design</a></li>
+
           <li><a href="https://2017.igem.org/Team:Dalhousie/Design">Design</a></li>
 
           <li><a href="https://2017.igem.org/Team:Dalhousie/Improve">Improve</a></li>
 
           <li><a href="https://2017.igem.org/Team:Dalhousie/Improve">Improve</a></li>
 
         </ul>
 
         </ul>
Line 93: Line 73:
 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Results
 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Results
 
         </a>
 
         </a>
−
         <ul class="dropdown-menu">
+
         <ul class="dropdown-menu" style=" background-color: rgba(193,211,93,0.8);">
 
           <li><a href="https://2017.igem.org/Team:Dalhousie/InterLab">Interlab</a></li>
 
           <li><a href="https://2017.igem.org/Team:Dalhousie/InterLab">Interlab</a></li>
 
   <li><a href="https://2017.igem.org/Team:Dalhousie/Results">Results</a></li>
 
   <li><a href="https://2017.igem.org/Team:Dalhousie/Results">Results</a></li>
Line 103: Line 83:
 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Team
 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Team
 
         </a>
 
         </a>
−
         <ul class="dropdown-menu">
+
         <ul class="dropdown-menu" style=" background-color: rgba(193,211,93,0.8);">
 
           <li><a href="https://2017.igem.org/Team:Dalhousie/Team">Team</a></li>
 
           <li><a href="https://2017.igem.org/Team:Dalhousie/Team">Team</a></li>
 
           <li><a href="https://2017.igem.org/Team:Dalhousie/Collaborations">Collaborations</a></li>
 
           <li><a href="https://2017.igem.org/Team:Dalhousie/Collaborations">Collaborations</a></li>
Line 114: Line 94:
 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Human Practices
 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Human Practices
 
         </a>
 
         </a>
−
         <ul class="dropdown-menu">
+
         <ul class="dropdown-menu" style=" background-color: rgba(193,211,93,0.8);">
 
         <li><a href="https://2017.igem.org/Team:Dalhousie/Human_Practices">Summary</a></li>
 
         <li><a href="https://2017.igem.org/Team:Dalhousie/Human_Practices">Summary</a></li>
 
           <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Silver_Integrated">Silver HP</a></li>
 
           <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Silver_Integrated">Silver HP</a></li>
Line 129: Line 109:
 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Lab
 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Lab
 
         </a>
 
         </a>
−
         <ul class="dropdown-menu">
+
         <ul class="dropdown-menu" style=" background-color: rgba(193,211,93,0.8);">
 
           <li><a href="https://2017.igem.org/Team:Dalhousie/Parts">Parts</a></li>
 
           <li><a href="https://2017.igem.org/Team:Dalhousie/Parts">Parts</a></li>
 
           <li><a href="https://2017.igem.org/Team:Dalhousie/Basic_Parts">Basic Parts</a></li>
 
           <li><a href="https://2017.igem.org/Team:Dalhousie/Basic_Parts">Basic Parts</a></li>
Line 148: Line 128:
 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Awards
 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Awards
 
         </a>
 
         </a>
−
         <ul class="dropdown-menu">
+
         <ul class="dropdown-menu" style=" background-color: rgba(193,211,93,0.8);">
 
           <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Applied_Design">Applied Design</a></li>
 
           <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Applied_Design">Applied Design</a></li>
 
           <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Entrepreneurship">Entrepreneurship</a></li>
 
           <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Entrepreneurship">Entrepreneurship</a></li>
Line 165: Line 145:
 
     </div>
 
     </div>
 
<li>
 
<li>
−
                         <a href="mailto:igemdalhousie@gmail.com" ><i class="fa fa-envelope-o fa-fw" style=" color: rgba(149, 48, 41, 1);"></i> <span class="network-name"></span></a>
+
                         <a href="mailto:igemdalhousie@gmail.com" ><i class="fa fa-envelope-o fa-fw" style=" color: white;" ></i> <span class="network-name"></span></a>
 
                     </li>
 
                     </li>
 
<li>
 
<li>
−
                         <a target="_blank" href="https://twitter.com/dalhousie_igem?lang=en" ><i class="fa fa-twitter fa-fw" style=" color: rgba(61, 145, 229, 1);"></i> <span class="network-name"></span></a>
+
                         <a target="_blank" href="https://twitter.com/dalhousie_igem?lang=en" ><i class="fa fa-twitter fa-fw" style=" color: white;" ></i> <span class="network-name"></span></a>
 
                     </li>
 
                     </li>
 
                     <li>
 
                     <li>
−
                         <a target="_blank" href="https://www.facebook.com/Dalhousie.iGEM/" ><i class="fa fa-facebook fa-fw" style=" color: rgba(57, 86, 156, 1);"></i> <span class="network-name"></span></a>
+
                         <a target="_blank" href="https://www.facebook.com/Dalhousie.iGEM/" ><i class="fa fa-facebook fa-fw" style=" color: white;" ></i> <span class="network-name"></span></a>
 
                     </li>
 
                     </li>
  
Line 183: Line 163:
  
  
−
 
−
 
−
<div id="grad1"><!--------fade------------>
 
 
         <div class="panel" id="panel1" >
 
         <div class="panel" id="panel1" >
  
 
             <div class="inner" >
 
             <div class="inner" >
−
<div class="top" ><div class="title" >Welcome to Dalhousie's 2017 iGEM wiki</div></div>
+
<div class="top" ><div class="title" >Dalhousie iGEM 2017</div></div>
  
 
    
 
    
  
 
<video  id= "myVideo" class="bg-video" style="top:0px; left:0px; padding-bottom:0px; position:fixed; width:100%;z-index:-100; " autoplay="true" loop="loop" preload="metadata" muted="muted">
 
<video  id= "myVideo" class="bg-video" style="top:0px; left:0px; padding-bottom:0px; position:fixed; width:100%;z-index:-100; " autoplay="true" loop="loop" preload="metadata" muted="muted">
−
         <source src="https://static.igem.org/mediawiki/2017/5/53/Final5.mp4" type="video/mp4" />
+
         <source src="https://static.igem.org/mediawiki/2017/6/68/Thisfinal.mp4" type="video/mp4" />
  
  
  
 
<!--------------------------------fade title---------------------------->
 
<!--------------------------------fade title---------------------------->
−
<style>body {
+
<style>
 +
 
 +
body {
 
   margin: 0;
 
   margin: 0;
 
   height: 10px;
 
   height: 10px;
Line 206: Line 185:
 
.top {
 
.top {
  
−
   margin-top: 450px;
+
   margin-top: 350px;
 
   position: absolute;
 
   position: absolute;
−
  width:55%;
+
  width:65%;
−
   left:300px;
+
   left:250px;
−
   background-color: rgba(27,22,16,0.4);
+
   background-color: transparent;
 
   height: 150px;
 
   height: 150px;
 
   text-align: center;
 
   text-align: center;
 
   font-family: 'Trebuchet MS';
 
   font-family: 'Trebuchet MS';
−
   font-size: 50px;
+
   font-size: 80px;
−
   font-weight: 100;
+
   font-weight: 400;
 
   color: white;
 
   color: white;
 
line-height: 60px;
 
line-height: 60px;
Line 228: Line 207:
  
 
</style>
 
</style>
 +
  
 
<!---------------------------------------------------------------------------------this------------------------------------------------------------------------------------------->
 
<!---------------------------------------------------------------------------------this------------------------------------------------------------------------------------------->
 
<script> $(window).scroll(function(){
 
<script> $(window).scroll(function(){
−
     $(".top").css("opacity", 1 - $(window).scrollTop() / 400);
+
     $(".top").css("opacity", 1 - $(window).scrollTop() / 300);
−
   });</script>
+
   });
 +
</script>
  
  
 
             </div>
 
             </div>
 
         </div>  
 
         </div>  
−
</div>
+
 
  
  
  
 
         <div class="panel" id="panel2">
 
         <div class="panel" id="panel2">
 +
<div style=" border: 1px solid #000; margin: 50px; padding: 30px; background-color: rgba(35,47,19,1);">
 +
 +
Welcome! </br>
 +
The goal of our project is to convert cellulose into glucose, which can be used for biofuel. </br>
 +
Let us show you how! </br>
 +
</div>
 
             <div class="inner">
 
             <div class="inner">
 +
 +
 +
  <!-- Vertical Timeline -->
 +
  <section id="conference-timeline">
 +
 
 +
    <div class="conference-center-line"></div>
 +
    <div class="conference-timeline-content">
 +
      <!-- Article -->
 +
      <div class="timeline-article">
 +
        <div class="content-left-container" >
 +
          <div class="content-left" >
 +
            <p>Softwood waste from the lumber industry contains cellulose, which can be turned into glucose and used to make biofuel.  <span class="article-number">01</span></p>
 +
          </div>
 +
       
 +
        </div>
 +
  <div class="content-right-container">
 
            
 
            
−
<style type="text/css">
+
       
−
#pinContainer {
+
        </div>
−
width: 100%;
+
        <div class="meta-date">
−
height: 100%;
+
          <img src= "https://static.igem.org/mediawiki/2017/a/ab/Lumber.jpg" height="50%" width="60%"style="margin-top:15px;" >
−
overflow: hidden;
+
        </div>
−
z-index: 1;
+
      </div>
−
}
+
      <!-- // Article -->
−
.panel {
+
     
−
height: 100%;
+
      <!-- Article -->
−
width: 100%;
+
      <div class="timeline-article">
−
position: absolute;
+
        <div class="content-left-container">
−
}
+
        </div>
−
</style>
+
  
−
<div id="pinContainer">
+
        <div class="content-right-container">
−
<section class="panel blue">
+
          <div class="content-right">
−
<b>ONE</b>
+
            <p>We hypothesized that the porcupine microbiome must contain an enzyme that can break down cellulose, as bark is food. <span class="article-number">02</span></p>
−
</section>
+
          </div>
−
<section class="panel turqoise">
+
       
−
<b>TWO</b>
+
        </div>
−
</section>
+
        <div class="meta-date" style="background-color: white;">
−
<section class="panel green">
+
  <img src= "https://static.igem.org/mediawiki/2017/6/67/Porcupiner.png" height="60%" width="75%"style="margin-top:15px;" >
−
<b>THREE</b>
+
        </div>
−
</section>
+
      </div>
−
<section class="panel bordeaux">
+
      <!-- // Article -->
−
<b>FOUR</b>
+
     
−
</section>
+
−
</div>
+
−
<script>
+
−
$(function () { // wait for document ready
+
−
// init
+
−
var controller = new ScrollMagic.Controller();
+
  
−
// define movement of panels
+
      <!-- Article -->
−
var wipeAnimation = new TimelineMax()
+
      <div class="timeline-article">
−
.fromTo("section.panel.turqoise", 1, {x: "-100%"}, {x: "0%", ease: Linear.easeNone}) // in from left
+
        <div class="content-left-container">
−
.fromTo("section.panel.green",   1, {x: "100%"}, {x: "0%", ease: Linear.easeNone}) // in from right
+
          <div class="content-left">
−
.fromTo("section.panel.bordeaux", 1, {y: "-100%"}, {y: "0%", ease: Linear.easeNone}); // in from top
+
            <p>We mined the porcupine’s microbiome to identify the enzyme that was able to break down wood.  <span class="article-number">03</span></p>
 +
          </div>
 +
   
 +
        </div>
 +
        <div class="content-right-container">
 +
         
 +
 +
        </div>
 +
        <div class="meta-date">
 +
  <img src= "https://static.igem.org/mediawiki/2017/4/48/Testtubee.png" height="60%" width="70%"style="margin-top:15px;" >
 +
        </div>
 +
      </div>
 +
      <!-- // Article -->
 +
<!-- Article -->
 +
      <div class="timeline-article">
 +
        <div class="content-left-container">
 +
         
 +
       
 +
        </div>
 +
        <div class="content-right-container">
 +
        <div class="content-right">
 +
            <p>We created a metagenomic library of the genes able to code this enzyme as well as novel enzymes. <span class="article-number">04</span></p>
 +
          </div>
 +
       
 +
        </div>
 +
        <div class="meta-date">
 +
    <img src= "https://static.igem.org/mediawiki/2017/a/ab/Lumber.jpg" height="50%" width="60%"style="margin-top:15px;" >
 +
        </div>
 +
      </div>
 +
      <!-- // Article -->
 +
<!-- Article -->
 +
      <div class="timeline-article">
 +
        <div class="content-left-container">
 +
        <div class="content-left">
 +
            <p>We put these genes into E.coli to see if they could then digest cellulose down. <span class="article-number">05</span></p>
 +
          </div>
 +
   
 +
        </div>
 +
        <div class="content-right-container">
 +
         
 +
   
 +
        </div>
 +
        <div class="meta-date">
 +
    <img src= "https://static.igem.org/mediawiki/2017/a/ab/Lumber.jpg" height="50%" width="60%"style="margin-top:15px;" >
 +
        </div>
 +
      </div>
 +
      <!-- // Article -->
 +
<!-- Article -->
 +
      <div class="timeline-article">
 +
        <div class="content-left-container">
 +
         
 +
       
 +
        </div>
 +
        <div class="content-right-container">
 +
        <div class="content-right">
 +
            <p>We put the E.coli into a bioreactor with cellulose to see if it gets broken down. In the future this can be combined with yeast to transform in finally into biofuel! <span class="article-number">06</span></p>
 +
          </div>
 +
       
 +
        </div>
 +
        <div class="meta-date">
 +
        <img src= "https://static.igem.org/mediawiki/2017/a/ab/Lumber.jpg" height="50%" width="60%"style="margin-top:15px;" >
 +
        </div>
 +
      </div>
 +
      <!-- // Article -->
 +
    </div>
 +
    
 +
  </section>
 +
  <!-- // Vertical Timeline -->
 +
 
 +
  <style>
 +
body {
 +
  background: #e6e6e6;
 +
  font-family: "Roboto", sans-serif;
 +
  font-weight: 400;
 +
}
 +
 
 +
/*===== Vertical Timeline =====*/
 +
#conference-timeline {
 +
  position: relative;
 +
  max-width: 920px;
 +
  width: 100%;
 +
  margin: 0 auto;
 +
}
 +
#conference-timeline .timeline-start,
 +
#conference-timeline .timeline-end {
 +
  display: table;
 +
  font-family: "Roboto", sans-serif;
 +
  font-size: 18px;
 +
  font-weight: 900;
 +
  text-transform: uppercase;
 +
  background: rgba(35,47,19,1);
 +
  padding: 15px 23px;
 +
  color: #fff;
 +
  max-width: 5%;
 +
  width: 100%;
 +
  text-align: center;
 +
  margin: 0 auto;
 +
}
 +
#conference-timeline .conference-center-line {
 +
  position: absolute;
 +
  width: 3px;
 +
  height: 100%;
 +
  top: 0;
 +
  left: 50%;
 +
  margin-left: -2px;
 +
  background: #232F13;
 +
  z-index: -1;
 +
}
 +
#conference-timeline .conference-timeline-content {
 +
  padding-top: 67px;
 +
  padding-bottom: 67px;
 +
}
 +
.timeline-article {
 +
  width: 100%;
 +
  height: 100%;
 +
  position: relative;
 +
  overflow: hidden;
 +
  margin: 20px 0;
 +
}
 +
.timeline-article .content-left-container,
 +
.timeline-article .content-right-container {
 +
  max-width: 44%;
 +
  width: 100%;
 +
   
 +
}
 +
.timeline-article .timeline-author {
 +
  display: block;
 +
  font-weight: 400;
 +
  font-size: 14px;
 +
  line-height: 24px;
 +
  color: white;
 +
  text-align: right;
 +
}
 +
.timeline-article .content-left,
 +
.timeline-article .content-right {
 +
  position: relative;
 +
  width: auto;
 +
  border: 1px solid #000;
 +
  background-color: rgba(35,47,19,1);
 +
  box-shadow: 0 1px 3px rgba(0,0,0,0.9);
 +
  padding: 27px 25px;
 +
}
 +
.timeline-article p {
 +
  margin: 0 0 0 60px;
 +
  padding: 0;
 +
  font-weight: 400;
 +
  color: white;
 +
  font-size: 14px;
 +
  line-height: 24px;
 +
  position: relative;
 +
}
 +
.timeline-article p span.article-number {
 +
  position: absolute;
 +
  font-weight: 300;
 +
  font-size: 44px;
 +
  top: 10px;
 +
  left: -60px;
 +
  color: white;
 +
}
 +
.timeline-article .content-left-container {
 +
  float: left;
 +
}
 +
.timeline-article .content-right-container {
 +
  float: right;
 +
 
 +
}
 +
.timeline-article .content-left:before,
 +
.timeline-article .content-right:before{
 +
  position: absolute;
 +
  top: 20px;
 +
  font-size: 23px;
 +
  font-family: "FontAwesome";
 +
  color: #fff;
 +
}
 +
.timeline-article .content-left:before {
 +
  content: "\f0da";
 +
  right: -8px;
 +
}
 +
.timeline-article .content-right:before {
 +
  content: "\f0d9";
 +
  left: -8px;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
.timeline-article .meta-date {
 +
  position: absolute;
 +
  top: 10px;
 +
  left: 49%;
 +
  width: 80px;
 +
  height: 80px;
 +
  margin-left: -31px;
 +
  color: #fff;
 +
  border-radius: 100%;
 +
  background:#232F13;
 +
}
 +
.timeline-article .meta-date .date,
 +
.timeline-article .meta-date .month {
 +
  display: block;
 +
  text-align: center;
 +
  font-weight: 900;
 +
 
 +
}
 +
.timeline-article .meta-date .date {
 +
  font-size: 30px;
 +
  line-height: 40px;
 +
 
 +
}
 +
.timeline-article .meta-date .month {
 +
  font-size: 18px;
 +
  line-height: 10px;
 +
}
 +
/*===== // Vertical Timeline =====*/
 +
 
 +
/*===== Resonsive Vertical Timeline =====*/
 +
@media only screen and (max-width: 830px) {
 +
  #conference-timeline .timeline-start,
 +
  #conference-timeline .timeline-end {
 +
    margin: 0;
 +
  }
 +
  #conference-timeline .conference-center-line {
 +
    margin-left: 0;
 +
    left: 50px;
 +
  }
 +
  .timeline-article .meta-date {
 +
    margin-left: 0;
 +
    left: 20px;
 +
  }
 +
  .timeline-article .content-left-container,
 +
  .timeline-article .content-right-container {
 +
    max-width: 100%;
 +
    width: auto;
 +
    float: none;
 +
    margin-left: 110px;
 +
    min-height: 53px;
 +
  }
 +
  .timeline-article .content-left-container {
 +
    margin-bottom: 20px;
 +
  }
 +
  .timeline-article .content-left,
 +
  .timeline-article .content-right {
 +
    padding: 10px 25px;
 +
    min-height: 65px;
 +
  }
 +
  .timeline-article .content-left:before {
 +
    content: "\f0d9";
 +
    right: auto;
 +
    left: -8px;
 +
  }
 +
  .timeline-article .content-right:before {
 +
    display: none;
 +
  }
 +
}
 +
@media only screen and (max-width: 400px) {
 +
  .timeline-article p {
 +
    margin: 0;
 +
  }
 +
  .timeline-article p span.article-number {
 +
    display: none;
 +
  }
 +
 
 +
}
 +
/*===== // Resonsive Vertical Timeline =====*/
 +
</style>
  
−
// create scene to pin and link animation
 
−
new ScrollMagic.Scene({
 
−
triggerElement: "#pinContainer",
 
−
triggerHook: "onLeave",
 
−
duration: "300%"
 
−
})
 
−
.setPin("#pinContainer")
 
−
.setTween(wipeAnimation)
 
−
.addIndicators() // add indicators (requires plugin)
 
−
.addTo(controller);
 
−
});
 
−
</script>
 
−
           
 
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 +
  
  
 
<div class="container" style="height:450px; width:100%; position: relative;">
 
<div class="container" style="height:450px; width:100%; position: relative;">
−
<div id="grad2" style=" width:100%; position: absolute; left: 0px; top: 0px;"><!--------fade------------>
+
 
−
</div>
+
 
  </div>
 
  </div>
  
  
 
         <div class="panel panel-red" id="panel3">
 
         <div class="panel panel-red" id="panel3">
−
             <div class="inner">
+
              
−
       <p style="text-align:center; color:white; font-size: 30px; margin-top:100px;">
+
        
−
Thanks to our Sponsors!!</p>
+
 
<!---------------------------pics---------------------------->
 
<!---------------------------pics---------------------------->
 
<p style="text-align: center; ">
 
<p style="text-align: center; ">
Line 316: Line 563:
 
<img src= "https://static.igem.org/mediawiki/2017/5/57/B.png"  height="20%" width="20%" style=" padding:50px;">
 
<img src= "https://static.igem.org/mediawiki/2017/5/57/B.png"  height="20%" width="20%" style=" padding:50px;">
 
</p>
 
</p>
−
             </div>
+
              
 
         </div>
 
         </div>
  
Line 360: Line 607:
  
 
.noBackground {
 
.noBackground {
 +
 
background-color: rgba(0,0,0,0);
 
background-color: rgba(0,0,0,0);
 
visibility: visible;
 
visibility: visible;
Line 371: Line 619:
  
 
.blackBackground {
 
.blackBackground {
−
background-color: rgba(193,211,93,0.7);
+
background-color: rgba(35,47,19,0.7);
 
visibility: visible;
 
visibility: visible;
 
width:100%;
 
width:100%;
−
text-color: red;
 
  
 
}
 
}
Line 381: Line 628:
 
z-index:100;
 
z-index:100;
 
padding-bottom:40px;
 
padding-bottom:40px;
−
 
+
color: red;
 
}
 
}
  
Line 407: Line 654:
 
height: 100%;
 
height: 100%;
 
margin-bottom:0px;
 
margin-bottom:0px;
−
background: black;
+
background: white;
 +
color: white;
 +
font-size: 40px;
 +
line-height: 40px;
 +
background-image: url("https://static.igem.org/mediawiki/2017/a/a5/Woodbackground.jpeg");
 +
height: 200%;
 
}
 
}
 
#panel3{
 
#panel3{
 
width:100%;
 
width:100%;
−
height: 500px;
+
height: 200px;
−
margin-bottom:-100px;
+
 
−
background: black;
+
background: rgba(35,47,19,0.9);
 +
bottom:-100px;
 
}
 
}
  

Latest revision as of 21:49, 11 October 2017

Dalhousie iGEM 2017
Welcome!
The goal of our project is to convert cellulose into glucose, which can be used for biofuel.
Let us show you how!

Softwood waste from the lumber industry contains cellulose, which can be turned into glucose and used to make biofuel. 01

We hypothesized that the porcupine microbiome must contain an enzyme that can break down cellulose, as bark is food. 02

We mined the porcupine’s microbiome to identify the enzyme that was able to break down wood. 03

We created a metagenomic library of the genes able to code this enzyme as well as novel enzymes. 04

We put these genes into E.coli to see if they could then digest cellulose down. 05

We put the E.coli into a bioreactor with cellulose to see if it gets broken down. In the future this can be combined with yeast to transform in finally into biofuel! 06