Difference between revisions of "Team:Dalhousie/test4"

 
(314 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 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 11: 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>
+
</style>
  
−
<!------------fade-------------------------->
 
−
<style>
 
−
#grad1 {
 
−
    height: 833px;
 
−
    background: transparent; /* For browsers that do not support gradients */
 
−
    background: -webkit-linear-gradient(transparent 60%, black ); /* For Safari 5.1 to 6.0 */
 
−
    background: -o-linear-gradient(transparent 60%, black ); /* For Opera 11.1 to 12.0 */
 
−
    background: -moz-linear-gradient(transparent 60%, black ); /* For Firefox 3.6 to 15 */
 
−
    background: linear-gradient(transparent 60%, black ); /* Standard syntax (must be last) */
 
−
}
 
−
</style>
 
−
<style>
 
−
#grad2 {
 
−
    height: 1600px;
 
−
    background: transparent; /* For browsers that do not support gradients */
 
−
    background: -webkit-linear-gradient(transparent 10%, #FCEBD9); /* For Safari 5.1 to 6.0 */
 
−
    background: -o-linear-gradient(transparent 10%, #FCEBD9); /* For Opera 11.1 to 12.0 */
 
−
    background: -moz-linear-gradient(transparent 10%, #FCEBD9); /* For Firefox 3.6 to 15 */
 
−
    background: linear-gradient(transparent 10%, #FCEBD9); /* Standard syntax (must be last) */
 
−
}
 
−
</style>
 
 
</head>
 
</head>
−
+
 
 
<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">
  
−
<!--------------------------------------------------------------video------------------------------------------------------------------------------>
+
      <li class="active" ><a href="https://2017.igem.org/Team:Dalhousie/test3" style=" color: white;">Home</a></li>
  
−
<div class="jumbotron text-center " style= "background-color: transparent;">
+
<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>
  
−
    <div id="grad1"><!--------fade------------>
+
<li class="dropdown">
−
<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">
+
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Results
−
        <source src="https://static.igem.org/mediawiki/2017/3/34/Finalfinal.mp4" type="video/mp4" />
+
        </a>
−
    </video>
+
        <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" />
  
  
−
<div id="page-wrap"style="padding-top:400px;  ">
 
  
 
<!--------------------------------fade title---------------------------->
 
<!--------------------------------fade title---------------------------->
Line 77: Line 178:
  
 
.top {
 
.top {
−
   margin: 100;
+
 
−
   position: relative;
+
   margin-top: 350px;
−
  width:55%;
+
   position: absolute;
−
   left:300px;
+
  width:65%;
−
   background-color: rgba(0,0,0,0.1);
+
   left:250px;
 +
   background-color: transparent;
 
   height: 150px;
 
   height: 150px;
 
   text-align: center;
 
   text-align: center;
−
   font-family: 'helvetica';
+
   font-family: 'Trebuchet MS';
−
   font-size: 50px;
+
   font-size: 80px;
−
   font-weight: 100;
+
   font-weight: 400;
−
   color: #fff;
+
   color: white;
 
line-height: 60px;
 
line-height: 60px;
 
}
 
}
Line 100: Line 202:
 
</style>
 
</style>
  
−
 
+
<!---------------------------------------------------------------------------------this------------------------------------------------------------------------------------------->
 
<script> $(window).scroll(function(){
 
<script> $(window).scroll(function(){
−
     $(".top").css("opacity", 1 - $(window).scrollTop() / 150);
+
     $(".top").css("opacity", 1 - $(window).scrollTop() / 300);
−
   });</script>
+
   });
 +
</script>
  
−
<div class="top"><div class="title">Welcome to Dalhousie's 2017 iGEM wiki</div></div>
 
  
 +
            </div>
 +
        </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----------------------------->
 +
<p style="text-align:center; color:white; margin-top:50px;">
 +
<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>
 
  
−
                     
 
  
 +
        <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>
  
−
<div class="container" id="projectdescript" style="padding-bottom:50px; padding-top:50px; padding-right:100px; padding-left:100px;  width:100%; height:100%; background-color: black;">
 
  
−
<div id="grad2"><!--------fade------------>
+
<style>
 +
html {
 +
height: 100%;
 +
min-height: 100%;
 +
}
  
−
<!-------------------------------------------infographic----------------------------->
+
body {
−
<p style="text-align:center; color:white;">
+
height: 100%;
−
<img src= "https://static.igem.org/mediawiki/2017/8/8b/Infograph2_1.jpg" align="center" height="85%" width="85%"></p>
+
}
−
</div></div>
+
  
 +
.panel {
 +
width: 100%;
 +
height: 100%;
 +
background: black;
 +
color: #fff;
 +
padding-left: 5%;
 +
padding-right: 5%;
 +
text-align: center;
 +
}
  
  
  
  
−
<div class="container" id="projectdescript" 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:white;">
+
.panel.panel-red {
−
<h1> hihihihihihihihihihihihihsoaid oihdoih oih oih oih oi hoi ho ih hihihihihihihihihihihihihsoaid oihdoih oih oih oih oi hoi ho ih hihihihihihihihihihihihihsoaid oihdoih oih oih oih oi hoi ho ih hihihihihihihihihihihihihsoaid oihdoih oih oih oih oi hoi ho ih hihihihihihihihihihihihihsoaid oihdoih oih oih oih oi hoi ho ih hihihihihihihihihihihihihsoaid oihdoih oih oih oih oi hoi ho ih hihihihihihihihihihihihihsoaid oihdoih oih oih oih oi hoi ho ih hihihihihihihihihihihihihsoaid oihdoih oih oih oih oi hoi ho ih hihihihihihihihihihihihihsoaid oihdoih oih oih oih oi hoi ho ih hihihihihihihihihihihihihsoaid oihdoih oih oih oih oi hoi ho ih hihihihihihihihihihihihihsoaid oihdoih oih oih oih oi hoi ho ih hihihihihihihihihihihihihsoaid oihdoih oih oih oih oi hoi ho ih hihihihihihihihihihihihihsoaid oihdoih oih oih oih oi hoi ho ih hihihihihihihihihihihihihsoaid oihdoih oih oih oih oi hoi ho ih </h1</p>
+
background: black;
−
</div>
+
  
 +
}
 +
#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>

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!