Difference between revisions of "Team:Dalhousie"

 
(33 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
<html lang="en">
+
<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%;
  
−
+
}
  
−
<!--just added all this shit-->
 
  
−
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+
</style>
−
<script>
+
−
$(document).ready(function(){
+
−
  // Add smooth scrolling to all links
+
−
  $("a").on('click', function(event) {
+
  
−
    // Make sure this.hash has a value before overriding default behavior
+
<!--glyphicons-->
−
    if (this.hash !== "") {
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
−
      // Prevent default anchor click behavior
+
  <link  rel="stylesheet" href="https://2017.igem.org/Team:Dalhousie/libraries/css/Bootstrap?action=raw&ctype=text/css" />
−
      event.preventDefault();
+
  <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" />
  
−
      // Store hash
+
<!--------------------oldnavbar--------------->
−
      var hash = this.hash;
+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
−
      // Using jQuery's animate() method to add smooth page scroll
 
−
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
 
−
      $('html, body').animate({
 
−
        scrollTop: $(hash).offset().top
 
−
      }, 800, function(){
 
−
 
 
−
        // Add hash (#) to URL when done scrolling (default click behavior)
 
−
        window.location.hash = hash;
 
−
      });
 
−
    } // End if
 
−
  });
 
−
});
 
−
</script>
 
−
<style>
 
−
body, html, .main {
 
−
    height: 100%;
 
−
}
 
  
−
section {
+
<!-------------------------------------need this--------------------------->
−
    min-height: 100%;
+
<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>
  
 +
</head>
  
 +
<body>
  
  
 +
<!-------------------navbar---------------------->
 +
<div id="nav" class="noBackground" style="width:100%; z-index:100;" >
 +
            <div class="inner" >
 +
<div id="navWrap">
 +
    <nav >
 +
<div class="container-fluid">
 +
    <ul class="nav navbar-nav navbar-center">
  
 +
      <li class="active" ><a href="https://2017.igem.org/Team:Dalhousie" style=" color: white;">Home</a></li>
  
−
#home_logo, #sideMenu { display:none; }
+
<li class="dropdown" >
−
#sideMenu, #top_title, .patrollink  {display:none;}
+
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Project
−
#content { width:100%; padding:0px; margin-top:-42px; margin-left:0px;}</style>
+
        </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>
  
−
    <meta charset="utf-8">
+
<li class="dropdown">
−
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Human Practices
−
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
        </a>
−
    <meta name="description" content="">
+
        <ul class="dropdown-menu" style=" background-color: rgba(193,211,93,0.8);">
−
    <meta name="author" content="">
+
      <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>
  
−
    <title>Dalhousie iGem</title>
+
<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/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>
  
−
    <!-- Bootstrap Core CSS -->
+
     
−
  <link href="https://2017.igem.org/wiki/index.php?title=Team:Dalhousie/bootstrapmincss&action=raw&ctype=text/css" rel="stylesheet">
+
  
−
<!-- Custom Fonts -->
 
−
<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/Team:Dalhousie/libraries/css/fonts?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
 
  
  
−
<!-- Theme CSS -->
+
    </ul>
−
<link href="https://2017.igem.org/wiki/index.php?title=Team:Dalhousie/grayscale&action=raw&ctype=text/css" rel="stylesheet">
+
  
−
   
 
  
−
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 
−
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 
−
    <!--[if lt IE 9]>
 
−
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 
−
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
 
−
    <![endif]-->
 
  
−
</head>
+
<!--------------------------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>
  
−
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
+
     </ul>
−
 
+
  </div>
−
     <!-- Navigation -->
+
</nav>
−
    <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
+
</div>
−
        <div class="container">
+
−
            <div class="navbar-header">
+
−
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
+
−
                    Menu <i class="fa fa-bars"></i>
+
−
                </button>
+
−
               
+
 
             </div>
 
             </div>
 +
        </div>
  
−
            <!-- Collect the nav links, forms, and other content for toggling -->
 
−
            <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
 
−
                <ul class="nav navbar-nav">
 
−
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
 
−
                    <li class="hidden">
 
−
                        <a href="#page-top"></a>
 
−
                    </li>
 
  
  
 +
        <div class="panel" id="panel1" >
  
 +
            <div class="inner" >
 +
<div class="top" ><div class="title" >Dalhousie iGEM 2017</div></div>
  
 +
 
  
−
                    <li>
+
<video  id= "myVideo" class="bg-video" style="top:0px; left:0px; padding-bottom:0px; position:fixed; width:100%;z-index:-100; " autoplay="true" loop="loop" preload="metadata" muted="muted">
−
                        <a class="page-scroll" href="#about">About Us</a>
+
        <source src="https://static.igem.org/mediawiki/2017/6/68/Thisfinal.mp4" type="video/mp4" />
−
                    </li>
+
−
                   
+
−
                    <li>
+
−
                        <a class="page-scroll" href="#contact">Contact</a>
+
−
                    </li>
+
−
                </ul>
+
−
            </div>
+
−
            <!-- /.navbar-collapse -->
+
−
        </div>
+
−
        <!-- /.container -->
+
−
    </nav>
+
  
−
    <!-- 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>
 
−
                     
 
−
                        <a href="#about" class="btn btn-circle page-scroll">
 
  
−
                            <span class="caret"></span>
 
−
                        </a>
 
−
                    </div>
 
−
                </div>
 
−
            </div>
 
−
        </div>
 
−
    </header>
 
  
−
    <!-- About Section -->
+
<!--------------------------------fade title---------------------------->
−
    <section id="about" class="container content-section text-center">
+
<style>
−
        <div class="row">
+
 
−
            <div class="col-lg-8 col-lg-offset-2">
+
body {
−
                <h2>About us</h2>
+
  margin: 0;
−
                <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. Waste cellulose 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. Working with the Shubenacadie Wildlife Park, we identified cellulose-degrading bacteria in the porcupine microbiome using 16S rRNA sequencing and analysis of DNA extracted from fecal samples. Further analysis using PICRUSt – a bioinformatics platform that estimates functional gene profile(s) in sequenced sample(s) – identified two genes from the bacterium Ruminiclostridium thermocellum involved in cellulose degradation: endoglucanase and β-glucosidase; Endoglucanase (BioBrick Reference BBa_K2160000) was cloned at Dalhousie and expressed in Escherichia coli. PICRUSt was also used to compare candidate cellulose-degrading enzymes from herbivores, omnivores and carnivores. PICRUSt data was supported by metagenomic sequencing of fecal samples and functional analysis. The microbiomes of 20 additional mammals at the Park were characterized, and the compiled data was used to create an interactive Shubenacadie Park Microbiome Map to facilitate public education.
+
  height: 10px;
−
</p>
+
}
−
               
+
 
−
               
+
.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 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>
−
    </section>
 
  
−
 
 
  
−
  <!-- Contact Section -->
+
 
−
    <section id="contact" class="content-section text-center">
+
<div class="container" style="height:450px; width:100%; position: relative;">
−
        <div class="download-section">
+
 
−
            <div class="container">
+
</div>
−
                <div class="col-lg-8 col-lg-offset-2">
+
 
−
                    <h2>Contact us</h2>
+
 
−
                    <p style="text-align:center">Feel free to contact us to collab, or to just say hello!</p>
+
        <div class="panel panel-red" id="panel3">
−
               
+
<p style="text-align: center; ">
−
                <ul class="list-inline banner-social-buttons">
+
<a href="http://www.plosibilities.wordpress.com"><img src="https://static.igem.org/mediawiki/2017/archive/8/8c/20171031235427%21Dalscreen.png" height="20%" width="20%" ></a>
−
                   
+
<img src="https://static.igem.org/mediawiki/parts/d/d7/Porcupinelogo2017.png" height="20%" width="20%" >
−
<li>
+
<img src="https://static.igem.org/mediawiki/2017/e/ef/Whitetigerlogo.png" height="20%" width="20%" >
−
                        <a href="mailto:igemdalhousie@gmail.com" class="btn btn-default btn-lg"><i class="fa fa-google-plus fa-fw"></i> <span class="network-name">Email+</span></a>
+
</p>
−
                    </li>
+
           
−
<li>
+
−
                        <a href="https://twitter.com/dalhousie_igem?lang=en" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
+
−
                    </li>
+
−
                    <li>
+
−
                        <a href="https://www.facebook.com/Dalhousie.iGEM/" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Facebook</span></a>
+
−
                    </li>
+
−
                   
+
−
                    </li>
+
−
                </ul>
+
−
                </div>
+
−
          </div>
+
 
         </div>
 
         </div>
−
    </section>
 
  
  
 +
<style>
 +
html {
 +
height: 100%;
 +
min-height: 100%;
 +
}
  
 +
body {
 +
height: 100%;
 +
}
  
−
    <!-- jQuery -->
+
.panel {
−
    <script src="https://2017.igem.org/wiki/index.php?title=Team:Dalhousie/jquery&action=raw&ctype=script/js"></script>
+
width: 100%;
 +
height: 100%;
 +
background: black;
 +
color: #fff;
 +
padding-left: 5%;
 +
padding-right: 5%;
 +
text-align: center;
 +
}
  
−
    <!-- Bootstrap Core JavaScript -->
 
−
    <script src="https://2017.igem.org/wiki/index.php?title=Team:Dalhousie/bootstrapminjs&action=raw&ctype=script/js"></script>
 
  
−
    <!-- Plugin JavaScript -->
 
−
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
 
  
−
   
 
  
−
    <!-- Theme JavaScript -->
 
−
    <script src="https://2017.igem.org/wiki/index.php?title=Team:Dalhousie/grayscaleminjs&action=raw&ctype=script/js"></script>
 
  
−
</body>
+
.panel.panel-red {
 +
background: black;
  
−
</html>
+
}
 +
#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: 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>
 +
<html>

Latest revision as of 00:13, 1 November 2017

Dalhousie iGEM 2017

Mining the Microbiome