Difference between revisions of "Team:Dalhousie/test5"

Line 33: Line 33:
 
});
 
});
 
</script>
 
</script>
−
</head>
+
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<!--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" />
 +
 
 +
<!-------------------------------------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: #000000;}
 +
body {background-color:black; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 10px;  background-color: transparent;}
 +
        .jumbotron {
 +
            height: 850px;
 +
            position: relative;
 +
            z-index:-101;
 +
            }
 +
#bg-video {
 +
        position: fixed;
 +
        top: 0;
 +
        right: 0;
 +
        bottom: -100px;
 +
        left: 0;
 +
        overflow: hidden;
 +
        z-index: -100;
 +
        width:100%;
 +
}
 +
  </style>
 +
 
 +
<!------------fade-------------------------->
 +
<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 {
 +
height: 100%;
 +
width:100%;
 +
    background: transparent; /* For browsers that do not support gradients */
 +
    background: -webkit-linear-gradient(black, transparent 80%, #FCEBD9); /* For Safari 5.1 to 6.0 */
 +
    background: -o-linear-gradient(black, transparent 80%, #FCEBD9); /* For Opera 11.1 to 12.0 */
 +
    background: -moz-linear-gradient(black, transparent 80%, #FCEBD9); /* For Firefox 3.6 to 15 */
 +
    background: linear-gradient(black, transparent 80%, #FCEBD9); /* Standard syntax (must be last) */
 +
}
 +
</style>
 +
 
 +
 
 +
 
<body>
 
<body>
 +
 
<div id="image">Some image</div>
 
<div id="image">Some image</div>
 
<div id="scroller">Some controls</div>
 
<div id="scroller">Some controls</div>
 +
 +
<!--------------------------------------------------------------video------------------------------------------------------------------------------>
 +
 +
<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:-1;" autoplay="true" loop="loop" preload="metadata" muted="muted">
 +
        <source src="https://static.igem.org/mediawiki/2017/d/d0/Final4.mp3" 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;">
 +
<!-------------------------------------------infographic----------------------------->
 +
<p style="text-align:center; color:white;">
 +
<img src= "https://static.igem.org/mediawiki/2017/8/8b/Infograph2_1.jpg" align="center" height="85%" width="85%"></p>
 +
</div>
 +
 +
 +
 +
 +
 +
<div class="container" style="height:500px; width:100%; position: relative;">
 +
<div id="grad2" style=" width:100%; position: absolute; left: 0px;"><!--------fade------------>
 +
</div>
 +
</div>
 +
 +
 +
 +
 +
 +
<div class="container"  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:black; font-size: 50px;">
 +
Sponsor area</p>
 +
</div>
 +
 +
 +
             
 +
 +
 +
 +
 +
 +
 +
 +
 +
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 17:56, 10 September 2017

Some image
Some controls
Welcome to Dalhousie's 2017 iGEM wiki

Sponsor area