Difference between revisions of "Team:Dalhousie/test5"

 
(161 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-->
 +
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 +
  <link  rel="stylesheet" href="https://2017.igem.org/Team:Dalhousie/libraries/css/Bootstrap?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" />
 +
 +
<!--------------------oldnavbar--------------->
 +
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 +
  
 
<!-------------------------------------need this--------------------------->
 
<!-------------------------------------need this--------------------------->
Line 7: 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 14: Line 39:
 
            
 
            
 
             }
 
             }
 +
.navbar-default .navbar-nav>.active>a, .nav > li > a:hover, .nav > li > a:focus {
 +
  background-color: #C1D35D;
 +
  text-decoration: none;
 +
}
 
</style>
 
</style>
  
 
</head>
 
</head>
 +
 
<body>
 
<body>
−
  <section class="intro">
+
 
−
  <div class="container">
+
 
−
     <h1>Vertical Timeline &darr;</h1>
+
<!-------------------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>
 +
 
 +
<li class="dropdown" >
 +
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Project
 +
        </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>   
 +
 
 +
 
 +
<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>
 +
 
 +
<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>
 +
 
 +
<li class="dropdown">
 +
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Lab
 +
        </a>
 +
        <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>
 
   </div>
−
</section>
+
</nav>
 +
</div>
 +
            </div>
 +
        </div>
  
−
<section class="timeline">
+
 
−
  <ul>
+
 
−
    <li>
+
        <div class="panel" id="panel1" >
−
      <div>
+
 
−
        <time>1934</time> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
+
            <div class="inner" >
−
      </div>
+
<div class="top" ><div class="title" >Dalhousie iGEM 2017</div></div>
−
    </li>
+
 
−
    <li>
+
 
−
      <div>
+
 
−
        <time>1937</time> Proin quam velit, efficitur vel neque vitae, rhoncus commodo mi. Suspendisse finibus mauris et bibendum molestie. Aenean ex augue, varius et pulvinar in, pretium non nisi.
+
<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">
−
      </div>
+
         <source src="https://static.igem.org/mediawiki/2017/6/68/Thisfinal.mp4" type="video/mp4" />
−
    </li>
+
 
−
    <li>
+
 
−
      <div>
+
 
−
        <time>1940</time> Proin iaculis, nibh eget efficitur varius, libero tellus porta dolor, at pulvinar tortor ex eget ligula. Integer eu dapibus arcu, sit amet sollicitudin eros.
+
<!--------------------------------fade title---------------------------->
−
      </div>
+
−
    </li>
+
−
    <li>
+
−
      <div>
+
−
        <time>1943</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
+
−
      </div>
+
−
    </li>
+
−
    <li>
+
−
      <div>
+
−
         <time>1946</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
+
−
      </div>
+
−
    </li>
+
−
    <li>
+
−
      <div>
+
−
        <time>1956</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
+
−
      </div>
+
−
    </li>
+
−
    <li>
+
−
      <div>
+
−
        <time>1957</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
+
−
      </div>
+
−
    </li>
+
−
    <li>
+
−
      <div>
+
−
        <time>1967</time> Aenean condimentum odio a bibendum rhoncus. Ut mauris felis, volutpat eget porta faucibus, euismod quis ante.
+
−
      </div>
+
−
    </li>
+
−
    <li>
+
−
      <div>
+
−
        <time>1977</time> Vestibulum porttitor lorem sed pharetra dignissim. Nulla maximus, dui a tristique iaculis, quam dolor convallis enim, non dignissim ligula ipsum a turpis.
+
−
      </div>
+
−
    </li>
+
−
    <li>
+
−
      <div>
+
−
        <time>1985</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
+
−
      </div>
+
−
    </li>
+
−
    <li>
+
−
      <div>
+
−
        <time>2000</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
+
−
      </div>
+
−
    </li>
+
−
    <li>
+
−
      <div>
+
−
        <time>2005</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
+
−
      </div>
+
−
    </li>
+
−
  </ul>
+
−
</section>
+
 
<style>
 
<style>
−
*,
 
−
*::before,
 
−
*::after {
 
−
  margin: 0;
 
−
  padding: 0;
 
−
  box-sizing: border-box;
 
−
}
 
  
 
body {
 
body {
−
   font: normal 16px/1.5 "Helvetica Neue", sans-serif;
+
   margin: 0;
−
   background: #456990;
+
   height: 10px;
−
  color: #fff;
+
−
  overflow-x: hidden;
+
−
  padding-bottom: 50px;
+
−
}  /* INTRO SECTION
+
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
−
 
+
−
.intro {
+
−
  background: #F45B69;
+
−
  padding: 100px 0;
+
 
}
 
}
  
−
.container {
+
.top {
−
   width: 90%;
+
 
−
   max-width: 1200px;
+
   margin-top: 350px;
−
   margin: 0 auto;
+
  position: absolute;
 +
width:65%;
 +
   left:250px;
 +
  background-color: transparent;
 +
   height: 150px;
 
   text-align: center;
 
   text-align: center;
 +
  font-family: 'Trebuchet MS';
 +
  font-size: 80px;
 +
  font-weight: 400;
 +
  color: white;
 +
line-height: 60px;
 
}
 
}
  
−
h1 {
+
.title {
−
   font-size: 2.5rem;
+
   position: relative;
 +
  top: 10%;
 +
 
 +
  left: 0px;
 
}
 
}
  
 +
</style>
  
−
/* TIMELINE
 
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
 
  
−
.timeline ul {
+
<!---------------------------------------------------------------------------------this------------------------------------------------------------------------------------------->
−
   background: #456990;
+
<script> $(window).scroll(function(){
−
   padding: 50px 0;
+
    $(".top").css("opacity", 1 - $(window).scrollTop() / 300);
 +
  });
 +
</script>
 +
 
 +
 
 +
            </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 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>
 +
body {
 +
   background: #e6e6e6;
 +
   font-family: "Roboto", sans-serif;
 +
  font-weight: 400;
 
}
 
}
  
−
.timeline ul li {
+
/*===== Vertical Timeline =====*/
−
  list-style-type: none;
+
#conference-timeline {
 
   position: relative;
 
   position: relative;
−
   width: 6px;
+
   max-width: 920px;
 +
  width: 100%;
 
   margin: 0 auto;
 
   margin: 0 auto;
−
  padding-top: 50px;
 
−
  background: #fff;
 
 
}
 
}
−
 
+
#conference-timeline .timeline-start,
−
.timeline ul li::after {
+
#conference-timeline .timeline-end {
−
   content: '';
+
  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;
 
   position: absolute;
 +
  width: 3px;
 +
  height: 100%;
 +
  top: 0;
 
   left: 50%;
 
   left: 50%;
−
   bottom: 0;
+
   margin-left: -2px;
−
  transform: translateX(-50%);
+
   background: #232F13;
−
   width: 30px;
+
   z-index: -1;
−
   height: 30px;
+
−
  border-radius: 50%;
+
−
  background: inherit;
+
 
}
 
}
−
 
+
#conference-timeline .conference-timeline-content {
−
.timeline ul li div {
+
  padding-top: 67px;
 +
  padding-bottom: 67px;
 +
}
 +
.timeline-article {
 +
  width: 100%;
 +
  height: 100%;
 
   position: relative;
 
   position: relative;
−
   bottom: 0;
+
   overflow: hidden;
−
   width: 400px;
+
   margin: 20px 0;
−
  padding: 15px;
+
−
  background: #F45B69;
+
 
}
 
}
−
 
+
.timeline-article .content-left-container,
−
.timeline ul li div::before {
+
.timeline-article .content-right-container {
−
   content: '';
+
  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;
 
   position: absolute;
−
   bottom: 7px;
+
   font-weight: 300;
−
   width: 0;
+
   font-size: 44px;
−
   height: 0;
+
   top: 10px;
−
   border-style: solid;
+
   left: -60px;
 +
  color: white;
 
}
 
}
 +
.timeline-article .content-left-container {
 +
  float: left;
 +
}
 +
.timeline-article .content-right-container {
 +
  float: right;
  
−
.timeline ul li:nth-child(odd) div {
+
}
−
   left: 45px;
+
.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 ul li:nth-child(odd) div::before {
+
 
−
   left: -15px;
+
 
−
   border-width: 8px 16px 8px 0;
+
 
−
   border-color: transparent #F45B69 transparent transparent;
+
 
 +
.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 ul li:nth-child(even) div {
 
−
  left: -439px;
 
 
}
 
}
 +
.timeline-article .meta-date .date {
 +
  font-size: 30px;
 +
  line-height: 40px;
  
−
.timeline ul li:nth-child(even) div::before {
 
−
  right: -15px;
 
−
  border-width: 8px 0 8px 16px;
 
−
  border-color: transparent transparent transparent #F45B69;
 
 
}
 
}
 +
.timeline-article .meta-date .month {
 +
  font-size: 18px;
 +
  line-height: 10px;
 +
}
 +
/*===== // Vertical Timeline =====*/
  
−
time {
+
/*===== Resonsive Vertical Timeline =====*/
−
   display: block;
+
@media only screen and (max-width: 830px) {
−
   font-size: 1.2rem;
+
   #conference-timeline .timeline-start,
−
   font-weight: bold;
+
  #conference-timeline .timeline-end {
−
   margin-bottom: 8px;
+
    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>
  
 +
            </div>
 +
        </div>
  
−
/* EFFECTS
 
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
 
  
−
.timeline ul li::after {
+
 
−
  transition: background .5s ease-in-out;
+
<div class="container" style="height:450px; width:100%; position: relative;">
 +
 
 +
</div>
 +
 
 +
 
 +
        <div class="panel panel-red" id="panel3">
 +
           
 +
     
 +
<!---------------------------pics---------------------------->
 +
<p style="text-align: center; ">
 +
<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>
 +
html {
 +
height: 100%;
 +
min-height: 100%;
 
}
 
}
  
−
.timeline ul li.in-view::after {
+
body {
−
  background: #F45B69;
+
height: 100%;
 
}
 
}
  
−
.timeline ul li div {
+
.panel {
−
  visibility: hidden;
+
width: 100%;
−
  opacity: 0;
+
height: 100%;
−
  transition: all .5s ease-in-out;
+
background: black;
 +
color: #fff;
 +
padding-left: 5%;
 +
padding-right: 5%;
 +
text-align: center;
 
}
 
}
  
−
.timeline ul li:nth-child(odd) div {
+
 
−
  transform: translate3d(200px, 0, 0);
+
 
 +
 
 +
 
 +
.panel.panel-red {
 +
background: black;
 +
 
 +
}
 +
#nav {
 +
position: fixed;
 +
top: 0;
 +
left: 0;
 +
width: 96%;
 +
padding: 2%;
 +
z-index: 100;
 +
color: white;
 +
height: 80px;
 
}
 
}
  
−
.timeline ul li:nth-child(even) div {
+
.noBackground {
−
  transform: translate3d(-200px, 0, 0);
+
 
 +
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;
 
}
 
}
  
−
.timeline ul li.in-view div {
+
.blackBackground {
−
  transform: none;
+
background-color: rgba(35,47,19,0.7);
−
  visibility: visible;
+
visibility: visible;
−
  opacity: 1;
+
width:100%;
 +
 
 
}
 
}
  
 +
#nav .inner {
 +
z-index:100;
 +
padding-bottom:40px;
 +
color: red;
 +
}
  
−
/* GENERAL MEDIA QUERIES
+
#nav ul {
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
list-style: none;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 
 +
 
 +
 
 +
#inner{
 +
z-index:101;
  
−
@media screen and (max-width: 900px) {
 
−
  .timeline ul li div {
 
−
    width: 250px;
 
−
  }
 
−
  .timeline ul li:nth-child(even) div {
 
−
    left: -289px;
 
−
    /*250+45-6*/
 
−
  }
 
 
}
 
}
  
−
@media screen and (max-width: 600px) {
+
#panel1{
−
  .timeline ul li {
+
background: transparent;
−
    margin-left: 20px;
+
height: 850px;
−
  }
+
width:100%;
−
  .timeline ul li div {
+
z-index:100;
−
    width: calc(100vw - 91px);
+
}
−
  }
+
#panel2{
−
  .timeline ul li:nth-child(even) div {
+
width:100%;
−
    left: 45px;
+
height: 100%;
−
  }
+
margin-bottom:0px;
−
  .timeline ul li:nth-child(even) div::before {
+
background: white;
−
    left: -15px;
+
color: white;
−
    border-width: 8px 16px 8px 0;
+
font-size: 40px;
−
    border-color: transparent #F45B69 transparent transparent;
+
line-height: 40px;
−
  }
+
background-image: url("https://static.igem.org/mediawiki/2017/a/a5/Woodbackground.jpeg");
−
}</style>
+
height: 200%;
 +
}
 +
#panel3{
 +
width:100%;
 +
height: 200px;
  
−
<script>
+
background: rgba(35,47,19,0.9);
−
(function() {
+
bottom:-100px;
 +
}
  
−
  'use strict';
 
  
−
  // define variables
 
−
  var items = document.querySelectorAll(".timeline li");
 
  
−
  // check if an element is in viewport
 
−
  // http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
 
−
  function isElementInViewport(el) {
 
−
    var rect = el.getBoundingClientRect();
 
−
    return (
 
−
      rect.top >= 0 &&
 
−
      rect.left >= 0 &&
 
−
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
 
−
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
 
−
    );
 
−
  }
 
  
−
  function callbackFunc() {
+
</style>
−
    for (var i = 0; i < items.length; i++) {
+
<script>
−
      if (isElementInViewport(items[i])) {
+
$( function() {
−
        items[i].classList.add("in-view");
+
//caches a jQuery object containing the header element
−
      }
+
var header = $('.noBackground');
−
    }
+
$(window).scroll(function() {
−
  }
+
var scroll = $(window).scrollTop();
  
−
  // listen for events
+
if (scroll >= 100) {
−
  window.addEventListener("load", callbackFunc);
+
header.addClass('blackBackground');
−
  window.addEventListener("resize", callbackFunc);
+
} else {
−
  window.addEventListener("scroll", callbackFunc);
+
header.removeClass('blackBackground');
 +
                     
 +
}
 +
});
 +
});
 +
</script>
  
−
})();</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