Difference between revisions of "Team:Dalhousie/test4"

 
(185 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
−
<script>
+
<style>
−
(jQuery),+function(a){"use strict";function b(b){var c=b.attr("data-target");c||(c=b.attr("href"),c=c&&/#[A-Za-z]/.test(c)&&c.replace(/.*(?=#[^\s]*$)/,""));var d=c&&a(c);return d&&d.length?d:b.parent()}function c(c){c&&3===c.which||(a(e).remove(),a(f).each(function(){var d=a(this),e=b(d),f={relatedTarget:this};e.hasClass("open")&&(c&&"click"==c.type&&/input|textarea/i.test(c.target.tagName)&&a.contains(e[0],c.target)||(e.trigger(c=a.Event("hide.bs.dropdown",f)),c.isDefaultPrevented()||(d.attr("aria-expanded","false"),e.removeClass("open").trigger(a.Event("hidden.bs.dropdown",f)))))}))}function d(b){return this.each(function(){var c=a(this),d=c.data("bs.dropdown");d||c.data("bs.dropdown",d=new g(this)),"string"==typeof b&&d[b].call(c)})}var e=".dropdown-backdrop",f='[data-toggle="dropdown"]',g=function(b){a(b).on("click.bs.dropdown",this.toggle)};g.VERSION="3.3.7",g.prototype.toggle=function(d){var e=a(this);if(!e.is(".disabled, :disabled")){var f=b(e),g=f.hasClass("open");if(c(),!g){"ontouchstart"in document.documentElement&&!f.closest(".navbar-nav").length&&a(document.createElement("div")).addClass("dropdown-backdrop").insertAfter(a(this)).on("click",c);var h={relatedTarget:this};if(f.trigger(d=a.Event("show.bs.dropdown",h)),d.isDefaultPrevented())return;e.trigger("focus").attr("aria-expanded","true"),f.toggleClass("open").trigger(a.Event("shown.bs.dropdown",h))}return!1}},g.prototype.keydown=function(c){if(/(38|40|27|32)/.test(c.which)&&!/input|textarea/i.test(c.target.tagName)){var d=a(this);if(c.preventDefault(),c.stopPropagation(),!d.is(".disabled, :disabled")){var e=b(d),g=e.hasClass("open");if(!g&&27!=c.which||g&&27==c.which)return 27==c.which&&e.find(f).trigger("focus"),d.trigger("click");var h=" li:not(.disabled):visible a",i=e.find(".dropdown-menu"+h);if(i.length){var j=i.index(c.target);38==c.which&&j>0&&j--,40==c.which&&j<i.length-1&&j++,~j||(j=0),i.eq(j).trigger("focus")}}}};var h=a.fn.dropdown;a.fn.dropdown=d,a.fn.dropdown.Constructor=g,a.fn.dropdown.noConflict=function(){return a.fn.dropdown=h,this},a(document).on("click.bs.dropdown.data-api",c).on("click.bs.dropdown.data-api",".dropdown form",function(a){a.stopPropagation()}).on("click.bs.dropdown.data-api",f,g.prototype.toggle).on("keydown.bs.dropdown.data-api",f,g.prototype.keydown).on("keydown.bs.dropdown.data-api",".dropdown-menu",g.prototype.keydown)}(jQuery),+function(a){"use strict";function b(b,d){return this.each(function(){var e=a(this),f=e.data("bs.modal"),g=a.extend({},c.DEFAULTS,e.data(),"object"==typeof b&&b);f||e.data("bs.modal",f=new c(this,g)),"string"==typeof b?f[b](d):g.show&&f.show(d)})}var c=function(b,c){this.options=c,this.$body=a(document.body),this.$element=a(b),this.$dialog=this.$element.find(".modal-dialog"),this.$backdrop=null,this.isShown=null,this.originalBodyPad=null,this.scrollbarWidth=0,this.ignoreBackdropClick=!1,this.options.remote&&this.$element.find(".modal-content").load(this.options.remote,a.proxy(function(){this.$element.trigger("loaded.bs.modal")},this))};c.VERSION="3.3.7",c.TRANSITION_DURATION=300,c.BACKDROP_TRANSITION_DURATION=150,c.DEFAULTS={backdrop:!0,keyboard:!0,show:!0},c.prototype.toggle=function(a){return this.isShown?this.hide():this.show(a)},c.prototype.show=function(b){var d=this,e=a.Event("show.bs.modal",{relatedTarget:b});this.$element.trigger(e),this.isShown||e.isDefaultPrevented()||(this.isShown=!0,this.checkScrollbar(),this.setScrollbar(),this.$body.addClass("modal-open"),this.escape(),this.resize(),this.$element.on("click.dismiss.bs.modal",'[data-dismiss="modal"]',a.proxy(this.hide,this)),this.$dialog.on("mousedown.dismiss.bs.modal",function(){d.$element.one("mouseup.dismiss.bs.modal",function(b){a(b.target).is(d.$element)&&(d.ignoreBackdropClick=!0)})}) </script>
+
#bg-video {
−
 
+
        position: fixed;
 +
        top: 0;
 +
        right: 0;
 +
        bottom: 0px;
 +
        left: 0;
 +
        overflow: hidden;
 +
        z-index: -100;
 +
        width:100%;
  
 +
}
 +
</style>
  
 
<!--glyphicons-->
 
<!--glyphicons-->
Line 11: 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 29:
 
#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; }
−
#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;
−
            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>
+
−
 
+
−
<!------------fadedivs-------------------------->
+
−
<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 {
+
−
position: absolute;
+
−
z-index:1;
+
−
height: 100%;
+
−
width:100%;
+
−
    background: transparent; /* For browsers that do not support gradients */
+
−
    background: -webkit-linear-gradient(black, transparent 80%, black); /* For Safari 5.1 to 6.0 */
+
−
    background: -o-linear-gradient(black, transparent 80%, black); /* For Opera 11.1 to 12.0 */
+
−
    background: -moz-linear-gradient(black, transparent 80%, black); /* For Firefox 3.6 to 15 */
+
−
    background: linear-gradient(black, transparent 80%, black); /* Standard syntax (must be last) */
+
 
}
 
}
 
</style>
 
</style>
  
 +
</head>
  
−
 
−
 
−
 
−
 
−
</head>
 
−
 
 
<body>
 
<body>
  
−
 
+
<!-------------------navbar---------------------->
−
<!--------------------------------------------------------------video------------------------------------------------------------------------------>
+
<div id="nav" class="noBackground" style="width:100%; z-index:100;" >
−
 
+
            <div class="inner" >
−
<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:-100;" autoplay="true" loop="loop" preload="metadata" muted="muted">
+
−
        <source src="https://static.igem.org/mediawiki/2017/5/53/Final5.mp4" type="video/mp4" />
+
−
    </video>
+
−
 
+
−
 
+
−
 
+
−
<div id="page-wrap"style="padding-top:400px;  ">
+
−
 
+
−
<!--------------------------------fade title---------------------------->
+
−
<style>body {
+
−
  margin: 0;
+
−
  height: 10px;
+
−
}
+
−
 
+
−
.top {
+
−
  margin: 100;
+
−
  position: relative;
+
−
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>
+
−
 
+
−
 
+
−
<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>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
  </div>
+
−
 
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<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; ">
+
−
 
+
−
 
+
−
<!-------------------------------------------------------------STICKYNAVBAR----------------------------------------------------------------------------->
+
−
 
+
−
<style>
+
−
body {
+
−
    height:1600px;
+
−
    margin:0;
+
−
}
+
−
#navWrap {
+
−
position: absolute;
+
−
    height:70px
+
−
  z-index:100;
+
−
  left:0px;
+
−
width:100%;
+
−
 
+
−
}
+
−
nav {
+
−
    height: 70px;
+
−
    background:black;
+
−
z-index:100;
+
−
width:100%;
+
−
 
+
−
}
+
−
.sticky {
+
−
    position: fixed;
+
−
    bottom:0;
+
−
width:100%;
+
−
z-index:100;
+
−
background: black;
+
−
}
+
−
h1 {
+
−
    margin: 0;
+
−
color: white;
+
−
}
+
−
 
+
−
 
+
−
</style>
+
−
 
+
−
<script>
+
−
 
+
−
 
+
−
 
+
−
$(window).scroll(function(){
+
−
var position = $(window).scrollTop();
+
−
  if (position>335)
+
−
      $('nav').addClass('sticky');
+
−
    else {
+
−
        $('nav').removeClass('sticky');
+
−
    }
+
−
})
+
−
 
+
−
 
+
−
 
+
−
</script>
+
−
 
+
−
  <!------------------NEW NAVBAR--------------------------------->
+
 
<div id="navWrap">
 
<div id="navWrap">
−
     <nav>
+
     <nav >
 +
<div class="container-fluid">
 +
    <ul class="nav navbar-nav navbar-center">
  
−
 
−
 
−
 
−
          <!------------------------------------------------------------------------------- OLDNavbar -------------------------------------------------------------------------->
 
−
 
−
  <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="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;">Project
−
         <span class="caret"></span></a>
+
         </a>
−
         <ul class="dropdown-menu">
+
         <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/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/Design">Design</a></li>
−
           <li><a href="https://2017.igem.org/Team:Dalhousie/Experiments">Experiments</a></li>
+
           <li><a href="https://2017.igem.org/Team:Dalhousie/Improve">Improve</a></li>
−
          <li><a href="https://2017.igem.org/Team:Dalhousie/Notebook">Notebook</a></li>
+
−
          <li><a href="https://2017.igem.org/Team:Dalhousie/Interlab">Interlab</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>
+
−
          <li><a href="https://2017.igem.org/Team:Dalhousie/Results">Results</a></li>
+
−
          <li><a href="https://2017.igem.org/Team:Dalhousie/Demonstrate">Demonstrate</a></li>
+
−
        <li><a href="https://2017.igem.org/Team:Dalhousie/Improve">Improve</a></li>
+
−
          <li><a href="https://2017.igem.org/Team:Dalhousie/Attributions">Attributions</a></li>
+
 
         </ul>
 
         </ul>
 
       </li>
 
       </li>
  
−
     
 
 
<li class="dropdown">
 
<li class="dropdown">
−
         <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Our Team
+
         <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Results
−
         <span class="caret"></span></a>
+
         </a>
−
         <ul class="dropdown-menu">
+
         <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/InterLab">Interlab</a></li>
−
          <li><a href="https://2017.igem.org/Team:Dalhousie/Collaborations">Collaborations</a></li>
+
  <li><a href="https://2017.igem.org/Team:Dalhousie/Results">Results</a></li>
 
         </ul>
 
         </ul>
−
      </li>
+
</li>  
  
 +
 
 
<li class="dropdown">
 
<li class="dropdown">
−
         <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Parts
+
         <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Team
−
         <span class="caret"></span></a>
+
         </a>
−
         <ul class="dropdown-menu">
+
         <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/Team">Team</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/Collaborations">Collaborations</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/Attributions">Attributions</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/Sponsors">Sponsors</a></li>
 
         </ul>
 
         </ul>
−
      </li>
+
</li>
−
 
+
−
      <li><a href="https://2017.igem.org/Team:Dalhousie/Safety" style=" color: white;">Safety</a></li>
+
  
 
<li class="dropdown">
 
<li class="dropdown">
 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Human Practices
 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Human Practices
−
         <span class="caret"></span></a>
+
         </a>
−
         <ul class="dropdown-menu">
+
         <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/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/Silver_Integrated">Silver HP</a></li>
Line 260: Line 97:
 
           <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/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/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>
 
         </ul>
 
       </li>
 
       </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">
 
<li class="dropdown">
 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Awards
 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Awards
−
         <span class="caret"></span></a>
+
         </a>
−
         <ul class="dropdown-menu">
+
         <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/Applied_Design">Applied Design</a></li>
 
           <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Entrepreneurship">Entrepreneurship</a></li>
 
           <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Entrepreneurship">Entrepreneurship</a></li>
Line 280: Line 139:
 
<ul class="nav navbar-nav navbar-right">
 
<ul class="nav navbar-nav navbar-right">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
−
       <a class="navbar-brand" >Contact us today </a>
+
       <a class="navbar-brand" style=" color: white;">Contact us today </a>
 
     </div>
 
     </div>
 
<li>
 
<li>
−
                         <a href="mailto:igemdalhousie@gmail.com" ><i class="fa fa-envelope-o fa-fw"></i> <span class="network-name"></span></a>
+
                         <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>
 
<li>
 
<li>
−
                         <a target="_blank" href="https://twitter.com/dalhousie_igem?lang=en" ><i class="fa fa-twitter fa-fw"></i> <span class="network-name"></span></a>
+
                         <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>
 
                     <li>
 
                     <li>
−
                         <a target="_blank" href="https://www.facebook.com/Dalhousie.iGEM/" ><i class="fa fa-facebook fa-fw"></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>
  
−
    <!------------------------------------------------------------------------------- OLDNavbarEND -------------------------------------------------------------------------->
 
  
−
    </nav>
 
−
</div>
 
  
 +
        <div class="panel" id="panel1" >
  
−
<!-------------------------------------------------------------NAVBAR END----------------------------------------------------------------------------->
+
            <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">
 +
</br>
 +
Welcome! </br>
 +
The goal of our project is to convert cellulose into D-glucose, which can be used for biofuel! </br>
 +
Let us show you how!
 +
            <div class="inner">
 
<!-------------------------------------------infographic----------------------------->
 
<!-------------------------------------------infographic----------------------------->
−
<p style="text-align:center; color:white;">
+
<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="85%" width="85%"></p>
+
<img src= "https://static.igem.org/mediawiki/2017/d/de/Infograph22.jpg" align="center" height="70%" width="70%"></p>
  
  
 +
           
 +
            </div>
 +
        </div>
 +
 +
 +
<div class="container" style="height:450px; width:100%; position: relative;">
  
 
  </div>
 
  </div>
  
  
 +
        <div class="panel panel-red" id="panel3">
 +
     
 +
<!---------------------------pics---------------------------->
 +
<p style="text-align: center; ">
 +
<img src= "https://static.igem.org/mediawiki/2017/d/d3/Q.png" height="20%" width="20%" style=" padding:50px;">
 +
<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>
  
  
 +
<style>
 +
html {
 +
height: 100%;
 +
min-height: 100%;
 +
}
  
−
<div class="container" style="height:500px; width:100%; position: relative;">
+
body {
−
<div id="grad2" style=" width:100%; position: absolute; left: 0px;"><!--------fade------------>
+
height: 100%;
−
</div>
+
}
−
</div>
+
  
 +
.panel {
 +
width: 100%;
 +
height: 100%;
 +
background: black;
 +
color: #fff;
 +
padding-left: 5%;
 +
padding-right: 5%;
 +
text-align: center;
 +
}
  
  
  
  
−
<div class="container"  style="padding-bottom:100px;  padding-top:50px; padding-right:100px; padding-left:100px;  width:100%; height:100%; background-color: black;">
 
−
<p style="text-align:center; color:white; font-size: 50px;">
 
−
Sponsor area</p>
 
−
</div>
 
  
 +
.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: 850px;
 +
width:100%;
 +
z-index:100;
 +
}
 +
#panel2{
 +
width:100%;
 +
height: 100%;
 +
margin-bottom:0px;
 +
background: black;
 +
font-size: 40px;
 +
line-height: 40px;
 +
}
 +
#panel3{
 +
width:100%;
 +
height: 200px;
 +
margin-bottom:-100px;
 +
 +
background: rgba(35,47,19,0.9);
 +
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.addClass('blackBackground');
 +
} else {
 +
header.removeClass('blackBackground');
 +
                     
 +
}
 +
});
 +
});
 +
</script>
  
 
</body>
 
</body>
−
</html>
+
<html>

Latest revision as of 14:39, 11 October 2017

Dalhousie iGEM 2017

Welcome!
The goal of our project is to convert cellulose into D-glucose, which can be used for biofuel!
Let us show you how!