Team:Queens Canada/qgem header
From 2013.igem.org
(Difference between revisions)
(8 intermediate revisions not shown) | |||
Line 4: | Line 4: | ||
<title>Untitled Document</title> | <title>Untitled Document</title> | ||
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/125588631/bootstrap.min.css" media="screen" /> | <link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/125588631/bootstrap.min.css" media="screen" /> | ||
- | <script src="http://code.jquery.com/jquery | + | <script src="http://code.jquery.com/jquery.js"></script> |
- | <script | + | <script src="https://dl.dropboxusercontent.com/u/125588631/bootstrap.min.js"></script> |
<style> | <style> | ||
*{ | *{ | ||
Line 134: | 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 185: | Line 200: | ||
position:relative; | position:relative; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
/**---------Fonts---------**/ | /**---------Fonts---------**/ | ||
@font-face{ | @font-face{ | ||
Line 220: | 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> | ||
Line 233: | Line 253: | ||
<body> | <body> | ||
- | + | <div class="row-fluid toolbar" style="background-color:#83282a;bottom:0;"> | |
- | <div class=" | + | <div class="span2 offset1"> |
- | <div | + | <img src="../toolbar-logo.png" style="height:50px;"> |
+ | </div> | ||
+ | <div class="span6 toolbar-links"> | ||
<ul> | <ul> | ||
- | <li | + | <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> | </ul> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</div> | </div> | ||
</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> | ||
- | + | <script type="text/javascript"> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
var height = $(window).height()-40; | 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 312: | Line 306: | ||
$(".top-photo").css("height",val); | $(".top-photo").css("height",val); | ||
}); | }); | ||
- | + | ||
- | + | $('.top-photo').waypoint(function(direction) { | |
+ | if (direction=="down"){ | ||
+ | $('.toolbar').fadeIn('fast'); | ||
+ | } | ||
+ | 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