Difference between revisions of "Team:Dalhousie"

 
(67 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
−
  <link rel="stylesheet" href=""https://2017.igem.org/Team:Dalhousie/smoothscrolling?action=raw&ctype=text/javascript"/>
+
<style>
 +
#bg-video {
 +
        position: fixed;
 +
        top: 0;
 +
        right: 0;
 +
        bottom: 0px;
 +
        left: 0;
 +
        overflow: hidden;
 +
        z-index: -100;
 +
        width:100%;
 +
        height:100%;
 +
 
 +
}
 +
 
 +
 
 +
</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/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/libraries/css/fonts?action=raw&ctype=text/css" />
−
<script src="https://2017.igem.org/Team:Dalhousie/JS?action=raw&ctype=script/js" ></script>
+
<link rel="stylesheet" href="https://2017.igem.org/Team:Dalhousie/css3?action=raw&ctype=text/css" />
  
 +
<!--------------------oldnavbar--------------->
 +
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  
−
  <style>
+
<!-------------------------------------need this--------------------------->
 +
<style>
 
#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;}
+
#content { width:100%; padding:0px;  margin-top:-20px; margin-left:0px; background-color: black;}
−
body {background-color:white; }
+
body {background-color:white; height:100%; }
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px;  background-color: transparent; z-index:100;}
 
         .jumbotron {
 
         .jumbotron {
−
             height: 720px;
+
             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: 0;
+
−
        left: 0;
+
−
        overflow: hidden;
+
−
        z-index: -100;
+
−
        width:100%;
+
 
}
 
}
−
  </style>
+
</style>
−
</head>
+
 
 +
</head>
 +
 
 
<body>
 
<body>
−
<!--smooth attempt-->
 
  
−
<a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
 
  
−
<div class="main">
+
<!-------------------navbar---------------------->
−
   <section></section>
+
<div id="nav" class="noBackground" style="width:100%; z-index:100;" >
−
</div>
+
            <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>
 +
 
 +
<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>
  
−
<div class="main" id="section2">
+
    </ul>
−
   <section style="background-color:blue"></section>
+
   </div>
 +
</nav>
 
</div>
 
</div>
 +
            </div>
 +
        </div>
  
−
<div class="jumbotron text-center" style>
 
−
    <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" />
 
−
    </video>
 
  
−
<!--smooth scrolling-->
 
  
−
<div id="page-wrap">
+
        <div class="panel" id="panel1" >
−
  <h1  style="color:white;"> Dalhousie iGEM </h1>
+
  
−
  <ul>
+
            <div class="inner" >
−
    <li><a href="#one">Scroll down to learn more</a></li>
+
<div class="top" ><div class="title" >Dalhousie iGEM 2017</div></div>
−
  </ul>
+
  
−
    
+
 
 +
 
 +
<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;">
  
−
  <a href="http://www.google.ca" style="font-family:'Bootstrap Glyphicon';"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></a>
 
 
  </div>
 
  </div>
−
</div>
 
−
<div class="container" id="projectdescript" style="padding-bottom:250px;">
 
−
<div class="container">
 
  
−
<h2 id="one">About us</h2>
+
 
−
<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>
+
        <div class="panel panel-red" id="panel3">
−
<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>
+
<p style="text-align: center; ">
−
<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>
+
<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>
−
</div></div>
+
<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