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--> | ||
Line 9: | Line 20: | ||
<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" /> | ||
+ | |||
+ | <!--------------------oldnavbar---------------> | ||
+ | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | ||
+ | |||
<!-------------------------------------need this---------------------------> | <!-------------------------------------need this---------------------------> | ||
Line 16: | Line 31: | ||
#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: #000000;} | ||
body {background-color:black; } | body {background-color:black; } | ||
− | #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: 10px; background-color: transparent; z-index:100;} |
.jumbotron { | .jumbotron { | ||
height: 850px; | height: 850px; | ||
position: relative; | position: relative; | ||
− | + | ||
} | } | ||
− | + | </style> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
<!------------fadedivs--------------------------> | <!------------fadedivs--------------------------> | ||
Line 61: | Line 66: | ||
</style> | </style> | ||
+ | </head> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<body> | <body> | ||
− | + | <div id="nav" class="noBackground" style="width:100%; z-index:100;" > | |
− | + | <div class="inner" > | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <div class=" | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
<div id="navWrap"> | <div id="navWrap"> | ||
− | <nav> | + | <nav > |
− | + | <div class="container-fluid"> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
<ul class="nav navbar-nav navbar-center"> | <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="active" ><a href="https://2017.igem.org/Team:Dalhousie/test3" style=" color: white;">Home</a></li> | ||
− | |||
− | |||
<li class="dropdown"> | <li class="dropdown"> | ||
<a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">The Project | <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">The Project | ||
Line 302: | Line 159: | ||
<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> | <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> | </li> | ||
+ | |||
</ul> | </ul> | ||
</div> | </div> | ||
+ | </nav> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | <div id="grad1"><!--------fade------------> | ||
+ | <div class="panel" id="panel1" > | ||
− | < | + | <div class="inner" > |
− | < | + | <div class="top" ><div class="title" >Welcome to Dalhousie's 2017 iGEM wiki</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/5/53/Final5.mp4" type="video/mp4" /> | ||
− | |||
+ | <!--------------------------------fade title----------------------------> | ||
+ | <style>body { | ||
+ | margin: 0; | ||
+ | height: 10px; | ||
+ | } | ||
+ | .top { | ||
+ | |||
+ | margin-top: 450px; | ||
+ | position: absolute; | ||
+ | width:55%; | ||
+ | left:300px; | ||
+ | background-color: rgba(0,0,0,0.4); | ||
+ | height: 150px; | ||
+ | text-align: center; | ||
+ | font-family: 'Trebuchet MS'; | ||
+ | font-size: 50px; | ||
+ | font-weight: 100; | ||
+ | color: #fff; | ||
+ | line-height: 60px; | ||
+ | } | ||
+ | |||
+ | .title { | ||
+ | position: relative; | ||
+ | top: 10%; | ||
+ | |||
+ | left: 0px; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | <!---------------------------------------------------------------------------------this-------------------------------------------------------------------------------------------> | ||
+ | <script> $(window).scroll(function(){ | ||
+ | $(".top").css("opacity", 1 - $(window).scrollTop() / 400); | ||
+ | });</script> | ||
− | <div | + | </div> |
− | <div | + | </div> |
</div> | </div> | ||
− | |||
+ | <div class="panel" id="panel2"> | ||
+ | <div class="inner"> | ||
+ | |||
+ | <!-------------------------------------------infographic-----------------------------> | ||
+ | <p style="text-align:center; color:white; margin-top:50px;"> | ||
+ | <img src= "https://static.igem.org/mediawiki/2017/8/8b/Infograph2_1.jpg" align="center" height="70%" width="70%"></p> | ||
− | |||
− | |||
− | |||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="container" style="height:450px; width:100%; position: relative;"> | ||
+ | <div id="grad2" style=" width:100%; position: absolute; left: 0px; top: 0px;"><!--------fade------------> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="panel panel-red" id="panel3"> | ||
+ | <div class="inner"> | ||
+ | <p style="text-align:center; color:white; font-size: 30px; margin-top:100px;"> | ||
+ | Thanks to our Sponsors!!</p> | ||
<!---------------------------pics----------------------------> | <!---------------------------pics----------------------------> | ||
<p style="text-align: center; "> | <p style="text-align: center; "> | ||
Line 347: | Line 257: | ||
<img src= "https://static.igem.org/mediawiki/2017/5/57/B.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> | </p> | ||
+ | </div> | ||
+ | </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; | ||
+ | } | ||
Line 358: | Line 285: | ||
+ | .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: none; | ||
+ | visibility: hidden; | ||
+ | width:100%; | ||
+ | padding-right:0px; | ||
+ | } | ||
+ | |||
+ | .blackBackground { | ||
+ | background: black; | ||
+ | visibility: visible; | ||
+ | width:100%; | ||
+ | } | ||
+ | |||
+ | #nav .inner { | ||
+ | z-index:100; | ||
+ | padding-bottom:40px; | ||
+ | } | ||
+ | |||
+ | #nav ul { | ||
+ | list-style: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #inner{ | ||
+ | z-index:101; | ||
+ | |||
+ | } | ||
+ | |||
+ | #panel1{ | ||
+ | background: transparent; | ||
+ | height: 850px; | ||
+ | width:100%; | ||
+ | z-index:100; | ||
+ | } | ||
+ | #panel2{ | ||
+ | width:100%; | ||
+ | height: 100%; | ||
+ | margin-bottom:0px; | ||
+ | } | ||
+ | #panel3{ | ||
+ | width:100%; | ||
+ | height: 500px; | ||
+ | margin-bottom:-100px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </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.removeClass('noBackground').addClass('blackBackground').fadeIn(); | ||
+ | } else { | ||
+ | header.removeClass('blackBackground').fadeOut().addClass('noBackground'); | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
</body> | </body> | ||
− | < | + | <html> |
Revision as of 00:56, 20 September 2017
Welcome to Dalhousie's 2017 iGEM wiki
Thanks to our Sponsors!!