|
|
| 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>
| + | |
| - | <link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/125588631/bootstrap.min.css" media="screen" />
| + | |
| - | <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{
| + | |
| - | padding:0;
| + | |
| - | margin:0;
| + | |
| - | }
| + | |
| - | header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{
| + | |
| - | display: block;
| + | |
| - | }
| + | |
| - | /* ----------------Display:none---------------- */
| + | |
| - | #p-logo {
| + | |
| - | display: none;
| + | |
| - | }
| + | |
| - | | + | |
| - | #search-controls {
| + | |
| - | display: none;
| + | |
| - | }
| + | |
| - | | + | |
| - | .firstHeading {
| + | |
| - | display: none;
| + | |
| - | }
| + | |
| - | | + | |
| - | #catlinks {
| + | |
| - | display: none;
| + | |
| - | }
| + | |
| - | | + | |
| - | #footer-box {
| + | |
| - | display: none;
| + | |
| - | }
| + | |
| - | | + | |
| - | #contentSub {
| + | |
| - | 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------------**/
| + | |
| - | #fullpage{
| + | |
| - | color:white;
| + | |
| - | margin:0;
| + | |
| - | padding:0;
| + | |
| - | width:100%;
| + | |
| - | height:100%;
| + | |
| - | position:fixed;
| + | |
| - | }
| + | |
| - | body{
| + | |
| - | background:white;
| + | |
| - | background-siz:cover;
| + | |
| - | z-index:-999;
| + | |
| - | }
| + | |
| - | /**---------HEADER----------**/
| + | |
| - | .top-photo{
| + | |
| - | background:url(https://dl.dropboxusercontent.com/u/125588631/qgem-final-cover.png) no-repeat center center;
| + | |
| - | position:relative;
| + | |
| - | overflow:hidden;
| + | |
| - | width:auto;
| + | |
| - | padding:0;
| + | |
| - | margin:0;
| + | |
| - | }
| + | |
| - | .actualimg{
| + | |
| - | background:url(https://dl.dropboxusercontent.com/u/125588631/qgem-final-cover.png) no-repeat center center;
| + | |
| - | background-size:cover;
| + | |
| - | position:absolute;
| + | |
| - | }
| + | |
| - | .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:absolute;
| + | |
| - | 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;
| + | |
| - | }
| + | |
| - | | + | |
| - | /**---------Menu-Bar----------**/
| + | |
| - | #top-MENU {
| + | |
| - | width:100%
| + | |
| - | position:relative;
| + | |
| - | float: right;
| + | |
| - | text-align: right;
| + | |
| - | margin-top: 40%;
| + | |
| - | margin-right:5%
| + | |
| - | }
| + | |
| - | | + | |
| - | #top-MENU ul {
| + | |
| - | margin: 0;
| + | |
| - | padding: 0;
| + | |
| - | font-size: 0.85em;
| + | |
| - | }
| + | |
| - | | + | |
| - | #top-MENU li {
| + | |
| - | display: inline-block;
| + | |
| - | *display: inline;
| + | |
| - | padding: 0 15px;
| + | |
| - | margin: 0 4px;
| + | |
| - | }
| + | |
| - | | + | |
| - | #top-MENU a:link{
| + | |
| - | text-decoration:none;
| + | |
| - | color:#83282a;
| + | |
| - | }
| + | |
| - | | + | |
| - | #top-MENU a:visited{
| + | |
| - | text-decoration:none;
| + | |
| - | color:#83282a;
| + | |
| - | }
| + | |
| - | | + | |
| - | #top-MENU 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;
| + | |
| - | }
| + | |
| - | | + | |
| - | .regular{
| + | |
| - | font-family:bebasN;
| + | |
| - | color:black;
| + | |
| - | font-size:15px;
| + | |
| - | }
| + | |
| - | </style>
| + | |
| - | </head>
| + | |
| - | | + | |
| - | <body>
| + | |
| - | | + | |
| - | <div class="top-photo"><div class="tattletale"></div>
| + | |
| - | <div id="top-MENU" class="menu-font">
| + | |
| - | <ul>
| + | |
| - | <li class="HOME"><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>
| + | |
| - | <li> </li>
| + | |
| - | </ul>
| + | |
| - | <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>
| + | |
| - | | + | |
| - | <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()-40;
| + | |
| - | var val = (height.toString())+"px";
| + | |
| - | $(".top-photo").css("height",val);
| + | |
| - |
| + | |
| - | $(window).resize(function(){
| + | |
| - | var height = $(window).height();
| + | |
| - | var val = (height.toString())+"px";
| + | |
| - | $(".top-photo").css("height",val);
| + | |
| - | });
| + | |
| - |
| + | |
| - |
| + | |
| - | });
| + | |
| - | </script>
| + | |
| - | </body>
| + | |
| - | </html>
| + | |
"
