Difference between revisions of "Team:Dalhousie/test5"

 
(366 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
 +
<style>
 +
#bg-video {
 +
        position: fixed;
 +
        top: 0;
 +
        right: 0;
 +
        bottom: 0px;
 +
        left: 0;
 +
        overflow: hidden;
 +
        z-index: -100;
 +
        width:100%;
 +
 +
}
 +
 +
 +
</style>
 +
 
<!--glyphicons-->
 
<!--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 6: Line 22:
 
   <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/libraries/css/fonts?action=raw&ctype=text/css" />
 
<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" />
−
<link rel="stylesheet" href="https://2017.igem.org/Team:Dalhousie/javascript?action=raw&ctype=text/javascript" />
+
 
 +
<!--------------------oldnavbar--------------->
 +
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 +
 
  
 
<!-------------------------------------need this--------------------------->
 
<!-------------------------------------need this--------------------------->
Line 12: Line 31:
 
#home_logo, #sideMenu { display:none; }
 
#home_logo, #sideMenu { display:none; }
 
#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: #000000;}
+
#content { width:100%; padding:0px;  margin-top:-20px; margin-left:0px; background-color: white;}
−
body {background-color:black; }
+
body {background-color:white; height:100%; }
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 10px;  background-color: transparent;}
+
#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;
 
             position: relative;
 
             position: relative;
−
            z-index:-101;
+
         
 
             }
 
             }
−
#bg-video {
+
.navbar-default .navbar-nav>.active>a, .nav > li > a:hover, .nav > li > a:focus {
−
        position: fixed;
+
  background-color: #C1D35D;
−
        top: 0;
+
  text-decoration: none;
−
        right: 0;
+
−
        bottom: -100px;
+
−
        left: 0;
+
−
        overflow: hidden;
+
−
        z-index: -100;
+
−
        width:100%;
+
−
}
+
−
  </style>
+
−
 
+
−
<!------------fade-------------------------->
+
−
<style>
+
−
#grad1 {
+
−
    height: 833px;
+
−
    background: transparent; /* For browsers that do not support gradients */
+
−
    background: -webkit-linear-gradient(transparent 90%, black ); /* For Safari 5.1 to 6.0 */
+
−
    background: -o-linear-gradient(transparent 90%, black ); /* For Opera 11.1 to 12.0 */
+
−
    background: -moz-linear-gradient(transparent 90%, black ); /* For Firefox 3.6 to 15 */
+
−
    background: linear-gradient(transparent 90%, black ); /* Standard syntax (must be last) */
+
−
}
+
−
</style>
+
−
<style>
+
−
#grad2 {
+
−
height: 100%;
+
−
width:100%;
+
−
    background: transparent; /* For browsers that do not support gradients */
+
−
    background: -webkit-linear-gradient(black, transparent 80%, #FCEBD9); /* For Safari 5.1 to 6.0 */
+
−
    background: -o-linear-gradient(black, transparent 80%, #FCEBD9); /* For Opera 11.1 to 12.0 */
+
−
    background: -moz-linear-gradient(black, transparent 80%, #FCEBD9); /* For Firefox 3.6 to 15 */
+
−
    background: linear-gradient(black, transparent 80%, #FCEBD9); /* Standard syntax (must be last) */
+
 
}
 
}
 
</style>
 
</style>
  
 
</head>
 
</head>
−
+
 
−
<body>
+
−
<!--------------------------------------------------------------test------------------------------------------------------------------------------>
+
 
<body>
 
<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/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>
−
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
 
−
@import url(https://fonts.googleapis.com/css?family=ABeeZee);
 
−
/* fontawesome */
 
−
[class*="fontawesome-"]:before {
 
−
  font-family: 'FontAwesome', sans-serif;
 
−
  font-size:1.5em;
 
−
  color:#f6ba52;
 
−
}
 
−
 
−
*, *:after, *:before {
 
−
  -webkit-box-sizing: border-box;
 
−
  -moz-box-sizing: border-box;
 
−
  box-sizing: border-box;
 
−
}
 
  
 
body {
 
body {
−
   font-size: 100%;
+
   margin: 0;
−
   font-family: 'ABeeZee', sans-serif;
+
   height: 10px;
−
  color: #030d18;
+
−
  background-color: #f0eee1;
+
 
}
 
}
  
−
a {
+
.top {
−
  color: #f5484a;
+
−
  text-decoration: none;
+
−
}
+
  
−
img {
+
   margin-top: 350px;
−
   max-width: 100%;
+
  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;
 
}
 
}
  
−
.container {
+
.title {
−
   width: 90%;
+
   position: relative;
−
   max-width: 768px;
+
   top: 10%;
−
  margin: 0 auto;
+
−
}
+
−
.container:after {
+
−
  content: "";
+
−
  display: table;
+
−
  clear: both;
+
−
}
+
  
−
.has-top-margin {
+
   left: 0px;
−
}
+
−
@media only screen and (min-width: 1170px) {
+
−
   .has-top-margin {
+
−
    -webkit-animation: animate-margin-top 0.3s;
+
−
    -moz-animation: animate-margin-top 0.3s;
+
−
    animation: animate-margin-top 0.3s;
+
−
    margin-top: 70px;
+
−
  }
+
 
}
 
}
  
−
@-webkit-keyframes animate-margin-top {
+
</style>
−
  0% {
+
 
−
     margin-top: 100px;
+
 
−
   }
+
<!---------------------------------------------------------------------------------this------------------------------------------------------------------------------------------->
 +
<script> $(window).scroll(function(){
 +
     $(".top").css("opacity", 1 - $(window).scrollTop() / 300);
 +
   });
 +
</script>
 +
 
 +
 
 +
            </div>
 +
        </div>
  
−
  100% {
 
−
    margin-top: 70px;
 
−
  }
 
−
}
 
−
@-moz-keyframes animate-margin-top {
 
−
  0% {
 
−
    margin-top: 100px;
 
−
  }
 
  
−
   100% {
+
 
−
     margin-top: 70px;
+
 
−
   }
+
        <div class="panel" id="panel2">
 +
<div style=" border: 1px solid #000; margin: 50px; padding: 30px; background-color: rgba(35,47,19,1);">
 +
 
 +
Welcome! </br>
 +
The goal of our project is to convert cellulose into glucose, which can be used for biofuel. </br>
 +
Let us show you how! </br>
 +
</div>
 +
            <div class="inner">
 +
 
 +
 
 +
   <!-- Vertical Timeline -->
 +
  <section id="conference-timeline">
 +
 
 +
    <div class="conference-center-line"></div>
 +
    <div class="conference-timeline-content">
 +
      <!-- Article -->
 +
      <div class="timeline-article">
 +
        <div class="content-left-container" >
 +
          <div class="content-left" >
 +
            <p>Softwood waste from the lumber industry contains cellulose, which can be turned into glucose and used to make biofuel.  <span class="article-number">01</span></p>
 +
          </div>
 +
       
 +
        </div>
 +
  <div class="content-right-container">
 +
         
 +
       
 +
        </div>
 +
        <div class="meta-date">
 +
          <img src= "https://static.igem.org/mediawiki/2017/a/ab/Lumber.jpg" height="50%" width="60%"style="margin-top:15px;" >
 +
        </div>
 +
      </div>
 +
      <!-- // Article -->
 +
     
 +
      <!-- Article -->
 +
      <div class="timeline-article">
 +
        <div class="content-left-container">
 +
        </div>
 +
 
 +
        <div class="content-right-container">
 +
          <div class="content-right">
 +
            <p>We hypothesized that the porcupine microbiome must contain an enzyme that can break down cellulose, as bark is food. <span class="article-number">02</span></p>
 +
          </div>
 +
       
 +
        </div>
 +
        <div class="meta-date" style="background-color: white;">
 +
  <img src= "https://static.igem.org/mediawiki/2017/6/67/Porcupiner.png" height="60%" width="75%"style="margin-top:15px;" >
 +
        </div>
 +
      </div>
 +
      <!-- // Article -->
 +
     
 +
 
 +
      <!-- Article -->
 +
      <div class="timeline-article">
 +
        <div class="content-left-container">
 +
          <div class="content-left">
 +
            <p>We mined the porcupine’s microbiome to identify the enzyme that was able to break down wood.  <span class="article-number">03</span></p>
 +
          </div>
 +
      
 +
        </div>
 +
        <div class="content-right-container">
 +
         
 +
 +
        </div>
 +
        <div class="meta-date">
 +
  <img src= "https://static.igem.org/mediawiki/2017/4/48/Testtubee.png" height="60%" width="70%"style="margin-top:15px;" >
 +
        </div>
 +
      </div>
 +
      <!-- // Article -->
 +
<!-- Article -->
 +
      <div class="timeline-article">
 +
        <div class="content-left-container">
 +
         
 +
       
 +
        </div>
 +
        <div class="content-right-container">
 +
        <div class="content-right">
 +
            <p>We created a metagenomic library of the genes able to code this enzyme as well as novel enzymes. <span class="article-number">04</span></p>
 +
          </div>
 +
       
 +
        </div>
 +
        <div class="meta-date">
 +
    <img src= "https://static.igem.org/mediawiki/2017/a/ab/Lumber.jpg" height="50%" width="60%"style="margin-top:15px;" >
 +
        </div>
 +
      </div>
 +
      <!-- // Article -->
 +
<!-- Article -->
 +
      <div class="timeline-article">
 +
        <div class="content-left-container">
 +
        <div class="content-left">
 +
            <p>We put these genes into E.coli to see if they could then digest cellulose down. <span class="article-number">05</span></p>
 +
          </div>
 +
   
 +
        </div>
 +
        <div class="content-right-container">
 +
         
 +
 +
        </div>
 +
        <div class="meta-date">
 +
    <img src= "https://static.igem.org/mediawiki/2017/a/ab/Lumber.jpg" height="50%" width="60%"style="margin-top:15px;" >
 +
        </div>
 +
      </div>
 +
      <!-- // Article -->
 +
<!-- Article -->
 +
      <div class="timeline-article">
 +
        <div class="content-left-container">
 +
         
 +
       
 +
        </div>
 +
        <div class="content-right-container">
 +
        <div class="content-right">
 +
            <p>We put the E.coli into a bioreactor with cellulose to see if it gets broken down. In the future this can be combined with yeast to transform in finally into biofuel! <span class="article-number">06</span></p>
 +
          </div>
 +
       
 +
        </div>
 +
        <div class="meta-date">
 +
        <img src= "https://static.igem.org/mediawiki/2017/a/ab/Lumber.jpg" height="50%" width="60%"style="margin-top:15px;" >
 +
        </div>
 +
      </div>
 +
      <!-- // Article -->
 +
    </div>
 +
 
 +
   </section>
 +
  <!-- // Vertical Timeline -->
 +
 
 +
  <style>
 +
body {
 +
  background: #e6e6e6;
 +
  font-family: "Roboto", sans-serif;
 +
  font-weight: 400;
 
}
 
}
−
@keyframes animate-margin-top {
 
−
  0% {
 
−
    margin-top: 100px;
 
−
  }
 
  
−
   100% {
+
/*===== Vertical Timeline =====*/
−
    margin-top: 70px;
+
#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;
 
}
 
}
−
.header {
+
#conference-timeline .conference-center-line {
 
   position: absolute;
 
   position: absolute;
 +
  width: 3px;
 +
  height: 100%;
 
   top: 0;
 
   top: 0;
−
   left: 0;
+
   left: 50%;
−
  width: 100%;
+
   margin-left: -2px;
−
   height: 50px;
+
   background: #232F13;
−
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+
   z-index: -1;
−
   background-color: #030d18;
+
−
   z-index: 3;
+
 
}
 
}
−
@media only screen and (min-width: 768px) {
+
#conference-timeline .conference-timeline-content {
−
   .header {
+
   padding-top: 67px;
−
    height: 70px;
+
  padding-bottom: 67px;
−
    background-color: transparent;
+
−
    box-shadow: none;
+
−
  }
+
 
}
 
}
−
 
+
.timeline-article {
−
#logo {
+
   width: 100%;
−
  float: left;
+
−
  margin: 13px 0 0 5%;
+
−
}
+
−
#logo{
+
−
  display: block;
+
−
  color:#CC0000;
+
−
  font-weight:bold;
+
−
  font-size:1.5em;
+
−
  text-shadow:1px 2px rgba(0,0,0,0.4);
+
−
}
+
−
@media only screen and (min-width: 768px) {
+
−
   #logo {
+
−
    margin: 23px 0 0 5%;
+
−
  }
+
−
}
+
−
@media only screen and (min-width: 1170px) {
+
−
  #logo.is-hidden {
+
−
    opacity: 0;
+
−
    position: fixed;
+
−
    left: -20%;
+
−
    margin-left: 0;
+
−
    -webkit-transition: left 0.3s, opacity 0.3s;
+
−
    -moz-transition: left 0.3s, opacity 0.3s;
+
−
    transition: left 0.3s, opacity 0.3s;
+
−
  }
+
−
  #logo.is-hidden.slide-in {
+
−
    left: 5%;
+
−
    opacity: 1;
+
−
  }
+
−
}
+
−
 
+
−
.main-nav {
+
−
  float: right;
+
−
  margin-right: 5%;
+
−
  width: 44px;
+
 
   height: 100%;
 
   height: 100%;
−
   background-size: 44px 44px;
+
   position: relative;
 +
  overflow: hidden;
 +
  margin: 20px 0;
 
}
 
}
−
.main-nav ul {
+
.timeline-article .content-left-container,
−
   position: absolute;
+
.timeline-article .content-right-container {
−
  top: 0;
+
   max-width: 44%;
−
  left: 0;
+
 
   width: 100%;
 
   width: 100%;
−
  -webkit-transform: translateY(-100%);
+
−
  -moz-transform: translateY(-100%);
+
−
  -ms-transform: translateY(-100%);
+
−
  -o-transform: translateY(-100%);
+
−
  transform: translateY(-100%);
+
 
}
 
}
−
.main-nav ul.is-visible {
+
.timeline-article .timeline-author {
−
  -webkit-transform: translateY(50px);
+
−
  -moz-transform: translateY(50px);
+
−
  -ms-transform: translateY(50px);
+
−
  -o-transform: translateY(50px);
+
−
  transform: translateY(50px);
+
−
}
+
−
.main-nav li {
+
 
   display: block;
 
   display: block;
−
   height: 50px;
+
   font-weight: 400;
−
   line-height: 50px;
+
   font-size: 14px;
−
   padding-left: 5%;
+
   line-height: 24px;
−
   color: #CC0000;
+
   color: white;
−
   text-shadow:1px 2px rgba(0,0,0,0.4);
+
   text-align: right;
 
}
 
}
−
@media only screen and (min-width: 768px) {
+
.timeline-article .content-left,
−
  .main-nav {
+
.timeline-article .content-right {
−
    width: auto;
+
  position: relative;
−
    height: auto;
+
  width: auto;
−
    background: none;
+
  border: 1px solid #000;
−
  }
+
  background-color: rgba(35,47,19,1);
−
  .main-nav ul {
+
   box-shadow: 0 1px 3px rgba(0,0,0,0.9);
−
    position: static;
+
   padding: 27px 25px;
−
    width: auto;
+
−
    -webkit-transform: translateY(0);
+
−
    -moz-transform: translateY(0);
+
−
    -ms-transform: translateY(0);
+
−
    -o-transform: translateY(0);
+
−
    transform: translateY(0);
+
−
    line-height: 70px;
+
−
   }
+
−
  .main-nav ul.is-visible {
+
−
    -webkit-transform: translateY(0);
+
−
    -moz-transform: translateY(0);
+
−
    -ms-transform: translateY(0);
+
−
    -o-transform: translateY(0);
+
−
    transform: translateY(0);
+
−
   }
+
−
  .main-nav li {
+
−
    display: inline-block;
+
−
    margin-left: 1em;
+
−
    display: inline-block;
+
−
    height: auto;
+
−
    line-height: normal;
+
−
    background: transparent;
+
−
    padding: .6em 1em;
+
−
    border-top: none;
+
−
    color: #CC0000;;
+
−
  }
+
 
}
 
}
−
 
+
.timeline-article p {
−
#page-intro {
+
  margin: 0 0 0 60px;
 +
  padding: 0;
 +
  font-weight: 400;
 +
  color: white;
 +
  font-size: 14px;
 +
  line-height: 24px;
 
   position: relative;
 
   position: relative;
−
  height: 300px;
 
−
  background:repeating-linear-gradient(
 
−
  to right,
 
−
  #f6ba52,
 
−
  #f6ba52 10px,
 
−
  #ffd180 10px,
 
−
  #ffd180 20px
 
−
);
 
−
  background-size: cover;
 
−
  z-index: 2;
 
 
}
 
}
−
#page-intro #page-intro_text {
+
.timeline-article p span.article-number {
−
   width: 90%;
+
   position: absolute;
−
   max-width: 1170px;
+
   font-weight: 300;
−
   margin: 0 auto;
+
   font-size: 44px;
−
   text-align: center;
+
   top: 10px;
−
   padding-top: 120px;
+
   left: -60px;
 +
  color: white;
 
}
 
}
−
#page-intro h1 {
+
.timeline-article .content-left-container {
−
  font-size: 1.5em;
+
   float: left;
−
  margin-bottom:2%;
+
−
  font-weight: bold;
+
−
   color: #fff;
+
−
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+
 
}
 
}
−
#page-intro h3 {
+
.timeline-article .content-right-container {
−
  font-size: 1.5em;
+
   float: right;
−
  margin-bottom:2%;
+
 
−
  font-weight: bold;
+
−
   color: #fff;
+
−
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+
 
}
 
}
−
#page-intro h4{
+
.timeline-article .content-left:before,
−
   font-size: 1em;
+
.timeline-article .content-right:before{
−
   margin-bottom:2%;
+
   position: absolute;
−
   font-weight: bold;
+
   top: 20px;
 +
  font-size: 23px;
 +
   font-family: "FontAwesome";
 
   color: #fff;
 
   color: #fff;
−
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
 
 
}
 
}
−
#page-intro h4 a:hover{
+
.timeline-article .content-left:before {
−
text-decoration:underline;
+
  content: "\f0da";
 +
  right: -8px;
 
}
 
}
−
@media only screen and (min-width: 768px) {
+
.timeline-article .content-right:before {
−
   #page-intro {
+
   content: "\f0d9";
−
    height: 400px;
+
   left: -8px;
−
   }
+
−
  #page-intro #page-intro_text {
+
−
    padding-top: 160px;
+
−
  }
+
−
  #page-intro h1 {
+
−
    font-size: 32px;
+
−
    font-size: 2rem;
+
−
  }
+
 
}
 
}
−
@media only screen and (min-width: 1170px) {
+
 
−
   #page-intro {
+
 
−
    height: 600px;
+
 
−
   }
+
 
−
   #page-intro #page-intro_text {
+
 
−
    padding-top: 250px;
+
.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;
  
−
.alt-nav {
 
−
  position: relative;
 
−
  z-index: 3;
 
−
  -webkit-font-smoothing: antialiased;
 
−
  -moz-osx-font-smoothing: grayscale;
 
 
}
 
}
 +
.timeline-article .meta-date .date {
 +
  font-size: 30px;
 +
  line-height: 40px;
  
−
.alt-nav ul {
 
−
  position: fixed;
 
−
  width: 90%;
 
−
  max-width: 400px;
 
−
  right: 5%;
 
−
  bottom: 20px;
 
−
  border-radius: 0.25em;
 
−
  background: rgba(3, 13, 24, 0.96);
 
−
  visibility: hidden;
 
−
  z-index: 1;
 
−
  -webkit-backface-visibility: hidden;
 
−
  backface-visibility: hidden;
 
−
  -webkit-transform: scale(0);
 
−
  -moz-transform: scale(0);
 
−
  -ms-transform: scale(0);
 
−
  -o-transform: scale(0);
 
−
  transform: scale(0);
 
−
  -webkit-transform-origin: 100% 100%;
 
−
  -moz-transform-origin: 100% 100%;
 
−
  -ms-transform-origin: 100% 100%;
 
−
  -o-transform-origin: 100% 100%;
 
−
  transform-origin: 100% 100%;
 
−
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
 
−
  -moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
 
−
  transition: transform 0.3s, visibility 0s 0.3s;
 
 
}
 
}
−
.alt-nav ul.is-visible {
+
.timeline-article .meta-date .month {
−
   visibility: visible;
+
   font-size: 18px;
−
  -webkit-transform: scale(1);
+
   line-height: 10px;
−
   -moz-transform: scale(1);
+
−
  -ms-transform: scale(1);
+
−
  -o-transform: scale(1);
+
−
  transform: scale(1);
+
−
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
+
−
  -moz-transition: -moz-transform 0.3s, visibility 0s 0s;
+
−
  transition: transform 0.3s, visibility 0s 0s;
+
 
}
 
}
−
.alt-nav li a {
+
/*===== // Vertical Timeline =====*/
−
  display: block;
+
 
−
  padding: 1.6em;
+
/*===== Resonsive Vertical Timeline =====*/
−
  border-bottom: 1px solid #092645;
+
@media only screen and (max-width: 830px) {
−
  color: #f0eee1;
+
   #conference-timeline .timeline-start,
−
}
+
  #conference-timeline .timeline-end {
−
.alt-nav li:last-child a {
+
     margin: 0;
−
  border-bottom: none;
+
−
}
+
−
@media only screen and (min-width: 1170px) {
+
−
   .alt-nav {
+
−
    z-index: 1;
+
−
    height: 100px;
+
−
    background-color: rgba(3, 13, 24, 0.96);
+
−
    -webkit-transition: height 0.3s;
+
−
    -moz-transition: height 0.3s;
+
−
     transition: height 0.3s;
+
 
   }
 
   }
−
   .alt-nav nav, .alt-nav ul, .alt-nav li, .alt-nav a {
+
   #conference-timeline .conference-center-line {
−
     height: 100%;
+
    margin-left: 0;
 +
    left: 50px;
 +
  }
 +
  .timeline-article .meta-date {
 +
     margin-left: 0;
 +
    left: 20px;
 
   }
 
   }
−
   .alt-nav ul {
+
   .timeline-article .content-left-container,
−
    position: static;
+
  .timeline-article .content-right-container {
−
    width: auto;
+
 
     max-width: 100%;
 
     max-width: 100%;
−
     visibility: visible;
+
     width: auto;
−
     -webkit-transform: scale(1);
+
     float: none;
−
    -moz-transform: scale(1);
+
     margin-left: 110px;
−
    -ms-transform: scale(1);
+
     min-height: 53px;
−
    -o-transform: scale(1);
+
−
    transform: scale(1);
+
−
     text-align: center;
+
−
     background-color: transparent;
+
 
   }
 
   }
−
   .alt-nav li {
+
   .timeline-article .content-left-container {
−
    display: inline-block;
+
     margin-bottom: 20px;
−
     margin-left: -4px;
+
 
   }
 
   }
−
   .alt-nav li a {
+
   .timeline-article .content-left,
−
    position: relative;
+
  .timeline-article .content-right {
−
    text-align: center;
+
     padding: 10px 25px;
−
    display: block;
+
     min-height: 65px;
−
     padding: 58px 40px 0 40px;
+
−
     border-bottom: none;
+
−
    -webkit-transition: padding 0.2s;
+
−
    -moz-transition: padding 0.2s;
+
−
    transition: padding 0.2s;
+
 
   }
 
   }
−
   .alt-nav li a b {
+
   .timeline-article .content-left:before {
−
    text-transform: uppercase;
+
     content: "\f0d9";
−
    font-size: 13px;
+
−
    font-size: 0.8125rem;
+
−
    font-weight: 700;
+
−
    color: rgba(240, 238, 225, 0.3);
+
−
  }
+
−
  .alt-nav li a span {
+
−
     position: absolute;
+
−
    display: inline-block;
+
−
    width: 40px;
+
−
    height: 40px;
+
−
    top: 18px;
+
−
    left: 50%;
+
 
     right: auto;
 
     right: auto;
−
     -webkit-transform: translateX(-50%);
+
     left: -8px;
−
    -moz-transform: translateX(-50%);
+
−
    -ms-transform: translateX(-50%);
+
−
    -o-transform: translateX(-50%);
+
−
    transform: translateX(-50%);
+
−
    background-repeat: no-repeat;
+
−
    -webkit-transition: opacity 0.2s;
+
−
    -moz-transition: opacity 0.2s;
+
−
    transition: opacity 0.2s;
+
 
   }
 
   }
−
   .alt-nav li a:hover b, .alt-nav li a.active b {
+
   .timeline-article .content-right:before {
−
     color: #f0eee1;
+
     display: none;
 
   }
 
   }
−
  .alt-nav li:nth-child(1) a span {
+
}
−
    background-position: 0 0;
+
@media only screen and (max-width: 400px) {
 +
  .timeline-article p {
 +
    margin: 0;
 
   }
 
   }
−
   .alt-nav li:nth-child(2) a span {
+
   .timeline-article p span.article-number {
−
    background-position: -40px 0;
+
−
  }
+
−
  .alt-nav li:nth-child(3) a span {
+
−
    background-position: -80px 0;
+
−
  }
+
−
  .alt-nav li:nth-child(4) a span {
+
−
    background-position: -120px 0;
+
−
  }
+
−
  .alt-nav li:nth-child(5) a span {
+
−
    background-position: -160px 0;
+
−
  }
+
−
  .alt-nav.is-fixed {
+
−
    position: fixed;
+
−
    left: 0;
+
−
    top: 0;
+
−
    height: 70px;
+
−
    width: 100%;
+
−
  }
+
−
  .alt-nav.animate-children {
+
−
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+
−
  }
+
−
  .alt-nav.animate-children li a {
+
−
    padding: 26px 30px 0 30px;
+
−
  }
+
−
  .alt-nav.animate-children li a span {
+
−
    opacity: 0;
+
−
  }
+
−
}
+
−
 
+
−
.alt-nav-trigger {
+
−
  position: fixed;
+
−
  bottom: 20px;
+
−
  right: 5%;
+
−
  width: 44px;
+
−
  height: 44px;
+
−
  background: rgba(3, 13, 24, 0.96);
+
−
  border-radius: 0.25em;
+
−
  overflow: hidden;
+
−
  text-indent: 100%;
+
−
  white-space: nowrap;
+
−
  z-index: 2;
+
−
}
+
−
.alt-nav-trigger span {
+
−
  position: absolute;
+
−
  display: block;
+
−
  width: 4px;
+
−
  height: 4px;
+
−
  border-radius: 50%;
+
−
  background: #f0eee1;
+
−
  left: 50%;
+
−
  top: 50%;
+
−
  bottom: auto;
+
−
  right: auto;
+
−
  -webkit-transform: translateX(-50%) translateY(-50%);
+
−
  -moz-transform: translateX(-50%) translateY(-50%);
+
−
  -ms-transform: translateX(-50%) translateY(-50%);
+
−
  -o-transform: translateX(-50%) translateY(-50%);
+
−
  transform: translateX(-50%) translateY(-50%);
+
−
  -webkit-transition: background 0.3s;
+
−
  -moz-transition: background 0.3s;
+
−
  transition: background 0.3s;
+
−
}
+
−
.alt-nav-trigger span::before, .alt-nav-trigger span::after {
+
−
  content: '';
+
−
  position: absolute;
+
−
  background: inherit;
+
−
  width: 100%;
+
−
  height: 100%;
+
−
  border-radius: 50%;
+
−
}
+
−
.alt-nav-trigger span::before {
+
−
  right: -10px;
+
−
  -webkit-transform: rotate(0);
+
−
  -moz-transform: rotate(0);
+
−
  -ms-transform: rotate(0);
+
−
  -o-transform: rotate(0);
+
−
  transform: rotate(0);
+
−
}
+
−
.alt-nav-trigger span::after {
+
−
  left: -10px;
+
−
  -webkit-transform: rotate(0);
+
−
  -moz-transform: rotate(0);
+
−
  -ms-transform: rotate(0);
+
−
  -o-transform: rotate(0);
+
−
  transform: rotate(0);
+
−
}
+
−
.alt-nav-trigger.menu-is-open {
+
−
  background: transparent;
+
−
}
+
−
.alt-nav-trigger.menu-is-open span {
+
−
  background: rgba(240, 238, 225, 0);
+
−
  width: 20px;
+
−
  height: 2px;
+
−
}
+
−
.alt-nav-trigger.menu-is-open span::before, .alt-nav-trigger.menu-is-open span::after {
+
−
  background: #f0eee1;
+
−
  width: 100%;
+
−
  height: 100%;
+
−
  border-radius: 0;
+
−
  top: 0;
+
−
  left: 0;
+
−
}
+
−
.alt-nav-trigger.menu-is-open span::before {
+
−
  -webkit-transform: rotate(135deg);
+
−
  -moz-transform: rotate(135deg);
+
−
  -ms-transform: rotate(135deg);
+
−
  -o-transform: rotate(135deg);
+
−
  transform: rotate(135deg);
+
−
}
+
−
.alt-nav-trigger.menu-is-open span::after {
+
−
  -webkit-transform: rotate(225deg);
+
−
  -moz-transform: rotate(225deg);
+
−
  -ms-transform: rotate(225deg);
+
−
  -o-transform: rotate(225deg);
+
−
  transform: rotate(225deg);
+
−
}
+
−
@media only screen and (min-width: 1170px) {
+
−
  .alt-nav-trigger {
+
 
     display: none;
 
     display: none;
 
   }
 
   }
 +
 
 
}
 
}
 +
/*===== // Resonsive Vertical Timeline =====*/
 +
</style>
  
−
.section {
+
            </div>
−
  margin: 0 auto;
+
        </div>
−
  padding: 2em 0;
+
−
}
+
−
.section h2 {
+
−
  font-size: 20px;
+
−
  font-size: 1.25rem;
+
−
  margin-bottom: .6em;
+
−
  font-weight: 700;
+
−
}
+
−
.section p {
+
−
  line-height: 1.6;
+
−
}
+
  
−
@media only screen and (min-width: 1170px) {
 
−
  .section {
 
−
    margin: 0 auto;
 
−
    padding: 4em 0;
 
−
  }
 
−
  .section h2 {
 
−
    font-size: 30px;
 
−
    font-size: 1.875rem;
 
−
  }
 
−
  .section p {
 
−
    font-size: 20px;
 
−
    font-size: 1.25rem;
 
−
  }
 
−
}
 
−
.more{
 
−
border:none;
 
−
padding:1em;
 
−
box-shadow:0 1px 2px 1px rgba(0,0,0,0.4);
 
−
-moz-box-shadow:0 1px 2px 1px rgba(0,0,0,0.4);
 
−
-webkit-box-shadow:0 1px 2px 1px rgba(0,0,0,0.4);
 
−
background:#CC0000;
 
−
border-radius:5%;
 
−
margin-top:1em;
 
−
width:8em;
 
−
  cursor:pointer;
 
−
}
 
−
.more:before{
 
−
content:'More';
 
−
color:#fff;
 
−
font-weight:bold;
 
−
font-size:1.2em;
 
−
}
 
−
.more:hover{
 
−
  background:#0F3B5F;
 
−
  transition: all 2s ease;
 
−
  -webkit-transition:all 2s ease;
 
−
  -moz-transition:all 2s ease;
 
−
}
 
−
#nav-icon-3 article{
 
−
padding:2em;
 
−
background:#fff;
 
−
border-left:2em solid #f6ba52;
 
−
border-bottom:1em solid #f0eee1;
 
−
box-shadow:0 1px 2px 1px rgba(0,0,0,0.4);
 
−
-moz-box-shadow:0 1px 2px 1px rgba(0,0,0,0.4);
 
−
-webkit-box-shadow:0 1px 2px 1px rgba(0,0,0,0.4);
 
−
cursor:pointer;
 
−
}
 
  
−
#nav-icon-3 address{
 
−
padding:1em; float:right;
 
−
margin-top:1em;
 
−
}
 
−
.pics {
 
−
-webkit-column-count:3;
 
−
-moz-column-count:3;
 
−
column-count:3;
 
−
margin-bottom:10em;
 
−
}
 
−
.pics ul li img{
 
−
display:inline-block;
 
−
-moz-box-shadow:0 1px 2px 1px rgba(0,0,0,0.4);
 
−
-webkit-box-shadow:0 1px 2px 1px rgba(0,0,0,0.4);
 
−
  box-shadow:0 1px 2px 1px rgba(0,0,0,0.4);
 
−
padding:.5em;
 
−
}
 
  
−
#form-main{
+
<div class="container" style="height:450px; width:100%; position: relative;">
−
width:100%;
+
−
float:left;
+
−
}
+
  
−
#form-div {
+
</div>
−
background-color:#3c3c3c;
+
−
padding-left:35px;
+
−
padding-right:35px;
+
−
padding-top:35px;
+
−
padding-bottom:50px;
+
−
width: 450px;
+
−
float: left;
+
−
left: 50%;
+
−
position: absolute;
+
−
margin-left: -260px;
+
−
}
+
  
−
.feedback-input {
 
−
opacity:0.9;
 
−
color:#0493bd;
 
−
font-family: 'Montserrat', Helvetica, Arial, sans-serif;
 
−
  font-weight:400;
 
−
font-size: 18px;
 
−
border-radius: 0;
 
−
line-height: 22px;
 
−
background-color: #fbfbfb;
 
−
  border: 3px solid #fbfbfb;
 
−
padding: 13px 13px 13px 54px;
 
−
margin-bottom: 10px;
 
−
width:100%;
 
−
-webkit-box-sizing: border-box;
 
−
-moz-box-sizing: border-box;
 
−
-ms-box-sizing: border-box;
 
−
box-sizing: border-box;
 
−
}
 
  
−
.feedback-input:focus{
+
        <div class="panel panel-red" id="panel3">
−
background: #fff;
+
           
−
box-shadow: 0;
+
     
−
border: 3px solid #3498db;
+
<!---------------------------pics---------------------------->
−
color: #3498db;
+
<p style="text-align: center; ">
−
outline: none;
+
<img src= "https://static.igem.org/mediawiki/2017/d/d3/Q.png" height="20%" width="20%" style=" padding:50px;">
−
  padding: 13px 13px 13px 54px;
+
<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>
  
−
.focused{
 
−
color:#30aed6;
 
−
border:#30aed6 solid 3px;
 
−
}
 
  
−
#name{
+
<style>
−
background-size: 30px 30px;
+
html {
−
background-position: 11px 8px;
+
height: 100%;
−
background-repeat: no-repeat;
+
min-height: 100%;
 
}
 
}
  
−
#name:focus{
+
body {
−
background-size: 30px 30px;
+
height: 100%;
−
background-position: 8px 5px;
+
−
  background-position: 11px 8px;
+
−
background-repeat: no-repeat;
+
 
}
 
}
  
−
#email{
+
.panel {
−
background-size: 30px 30px;
+
width: 100%;
−
background-position: 11px 8px;
+
height: 100%;
−
background-repeat: no-repeat;
+
background: black;
 +
color: #fff;
 +
padding-left: 5%;
 +
padding-right: 5%;
 +
text-align: center;
 
}
 
}
  
−
#email:focus{
 
−
background-size: 30px 30px;
 
−
  background-position: 11px 8px;
 
−
background-repeat: no-repeat;
 
−
}
 
  
−
#comment{
 
−
background-size: 30px 30px;
 
−
background-position: 11px 8px;
 
−
background-repeat: no-repeat;
 
−
}
 
  
−
textarea {
 
−
width: 100%;
 
−
height: 150px;
 
−
line-height: 150%;
 
−
}
 
  
−
input:hover, textarea:hover,
 
−
input:focus, textarea:focus {
 
−
background-color:white;
 
−
}
 
  
−
#button-blue{
+
.panel.panel-red {
−
font-family: 'Montserrat', Helvetica, Arial,  sans-serif;
+
background: black;
−
float:left;
+
−
width: 100%;
+
−
border: #fbfbfb solid 4px;
+
−
cursor:pointer;
+
−
background-color: #3498db;
+
−
color:white;
+
−
font-size:24px;
+
−
padding-top:22px;
+
−
padding-bottom:22px;
+
−
-webkit-transition: all 0.3s;
+
−
-moz-transition: all 0.3s;
+
−
transition: all 0.3s;
+
−
}
+
  
−
#button-blue:hover{
 
−
background-color: rgba(0,0,0,0);
 
−
color: #0493bd;
 
−
}
 
−
 
−
.submit:hover {
 
−
color: #3498db;
 
 
}
 
}
−
+
#nav {
−
.ease {
+
position: fixed;
−
  border-top:3px #3c3c3c solid;
+
top: 0;
−
width: 0px;
+
left: 0;
−
height: 76px;
+
width: 96%;
−
background-color: #fbfbfb;
+
padding: 2%;
−
-webkit-transition: .3s ease;
+
z-index: 100;
−
-moz-transition: .3s ease;
+
color: white;
−
-o-transition: .3s ease;
+
height: 80px;
−
-ms-transition: .3s ease;
+
−
transition: .3s ease;
+
 
}
 
}
  
−
.submit:hover .ease{
+
.noBackground {
−
  width:100%;
+
−
  background-color:white;
+
−
}
+
  
−
@media only screen and (max-width: 580px) {
+
background-color: rgba(0,0,0,0);
−
#form-div{
+
visibility: visible;
−
left: 3%;
+
width:100%;
−
margin-right: 3%;
+
padding-right:0px;
−
width: 88%;
+
    -webkit-transition: all 1.0s ease;
−
margin-left: 0;
+
    -moz-transition: all 1.0s ease;
−
padding-left: 3%;
+
    -o-transition: all 1.0s ease;
−
padding-right: 3%;
+
    transition: all 1.0s ease;
−
}
+
 
}
 
}
−
</style>
 
  
−
<script>
+
.blackBackground {
−
jQuery(document).ready(function($){
+
background-color: rgba(35,47,19,0.7);
−
var secondaryNav = $('.alt-nav'),
+
visibility: visible;
−
secondaryNavTopPosition = secondaryNav.offset().top,
+
width:100%;
−
taglineOffesetTop = $('#page-intro_text').offset().top + $('#page-intro_text').height() + parseInt($('#page-intro_text').css('paddingTop').replace('px', '')),
+
−
contentSections = $('.section');
+
−
+
−
$(window).on('scroll', function(){
+
−
( $(window).scrollTop() > taglineOffesetTop ) ? $('#logo, .pageBtn').addClass('is-hidden') : $('#logo, .pageBtn').removeClass('is- hidden');
+
−
if($(window).scrollTop() > secondaryNavTopPosition ) {
+
−
secondaryNav.addClass('is-fixed');
+
−
$('.main').addClass('has-top-margin');
+
−
setTimeout(function() {
+
−
            secondaryNav.addClass('animate-children');
+
−
            $('#logo').addClass('slide-in');
+
−
$('.pageBtn').addClass('slide-in');
+
−
        }, 50);
+
−
} else {
+
−
secondaryNav.removeClass('is-fixed');
+
−
$('.main').removeClass('has-top-margin');
+
−
setTimeout(function() {
+
−
            secondaryNav.removeClass('animate-children');
+
−
            $('#logo').removeClass('slide-in');
+
−
$('.pageBtn').removeClass('slide-in');
+
−
        }, 50);
+
−
}
+
  
−
updateSecondaryNavigation();
+
}
−
});
+
  
−
function updateSecondaryNavigation() {
+
#nav .inner {
−
contentSections.each(function(){
+
z-index:100;
−
var actual = $(this),
+
padding-bottom:40px;
−
actualHeight = actual.height() + parseInt(actual.css('paddingTop').replace('px', '')) + parseInt(actual.css('paddingBottom').replace('px', '')),
+
color: red;
−
actualAnchor = secondaryNav.find('a[href="#'+actual.attr('id')+'"]');
+
}
−
if ( ( actual.offset().top - secondaryNav.height() <= $(window).scrollTop() ) && ( actual.offset().top +  actualHeight - secondaryNav.height() > $(window).scrollTop() ) ) {
+
−
actualAnchor.addClass('active');
+
−
}else {
+
−
actualAnchor.removeClass('active');
+
−
}
+
−
});
+
−
}
+
−
$('.alt-nav-trigger').on('click', function(event){
+
−
event.preventDefault();
+
−
$(this).toggleClass('menu-is-open');
+
−
secondaryNav.find('ul').toggleClass('is-visible');
+
−
});
+
−
secondaryNav.find('ul a').on('click', function(event){
+
−
        event.preventDefault();
+
−
        var target= $(this.hash);
+
−
        $('body,html').animate({
+
−
        'scrollTop': target.offset().top - secondaryNav.height() + 1
+
−
        }, 400
+
−
        );  
+
−
        $('.alt-nav-trigger').removeClass('menu-is-open');
+
−
        secondaryNav.find('ul').removeClass('is-visible');
+
−
    });
+
−
$('.main-nav').on('click', function(event){
+
−
if($(event.target).is('.main-nav')) $(this).children('ul').toggleClass('is-visible');
+
−
});
+
−
});
+
−
</script>
+
  
−
<header class="header">
+
#nav ul {
−
<div id="logo">Logo</div>
+
list-style: none;
−
<nav class="main-nav">
+
margin: 0;
−
<ul>
+
padding: 0;
−
<li>Login</li>
+
}
−
<li>Sign Up</li>
+
−
</ul>
+
−
</nav>
+
−
</header>
+
−
<section id="page-intro">
+
−
<div id="page-intro_text">
+
−
<h1>Alternating Fixed Navigation</h1>
+
−
<h3>Click A Menu Item Below<h3>
+
−
<h3>Scroll Up / Down</h3>
+
−
<h4>Totally Inspired By <a href='https://codyhouse.co/gem/secondary-fixed-navigation/'>This</a><br /><br />
+
−
        Altered & Customized By <a href='https://codepen.io/tmrDevelops/'>Me</a>
+
−
</div>
+
−
</section>
+
  
−
<div class="alt-nav">
 
−
<a href="#0" class="alt-nav-trigger"><span></span></a>
 
−
<nav>
 
−
<ul>
 
−
<li>
 
−
<a href="#nav-icon-1">
 
−
<b>Home</b>
 
−
<span class='fontawesome-home'></span>
 
−
</a>
 
−
</li>
 
−
<li>
 
−
<a href="#nav-icon-2">
 
−
<b>About Us</b>
 
−
<span class='fontawesome-group'></span>
 
−
</a>
 
−
</li>
 
−
<li>
 
−
<a href="#nav-icon-3">
 
−
<b>Our Blog</b>
 
−
<span class='fontawesome-comments-alt'></span>
 
−
</a>
 
−
</li>
 
−
<li>
 
−
<a href="#nav-icon-4">
 
−
<b>Photo Album</b>
 
−
<span class='fontawesome-camera-retro'></span>
 
−
</a>
 
−
</li>
 
−
<li>
 
−
<a href="#nav-icon-5">
 
−
<b>Contact Us</b>
 
−
<span class='fontawesome-edit'></span>
 
−
</a>
 
−
</li>
 
−
</ul>
 
−
</nav>
 
−
</div>
 
−
<div class="main">
 
−
<section id="nav-icon-1" class="section container">
 
−
<h2>Welcome!</h2>
 
−
<p>
 
−
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus, ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam. Earum enim sed dolorum, exercitationem temporibus quaerat eos, accusantium amet facilis facere eaque commodi optio quidem rem minima nisi laborum quae animi nostrum aut voluptates veniam.</p><br/>
 
−
<p> Cum neque quam fuga sapiente quidem eum necessitatibus nulla, cupiditate a, repudiandae iusto in dolor eaque commodi nostrum consequuntur dolores velit eligendi dolorem quae. Distinctio quae, cumque aliquid quos consequuntur perspiciatis voluptates, laboriosam velit qui et aut sint esse nemo voluptatibus, dolore veritatis natus facilis commodi sed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis tempore, harum consequatur optio laboriosam nihil sint voluptatem ducimus porro quae expedita alias consectetur explicabo cumque maxime facere praesentium! Ad illo quibusdam omnis suscipit qui eos autem est laborum ducimus! Tenetur?
 
−
</p>
 
−
</section>
 
  
−
<section id="nav-icon-2" class="section container">
 
−
<h2>About Us</h2>
 
−
<p>
 
−
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus, ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam. Earum enim sed dolorum, exercitationem temporibus quaerat eos, accusantium amet facilis facere eaque commodi optio quidem rem minima nisi laborum quae animi nostrum aut voluptates veniam.</p><br/>
 
−
<p>Cum neque quam fuga sapiente quidem eum necessitatibus nulla, cupiditate a, repudiandae iusto in dolor eaque commodi nostrum consequuntur dolores velit eligendi dolorem quae. Distinctio quae, cumque aliquid quos consequuntur perspiciatis voluptates, laboriosam velit qui et aut sint esse nemo voluptatibus, dolore veritatis natus facilis commodi sed. </p><br/>
 
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat omnis quia maiores, et. Aut facilis ducimus, labore culpa, nemo eum qui quae, rem libero aspernatur, inventore quos modi a ex sit.</p><br/>
 
−
<p>Nulla iure odio at quo corporis assumenda ea fugiat adipisci aspernatur incidunt sapiente consequatur, ullam cumque dolorem facilis laboriosam a dolore similique velit esse. Eveniet omnis voluptas, nobis dicta cupiditate odit, similique mollitia eos dignissimos provident voluptatem adipisci ullam facilis alias! Reprehenderit voluptatem provident ut veniam aliquid, labore culpa.
 
−
</p>
 
−
</section>
 
  
−
<section id="nav-icon-3" class="section container">
+
#inner{
−
<h2>Our Blog</h2>
+
z-index:101;
−
<article>
+
−
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus, ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam.<br><button class='more'></button><address class="author">By <a rel="author" class="#" href="/author/john-jane-doe">Jane & John Doe</a></address>
+
−
</article>
+
−
<article>Earum enim sed dolorum, exercitationem temporibus quaerat eos, accusantium amet facilis facere eaque commodi optio quidem rem minima nisi laborum quae animi nostrum aut voluptates veniam. Cum neque quam fuga sapiente quidem eum necessitatibus nulla, cupiditate a, repudiandae iusto in dolor eaque commodi nostrum consequuntur dolores velit eligendi dolorem quae.<br><button class='more'></button><address class="author">By <a rel="author" class="#" href="/author/jane-doe">Jane Doe</a></address>
+
−
</article>
+
−
<article>Distinctio quae, cumque aliquid quos consequuntur perspiciatis voluptates, laboriosam velit qui et aut sint esse nemo voluptatibus, dolore veritatis natus facilis commodi sed. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+
−
<br><button class='more'></button><address class="author">By <a rel="author" class="#" href="/author/john-doe">John Doe</a></address>
+
−
</article>
+
−
<article>Alias sunt mollitia atque tempore ea cum exercitationem, quisquam est consectetur tempora ipsam, obcaecati voluptate a. Autem minus cumque voluptatem eaque fugit nostrum reprehenderit incidunt officia. <br><button class='more'></button><address class="author">By <a rel="author" class="#" href="/author/jane-doe">Jane Doe</a></address>
+
−
</article>
+
−
<article>Nesciunt reiciendis delectus officiis fugit sint at totam nisi commodi repellendus iusto dolorum molestias dignissimos natus, impedit quam atque ex voluptas ut facere assumenda iure incidunt rerum vitae accusamus? <br><button class='more'></button><address class="author">By <a rel="author" class="#" href="/author/john-doe">John Doe</a></address>
+
−
</article>
+
−
<article>Et voluptatibus unde, fugiat tenetur sed dolore, praesentium magni illo nobis incidunt, possimus doloremque dolorem sunt. Aliquid ducimus delectus esse voluptatem officia perferendis, a voluptate omnis adipisci expedita distinctio praesentium natus veniam accusamus iure, quasi, inventore reiciendis.<br><button class='more'></button><address class="author">By <a rel="author" class="#" href="/author/jane-doe">Jane Doe</a></address>
+
−
</article>
+
−
</section>
+
−
<section id="nav-icon-4" class="section container">
+
−
<h2>Photo Album</h2>
+
−
<div class='pics'>
+
−
<ul>
+
−
<li><img src="http://lorempixel.com/400/400/people" /></li>
+
−
<li><img src="http://lorempixel.com/400/400/animals" /></li>
+
−
<li><img src="http://lorempixel.com/400/400/sports" /></li>
+
−
<li><img src="http://lorempixel.com/400/400/people" /></li>
+
−
<li><img src="http://lorempixel.com/400/400/animals" /></li>
+
−
<li><img src="http://lorempixel.com/400/400/sports" /></li>
+
−
<li><img src="http://lorempixel.com/400/400/people" /></li>
+
−
<li><img src="http://lorempixel.com/400/400/animals" /></li>
+
−
      <li><img src="http://lorempixel.com/400/400/sports" /></li>
+
−
</ul>
+
−
</div>
+
−
</section>
+
−
<section id="nav-icon-5" class="section container" >
+
−
<h2>Contact Us</h2>
+
−
<div id="form-main">
+
−
<div id="form-div">
+
−
<form class="form" id="form1">
+
−
      <p class="name">
+
−
        <input name="name" type="text" placeholder="Name" id="name" />
+
−
      </p>
+
−
     
+
−
      <p class="email">
+
−
        <input name="email" type="text" id="email" placeholder="Email" />
+
−
      </p>
+
−
     
+
−
      <p class="text">
+
−
        <textarea name="text" id="comment" placeholder="Comment"></textarea>
+
−
      </p>
+
−
      <div class="submit">
+
−
        <input type="submit" value="SEND" id="button-blue"/>
+
−
        <div class="ease"></div>
+
−
      </div>
+
−
    </form>
+
−
  </div>
+
−
</div>
+
−
</section>
+
  
−
 
−
<!--------------------------------------------------------------endtest------------------------------------------------------------------------------>
 
−
 
−
<!--------------------------------------------------------------video------------------------------------------------------------------------------>
 
−
 
−
<div class="jumbotron text-center " style= "background-color: transparent;">
 
−
 
−
    <div id="grad1"><!--------fade------------>
 
−
<video  id= "myVideo" class="bg-video" style="top:0px; left:0px; padding-bottom:0px; position:fixed; width:100%;z-index:-1;" autoplay="true" loop="loop" preload="metadata" muted="muted">
 
−
        <source src="https://static.igem.org/mediawiki/2017/a/a4/Final3.mp4" type="video/mp4" />
 
−
    </video>
 
−
 
−
 
−
 
−
<div id="page-wrap"style="padding-top:400px;  ">
 
−
 
−
<!--------------------------------fade title---------------------------->
 
−
<style>body {
 
−
  margin: 0;
 
−
  height: 10px;
 
 
}
 
}
  
−
.top {
+
#panel1{
−
  margin: 100;
+
background: transparent;
−
  position: relative;
+
height: 850px;
−
width:55%;
+
width:100%;
−
  left:300px;
+
z-index:100;
−
  background-color: rgba(0,0,0,0.1);
+
−
  height: 150px;
+
−
  text-align: center;
+
−
  font-family: 'helvetica';
+
−
  font-size: 50px;
+
−
  font-weight: 100;
+
−
  color: #fff;
+
−
line-height: 60px;
+
 
}
 
}
 +
#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;
  
−
.title {
+
background: rgba(35,47,19,0.9);
−
  position: relative;
+
bottom:-100px;
−
  top: 10%;
+
−
 
+
−
  left: 0px;
+
 
}
 
}
  
−
</style>
 
  
  
−
<script> $(window).scroll(function(){
 
−
    $(".top").css("opacity", 1 - $(window).scrollTop() / 150);
 
−
  });</script>
 
  
−
<div class="top"><div class="title">Welcome to Dalhousie's 2017 iGEM wiki</div></div>
+
</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 {
−
  </div>
+
header.removeClass('blackBackground');
−
 
+
                     
−
 
+
}
−
</div>
+
});
−
</div>
+
});
−
 
+
</script>
−
                     
+
−
 
+
−
 
+
−
 
+
−
<div class="container" id="projectdescript" style="padding-bottom:50px; padding-top:50px; padding-right:100px; padding-left:150px; width:100%; height:1700px; background-color: black;">
+
−
<!-------------------------------------------infographic----------------------------->
+
−
<p style="text-align:center; color:white;">
+
−
<img src= "https://static.igem.org/mediawiki/2017/8/8b/Infograph2_1.jpg" align="center" height="85%" width="85%"></p>
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<div class="container" style="height:500px; width:100%; position: relative;">
+
−
<div id="grad2" style=" width:100%; position: absolute; left: 0px;"><!--------fade------------>
+
−
</div>
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<div class="container"  style="padding-bottom:50px; padding-top:50px; padding-right:100px; padding-left:100px;  width:100%; height:100%; background-color: #FCEBD9;">
+
−
<p style="text-align:center; color:black; font-size: 50px;">
+
−
Sponsor area</p>
+
−
</div>
+
−
 
+
−
 
+
−
             
+
  
 
</body>
 
</body>
 +
<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