Difference between revisions of "Team:Dalhousie"

 
(169 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<head>
+
<head>
−
  <script type="text/javascript" src="https://2017.igem.org/Team:Dalhousie/libraries/js/utils?action=raw&ctype=text/javascript"></script>
+
<style>
−
  <script type="text/javascript" src="https://2017.igem.org/Team:Dalhousie/libraries/js/tether?action=raw&ctype=text/javascript"></script>
+
#bg-video {
−
  <link  rel="stylesheet" href="https://2017.igem.org/Team:Dalhousie/libraries/css/Bootstrap?action=raw&ctype=text/css" />
+
        position: fixed;
−
  <script type="text/javascript" src="https://2017.igem.org/Team:Dalhousie/libraries/js/bootstrap?action=raw&ctype=text/javascript"></script>
+
        top: 0;
−
  <link rel="stylesheet" href="https://2017.igem.org/Team:Dalhousie/libraries/css/home?action=raw&ctype=text/css" />
+
        right: 0;
−
<script language="javascript">
+
        bottom: 0px;
−
$(document).ready(function () {
+
        left: 0;
 +
        overflow: hidden;
 +
        z-index: -100;
 +
        width:100%;
 +
        height:100%;
  
−
var menu = $('.nav');
+
}
−
var origOffsetY = menu.offset().top;
+
  
−
function scroll() {
 
−
    if ($(window).scrollTop() >= origOffsetY) {
 
−
        $('.nav').addClass('sticky');
 
−
        $('.content').addClass('menu-padding');
 
−
    } else {
 
−
        $('.nav').removeClass('sticky');
 
−
        $('.content').removeClass('menu-padding');
 
−
    }
 
  
 +
</style>
  
−
  }
+
<!--glyphicons-->
 +
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 +
  <link  rel="stylesheet" href="https://2017.igem.org/Team:Dalhousie/libraries/css/Bootstrap?action=raw&ctype=text/css" />
 +
  <link rel="stylesheet" href="https://2017.igem.org/Team:Dalhousie/libraries/css/fonts?action=raw&ctype=text/css" />
 +
<link rel="stylesheet" href="https://2017.igem.org/Team:Dalhousie/css3?action=raw&ctype=text/css" />
  
−
  document.onscroll = scroll;
+
<!--------------------oldnavbar--------------->
 +
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 +
 
 +
 
 +
<!-------------------------------------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>
 +
 
 +
</head>
  
−
});
 
−
  </script>
 
−
  <style>
 
−
    #top_title, #sideMenu{
 
−
      display: none;
 
−
    }
 
−
    #content{
 
−
    width:100%;
 
−
    padding: 0;
 
−
    margin: 0;
 
−
    }
 
−
</style>
 
−
</head>
 
 
<body>
 
<body>
−
  <div class="jumbotron">
+
 
−
   <video id="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/c/c0/Team--Dalhousie--drivingvideo.mp4" type="video/mp4" />
+
<!-------------------navbar---------------------->
−
    </video>
+
  <div id="nav" class="noBackground" style="width:100%; z-index:100;" >
−
  <h1 style="padding-top:200px;text-align:center;color:white;"> Dalhousie iGEM </h1>
+
            <div class="inner" >
−
  </div>
+
<div id="navWrap">
−
<div class="container">
+
    <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>
 +
 
 +
<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>
 +
 
 +
<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>
 +
 
 +
     
 +
 
 +
 
 +
 
 +
    </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>
 +
 
 +
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 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 class="container" style="height:450px; width:100%; position: relative;">
 +
 
 
  </div>
 
  </div>
 +
 +
 +
        <div class="panel panel-red" id="panel3">
 +
<p style="text-align: center; ">
 +
<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%" >
 +
<img src="https://static.igem.org/mediawiki/2017/e/ef/Whitetigerlogo.png" height="20%" width="20%" >
 +
</p>
 +
           
 +
        </div>
 +
 +
 +
<style>
 +
html {
 +
height: 100%;
 +
min-height: 100%;
 +
}
 +
 +
body {
 +
height: 100%;
 +
}
 +
 +
.panel {
 +
width: 100%;
 +
height: 100%;
 +
background: black;
 +
color: #fff;
 +
padding-left: 5%;
 +
padding-right: 5%;
 +
text-align: center;
 +
}
 +
 +
 +
 +
 +
 +
.panel.panel-red {
 +
background: black;
 +
 +
}
 +
#nav {
 +
position: fixed;
 +
top: 0;
 +
left: 0;
 +
width: 96%;
 +
padding: 2%;
 +
z-index: 100;
 +
color: white;
 +
height: 80px;
 +
}
 +
 +
.noBackground {
 +
background-color: rgba(0,0,0,0);
 +
visibility: visible;
 +
width:100%;
 +
padding-right:0px;
 +
    -webkit-transition: all 1.0s ease;
 +
    -moz-transition: all 1.0s ease;
 +
    -o-transition: all 1.0s ease;
 +
    transition: all 1.0s ease;
 +
}
 +
 +
.blackBackground {
 +
background-color: rgba(35,47,19,0.7);
 +
visibility: visible;
 +
width:100%;
 +
 +
}
 +
 +
#nav .inner {
 +
z-index:100;
 +
padding-bottom:40px;
 +
color: red;
 +
}
 +
 +
#nav ul {
 +
list-style: none;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 +
 +
 +
#inner{
 +
z-index:101;
 +
 +
}
 +
 +
#panel1{
 +
background: transparent;
 +
height: 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 00:13, 1 November 2017

Dalhousie iGEM 2017

Mining the Microbiome