Difference between revisions of "Team:Dalhousie/test5"

 
(208 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
 +
<style>
 +
#bg-video {
 +
        position: fixed;
 +
        top: 0;
 +
        right: 0;
 +
        bottom: 0px;
 +
        left: 0;
 +
        overflow: hidden;
 +
        z-index: -100;
 +
        width:100%;
  
 +
}
  
  
 +
</style>
  
 
<!--glyphicons-->
 
<!--glyphicons-->
Line 10: Line 22:
 
   <link rel="stylesheet" href="https://2017.igem.org/Team:Dalhousie/libraries/css/fonts?action=raw&ctype=text/css" />
 
   <link rel="stylesheet" href="https://2017.igem.org/Team:Dalhousie/libraries/css/fonts?action=raw&ctype=text/css" />
 
<link rel="stylesheet" href="https://2017.igem.org/Team:Dalhousie/css3?action=raw&ctype=text/css" />
 
<link rel="stylesheet" href="https://2017.igem.org/Team:Dalhousie/css3?action=raw&ctype=text/css" />
 +
 +
<!--------------------oldnavbar--------------->
 +
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 +
  
 
<!-------------------------------------need this--------------------------->
 
<!-------------------------------------need this--------------------------->
Line 15: Line 31:
 
#home_logo, #sideMenu { display:none; }
 
#home_logo, #sideMenu { display:none; }
 
#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: #000000;}
+
#content { width:100%; padding:0px;  margin-top:-20px; margin-left:0px; background-color: white;}
−
body {background-color:black; }
+
body {background-color:white; height:100%; }
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 10px;  background-color: transparent;}
+
#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;
 
             position: relative;
 
             position: relative;
−
            z-index:-101;
+
         
 
             }
 
             }
−
#bg-video {
+
.navbar-default .navbar-nav>.active>a, .nav > li > a:hover, .nav > li > a:focus {
−
        position: fixed;
+
  background-color: #C1D35D;
−
        top: 0;
+
  text-decoration: none;
−
        right: 0;
+
−
        bottom: -100px;
+
−
        left: 0;
+
−
        overflow: hidden;
+
−
        z-index: -100;
+
−
        width:100%;
+
−
}
+
−
  </style>
+
−
 
+
−
<!------------fadedivs-------------------------->
+
−
<style>
+
−
#grad1 {
+
−
    height: 833px;
+
−
    background: transparent; /* For browsers that do not support gradients */
+
−
    background: -webkit-linear-gradient(transparent 90%, black ); /* For Safari 5.1 to 6.0 */
+
−
    background: -o-linear-gradient(transparent 90%, black ); /* For Opera 11.1 to 12.0 */
+
−
    background: -moz-linear-gradient(transparent 90%, black ); /* For Firefox 3.6 to 15 */
+
−
    background: linear-gradient(transparent 90%, black ); /* 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(black, transparent 80%, #FCEBD9); /* For Safari 5.1 to 6.0 */
+
−
    background: -o-linear-gradient(black, transparent 80%, #FCEBD9); /* For Opera 11.1 to 12.0 */
+
−
    background: -moz-linear-gradient(black, transparent 80%, #FCEBD9); /* For Firefox 3.6 to 15 */
+
−
    background: linear-gradient(black, transparent 80%, #FCEBD9); /* Standard syntax (must be last) */
+
 
}
 
}
 
</style>
 
</style>
  
 +
</head>
  
 +
<body>
  
  
 +
<!-------------------navbar---------------------->
 +
<div id="nav" class="noBackground" style="width:100%; z-index:100;" >
 +
            <div class="inner" >
 +
<div id="navWrap">
 +
    <nav >
 +
<div class="container-fluid">
 +
    <ul class="nav navbar-nav navbar-center">
  
 +
      <li class="active" ><a href="https://2017.igem.org/Team:Dalhousie/test3" style=" color: white;">Home</a></li>
  
−
</head>
+
<li class="dropdown" >
−
   
+
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Project
−
<body>
+
        </a>
 +
        <ul class="dropdown-menu" style=" background-color: rgba(193,211,93,0.8);">
 +
          <li><a href="https://2017.igem.org/Team:Dalhousie/Description" >Description</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>
 +
        </ul>
 +
      </li>
  
 +
<li class="dropdown">
 +
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Results
 +
        </a>
 +
        <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/Results">Results</a></li>
 +
        </ul>
 +
</li>   
  
−
<!--------------------------------------------------------------video------------------------------------------------------------------------------>
+
 
 +
<li class="dropdown">
 +
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Team
 +
        </a>
 +
        <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/Collaborations">Collaborations</a></li>
 +
          <li><a href="https://2017.igem.org/Team:Dalhousie/Attributions">Attributions</a></li>
 +
          <li><a href="https://2017.igem.org/Team:Dalhousie/Sponsors">Sponsors</a></li>
 +
        </ul>
 +
</li>
  
−
<div class="jumbotron text-center " style= "background-color: transparent;">
+
<li class="dropdown">
 +
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Human Practices
 +
        </a>
 +
        <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/HP/Silver_Integrated">Silver HP</a></li>
 +
          <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Gold_Integrated">Integrated and Gold</a></li>
 +
          <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Public_Engagement">Public Engagement</a></li>
 +
          <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Part_Collection">Part Collections</a></li>
 +
        <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Science_Literacy">Science Literacy</a></li>
 +
        <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Ethics">Ethics</a></li>
 +
<li><a href="https://2017.igem.org/Team:Dalhousie/Demonstrate">Demonstrate</a></li>
 +
        </ul>
 +
      </li>
  
−
    <div id="grad1"><!--------fade------------>
+
<li class="dropdown">
−
<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">
+
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Lab
−
        <source src="https://static.igem.org/mediawiki/2017/5/53/Final5.mp4" type="video/mp4" />
+
        </a>
−
    </video>
+
        <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/Basic_Parts">Basic Parts</a></li>
 +
          <li><a href="https://2017.igem.org/Team:Dalhousie/Composite_Parts">Composite Parts</a></li>
 +
          <li><a href="https://2017.igem.org/Team:Dalhousie/Part_Collection">Part Collections</a></li>
 +
          <li><a href="https://2017.igem.org/Team:Dalhousie/Safety" >Safety</a></li>
 +
            <li><a href="https://2017.igem.org/Team:Dalhousie/Experiments">Experiments</a></li>
 +
          <li><a href="https://2017.igem.org/Team:Dalhousie/Notebook">Notebook</a></li>
 +
<li><a href="https://2017.igem.org/Team:Dalhousie/Contribution">Contribution</a></li>
 +
          <li><a href="https://2017.igem.org/Team:Dalhousie/Model">Model</a></li>
 +
        </ul>
 +
      </li>
  
 +
     
 +
 +
 +
<li class="dropdown">
 +
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Awards
 +
        </a>
 +
        <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/Entrepreneurship">Entrepreneurship</a></li>
 +
        </ul>
 +
      </li>
 +
 +
 +
    </ul>
 +
 +
 +
 +
<!--------------------------contact us------------------------------------------>
 +
<ul class="nav navbar-nav navbar-right">
 +
    <div class="navbar-header">
 +
      <a class="navbar-brand" style=" color: white;">Contact us today </a>
 +
    </div>
 +
<li>
 +
                        <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>
 +
                        <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>
 +
                        <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>
 +
 +
    </ul>
 +
  </div>
 +
</nav>
 +
</div>
 +
            </div>
 +
        </div>
 +
 +
 +
 +
        <div class="panel" id="panel1" >
 +
 +
            <div class="inner" >
 +
<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">
 +
        <source src="https://static.igem.org/mediawiki/2017/6/68/Thisfinal.mp4" type="video/mp4" />
  
  
−
<div id="page-wrap"style="padding-top:400px;  ">
 
  
 
<!--------------------------------fade title---------------------------->
 
<!--------------------------------fade title---------------------------->
−
<style>body {
+
<style>
 +
 
 +
body {
 
   margin: 0;
 
   margin: 0;
 
   height: 10px;
 
   height: 10px;
Line 90: Line 184:
  
 
.top {
 
.top {
−
   margin: 100;
+
 
−
   position: relative;
+
   margin-top: 350px;
−
  width:55%;
+
   position: absolute;
−
   left:300px;
+
  width:65%;
−
   background-color: rgba(0,0,0,0.4);
+
   left:250px;
 +
   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: #fff;
+
   color: white;
 
line-height: 60px;
 
line-height: 60px;
 
}
 
}
Line 114: Line 209:
  
  
 +
<!---------------------------------------------------------------------------------this------------------------------------------------------------------------------------------->
 
<script> $(window).scroll(function(){
 
<script> $(window).scroll(function(){
−
     $(".top").css("opacity", 1 - $(window).scrollTop() / 150);
+
     $(".top").css("opacity", 1 - $(window).scrollTop() / 300);
−
   });</script>
+
   });
 +
</script>
  
−
<div class="top"><div class="title">Welcome to Dalhousie's 2017 iGEM wiki</div></div>
 
  
 +
            </div>
 +
        </div>
  
  
−
 
−
  </div>
 
−
 
−
 
−
</div>
 
  
  
 +
        <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>
 +
            <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">
 +
         
 +
       
 +
        </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 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>
 +
          </div>
 +
       
 +
        </div>
 +
        <div class="meta-date" style="background-color: white;">
 +
  <img src= "https://static.igem.org/mediawiki/2017/6/67/Porcupiner.png" height="60%" width="75%"style="margin-top:15px;" >
 +
        </div>
 +
      </div>
 +
      <!-- // Article -->
 +
     
  
 +
      <!-- Article -->
 +
      <div class="timeline-article">
 +
        <div class="content-left-container">
 +
          <div class="content-left">
 +
            <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>
−
<div class="container" id="projectdescript" style="padding-bottom:50px; padding-top:50px; padding-right:100px; padding-left:150px; width:100%;  height:1700px; background-color: black; ">
+
−
 
+
−
 
+
−
<!-------------------------------------------------------------NAVBARSTICKY----------------------------------------------------------------------------->
+
−
 
+
−
<style>
+
 
body {
 
body {
−
    height:1600px;
+
  background: #e6e6e6;
−
    margin:0;
+
  font-family: "Roboto", sans-serif;
 +
  font-weight: 400;
 
}
 
}
−
#navWrap {
 
−
position: absolute;
 
−
    height:70px
 
−
  z-index:100;
 
−
  left:0px;
 
−
width:100%;
 
  
 +
/*===== Vertical Timeline =====*/
 +
#conference-timeline {
 +
  position: relative;
 +
  max-width: 920px;
 +
  width: 100%;
 +
  margin: 0 auto;
 
}
 
}
−
nav {
+
#conference-timeline .timeline-start,
−
    height: 70px;
+
#conference-timeline .timeline-end {
−
    background:black;
+
  display: table;
−
z-index:100;
+
  font-family: "Roboto", sans-serif;
−
width:100%;
+
  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;
 
}
 
}
−
.sticky {
+
#conference-timeline .conference-center-line {
−
    position: fixed;
+
  position: absolute;
−
    bottom:0;
+
  width: 3px;
−
width:100%;
+
  height: 100%;
−
z-index:100;
+
  top: 0;
 +
  left: 50%;
 +
  margin-left: -2px;
 +
  background: #232F13;
 +
  z-index: -1;
 
}
 
}
−
h1 {
+
#conference-timeline .conference-timeline-content {
−
    margin: 0;
+
  padding-top: 67px;
−
color: white;
+
  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;
 +
}
  
−
</style>
 
  
−
<script>
 
  
  
  
−
$(window).scroll(function(){
+
.timeline-article .meta-date {
−
var position = $(window).scrollTop();
+
  position: absolute;
−
  if (position>335)
+
  top: 10px;
−
      $('nav').addClass('sticky');
+
  left: 49%;
−
    else {
+
   width: 80px;
−
        $('nav').removeClass('sticky');
+
  height: 80px;
−
    }
+
  margin-left: -31px;
−
})
+
  color: #fff;
−
 
+
  border-radius: 100%;
−
 
+
  background:#232F13;
−
 
+
−
</script>
+
−
 
+
−
   <!------------------NAVBARSTICKY--------------------------------->
+
−
<div id="navWrap">
+
−
    <nav>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
          <!-------------------------------------------------------------------------------OLD Navbar -------------------------------------------------------------------------->
+
−
<style>
+
−
/* Dropdown Button */
+
−
.dropbtn {
+
−
    background-color: red;
+
−
    color: white;
+
−
    padding: 16px;
+
−
    font-size: 16px;
+
−
    border: none;
+
−
    cursor: pointer;
+
 
}
 
}
 +
.timeline-article .meta-date .date,
 +
.timeline-article .meta-date .month {
 +
  display: block;
 +
  text-align: center;
 +
  font-weight: 900;
  
−
/* Dropdown button on hover & focus */
 
−
.dropbtn:hover, .dropbtn:focus {
 
−
    background-color: #3e8e41;
 
 
}
 
}
 +
.timeline-article .meta-date .date {
 +
  font-size: 30px;
 +
  line-height: 40px;
  
−
/* The container <div> - needed to position the dropdown content */
 
−
.dropdown {
 
−
    position: relative;
 
−
    display: inline-block;
 
−
 
 
}
 
}
 +
.timeline-article .meta-date .month {
 +
  font-size: 18px;
 +
  line-height: 10px;
 +
}
 +
/*===== // Vertical Timeline =====*/
  
−
/* Dropdown Content (Hidden by DefaultCHANGED THIS CHANGED THIS) */
+
/*===== Resonsive Vertical Timeline =====*/
−
.dropdown-content {
+
@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;
 
     display: none;
−
 
+
  }
−
    background-color: #f9f9f9;
+
−
    min-width: 160px;
+
−
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
−
    z-index: 1;
+
−
bottom: 100%;
+
 
}
 
}
−
 
+
@media only screen and (max-width: 400px) {
−
/* Links inside the dropdown */
+
  .timeline-article p {
−
.dropdown-content a {
+
     margin: 0;
−
     color: black;
+
  }
−
    padding: 12px 16px;
+
  .timeline-article p span.article-number {
−
    text-decoration: none;
+
     display: none;
−
     display: block;
+
  }
−
position: relative;
+
 
 
}
 
}
−
 
+
/*===== // Resonsive Vertical Timeline =====*/
−
/* Change color of dropdown links on hover */
+
−
.dropdown-content a:hover {background-color: #f1f1f1}
+
−
 
+
−
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
+
−
.show {display:block;}
+
 
</style>
 
</style>
  
 +
            </div>
 +
        </div>
  
−
<script>
 
−
/* When the user clicks on the button,
 
−
toggle between hiding and showing the dropdown content */
 
  
−
function myFunction() {
 
−
    document.getElementById("myDropdown").classList.toggle("show");
 
−
}
 
  
−
// Close the dropdown menu if the user clicks outside of it
+
<div class="container" style="height:450px; width:100%; position: relative;">
−
window.onclick = function(event) {
+
−
  if (!event.target.matches('.dropbtn')) {
+
  
−
    var dropdowns = document.getElementsByClassName("dropdown-content");
+
</div>
−
    var i;
+
−
    for (i = 0; i < dropdowns.length; i++) {
+
−
      var openDropdown = dropdowns[i];
+
−
      if (openDropdown.classList.contains('show')) {
+
−
        openDropdown.classList.remove('show');
+
−
      }
+
−
    }
+
−
  }
+
−
}
+
−
</script>
+
  
−
    <div class="dropdown">
 
  
−
  <button onclick="myFunction()" class="dropbtn">THIS</button>
+
        <div class="panel panel-red" id="panel3">
−
  <div id="myDropdown" class="dropdown-content">
+
           
−
    <a href="#">Link 1</a>
+
     
−
    <a href="#">Link 2</a>
+
<!---------------------------pics---------------------------->
−
    <a href="#">Link 3</a>
+
<p style="text-align: center; ">
−
  </div>
+
<img src= "https://static.igem.org/mediawiki/2017/d/d3/Q.png" height="20%" width="20%" style=" padding:50px;">
 +
<img src= "https://static.igem.org/mediawiki/2017/8/82/S.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>
 +
           
 +
        </div>
  
  
−
   
+
<style>
−
  <button onclick="myFunction()" class="dropbtn">ANOTHER</button>
+
html {
−
  <div id="myDropdown" class="dropdown-content">
+
height: 100%;
−
    <a href="#">Link 1</a>
+
min-height: 100%;
−
    <a href="#">Link 2</a>
+
}
−
    <a href="#">Link 3</a>
+
−
  </div>
+
  
 +
body {
 +
height: 100%;
 +
}
  
−
 
+
.panel {
−
  <button onclick="myFunction()" class="dropbtn">OHYA</button>
+
width: 100%;
−
  <div id="myDropdown" class="dropdown-content">
+
height: 100%;
−
    <a href="#">Link 1</a>
+
background: black;
−
    <a href="#">Link 2</a>
+
color: #fff;
−
    <a href="#">Link 3</a>
+
padding-left: 5%;
−
  </div>
+
padding-right: 5%;
 +
text-align: center;
 +
}
  
−
</div>
 
−
       
 
  
  
  
−
    <!------------------------------------------------------------------------------- OLDNavbarEND -------------------------------------------------------------------------->
 
  
−
    </nav>
+
.panel.panel-red {
−
</div>
+
background: black;
  
 +
}
 +
#nav {
 +
position: fixed;
 +
top: 0;
 +
left: 0;
 +
width: 96%;
 +
padding: 2%;
 +
z-index: 100;
 +
color: white;
 +
height: 80px;
 +
}
  
−
<!-------------------------------------------------------------NAVBAR END----------------------------------------------------------------------------->
+
.noBackground {
  
 +
background-color: rgba(0,0,0,0);
 +
visibility: visible;
 +
width:100%;
 +
padding-right:0px;
 +
    -webkit-transition: all 1.0s ease;
 +
    -moz-transition: all 1.0s ease;
 +
    -o-transition: all 1.0s ease;
 +
    transition: all 1.0s ease;
 +
}
  
−
<!-------------------------------------------infographic----------------------------->
+
.blackBackground {
−
<p style="text-align:center; color:white;">
+
background-color: rgba(35,47,19,0.7);
−
<img src= "https://static.igem.org/mediawiki/2017/8/8b/Infograph2_1.jpg" align="center" height="85%" width="85%"></p>
+
visibility: visible;
 +
width:100%;
  
 +
}
  
 +
#nav .inner {
 +
z-index:100;
 +
padding-bottom:40px;
 +
color: red;
 +
}
  
−
</div>
+
#nav ul {
 +
list-style: none;
 +
margin: 0;
 +
padding: 0;
 +
}
  
  
  
 +
#inner{
 +
z-index:101;
  
 +
}
  
−
<div class="container" style="height:500px; width:100%; position: relative;">
+
#panel1{
−
<div id="grad2" style=" width:100%; position: absolute; left: 0px;"><!--------fade------------>
+
background: transparent;
−
</div>
+
height: 850px;
−
</div>
+
width:100%;
−
 
+
z-index:100;
−
 
+
}
−
 
+
#panel2{
−
 
+
width:100%;
−
 
+
height: 100%;
−
<div class="container"  style="padding-bottom:100px;  padding-top:50px; padding-right:100px; padding-left:100px;  width:100%; height:100%; background-color: #FCEBD9;">
+
margin-bottom:0px;
−
<p style="text-align:center; color:black; font-size: 50px;">
+
background: white;
−
Sponsor area</p>
+
color: white;
−
</div>
+
font-size: 40px;
−
 
+
line-height: 40px;
−
 
+
background-image: url("https://static.igem.org/mediawiki/2017/a/a5/Woodbackground.jpeg");
−
             
+
height: 200%;
−
 
+
}
−
 
+
#panel3{
 +
width:100%;
 +
height: 200px;
  
 +
background: rgba(35,47,19,0.9);
 +
bottom:-100px;
 +
}
  
  
  
  
 +
</style>
 +
<script>
 +
$( function() {
 +
//caches a jQuery object containing the header element
 +
var header = $('.noBackground');
 +
$(window).scroll(function() {
 +
var scroll = $(window).scrollTop();
  
 +
if (scroll >= 100) {
 +
header.addClass('blackBackground');
 +
} else {
 +
header.removeClass('blackBackground');
 +
                     
 +
}
 +
});
 +
});
 +
</script>
  
 
</body>
 
</body>
−
</html>
+
<html>

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