Team:Queens Canada

From 2013.igem.org

(Difference between revisions)
Line 4: Line 4:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<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>
<style>
 +
*{
 +
margin:0;
 +
padding:0;
 +
}
 +
html{
 +
white-space:nowrap;
 +
word-spacing:0;
 +
padding:0;
 +
margin:0;
 +
 +
}
/* ----------------Display:none---------------- */
/* ----------------Display:none---------------- */
#p-logo {
#p-logo {
Line 36: Line 49:
width:100%;
width:100%;
height:100%;
height:100%;
 +
position:fixed;
 +
}
 +
body{
 +
background:white;
 +
background-siz:cover;
 +
z-index:-999;
}
}
/**---------HEADER----------**/
/**---------HEADER----------**/
-
.top-photo{
+
.actualimg{
-
background-size:cover;
+
background:url(https://dl.dropboxusercontent.com/u/125588631/qgem-final-cover.png) no-repeat center center;
-
background-repeat:no-repeat;
+
position:fixed;
position:fixed;
-
top:0px;
+
background-size:cover;
-
left:0px;
+
padding:0px;
-
right:0px;
+
margin:0px;
-
height:600px;
+
min-width:100%;
-
width:100%;
+
min-height:100%;
-
}
+
-
.actualimg{
+
-
background:url(https://dl.dropboxusercontent.com/u/125588631/FINAL%20COVER.jpg);
+
-
background-repeat:no-repeat;
+
-
background-position:center top;
+
-
position:absolute;
+
-
height:600px;
+
-
width:100%;
+
}
}
.home-body{
.home-body{
background:none repeat scroll 0 0 #FBFBFB;
background:none repeat scroll 0 0 #FBFBFB;
clear:both;
clear:both;
-
margin:0px;
 
margin-top:600px;
margin-top:600px;
 +
margin-left,margin-right,margin-bottom:0px;
padding:0px;
padding:0px;
height:auto;
height:auto;
width:100%;
width:100%;
position:relative;
position:relative;
-
overflow:auto;
+
display:inline-block;
-
display:block;
+
left:0px;
left:0px;
right:0px;
right:0px;
bottom: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------------**/
/**--------General Style Elements------------**/
Line 79: Line 100:
padding:0px;
padding:0px;
width:100%;
width:100%;
 +
z-index:0;
 +
position:relative;
}
}
/**---------Menubar------------**/
/**---------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{
.upper-row{
-
margin-top:400px;
+
margin-top:0px;
-
margin-left:52%;
+
margin-left:55%;
 +
overflow:hidden;
 +
position:absolute;
}
}
.lower-row{
.lower-row{
-
margin-top:0px;
+
margin-top:32px;
-
margin-left:56%;
+
margin-left:59%;
 +
position:absolute;
}
}
.top-menu{
.top-menu{
padding:0px;
padding:0px;
 +
position:fixed;
 +
z-index:100;
}
}
.top-menu ul{
.top-menu ul{
Line 98: Line 140:
.top-menu li{
.top-menu li{
display:inline-block;
display:inline-block;
-
padding: 0 15px;
+
padding: 0 10px;
-
margin: 0 4px;
+
margin: 0 0px;
}
}
.top-menu a:link {text-decoration:none;color:#83282a;}
.top-menu a:link {text-decoration:none;color:#83282a;}
Line 106: Line 148:
.top-menu-low{
.top-menu-low{
 +
top-margin:20px;
padding:0px;
padding:0px;
 +
position:fixed;
 +
z-index:100;
}
}
.top-menu-low ul{
.top-menu-low ul{
Line 114: Line 159:
.top-menu-low li{
.top-menu-low li{
display:inline-block;
display:inline-block;
-
padding: 0 10px;
+
padding: 0 5px;
margin: 0 2px;
margin: 0 2px;
}
}
Line 127: Line 172:
.menu-font{
.menu-font{
font-family:bebasN;
font-family:bebasN;
-
font-size:40px;
+
font-size:2em;
-
color:#83282a;
+
-
opacity:0.9;
+
}
}
.menu-font-low{
.menu-font-low{
font-family:bebasN;
font-family:bebasN;
-
font-size:32px;
+
font-size:1.5em;
-
color:#83282a;
+
-
opacity:0.9;
+
}
}
.regular{
.regular{
Line 145: Line 186:
</head>
</head>
<body>
<body>
-
<div id="fullpage">
+
<p><!--<div id="fullpage"></div>-->
-
<div class="top-photo">
+
</p>
-
    <div class="actualimg">
+
<div class="logo-bar"><img src="https://dl.dropboxusercontent.com/u/125588631/toolbar-logo.png" height="60px" /></div>
-
    <div class="top-menu menu-font upper-row">
+
 
 +
<div class="actualimg"><div class="tattletale"></div></div>
 +
<div class="top-menu menu-font upper-row">
         <ul>
         <ul>
             <li><a href="#">HOME</a></li>
             <li><a href="#">HOME</a></li>
Line 156: Line 199:
                  
                  
             </ul>
             </ul>
-
        </div>
+
</div>
         <div class="top-menu-low menu-font-low lower-row">
         <div class="top-menu-low menu-font-low lower-row">
         <ul>  
         <ul>  
Line 165: Line 208:
             </ul>
             </ul>
         </div>     
         </div>     
-
    </div>
 
-
</div>
 
<div class="home-body">
<div class="home-body">
<div class="container center-align regular">
<div class="container center-align regular">
-
  <p>More to come in the near future!</p>
+
  ><p>More to come in the near future!</p><br />
-
</div>
+
  <p>This is filler</p><br />
-
</div>
+
  <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>
</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;
 +
}
 +
 +
$(document).ready(function(){
 +
$(".logo-bar").fadeOut('fast');
 +
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").fadeOut('fast');
 +
$(".top-menu a:link").css("color","#83282a");
 +
$(".top-menu-low a:link").css("color","#83282a");
 +
 +
}
 +
});
 +
 +
/*var icecap = $(window).height();
 +
$(window).resize(function(){
 +
$(".home-body").css("margin-top",(icecap+"px"));
 +
});
 +
var p = $("p:first");
 +
var offset=p.offset();
 +
if(offset<=10){
 +
$(".actualimg").fadeTo("fast",0);
 +
}*/
 +
});
 +
</script>
 +
</body>
</body>
</html>
</html>

Revision as of 21:13, 29 May 2013

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Untitled Document

>

More to come in the near future!


This is filler


This is filler


This is filler


This is filler


This is filler


This is filler


This is filler


This is filler


This is filler


This is filler


This is filler


This is filler


This is filler


This is filler


This is filler


This is filler


This is filler


This is filler


This is filler


This is filler


This is filler


This is filler


This is filler


This is filler


Retrieved from "http://2013.igem.org/Team:Queens_Canada"