Difference between revisions of "Team:Dalhousie/test5"

 
(156 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
          <html>
+
<html>
 
<head>
 
<head>
−
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:400,700,900?action=raw&ctype=text/css">
+
<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--------------------------->
 
<style>
 
<style>
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="block-content t-block-teal l-block-spacing">
 
−
<div class="l-contained">
 
−
<header class="heading-group">
 
−
<h2>Timeline</h2>
 
−
<p class="subtitle">
 
−
What is this?
 
−
</p>
 
−
</header>
 
−
<ul class="timeline-list">
 
−
<li>
 
−
                  <div class="content">
 
−
<h3>A timeline?</h3>
 
−
 
−
<p>
 
−
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quam felis, rutrum nec enim non, sodales facilisis purus. Vestibulum viverra egestas ipsum eget commodo. Nullam aliquet lorem vitae nulla dictum vestibulum sed quis tellus. Sed diam diam, facilisis tincidunt volutpat nec, auctor quis magna. Proin sed nunc iaculis ipsum scelerisque tincidunt. Cras eleifend leo tellus, fermentum finibus tortor fringilla eu.
 
−
</p>
 
−
                </div>
 
−
</li>
 
−
<li>
 
−
                  <div class="content">
 
−
<h3>A railway map?</h3>
 
−
 
−
<p>
 
−
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quam felis, rutrum nec enim non, sodales facilisis purus. Vestibulum viverra egestas ipsum eget commodo. Nullam aliquet lorem vitae nulla dictum vestibulum sed quis tellus. Sed diam diam, facilisis tincidunt volutpat nec, auctor quis magna. Proin sed nunc iaculis ipsum scelerisque tincidunt. Cras eleifend leo tellus, fermentum finibus tortor fringilla eu.
 
−
</p>
 
−
                </div>
 
−
</li>
 
−
<li>
 
−
                  <div class="content">
 
−
<h3>Random dots?</h3>
 
−
 
−
 
−
<p>
 
−
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quam felis, rutrum nec enim non, sodales facilisis purus. Vestibulum viverra egestas ipsum eget commodo. Nullam aliquet lorem vitae nulla dictum vestibulum sed quis tellus. Sed diam diam, facilisis tincidunt volutpat nec, auctor quis magna. Proin sed nunc iaculis ipsum scelerisque tincidunt. Cras eleifend leo tellus, fermentum finibus tortor fringilla eu.
 
−
</p>
 
−
                </div>
 
−
</li>
 
−
 
  
−
+
<!-------------------navbar---------------------->
−
<li>
+
<div id="nav" class="noBackground" style="width:100%; z-index:100;" >
−
                  <div class="content">
+
            <div class="inner" >
−
<h3>Absolutely nothing.</h3>
+
<div id="navWrap">
−
+
    <nav >
−
+
<div class="container-fluid">
−
<p>
+
    <ul class="nav navbar-nav navbar-center">
−
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quam felis, rutrum nec enim non, sodales facilisis purus. Vestibulum viverra egestas ipsum eget commodo. Nullam aliquet lorem vitae nulla dictum vestibulum sed quis tellus. Sed diam diam, facilisis tincidunt volutpat nec, auctor quis magna. Proin sed nunc iaculis ipsum scelerisque tincidunt. Cras eleifend leo tellus, fermentum finibus tortor fringilla eu.
+
−
</p>
+
−
                </div>
+
−
</li>
+
−
</ul>
+
−
+
−
+
−
+
−
</div>
+
  
−
</section>
+
      <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>
 +
</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" />
 +
 
 +
 
 +
 
 +
<!--------------------------------fade title---------------------------->
 
<style>
 
<style>
  
−
$fontstack_heading: "Merriweather", sans-serif;
 
−
$fontstack_body: "Merriweather", sans-serif;
 
 
body {
 
body {
−
   font-size:100%;
+
   margin: 0;
−
   line-height:1.6;
+
   height: 10px;
 
}
 
}
−
.block-content {
+
 
−
   min-height:100vh;
+
.top {
 +
 
 +
   margin-top: 350px;
 +
  position: absolute;
 +
width:65%;
 +
  left:250px;
 +
  background-color: transparent;
 +
  height: 150px;
 +
  text-align: center;
 +
  font-family: 'Trebuchet MS';
 +
  font-size: 80px;
 +
  font-weight: 400;
 +
  color: white;
 +
line-height: 60px;
 
}
 
}
−
block-content p {
+
 
−
font-size:1.1em;
+
.title {
−
line-height:1.5;
+
  position: relative;
−
-webkit-font-smoothing:antialiased;
+
  top: 10%;
−
margin:0 auto 1em auto;
+
 
 +
  left: 0px;
 
}
 
}
−
.block-content h2 {
 
  
−
text-align:center;
+
</style>
−
margin:1em 0 0 0;
+
−
font-size:2.5em;
+
−
line-height:1;
+
−
letter-spacing:0.02em;
+
  
−
@media all and (min-width:40em) {
 
  
−
font-size: 4.75em;
+
<!---------------------------------------------------------------------------------this------------------------------------------------------------------------------------------->
 +
<script> $(window).scroll(function(){
 +
    $(".top").css("opacity", 1 - $(window).scrollTop() / 300);
 +
  });
 +
</script>
  
−
}
 
−
}
 
−
.subtitle {
 
  
−
font-family: $fontstack_heading;
+
            </div>
−
font-weight:300;
+
        </div>
−
text-transform:uppercase;
+
−
text-align:center;
+
−
font-size:1em;
+
−
margin:0.5em 0;
+
−
}
+
−
.heading-group {
+
−
margin:0 0 3em 0;
+
−
}
+
−
.content h3 {
+
−
font-size: 1.2em;
+
−
line-height:1.2;
+
−
letter-spacing:0.02em;
+
−
  color:#fff;
+
  
−
@media all and (min-width:40em) {
 
  
−
font-size: 2.5em;
 
  
−
}
 
−
}
 
  
 +
        <div class="panel" id="panel2">
 +
<div style=" border: 1px solid #000; margin: 50px; padding: 30px; background-color: rgba(35,47,19,1);">
  
−
h1, h2, h3 {
+
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">
  
−
font-family: $fontstack_heading;
 
−
font-weight:900;
 
  
−
}
+
  <!-- Vertical Timeline -->
−
p {
+
  <section id="conference-timeline">
−
font-family: $fontstack_body;
+
 
−
line-height:1.5;
+
    <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>
  
−
.l-block-spacing {
+
        <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 -->
−
min-height:80vh;
+
      <div class="timeline-article">
−
padding:2em 0 4em 0;
+
        <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;
 
}
 
}
  
−
.l-contained {
+
/*===== 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;
  
−
max-width:1000px;
+
}
−
margin-left:auto;
+
.timeline-article .content-left:before,
−
margin-right:auto;
+
.timeline-article .content-right:before{
−
+
  position: absolute;
−
padding-left:1em;
+
  top: 20px;
−
padding-right:1em;
+
  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;
 +
}
  
−
@media all and (min-width:40em) {
 
  
−
padding-left:2em;
 
−
padding-right:2em;
 
  
  
−
}
+
 
 +
.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-list {
+
.timeline-article .meta-date .date,
 +
.timeline-article .meta-date .month {
 +
  display: block;
 +
  text-align: center;
 +
  font-weight: 900;
  
−
//border-left: 5px solid #ccc;
 
−
padding-bottom: 1em;
 
−
position: relative;
 
−
max-width:700px;
 
−
margin:0 auto;
 
−
 
−
  &:before {
 
−
content: "";
 
−
    border-left: 5px solid #CCC;
 
−
    left: -0.25em;
 
−
    top: 2em;
 
−
    height: 100%;
 
−
    position: absolute;
 
−
    bottom: 0;
 
−
    top: 0;
 
−
    transform-origin:0 0;
 
−
    animation:scaleVertical 3s 1s ease both 1;
 
−
}
 
−
 
−
&:after {
 
−
content: "";
 
−
    clear:both;
 
−
   
 
−
position: absolute;
 
−
bottom: 0px;
 
−
left: -1em;
 
−
width: 20px;
 
−
height: 20px;
 
−
border-radius: 50%;
 
−
background: none repeat scroll 0% 0% #DDD;
 
−
border: 5px solid #DDD;
 
−
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
 
−
    animation:revealScaleUp 0.75s 2.82s ease both 1;
 
−
}
 
 
}
 
}
 +
.timeline-article .meta-date .date {
 +
  font-size: 30px;
 +
  line-height: 40px;
  
−
.t-block-teal {
 
−
background:#02aa9d;
 
 
}
 
}
−
.t-block-teal h2 {
+
.timeline-article .meta-date .month {
−
color:#fff;
+
  font-size: 18px;
 +
  line-height: 10px;
 
}
 
}
−
.t-block-teal h3 {
+
/*===== // Vertical Timeline =====*/
−
color:#034944;
+
 
 +
/*===== 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;
 +
  }
 
}
 
}
−
.t-block-teal p {
+
@media only screen and (max-width: 400px) {
−
color:#034944;
+
  .timeline-article p {
 +
    margin: 0;
 +
  }
 +
  .timeline-article p span.article-number {
 +
    display: none;
 +
  }
 +
 
 
}
 
}
−
//list animation
+
/*===== // Resonsive Vertical Timeline =====*/
−
//scale in the circle, follwoed by the list item
+
</style>
−
//the border must also animate in.
+
−
.timeline-list li {
+
  
−
margin:0 0 3em 0;
+
            </div>
−
padding:0 2em 0em 2em;
+
        </div>
−
    position: relative;
+
  
 +
 +
 +
<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-list li:before {
 
  
−
content: "";
+
body {
−
position: absolute;
+
height: 100%;
−
top: 0px;
+
−
left: -1.45em;
+
−
width: 30px;
+
−
height: 30px;
+
−
border-radius: 50%;
+
−
background: none repeat scroll 0% 0% #02aa9d;
+
−
border: 5px solid #fff;
+
−
  animation:revealScaleUp 0.75s 0s ease both 1;
+
 
}
 
}
−
.timeline-list {
+
 
−
 
+
.panel {
−
  animation:reveal 2s 0 ease both 1;
+
width: 100%;
−
}
+
height: 100%;
−
.timeline-list li .content {
+
background: black;
−
  animation:revealFromLeft 0.5s 0s ease both 1;
+
color: #fff;
 +
padding-left: 5%;
 +
padding-right: 5%;
 +
text-align: center;
 
}
 
}
  
Line 253: Line 590:
  
  
−
.timeline-list li:nth-child(1):before {
+
 
−
  animation-delay:0.85s;
+
.panel.panel-red {
 +
background: black;
 +
 
 
}
 
}
−
.timeline-list li:nth-child(1) .content {
+
#nav {
−
  animation-delay:1.05s;
+
position: fixed;
 +
top: 0;
 +
left: 0;
 +
width: 96%;
 +
padding: 2%;
 +
z-index: 100;
 +
color: white;
 +
height: 80px;
 
}
 
}
−
.timeline-list li:nth-child(2):before {
+
 
−
  animation-delay:1.2s;
+
.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;
 
}
 
}
−
.timeline-list li:nth-child(2) .content {
+
 
−
  animation-delay:1.5s;
+
.blackBackground {
 +
background-color: rgba(35,47,19,0.7);
 +
visibility: visible;
 +
width:100%;
 +
 
 
}
 
}
−
.timeline-list li:nth-child(3):before {
+
 
−
  animation-delay:1.8s;
+
#nav .inner {
 +
z-index:100;
 +
padding-bottom:40px;
 +
color: red;
 
}
 
}
−
.timeline-list li:nth-child(3) .content {
+
 
−
  animation-delay:2.1s;
+
#nav ul {
 +
list-style: none;
 +
margin: 0;
 +
padding: 0;
 
}
 
}
−
.timeline-list li:nth-child(4):before {
+
 
−
  animation-delay:2s;
+
 
 +
 
 +
#inner{
 +
z-index:101;
 +
 
 
}
 
}
−
.timeline-list li:nth-child(4) .content {
+
 
−
  animation-delay:2.3s;
+
#panel1{
 +
background: transparent;
 +
height: 850px;
 +
width:100%;
 +
z-index:100;
 
}
 
}
−
@keyframes revealFromLeft {
+
#panel2{
−
  0% {
+
width:100%;
−
    transform:translateX(-1em);
+
height: 100%;
−
    opacity:0;
+
margin-bottom:0px;
−
  }
+
background: white;
−
  100% {
+
color: white;
−
    opacity:1;
+
font-size: 40px;
−
    transform:translateX(0);
+
line-height: 40px;
−
  }
+
background-image: url("https://static.igem.org/mediawiki/2017/a/a5/Woodbackground.jpeg");
 +
height: 200%;
 
}
 
}
−
@keyframes reveal {
+
#panel3{
−
  0% {
+
width:100%;
−
    opacity:0;
+
height: 200px;
−
  }
+
 
−
  100% {
+
background: rgba(35,47,19,0.9);
−
    opacity:1;
+
bottom:-100px;
−
  }
+
 
}
 
}
−
@keyframes scaleVertical {
+
 
−
  0% {
+
 
−
    transform:scaleY(0);
+
 
−
   
+
 
−
  }
+
</style>
−
  100% {
+
<script>
−
    transform:scaleY(1);
+
$( function() {
−
  }
+
//caches a jQuery object containing the header element
−
}
+
var header = $('.noBackground');
−
@keyframes revealScaleUp {
+
$(window).scroll(function() {
−
  0% {
+
var scroll = $(window).scrollTop();
−
    opacity:0;
+
 
−
    transform:scale(0.5);
+
if (scroll >= 100) {
−
  }
+
header.addClass('blackBackground');
−
 
+
} else {
−
 
+
header.removeClass('blackBackground');
−
 
+
                     
−
  50% {
+
}
−
    opacity:1;
+
});
−
    transform:scale(1.3);
+
});
−
   
+
</script>
−
  }
+
 
−
  100% {
+
−
    opacity:1;
+
−
    transform:scale(1);
+
−
   
+
−
  }
+
−
}</style>
+
 
</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