Difference between revisions of "Team:Dalhousie/test3"

 
(285 intermediate revisions by 2 users 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%;
 +
        height:100%;
 +
 +
}
 +
 +
 +
</style>
 +
 
<!--glyphicons-->
 
<!--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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Line 7: Line 24:
 
<link rel="stylesheet" href="https://2017.igem.org/Team:Dalhousie/css3?action=raw&ctype=text/css" />
 
<link rel="stylesheet" href="https://2017.igem.org/Team:Dalhousie/css3?action=raw&ctype=text/css" />
  
−
<!-- Theme CSS ---------------just in case--------->
+
<!--------------------oldnavbar--------------->
−
<link href="https://2017.igem.org/wiki/index.php?title=Team:Dalhousie/grayscale&action=raw&ctype=text/css" rel="stylesheet">
+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
−
<link href="https://2017.igem.org/wiki/index.php?title=Team:Dalhousie/fontawesome?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
+
−
    <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
+
−
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
+
−
<link href="https://2017.igem.org/wiki/index.php?title=Team:Dalhousie/bootstrapmincss&action=raw&ctype=text/css" rel="stylesheet">
+
−
 
+
  
  
−
<!----------------------------------------------navbarshit---------------------------------------------->
+
<!-------------------------------------need this--------------------------->
 +
<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: black;}
 +
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>
  
−
 
−
  <meta charset="utf-8">
 
−
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
−
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
−
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 
−
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
 
</head>
 
</head>
  
−
 
 
<body>
 
<body>
  
  
−
<!----------------------------------------------------------------navbarshit---------------------------------------------------------------------------------->
+
<!-------------------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">
  
−
<div class="jumbotron text-center" >
+
      <li class="active" ><a href="https://2017.igem.org/Team:Dalhousie/test3" style=" color: white;">Home</a></li>
−
    <video class="bg-video" style="top:0px;left:0px;position:absolute;width:100%;z-index:-1;" autoplay="true" loop="loop" preload="metadata" muted="muted">
+
−
        <source src="https://static.igem.org/mediawiki/2017/7/7b/Dalhousie_background.mp4" type="video/mp4" />
+
−
    </video>
+
  
 +
<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/Requirements">Requirements</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">Science Communication</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/Engagement">Public Engagement</a></li>
 +
<li><a href="https://2017.igem.org/Team:Dalhousie/SocialMedia">Social Media</a></li>
 +
     
 +
        </ul>
 +
      </li>
  
−
<div id="page-wrap"style="padding-top:130px;">
+
<li class="dropdown">
−
  <h1  style="color:white;"> Dalhousie iGEM </h1>
+
        <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/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/Improve">Improve</a></li>
 +
        </ul>
 +
      </li>
  
−
 
+
     
  
−
 
 
  
−
<!-----------------------------------button------------------------------------->
 
−
<a href="http://www.google.ca" class="btn btn-link btn-lg  page-scroll">
 
−
                            <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
 
−
                        </a>
 
  
−
  </div>
+
    </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>
  
−
<!-- Intro Header -->
 
−
    <header class="intro">
 
−
        <div class="intro-body">
 
−
            <div class="container">
 
−
                <div class="row">
 
−
                    <div class="col-md-8 col-md-offset-2">
 
−
                        <h1 class="brand-heading">Dalhousie iGEM</h1>
 
−
                     
 
  
−
<!---------------------button----------------------------------------------------->
 
  
 +
        <div class="panel" id="panel1" >
  
 +
            <div class="inner" >
 +
<div class="top" ><div class="title" >Dalhousie iGEM 2017</div></div>
  
−
                        <a href="#about" class="btn btn-link btn-lg  page-scroll">
+
 
−
                            <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
+
 
−
                        </a>
+
<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>
 +
 
 +
body {
 +
  margin: 0;
 +
  height: 10px;
 +
}
 +
 
 +
.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;
 +
}
 +
 
 +
.title {
 +
  position: relative;
 +
  top: 10%;
 +
 
 +
  left: 0px;
 +
}
 +
 
 +
</style>
 +
 
 +
 
 +
<!---------------------------------------------------------------------------------this------------------------------------------------------------------------------------------->
 +
<script> $(window).scroll(function(){
 +
    $(".top").css("opacity", 1 - $(window).scrollTop() / 300);
 +
  });
 +
</script>
  
  
−
                    </div>
 
−
                </div>
 
 
             </div>
 
             </div>
 +
        </div>
 +
 +
 +
 +
 +
        <div class="panel" id="panel2">
 +
<h1>
 +
<center><font color= "#ffffff">Mining the Microbiome</font></center>
 +
</h1>
 +
<center><img src="https://static.igem.org/mediawiki/parts/3/34/BIG_FRont_DESIGN.png" height="617" width="1097" style="margin-bottom:40px;"></center> 
 
         </div>
 
         </div>
−
    </header>
 
  
−
    <!-- About Section -->
 
−
    <section id="about" class="container content-section text-center">
 
−
        <div class="row">
 
−
            <div class="col-lg-8 col-lg-offset-2">
 
−
             
 
−
             
 
−
<h4>Background</h4>
 
−
<p style="text-align:center">
 
−
Canada’s forests represent not only an established source of economic revenue, but also a potential source for biofuel substrate. Ligno-cellulosic by-products from pulp and paper processing are removed using chemicals, heat, and water. Microbial cellulose-degrading enzymes are high-value targets for industrial applications. Focused on innovative applications of synthetic biology, the undergraduate Dalhousie iGEM team has undertaken a multi-year project to harness the degradative capacity of microorganisms to convert cellulose into ethanol for biofuel applications. Advances in DNA sequencing technology and bioinformatics have revolutionized our ability to identify useful genes in complex biological samples. We hypothesize that the porcupine microbiome, which includes microorganisms capable of digesting bark and tree resin, will be a rich source of these useful genes. If our hypothesis is correct, mining the porcupine microbiome has the advantage of finding a suite of enzymes that have evolved to work in concert to efficiently degrade cellulose. </p>
 
−
 
−
<h4>The Project</h4>
 
−
<p style="text-align:center">
 
−
Using a combination of metagenomic library construction and bioinformatic analysis we aim to find known cellulolytic enzymes as well as discover novel enzymes.
 
−
Screening of our metagenomic library will allow us to look for a diverse selection of enzymes, including cellulolytic and lignolytic ones by plating on cellulose-only media. The clones that grow can be sequenced for confirmation and cloned into biobricks.
 
−
Our new bioinformatic pipeline now allows us to look for conserved domains rather than known enzymes. This is extremely powerful as it may allow us to discover new enzymes that share catalytic domains with cellulases but are otherwise totally novel.
 
−
The goal of this project is to construct a bioreactor where cellulose would be the input, D-glucose the output and E.coli expressing a suite of cellulolytic enzymes would be the workhorse, converting one to the other. Future goals would be to combine this in co-culture with yeast for the last step in bio-ethanol production.</p>
 
  
  
−
               
+
<div class="container" style="height:450px; width:100%; position: relative;">
−
               
+
 
−
            </div>
+
</div>
 +
 
 +
 
 +
        <div class="panel panel-red" id="panel3">
 +
<p style="text-align: center; ">
 +
<img src="https://static.igem.org/mediawiki/2017/8/8e/Plosibilities.png" height="30%" width="30%" style=" padding:50px;">
 +
<img src="https://static.igem.org/mediawiki/parts/d/d7/Porcupinelogo2017.png" height="30%" width="30%" style=" padding:50px;">
 +
</p>
 +
           
 
         </div>
 
         </div>
−
    </section>
 
  
  
−
<div class="container" id="projectdescript" style="padding-bottom:250px;">
+
<style>
 +
html {
 +
height: 100%;
 +
min-height: 100%;
 +
}
  
 +
body {
 +
height: 100%;
 +
}
  
−
<h2 id="one">About us</h2>
+
.panel {
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis libero sagittis dui porta convallis. Pellentesque imperdiet neque at magna rutrum, at auctor nisl iaculis. Donec semper elit a venenatis mollis. Maecenas imperdiet tincidunt dui. Morbi volutpat vitae arcu sed malesuada. Praesent accumsan in lectus et mattis. Ut sagittis imperdiet urna, nec sodales neque dictum eget. Ut lacinia urna a velit aliquam, at finibus neque dictum. Nulla tincidunt nibh eu finibus efficitur. Nullam justo libero, sagittis ut porta in, interdum id mauris. Suspendisse et condimentum lacus. Ut dignissim ullamcorper dolor, non tristique nibh cursus sit amet. Nam et turpis luctus, sodales dui nec, mollis sapien. Nam sagittis odio a tincidunt fringilla.</p>
+
width: 100%;
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis libero sagittis dui porta convallis. Pellentesque imperdiet neque at magna rutrum, at auctor nisl iaculis. Donec semper elit a venenatis mollis. Maecenas imperdiet tincidunt dui. Morbi volutpat vitae arcu sed malesuada. Praesent accumsan in lectus et mattis. Ut sagittis imperdiet urna, nec sodales neque dictum eget. Ut lacinia urna a velit aliquam, at finibus neque dictum. Nulla tincidunt nibh eu finibus efficitur. Nullam justo libero, sagittis ut porta in, interdum id mauris. Suspendisse et condimentum lacus. Ut dignissim ullamcorper dolor, non tristique nibh cursus sit amet. Nam et turpis luctus, sodales dui nec, mollis sapien. Nam sagittis odio a tincidunt fringilla.</p>
+
height: 100%;
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis libero sagittis dui porta convallis. Pellentesque imperdiet neque at magna rutrum, at auctor nisl iaculis. Donec semper elit a venenatis mollis. Maecenas imperdiet tincidunt dui. Morbi volutpat vitae arcu sed malesuada. Praesent accumsan in lectus et mattis. Ut sagittis imperdiet urna, nec sodales neque dictum eget. Ut lacinia urna a velit aliquam, at finibus neque dictum. Nulla tincidunt nibh eu finibus efficitur. Nullam justo libero, sagittis ut porta in, interdum id mauris. Suspendisse et condimentum lacus. Ut dignissim ullamcorper dolor, non tristique nibh cursus sit amet. Nam et turpis luctus, sodales dui nec, mollis sapien. Nam sagittis odio a tincidunt fringilla.</p>
+
background: black;
−
</div></div>
+
color: #fff;
 +
padding-left: 5%;
 +
padding-right: 5%;
 +
text-align: center;
 +
}
  
  
Line 118: Line 255:
  
  
 +
.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;
 +
}
  
−
    <!------------------------------------------------------------------------------- Navbar -------------------------------------------------------------------------->
+
.blackBackground {
−
<nav class="navbar navbar-inverse navbar-fixed-bottom">
+
background-color: rgba(35,47,19,0.7);
−
  <div class="container-fluid">
+
visibility: visible;
−
   
+
width:100%;
−
    <ul class="nav navbar-nav navbar-center">
+
−
      <li class="active"><a href="https://2017.igem.org/Team:Dalhousie/anothertest">Home</a></li>
+
−
      <li class="dropdown">
+
−
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">The Project
+
−
        <span class="caret"></span></a>
+
−
        <ul class="dropdown-menu">
+
−
          <li><a href="#">Design</a></li>
+
−
          <li><a href="#">Experiments</a></li>
+
−
          <li><a href="#">Notebook</a></li>
+
−
          <li><a href="#">Results</a></li>
+
−
          <li><a href="#">Safety</a></li>
+
−
        </ul>
+
−
      </li>
+
  
−
      <li><a href="#">Our Team</a></li>
+
}
−
      <li><a href="#">Attributions</a></li>
+
 
−
<li><a href="#">Outreach</a></li>
+
#nav .inner {
−
<li><a href="https://2017.igem.org/Team:Dalhousie/Human_Practices">Human practices</a></li>
+
z-index:100;
−
    </ul>
+
padding-bottom:40px;
−
<ul class="nav navbar-nav navbar-right">
+
color: red;
−
    <div class="navbar-header">
+
}
−
      <a class="navbar-brand" >Contact us today </a>
+
 
−
    </div>
+
#nav ul {
−
<li>
+
list-style: none;
−
                        <a href="mailto:igemdalhousie@gmail.com" ><i class="fa fa-envelope-o fa-fw"></i> <span class="network-name"></span></a>
+
margin: 0;
−
                    </li>
+
padding: 0;
−
<li>
+
}
−
                        <a href="https://twitter.com/dalhousie_igem?lang=en" ><i class="fa fa-twitter fa-fw"></i> <span class="network-name"></span></a>
+
 
−
                    </li>
+
 
−
                    <li>
+
 
−
                        <a href="https://www.facebook.com/Dalhousie.iGEM/" ><i class="fa fa-facebook fa-fw"></i> <span class="network-name"></span></a>
+
#inner{
−
                    </li>
+
z-index:101;
−
    </ul>
+
 
−
  </div>
+
}
−
</nav>
+
 
−
   
+
#panel1{
−
             
+
background: transparent;
 +
height: 950px;
 +
width:100%;
 +
z-index:100;
 +
}
 +
#panel2{
 +
width:100%;
 +
height: 600px;
 +
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: 100%;
 +
margin-bottom:-100px;
 +
background: rgba(35,47,19,0.9);
 +
}
 +
 
 +
 
 +
 
 +
 
 +
</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>

Latest revision as of 03:27, 27 October 2017

Dalhousie iGEM 2017

Mining the Microbiome