Team:Queens Canada/qgem header

From 2013.igem.org

(Difference between revisions)
(Created page with "<html> <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"></sc...")
 
(103 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
<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>
+
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/125588631/bootstrap.min.css" media="screen" />
-
<script type="text/javascript" src="../../Downloads/jquery-visible-master/jquery.visible.js"></script>
+
<script src="http://code.jquery.com/jquery.js"></script>
 +
<script src="https://dl.dropboxusercontent.com/u/125588631/bootstrap.min.js"></script>
<style>
<style>
*{
*{
Line 11: Line 12:
}
}
html{
html{
-
white-space:nowrap;
 
-
word-spacing:0;
 
padding:0;
padding:0;
margin:0;
margin:0;
-
+
}
 +
header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{
 +
display: block;
}
}
/* ----------------Display:none---------------- */
/* ----------------Display:none---------------- */
Line 41: Line 42:
display: none;
display: none;
}
}
 +
 +
#globalWrapper{
 +
    margin:0;
 +
    padding:0;
 +
    background-color:#999999
 +
}
 +
 +
#content{
 +
    margin:0;
 +
    padding:0;
 +
    width:100%;
 +
}
 +
 +
#bodyContent{
 +
    margin:0;
 +
    padding:0;
 +
    width:100%;
 +
}
 +
 +
/**---------TOP-SECTION----**/
 +
#top-section {
 +
height: 30px;
 +
width: 100%;
 +
background-color:#343838; /*per Page*/
 +
        margin:0;
 +
        padding:0;
 +
}
 +
 +
#menubar {
 +
top: 2px;
 +
font-family: 'Droid Sans', sans-serif;
 +
}
 +
/* ----------------TopSection_left-menu---------------- */
 +
.left-menu,.left-menu a {
 +
color: white;
 +
left: 0px;
 +
text-transform: capitalize;
 +
}
 +
 +
.left-menu:hover {
 +
background-color: transparent;
 +
}
 +
 +
.left-menu:hover a {
 +
color: white;
 +
text-decoration: none !important;
 +
}
 +
 +
.left-menu li a:hover {
 +
color: #ff6669;
 +
}
 +
 +
/* ----------------TopSection_right-menu---------------- */
 +
.right-menu li {
 +
background-color: transparent;
 +
}
 +
 +
.right-menu,.right-menu a {
 +
color: white;
 +
right: 0;
 +
text-align: right;
 +
}
 +
 +
.right-menu:hover {
 +
background-color: transparent;
 +
}
 +
 +
.right-menu:hover a {
 +
color: white;
 +
}
 +
 +
.right-menu li a {
 +
background-color: transparent;
 +
color: white;
 +
}
 +
 +
.right-menu li a:hover {
 +
        text-decoration:none;
 +
color: #ff6669;
 +
}
 +
/**---------PAGE------------**/
/**---------PAGE------------**/
#fullpage{
#fullpage{
Line 52: Line 134:
body{
body{
background:white;
background:white;
-
background-siz:cover;
+
background-size:cover;
z-index:-999;
z-index:-999;
}
}
/**---------HEADER----------**/
/**---------HEADER----------**/
-
.actualimg{
+
.top-photo{
-
background:url(https://dl.dropboxusercontent.com/u/125588631/qgem-final-cover.png) no-repeat center center;
+
        background:url(https://dl.dropboxusercontent.com/u/125588631/header_template.png) no-repeat center center;
-
position:fixed;
+
        position:relative;
-
background-size:cover;
+
        overflow:hidden;
-
padding:0px;
+
        width:auto;
-
margin:0px;
+
padding-top:40px;
-
min-width:100%;
+
-
min-height:100%;
+
}
}
-
.home-body{
+
 
-
background:none repeat scroll 0 0 #FBFBFB;
+
.header-text{
-
clear:both;
+
font-family:bebasN;
-
margin-top:600px;
+
font-size:3em;
-
margin-left,margin-right,margin-bottom:0px;
+
color:#ffb297;
-
padding:0px;
+
-
height:auto;
+
-
width:100%;
+
-
position:relative;
+
-
display:inline-block;
+
-
left:0px;
+
-
right:0px;
+
-
bottom:0px;
+
-
z-index:1;
+
position:relative;
position:relative;
 +
margin:5px;
}
}
-
.tattletale{
+
 
-
height:50px;
+
.year{
-
width:50px;
+
font-family:Arial, Helvetica, sans-serif;
-
top-margin:10px;
+
color:#320a00;
-
left-margin:20px;
+
font-size:9em;
-
background:blue;
+
position:relative;
position:relative;
-
z-index:999;
+
margin:5px;
-
display:none;
+
margin-bottom:60px;
 +
}
 +
 
 +
#menu{
 +
margin-top:10%;
 +
margin-left:5%;
 +
}
 +
 
 +
#menu li{
 +
margin: 0 5px;
 +
padding: 0 9px;
 +
display:inline-block;
 +
color:white;
 +
font-size:1.5em;
 +
}
 +
 
 +
#menu li a:link{
 +
color:white;
 +
text-decoration:none;
 +
}
 +
 
 +
#menu li a:hover{
 +
border-bottom:5px solid #ffb297;
 +
}
 +
 
 +
#menu li a:visited{
 +
color:white;
 +
text-decoration:none;
}
}
/**--------General Style Elements------------**/
/**--------General Style Elements------------**/
Line 102: Line 200:
position:relative;
position:relative;
}
}
-
/**---------Menubar------------**/
+
/**---------Fonts---------**/
-
.logo-bar{
+
@font-face{
-
width:100%;
+
font-family:bebasN;
-
height:60px;
+
src:url(https://dl.dropboxusercontent.com/u/125588631/BebasNeue.otf);
-
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{
+
.menu-font{
-
margin-top:0px;
+
font-family:bebasN;
-
margin-left:55%;
+
font-size:2em;
-
overflow:hidden;
+
-
position:absolute;
+
}
}
-
.lower-row{
+
 
-
margin-top:32px;
+
.regular{
-
margin-left:59%;
+
font-family:bebasN;
-
position:absolute;
+
color:black;
 +
font-size:15px;
}
}
-
.top-menu{
+
 
-
padding:0px;
+
<!------- Toolbar ---------->
 +
.toolbar{
 +
height:50px;
 +
opacity:0.9;
 +
margin-top:500px;
position:fixed;
position:fixed;
-
z-index:100;
 
}
}
-
.top-menu ul{
+
 
-
margin:0;
+
.toolbar-links ul{
-
padding:0;
+
font-family:bebasN;
 +
font-size:1.2em;
 +
padding:15px;
}
}
-
.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{
+
.toolbar-links ul li{
-
top-margin:20px;
+
display: inline-block;
-
padding:0px;
+
margin:0 4px;
-
position:fixed;
+
-
z-index:100;
+
-
}
+
-
.top-menu-low ul{
+
-
margin:0;
+
-
padding:0;
+
-
}
+
-
.top-menu-low li{
+
-
display:inline-block;
+
padding: 0 5px;
padding: 0 5px;
-
margin: 0 2px;
 
}
}
-
.top-menu-low a:link {text-decoration:none;color:#83282a;}
+
 
-
.top-menu-low a:visited{color:#83282a;}
+
.toolbar-links li a:link{
-
.top-menu-low a:hover{color:#ff6669;}
+
text-decoration:none;
-
/**---------Fonts---------**/
+
color:white;
-
@font-face{
+
-
font-family:bebasN;
+
-
src:url(https://dl.dropboxusercontent.com/u/125588631/BebasNeue.otf);
+
}
}
-
.menu-font{
+
 
-
font-family:bebasN;
+
.toolbar-links li a:visited{
-
font-size:2em;
+
color:white;
}
}
-
.menu-font-low{https://dl.dropboxusercontent.com/u/125588631/toolbar-logo.png../toolbar-logo.png" height="60px" /></div>
 
-
<div class="actualimg"><div class="tattletale"></div></div>
+
.toolbar-links li a:hover{
-
<div class="top-menu menu-font upper-row">
+
color:#e88587;
-
        <ul>
+
text-decoration:none;
-
            <li><a href="#">HOME</a></li>
+
}
-
                <li><a href="https://2013.igem.org/Team:Queens_Canada/Team">TEAM</a></li>
+
</style>
-
                <li><a href="https://2013.igem.org/Team:Queens_Canada/Project">PROJECT</a></li>
+
</head>
-
                <li><a href="#">OUTREACH</a></li>
+
 
-
               
+
<body>
-
            </ul>
+
<div class="row-fluid toolbar" style="background-color:#83282a;bottom:0;">
-
</div>
+
<div class="span2 offset1">
-
        <div class="top-menu-low menu-font-low lower-row">
+
    <img src="../toolbar-logo.png" style="height:50px;">  
-
        <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="container 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>
 +
    <div class="span6 toolbar-links">
 +
    <ul>
 +
        <li><a href="#">HOME</a></li>
 +
            <li><a href="#">TEAM</a></li>
 +
            <li><a href="#">PROJECT</a></li>
 +
            <li><a href="#">OUTREACH</a></li>
 +
            <li><a href="#">PARTS</a></li>
 +
            <li><a href="#">SAFETY</a></li>
 +
            <li><a href="#">JUDGING</a></li>
 +
            <li><a href="#">NOTEBOOK</a></li>
 +
        </ul>
 +
    </div>
 +
</div>
 +
 +
<div class="top-photo">
 +
<div class="header-text row"><div class="span4 offset1">WE ARE TEAM</div></div>
 +
<div class="row"><div class="span8 offset1"><img src="https://dl.dropboxusercontent.com/u/125588631/qgem-logo.png" style="height:120px;margin-bottom:50px;margin-top:10px;" /></div></div>
 +
<div class="year row"><div class="span4 offset1">2013</div></div>
 +
<div class="header-text row"><div class="span4 offset1">iGEM | QUEEN'S</div></div>
 +
<div>
 +
<div id="menu">
 +
<ul>
 +
    <li><a href="#">HOME</a></li>
 +
        <li><a href="#">TEAM</a></li>
 +
        <li><a href="#">PROJECT</a></li>
 +
        <li><a href="#">OUTREACH</a></li>
 +
        <li><a href="#">PARTS</a></li>
 +
        <li><a href="#">SAFETY</a></li>
 +
        <li><a href="#">JUDGING</a></li>
 +
        <li><a href="#">NOTEBOOK</a></li>
 +
    </ul>
 +
</div>
 +
</div>
</div>
</div>
<script type="text/javascript">
<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(){
$(document).ready(function(){
-
$(".logo-bar").fadeOut('fast');
+
var height = $(window).height()-40;
-
var height = $(window).height();
+
    var val = (height.toString())+"px";
-
var val = (height.toString())+"px";
+
$(".top-photo").css("height",val);
-
$(".home-body").css("margin-top",val);
+
var toolbarHeight=(height.toString()-50)+"px";
 +
$(".toolbar").hide();
$(window).resize(function(){
$(window).resize(function(){
var height = $(window).height();
var height = $(window).height();
var val = (height.toString())+"px";
var val = (height.toString())+"px";
-
$(".home-body").css("margin-top",val);
+
$(".top-photo").css("height",val);
});
});
-
+
 
-
$(window).scroll(function(){
+
        $('.top-photo').waypoint(function(direction) {
-
if(isOnScreen($(".tattletale")) == false){
+
if (direction=="down"){
-
$(".logo-bar").css("display","inline-block");
+
$('.toolbar').fadeIn('fast');
-
$(".logo-bar").fadeIn('fast');
+
-
$(".top-menu a:link").css("color","white");
+
-
$(".top-menu-low a:link").css("color","white");
+
}
}
else{
else{
-
$(".logo-bar").fadeOut('fast');
+
$('.toolbar').fadeOut('fast');
-
$(".top-menu a:link").css("color","#83282a");
+
-
$(".top-menu-low a:link").css("color","#83282a");
+
-
+
}
}
 +
}, {
 +
  offset: function() {
 +
    return -$(this).height();
 +
}
});
});
-
 
-
/*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>
</script>

Latest revision as of 22:09, 10 June 2013

Untitled Document

WE ARE TEAM
2013
iGEM | QUEEN'S

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