|
|
(138 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | <html xmlns="http://www.w3.org/1999/xhtml">
| + | {{Template:Queens_Canada/qgemheader}} |
- | <head>
| + | |
- | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
| + | |
- | <title>Untitled Document</title>
| + | |
- | <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
| + | |
- | <script type="text/javascript" src="../../Downloads/jquery-visible-master/jquery.visible.js"></script>
| + | |
- | <style>
| + | |
- | *{
| + | |
- | margin:0;
| + | |
- | padding:0;
| + | |
- | }
| + | |
- | html{
| + | |
- | white-space:nowrap;
| + | |
- | word-spacing:0;
| + | |
- | padding:0;
| + | |
- | margin:0;
| + | |
- | }
| + | |
- | /* ----------------Display:none---------------- */
| + | |
- | #p-logo {
| + | |
- | display: none;
| + | |
- | }
| + | |
- | | + | |
- | #search-controls {
| + | |
- | display: none;
| + | |
- | }
| + | |
- | | + | |
- | .firstHeading {
| + | |
- | display: none;
| + | |
- | }
| + | |
- | | + | |
- | #catlinks {
| + | |
- | display: none;
| + | |
- | }
| + | |
- | | + | |
- | #footer-box {
| + | |
- | display: none;
| + | |
- | }
| + | |
- | | + | |
- | #contentSub {
| + | |
- | display: none;
| + | |
- | }
| + | |
- | | + | |
- | #top-section{
| + | |
- | display:none;
| + | |
- | }
| + | |
- | | + | |
- | #globalWrapper{
| + | |
- | margin:0;
| + | |
- | padding:0;
| + | |
- | }
| + | |
- | | + | |
- | #content{
| + | |
- | margin:0;
| + | |
- | padding:0;
| + | |
- | width:100%;
| + | |
- | }
| + | |
- | | + | |
- | #bodyContent{
| + | |
- | margin:0;
| + | |
- | padding:0;
| + | |
- | width:100%;
| + | |
- | }
| + | |
- | #menubar{
| + | |
- | display:none;
| + | |
- | }
| + | |
- | /**---------PAGE------------**/
| + | |
- | #fullpage{
| + | |
- | color:white;
| + | |
- | margin:0;
| + | |
- | padding:0;
| + | |
- | width:100%;
| + | |
- | height:100%;
| + | |
- | position:fixed;
| + | |
- | }
| + | |
- | body{
| + | |
- | background:white;
| + | |
- | background-siz:cover;
| + | |
- | z-index:-999;
| + | |
- | }
| + | |
- | /**---------HEADER----------**/
| + | |
- | .actualimg{
| + | |
- | background:url(https://dl.dropboxusercontent.com/u/125588631/qgem-final-cover.png) no-repeat center center;
| + | |
- | position:fixed;
| + | |
- | background-size:cover;
| + | |
- | padding:0px;
| + | |
- | margin:0px;
| + | |
- | min-width:100%;
| + | |
- | min-height:100%;
| + | |
- | }
| + | |
- | .home-body{
| + | |
- | background:none repeat scroll 0 0 #FBFBFB;
| + | |
- | padding:0px;
| + | |
- | height:auto;
| + | |
- | width:100%;
| + | |
- | position:relative;
| + | |
- | display:inline-block;
| + | |
- | left:0px;
| + | |
- | right:0px;
| + | |
- | bottom:0px;
| + | |
- | z-index:1;
| + | |
- | position:relative;
| + | |
- | }
| + | |
- | .tattletale{
| + | |
- | height:50px;
| + | |
- | width:50px;
| + | |
- | top-margin:10px;
| + | |
- | left-margin:20px;
| + | |
- | background:blue;
| + | |
- | position:relative;
| + | |
- | z-index:999;
| + | |
- | display:none;
| + | |
- | }
| + | |
- | /**--------General Style Elements------------**/
| + | |
- | .center-align{
| + | |
- | text-align:center;
| + | |
- | }
| + | |
- | .container{
| + | |
- | margin:0px;
| + | |
- | padding:0px;
| + | |
- | width:100%;
| + | |
- | z-index:0;
| + | |
- | position:relative;
| + | |
- | }
| + | |
- | /**---------Menubar------------**/
| + | |
- | .logo-bar{
| + | |
- | width:100%;
| + | |
- | height:60px;
| + | |
- | background-color:#83282a;
| + | |
- | position:fixed;
| + | |
- | z-index:50;
| + | |
- | display:none;
| + | |
- | margin:0px;
| + | |
- | padding:0px;
| + | |
- | top,left,right:0;
| + | |
- | vertical-align:text-top;
| + | |
- | float:left;
| + | |
- | border:0px;;
| + | |
- | }
| + | |
- | .upper-row{
| + | |
- | margin-top:0px;
| + | |
- | margin-left:55%;
| + | |
- | overflow:hidden;
| + | |
- | position:absolute;
| + | |
- | }
| + | |
- | .lower-row{
| + | |
- | margin-top:32px;
| + | |
- | margin-left:59%;
| + | |
- | position:absolute;
| + | |
- | }
| + | |
- | .top-menu{
| + | |
- | padding:0px;
| + | |
- | position:fixed;
| + | |
- | z-index:100;
| + | |
- | }
| + | |
- | .top-menu ul{
| + | |
- | margin:0;
| + | |
- | padding:0;
| + | |
- | }
| + | |
- | .top-menu li{
| + | |
- | display:inline-block;
| + | |
- | padding: 0 10px;
| + | |
- | margin: 0 0px;
| + | |
- | }
| + | |
- | .top-menu a:link {text-decoration:none;color:#83282a;}
| + | |
- | .top-menu a:visited{color:#83282a;}
| + | |
- | .top-menu a:hover{color:#ff6669;}
| + | |
- | | + | |
- | .top-menu-low{
| + | |
- | top-margin:20px;
| + | |
- | padding:0px;
| + | |
- | position:fixed;
| + | |
- | z-index:100;
| + | |
- | }
| + | |
- | .top-menu-low ul{
| + | |
- | margin:0;
| + | |
- | padding:0;
| + | |
- | }
| + | |
- | .top-menu-low li{
| + | |
- | display:inline-block;
| + | |
- | padding: 0 5px;
| + | |
- | margin: 0 2px;
| + | |
- | }
| + | |
- | .top-menu-low a:link {text-decoration:none;color:#83282a;}
| + | |
- | .top-menu-low a:visited{color:#83282a;}
| + | |
- | .top-menu-low a:hover{color:#ff6669;}
| + | |
- | /**---------Fonts---------**/
| + | |
- | @font-face{
| + | |
- | font-family:bebasN;
| + | |
- | src:url(https://dl.dropboxusercontent.com/u/125588631/BebasNeue.otf);
| + | |
- | }
| + | |
- | .menu-font{
| + | |
- | font-family:bebasN;
| + | |
- | font-size:2em;
| + | |
- | }
| + | |
- | .menu-font-low{
| + | |
- | font-family:bebasN;
| + | |
- | font-size:1.5em;
| + | |
- | }
| + | |
- | .regular{
| + | |
- | font-family:bebasN;
| + | |
- | color:black;
| + | |
- | font-size:15px;
| + | |
- | }
| + | |
- | </style>
| + | |
- | </head>
| + | |
- | <body>
| + | |
- | <p><!--<div id="fullpage"></div>-->
| + | |
- | </p>
| + | |
- | <div class="logo-bar"><img src="https://dl.dropboxusercontent.com/u/125588631/toolbar-logo.png" height="60px" /></div>
| + | |
- | | + | |
- | <div class="actualimg"><div class="tattletale"></div></div>
| + | |
- | <div class="top-menu menu-font upper-row">
| + | |
- | <ul>
| + | |
- | <li><a href="#">HOME</a></li>
| + | |
- | <li><a href="https://2013.igem.org/Team:Queens_Canada/Team">TEAM</a></li>
| + | |
- | <li><a href="https://2013.igem.org/Team:Queens_Canada/Project">PROJECT</a></li>
| + | |
- | <li><a href="#">OUTREACH</a></li>
| + | |
- |
| + | |
- | </ul>
| + | |
- | </div>
| + | |
- | <div class="top-menu-low menu-font-low lower-row">
| + | |
- | <ul>
| + | |
- | <li><a href="https://2013.igem.org/Team:Queens_Canada/Parts">PARTS</a></li>
| + | |
- | <li><a href="https://2013.igem.org/Team:Queens_Canada/Safety">SAFETY</a></li>
| + | |
- | <li><a href="#">JUDGING</a></li>
| + | |
- | <li><a href="https://2013.igem.org/Team:Queens_Canada/Notebook">NOTEBOOK</a></li>
| + | |
- | </ul>
| + | |
- | </div>
| + | |
- | <div class="home-body">
| + | |
- | <div class="center-align regular">
| + | |
- | ><p>More to come in the near future!</p><br />
| + | |
- | <p>This is filler</p><br />
| + | |
- | <p>This is filler</p><br />
| + | |
- | <p>This is filler</p><br />
| + | |
- | <p>This is filler</p><br />
| + | |
- | <p>This is filler</p><br />
| + | |
- | <p>This is filler</p><br />
| + | |
- | <p>This is filler</p><br />
| + | |
- | <p>This is filler</p><br />
| + | |
- | <p>This is filler</p><br />
| + | |
- | <p>This is filler</p><br />
| + | |
- | <p>This is filler</p><br />
| + | |
- | <p>This is filler</p><br />
| + | |
- | <p>This is filler</p><br />
| + | |
- | <p>This is filler</p><br />
| + | |
- | <p>This is filler</p><br />
| + | |
- | <p>This is filler</p><br />
| + | |
- | <p>This is filler</p><br />
| + | |
- | <p>This is filler</p><br />
| + | |
- | <p>This is filler</p><br />
| + | |
- | <p>This is filler</p><br />
| + | |
- | <p>This is filler</p><br />
| + | |
- | <p>This is filler</p><br />
| + | |
- | <p>This is filler</p><br />
| + | |
- | <p>This is filler</p><br />
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | | + | |
- | <script type="text/javascript">
| + | |
- | | + | |
- | function isOnScreen(element)
| + | |
- | {
| + | |
- | var curPos = element.offset();
| + | |
- | var curTop = curPos.top;
| + | |
- | var screenHeight = $(window).height();
| + | |
- | return (curTop >= screenHeight) ? false : true;
| + | |
- | } | + | |
- | | + | |
- | function threshold(element)
| + | |
- | {
| + | |
- | var curPos = element.offset();
| + | |
- | var curTop = curPos.top;
| + | |
- | var screenHeight = $(window).height();
| + | |
- | if (curTop == screenHeight){
| + | |
- | if (curTop > screenHeight){ return 1;}
| + | |
- | else {return (-1);}
| + | |
- | }
| + | |
- | return 0;
| + | |
- | }
| + | |
- | | + | |
- | $(document).ready(function(){
| + | |
- | var height = $(window).height();
| + | |
- | var val = (height.toString())+"px";
| + | |
- | $(".home-body").css("margin-top",val);
| + | |
- |
| + | |
- |
| + | |
- |
| + | |
- | $(window).resize(function(){
| + | |
- | var height = $(window).height();
| + | |
- | var val = (height.toString())+"px";
| + | |
- | $(".home-body").css("margin-top",val);
| + | |
- | });
| + | |
- |
| + | |
- |
| + | |
- | $(window).scroll(function(){
| + | |
- | if(isOnScreen($(".tattletale")) == false){
| + | |
- | $(".logo-bar").css("display","inline-block");
| + | |
- | $(".logo-bar").fadeIn('fast');
| + | |
- | $(".top-menu a:link").css("color","white");
| + | |
- | $(".top-menu-low a:link").css("color","white");
| + | |
- | }
| + | |
- | else{
| + | |
- | $(".logo-bar").css("display","none");
| + | |
- | $(".top-menu a:link").css("color","#83282a");
| + | |
- | $(".top-menu-low a:link").css("color","#83282a");
| + | |
- |
| + | |
- | }
| + | |
- | });
| + | |
- | });
| + | |
- | </script>
| + | |
- | </body>
| + | |
- | </html>
| + | |