|
|
(134 intermediate revisions not shown) |
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>
| + | |