Difference between revisions of "Team:Dalhousie/test5"

 
(350 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<head></head>
+
<head>
−
 
+
 
<style>
 
<style>
−
html,
+
#bg-video {
−
body {
+
        position: fixed;
−
  height: 100%;
+
        top: 0;
−
  padding-top:50px;
+
        right: 0;
−
}
+
        bottom: 0px;
 +
        left: 0;
 +
        overflow: hidden;
 +
        z-index: -100;
 +
        width:100%;
  
−
.row {
 
−
  margin-left:0px;
 
−
  margin-right:0px;
 
 
}
 
}
  
−
/* Wrapper for page content to push down footer */
 
−
#wrap {
 
−
  min-height: 100%;
 
−
  height: auto !important;
 
−
  height: 100%;
 
−
  /* Negative indent footer by its height */
 
−
  margin: 0 auto -60px;
 
−
  /* Pad bottom by footer height */
 
−
  padding: 0 0 60px;
 
−
}
 
  
−
/* Set the fixed height of the footer here */
+
</style>
−
#footer {
+
−
  height: 60px;
+
−
  background-color: #f5f5f5;
+
−
  margin-top:50px;
+
−
  padding-top:20px;
+
−
  padding-bottom:20px;
+
−
}
+
  
−
header {
+
<!--glyphicons-->
−
  height:100%;
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
−
min-height:500px;
+
  <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" />
  
−
#wrap > .container {
+
<!--------------------oldnavbar--------------->
−
  padding: 60px 15px 0;
+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
−
}
+
−
.container .credit {
+
−
  margin: 20px 0;
+
−
}
+
  
−
#footer {
 
−
  background-color:#414141;
 
−
}
 
  
−
#footer a {
+
<!-------------------------------------need this--------------------------->
−
   color:#efefef;
+
<style>
 +
#home_logo, #sideMenu { display:none; }
 +
#sideMenu, #top_title, .patrollink  {display:none;}
 +
#content { width:100%; padding:0px;  margin-top:-20px; margin-left:0px; background-color: white;}
 +
body {background-color:white; height:100%; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px;  background-color: transparent; z-index:100;}
 +
        .jumbotron {
 +
            height: 850px;
 +
            position: relative;
 +
         
 +
            }
 +
.navbar-default .navbar-nav>.active>a, .nav > li > a:hover, .nav > li > a:focus {
 +
   background-color: #C1D35D;
 +
  text-decoration: none;
 
}
 
}
 +
</style>
  
−
#topNav {
+
</head>
−
z-index:-1;
+
−
}
+
  
−
#nav {
+
<body>
−
  width: 100%;
+
−
}
+
  
−
#nav.affix-top {
 
−
  position: absolute;
 
−
  top:0;
 
−
  left:0;
 
−
  z-index:10;
 
−
  height:54px;
 
−
  background-color:transparent;
 
−
  border:0;
 
−
}
 
  
−
#nav.affix {
+
<!-------------------navbar---------------------->
−
  position: fixed;
+
<div id="nav" class="noBackground" style="width:100%; z-index:100;" >
−
  top: 0;
+
            <div class="inner" >
−
  z-index:10;
+
<div id="navWrap">
−
  -webkit-transition: all .6s ease-in-out;
+
    <nav >
−
}
+
<div class="container-fluid">
 +
    <ul class="nav navbar-nav navbar-center">
  
−
#footer > .container {
+
      <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>   
  
−
@media (min-width: 767px) {
 
−
  .navbar-nav.nav-justified > li{
 
−
      float:none;
 
−
  }
 
−
}
 
 
    
 
    
−
.navbar-nav {
+
<li class="dropdown">
−
  margin: 1px 1px;  
+
        <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>
  
−
.navbar-toggle {
+
<li class="dropdown">
−
outline:0;
+
        <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>
  
−
.divider {
+
<li class="dropdown">
−
height:50px;
+
        <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>
  
−
.panel {
+
     
−
border-width:0;
+
−
}
+
  
−
@media (max-width: 768px) {
 
−
header {
 
−
 
−
}
 
−
}
 
  
−
.scroll-top {
+
<li class="dropdown">
−
  position:fixed;
+
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Awards
−
  bottom:0;
+
        </a>
−
  right:6%;
+
        <ul class="dropdown-menu" style=" background-color: rgba(193,211,93,0.8);">
−
  z-index:100;
+
          <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Applied_Design">Applied Design</a></li>
−
  background: #f2f3f2;
+
          <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Entrepreneurship">Entrepreneurship</a></li>
−
  font-size:24px;
+
        </ul>
−
  border-top-left-radius:3px;
+
      </li>
−
  border-top-right-radius:3px;
+
−
}
+
−
.scroll-top a:link,.scroll-top a:visited {
+
−
  color:#222;
+
−
}
+
−
+
−
section {
+
−
  color: #ffffff;
+
−
  min-height: 400px;
+
−
  height: auto !important;
+
−
  height: 100%;
+
−
  padding-top:100px;
+
−
}
+
−
</style>
+
  
  
−
<body>
+
    </ul>
  
−
<!-- Wrap all page content here -->
+
 
−
<div id="wrap">
+
 
−
 
+
<!--------------------------contact us------------------------------------------>
−
<header class="masthead">
+
<ul class="nav navbar-nav navbar-right">
−
<h1 class="text-center">Hello Bootstrap 3.</h1>
+
    <div class="navbar-header">
−
</header>
+
      <a class="navbar-brand" style=" color: white;">Contact us today </a>
−
   
+
−
<!-- Fly-in navbar -->
+
−
<div class="navbar navbar-inverse navbar-static-top" id="nav">
+
−
    <div class="container">
+
−
      <div class="navbar-header">
+
−
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+
−
          <span class="icon-bar"></span>
+
−
          <span class="icon-bar"></span>
+
−
          <span class="icon-bar"></span>
+
−
        </button>
+
−
      </div>
+
−
      <div class="collapse navbar-collapse">
+
−
        <ul class="nav navbar-nav">
+
−
          <li><a href="#">Home</a></li>
+
−
          <li><a href="#section2">Profile</a></li>
+
−
          <li><a href="#section3">Projects</a></li>
+
−
          <li><a href="#section4">Location</a></li>
+
−
          <li><a href="#section5">Contact</a></li>
+
−
        </ul>
+
−
      </div><!--/.nav-collapse -->
+
−
    </div><!--/.container -->
+
−
</div><!--/.navbar -->
+
−
 
+
−
<!-- Begin page content -->
+
−
<div class="divider" id="section1"></div>
+
−
 
+
−
<div class="container">
+
−
  <div class="col-sm-10 col-sm-offset-1">
+
−
    <div class="page-header text-center">
+
−
      <h1>Since 2013</h1>
+
 
     </div>
 
     </div>
−
   
+
<li>
−
    <p class="lead text-center">  
+
                        <a href="mailto:igemdalhousie@gmail.com" ><i class="fa fa-envelope-o fa-fw" style=" color: white;" ></i> <span class="network-name"></span></a>
−
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
                    </li>
−
    </p>  
+
<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>
−
    <hr>
+
                    </li>
−
   
+
                    <li>
−
    <div class="divider"></div>
+
                        <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>
 +
</nav>
 
</div>
 
</div>
−
   
+
            </div>
−
<div class="divider"></div>
+
        </div>
−
 
+
 
−
<section class="bg-1">
+
 
−
  <div class="col-sm-6 col-sm-offset-3 text-center"></div>
+
 
−
</section>
+
        <div class="panel" id="panel1" >
−
 
+
 
−
<div class="divider" id="section2"></div>
+
            <div class="inner" >
 +
<div class="top" ><div class="title" >Dalhousie iGEM 2017</div></div>
 +
 
 
    
 
    
−
<div class="row">
 
−
  <div class="col-sm-10 col-sm-offset-1">
 
−
      <h1>Profile</h1>
 
−
     
 
−
      <hr>
 
−
   
 
−
      <p>
 
−
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
 
−
        Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
 
−
        dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
 
−
        Aliquam in felis sit amet augue.
 
−
  </p>
 
−
     
 
−
      <hr>
 
−
     
 
−
      <div class="divider"></div>
 
−
     
 
−
  </div><!--/col-->
 
−
</div><!--/container-->
 
  
−
<div class="divider"></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" />
−
<section class="bg-3">
+
−
  <div class="col-sm-6 col-sm-offset-3 text-center"><h2>Clients &amp; Partners</h2></div>
+
−
</section>
+
−
 
+
−
<div class="divider" id="section3"></div>
+
−
 
+
−
<div class="bg-4">
+
−
  <div class="container">
+
−
<div class="row">
+
−
  <div class="col-sm-4 col-xs-6">
+
−
     
+
−
         <div class="panel panel-default">
+
−
          <div class="panel-thumbnail"><a href="#"><img src="//placehold.it/600x400/444/F8F8F8" class="img-responsive"></a></div>
+
−
          <div class="panel-body">
+
−
            <p>Renovations</p>
+
−
            <p></p>
+
  
−
          </div>
 
−
        </div><!--/panel-->
 
−
      </div><!--/col-->
 
−
     
 
−
      <div class="col-sm-4 col-xs-6">
 
−
     
 
−
      <div class="panel panel-default">
 
−
          <div class="panel-thumbnail"><a href="#"><img src="//placehold.it/600x400/454545/FFF" class="img-responsive"></a></div>
 
−
          <div class="panel-body">
 
−
            <p>Projects</p>
 
−
            <p></p>
 
−
           
 
−
          </div>
 
−
        </div><!--/panel-->
 
−
      </div><!--/col-->
 
−
     
 
−
      <div class="col-sm-4 col-xs-6">
 
−
     
 
−
      <div class="panel panel-default">
 
−
          <div class="panel-thumbnail"><a href="#" title="Interiors"><img src="//placehold.it/600x400/555/F2F2F2" class="img-responsive"></a></div>
 
−
          <div class="panel-body">
 
−
            <p>Interiors</p>
 
−
            <p></p>
 
−
           
 
−
          </div>
 
−
        </div><!--/panel-->
 
  
−
      </div><!--/col-->
 
−
     
 
−
      <div class="col-sm-4 col-xs-6">
 
−
     
 
−
      <div class="panel panel-default">
 
−
          <div class="panel-thumbnail"><a href="#"><img src="//placehold.it/600x400/555/FFF" class="img-responsive"></a></div>
 
−
          <div class="panel-body">
 
−
            <p>Design</p>
 
−
            <p></p>
 
−
           
 
−
          </div>
 
−
        </div><!--/panel-->
 
  
−
      </div><!--/col-->
+
<!--------------------------------fade title---------------------------->
−
     
+
<style>
−
      <div class="col-sm-4 col-xs-6">
+
−
     
+
−
      <div class="panel panel-default">
+
−
          <div class="panel-thumbnail"><a href="#"><img src="//placehold.it/600x400/555/EEE" class="img-responsive"></a></div>
+
−
          <div class="panel-body">
+
−
            <p>Site Planning</p>
+
−
            <p></p>
+
−
           
+
−
          </div>
+
−
        </div><!--/panel-->  
+
  
−
      </div><!--/col-->
+
body {
−
     
+
  margin: 0;
−
      <div class="col-sm-4 col-xs-6">
+
  height: 10px;
−
     
+
}
−
      <div class="panel panel-default">
+
−
          <div class="panel-thumbnail"><a href="#"><img src="//placehold.it/600x400/666/F4F4F4" class="img-responsive"></a></div>
+
−
          <div class="panel-body">
+
−
            <p>More</p>
+
−
            <p></p>
+
−
           
+
−
          </div>
+
−
        </div><!--/panel-->
+
  
−
      </div><!--/col-->
+
.top {
−
     
+
−
</div><!--/row-->
+
−
  </div><!--/container-->
+
−
</div>
+
  
−
<div class="divider" id="section4"></div>
+
  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;
 +
}
  
−
<div class="row">
+
.title {
−
  <div class="col-md-8 col-md-offset-1">
+
  position: relative;
−
  </div>
+
  top: 10%;
 +
 
 +
  left: 0px;
 +
}
 +
 
 +
</style>
 +
 
 +
 
 +
<!---------------------------------------------------------------------------------this------------------------------------------------------------------------------------------->
 +
<script> $(window).scroll(function(){
 +
    $(".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>
−
 
+
            <div class="inner">
−
<div class="row">
+
−
 
+
−
  <div class="col-sm-10 col-sm-offset-1">
+
−
      <h1>Location</h1>
+
−
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
+
−
    Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
+
−
    dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
+
−
    Aliquam in felis sit amet augue.
+
−
  </div> 
+
−
     
+
−
 
+
−
  <hr>
+
−
 
+
−
</div><!--/row-->
+
−
 
+
−
<div class="divider" id="section5"></div> 
+
  
−
<div class="row">
+
 
−
 
+
  <!-- Vertical Timeline -->
−
  <hr>
+
  <section id="conference-timeline">
−
 
+
 
−
  <div class="col-sm-9 col-sm-offset-1">
+
    <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 -->
 
        
 
        
−
       <div class="row form-group">
+
      <!-- Article -->
−
         <div class="col-md-12">
+
       <div class="timeline-article">
−
        <h1>Contact Us</h1>       
+
         <div class="content-left-container">
 
         </div>
 
         </div>
−
         <div class="col-xs-4">
+
 
−
           <input class="form-control" id="firstName" name="name" placeholder="Your Name" type="text">
+
         <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>
−
         <div class="col-xs-6">
+
         <div class="meta-date" style="background-color: white;">
−
          <input class="form-control" id="organization" name="organization" placeholder="Company or Organization" type="text">
+
  <img src= "https://static.igem.org/mediawiki/2017/6/67/Porcupiner.png" height="60%" width="75%"style="margin-top:15px;" >
 
         </div>
 
         </div>
 
       </div>
 
       </div>
−
       <div class="row form-group">
+
      <!-- // Article -->
−
          <div class="col-xs-5">
+
     
−
           <input class="form-control" name="email" placeholder="Email" type="text">
+
 
 +
      <!-- 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="col-xs-5">
+
   
−
           <input class="form-control" name="phone" placeholder="Phone" type="text">
+
        </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>
 +
        <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>
 
       </div>
−
       <div class="row form-group">
+
      <!-- // Article -->
−
          <div class="col-xs-10">
+
<!-- Article -->
−
            <textarea class="form-control" placeholder="Comments"></textarea>
+
       <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>
 +
        <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>
 
       </div>
−
       <div class="row form-group">
+
      <!-- // Article -->
−
          <div class="col-xs-10">
+
<!-- Article -->
−
            <button class="btn btn-default pull-right">Contact Us</button>
+
       <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>
 +
        <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>
 
       </div>
−
   
+
      <!-- // Article -->
−
  </div>
+
    </div>
−
 
+
 
−
</div><!--/row-->
+
  </section>
−
    
+
   <!-- // Vertical Timeline -->
−
<div class="container">
+
−
  <div class="col-sm-8 col-sm-offset-2 text-center">
+
  
−
      <ul class="list-inline center-block">
+
  <style>
−
        <li><a href="http://facebook.com/bootply"><img src="/assets/example/soc_fb.png"></a></li>
+
body {
−
        <li><a href="http://twitter.com/bootply"><img src="/assets/example/soc_tw.png"></a></li>
+
  background: #e6e6e6;
−
        <li><a href="http://google.com/+bootply"><img src="/assets/example/soc_gplus.png"></a></li>
+
  font-family: "Roboto", sans-serif;
−
        <li><a href="http://pinterest.com/in1"><img src="/assets/example/soc_pin.png"></a></li>
+
  font-weight: 400;
−
      </ul>
+
}
−
     
+
 
−
  </div><!--/col-->
+
/*===== Vertical Timeline =====*/
−
</div><!--/container-->
+
#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;
 +
  }
 
    
 
    
−
</div><!--/wrap-->
+
}
 +
/*===== // Resonsive Vertical Timeline =====*/
 +
</style>
  
−
<div id="footer">
+
            </div>
−
  <div class="container">
+
        </div>
−
    <p class="text-muted">Copyright ©2014 ACME, Inc.</p>
+
−
  </div>
+
−
</div>
+
  
−
<ul class="nav pull-right scroll-top">
 
−
  <li><a href="#" title="Scroll to top"><i class="glyphicon glyphicon-chevron-up"></i></a></li>
 
−
</ul>
 
  
  
−
<div class="modal" id="myModal" role="dialog">
+
<div class="container" style="height:450px; width:100%; position: relative;">
−
  <div class="modal-dialog">
+
 
−
  <div class="modal-content">
+
</div>
−
<div class="modal-header">
+
 
−
<button class="close" type="button" data-dismiss="modal">×</button>
+
 
−
<h3 class="modal-title"></h3>
+
        <div class="panel panel-red" id="panel3">
−
</div>
+
           
−
<div class="modal-body">
+
     
−
<div id="modalCarousel" class="carousel">
+
<!---------------------------pics---------------------------->
−
+
<p style="text-align: center; ">
−
          <div class="carousel-inner">
+
<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;">
−
          </div>
+
<img src= "https://static.igem.org/mediawiki/2017/5/57/B.png" height="20%" width="20%" style=" padding:50px;">
−
         
+
</p>
−
          <a class="carousel-control left" href="#modaCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
+
           
−
          <a class="carousel-control right" href="#modalCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
+
−
         
+
 
         </div>
 
         </div>
−
</div>
 
−
<div class="modal-footer">
 
−
<button class="btn btn-default" data-dismiss="modal">Close</button>
 
−
</div>
 
−
  </div>
 
−
  </div>
 
−
</div>
 
  
  
−
<script type="text/javascript">
+
<style>
 +
html {
 +
height: 100%;
 +
min-height: 100%;
 +
}
  
−
/* affix the navbar after scroll below header */
+
body {
−
$('#nav').affix({
+
height: 100%;
−
      offset: {
+
}
−
        top: $('header').height()-$('#nav').height()
+
−
      }
+
−
});
+
  
−
/* highlight the top nav as scrolling occurs */
+
.panel {
−
$('body').scrollspy({ target: '#nav' })
+
width: 100%;
 +
height: 100%;
 +
background: black;
 +
color: #fff;
 +
padding-left: 5%;
 +
padding-right: 5%;
 +
text-align: center;
 +
}
  
−
/* smooth scrolling for scroll to top */
 
−
$('.scroll-top').click(function(){
 
−
  $('body,html').animate({scrollTop:0},1000);
 
−
})
 
  
−
/* smooth scrolling for nav sections */
 
−
$('#nav .navbar-nav li>a').click(function(){
 
−
  var link = $(this).attr('href');
 
−
  var posi = $(link).offset().top;
 
−
  $('body,html').animate({scrollTop:posi},700);
 
−
});
 
  
−
</script>
 
  
  
 +
.panel.panel-red {
 +
background: black;
 +
 +
}
 +
#nav {
 +
position: fixed;
 +
top: 0;
 +
left: 0;
 +
width: 96%;
 +
padding: 2%;
 +
z-index: 100;
 +
color: white;
 +
height: 80px;
 +
}
 +
 +
.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;
 +
}
 +
 +
.blackBackground {
 +
background-color: rgba(35,47,19,0.7);
 +
visibility: visible;
 +
width:100%;
 +
 +
}
 +
 +
#nav .inner {
 +
z-index:100;
 +
padding-bottom:40px;
 +
color: red;
 +
}
 +
 +
#nav ul {
 +
list-style: none;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 +
 +
 +
#inner{
 +
z-index:101;
 +
 +
}
 +
 +
#panel1{
 +
background: transparent;
 +
height: 850px;
 +
width:100%;
 +
z-index:100;
 +
}
 +
#panel2{
 +
width:100%;
 +
height: 100%;
 +
margin-bottom:0px;
 +
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{
 +
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