Team:Queens Canada/qgem header
From 2013.igem.org
(Difference between revisions)
(37 intermediate revisions not shown) | |||
Line 3: | Line 3: | ||
<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 | + | <link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/125588631/bootstrap.min.css" media="screen" /> |
- | <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{ | ||
- | |||
- | |||
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 44: | Line 46: | ||
margin:0; | margin:0; | ||
padding:0; | padding:0; | ||
+ | background-color:#999999 | ||
} | } | ||
Line 62: | Line 65: | ||
height: 30px; | height: 30px; | ||
width: 100%; | width: 100%; | ||
- | background: | + | background-color:#343838; /*per Page*/ |
- | + | ||
- | + | ||
- | + | ||
margin:0; | margin:0; | ||
padding:0; | padding:0; | ||
Line 73: | Line 73: | ||
top: 2px; | top: 2px; | ||
font-family: 'Droid Sans', sans-serif; | font-family: 'Droid Sans', sans-serif; | ||
- | |||
- | |||
} | } | ||
/* ----------------TopSection_left-menu---------------- */ | /* ----------------TopSection_left-menu---------------- */ | ||
Line 93: | Line 91: | ||
.left-menu li a:hover { | .left-menu li a:hover { | ||
- | color: # | + | color: #ff6669; |
} | } | ||
Line 118: | Line 116: | ||
background-color: transparent; | background-color: transparent; | ||
color: white; | color: white; | ||
- | |||
} | } | ||
.right-menu li a:hover { | .right-menu li a:hover { | ||
- | color: # | + | text-decoration:none; |
+ | color: #ff6669; | ||
} | } | ||
Line 136: | Line 134: | ||
body{ | body{ | ||
background:white; | background:white; | ||
- | background- | + | background-size:cover; |
z-index:-999; | z-index:-999; | ||
} | } | ||
/**---------HEADER----------**/ | /**---------HEADER----------**/ | ||
.top-photo{ | .top-photo{ | ||
- | background:url(https://dl.dropboxusercontent.com/u/125588631/ | + | background:url(https://dl.dropboxusercontent.com/u/125588631/header_template.png) no-repeat center center; |
position:relative; | position:relative; | ||
overflow:hidden; | overflow:hidden; | ||
width:auto; | width:auto; | ||
- | + | padding-top:40px; | |
- | + | ||
} | } | ||
- | . | + | |
- | + | .header-text{ | |
- | + | font-family:bebasN; | |
- | + | font-size:3em; | |
+ | color:#ffb297; | ||
+ | position:relative; | ||
+ | margin:5px; | ||
} | } | ||
- | . | + | |
- | + | .year{ | |
- | + | font-family:Arial, Helvetica, sans-serif; | |
- | + | color:#320a00; | |
- | + | font-size:9em; | |
position:relative; | position:relative; | ||
+ | margin:5px; | ||
+ | margin-bottom:60px; | ||
+ | } | ||
+ | |||
+ | #menu{ | ||
+ | margin-top:10%; | ||
+ | margin-left:5%; | ||
+ | } | ||
+ | |||
+ | #menu li{ | ||
+ | margin: 0 5px; | ||
+ | padding: 0 9px; | ||
display:inline-block; | 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 187: | Line 200: | ||
position:relative; | position:relative; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
/**---------Fonts---------**/ | /**---------Fonts---------**/ | ||
@font-face{ | @font-face{ | ||
Line 254: | Line 209: | ||
font-size:2em; | font-size:2em; | ||
} | } | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
.regular{ | .regular{ | ||
font-family:bebasN; | font-family:bebasN; | ||
color:black; | color:black; | ||
font-size:15px; | font-size:15px; | ||
+ | } | ||
+ | |||
+ | <!------- Toolbar ----------> | ||
+ | .toolbar{ | ||
+ | height:50px; | ||
+ | opacity:0.9; | ||
+ | margin-top:500px; | ||
+ | position:fixed; | ||
+ | } | ||
+ | |||
+ | .toolbar-links ul{ | ||
+ | font-family:bebasN; | ||
+ | font-size:1.2em; | ||
+ | padding:15px; | ||
+ | } | ||
+ | |||
+ | .toolbar-links ul li{ | ||
+ | display: inline-block; | ||
+ | margin:0 4px; | ||
+ | padding: 0 5px; | ||
+ | } | ||
+ | |||
+ | .toolbar-links li a:link{ | ||
+ | text-decoration:none; | ||
+ | color:white; | ||
+ | } | ||
+ | |||
+ | .toolbar-links li a:visited{ | ||
+ | color:white; | ||
+ | } | ||
+ | |||
+ | .toolbar-links li a:hover{ | ||
+ | color:#e88587; | ||
+ | text-decoration:none; | ||
} | } | ||
</style> | </style> | ||
</head> | </head> | ||
+ | |||
<body> | <body> | ||
- | <div class=" | + | <div class="row-fluid toolbar" style="background-color:#83282a;bottom:0;"> |
+ | <div class="span2 offset1"> | ||
+ | <img src="../toolbar-logo.png" style="height:50px;"> | ||
+ | </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=" | + | <div class="top-photo"> |
- | <div class=" | + | <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> | </div> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
$(document).ready(function(){ | $(document).ready(function(){ | ||
- | var height = $(window).height()- | + | var height = $(window).height()-40; |
- | + | var val = (height.toString())+"px"; | |
$(".top-photo").css("height",val); | $(".top-photo").css("height",val); | ||
+ | var toolbarHeight=(height.toString()-50)+"px"; | ||
+ | $(".toolbar").hide(); | ||
$(window).resize(function(){ | $(window).resize(function(){ | ||
Line 348: | Line 306: | ||
$(".top-photo").css("height",val); | $(".top-photo").css("height",val); | ||
}); | }); | ||
- | + | ||
- | + | $('.top-photo').waypoint(function(direction) { | |
- | + | if (direction=="down"){ | |
- | if( | + | $('.toolbar').fadeIn('fast'); |
- | + | ||
- | $( | + | |
- | + | ||
- | + | ||
} | } | ||
else{ | else{ | ||
- | $( | + | $('.toolbar').fadeOut('fast'); |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
+ | }, { | ||
+ | offset: function() { | ||
+ | return -$(this).height(); | ||
+ | } | ||
}); | }); | ||
}); | }); | ||
</script> | </script> | ||
+ | |||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 22:09, 10 June 2013
WE ARE TEAM
2013
iGEM | QUEEN'S