|
|
| Line 1: |
Line 1: |
| − | <html>
| |
| − | <head>
| |
| | | | |
| − |
| |
| − | <script>
| |
| − |
| |
| − | //``````````````````````````````````````````START OF JQUERY SCRIPTS``````````````````````````````````````````````````````````````
| |
| − |
| |
| − | //``````````````````````````````````````````FUNCTION TO SHRINK NAV BAR WHILE SCROLLING```````````````````````````````````````````
| |
| − | $(window).scroll(function(){
| |
| − |
| |
| − | var scroll = $(window).scrollTop();
| |
| − |
| |
| − | if (scroll > 0 ) {
| |
| − |
| |
| − | if ($('nav').is(':hover') === false) {
| |
| − | $('nav').addClass('scrolled');
| |
| − | $('nav li a').css('padding', '28px 13px 0 13px');
| |
| − | $('#navLogo a').css('padding', '0px 13px 0 13px');
| |
| − | $('#navLogo a').css('height', '10px');
| |
| − | $('nav a').css('height', '29');
| |
| − | }
| |
| − |
| |
| − | $( "nav" ).mouseenter(function() {
| |
| − | $('nav').removeClass('scrolled');
| |
| − | $( "nav a" ).css('height', '72');
| |
| − | $('nav li a').css('padding', '55px 13px 0 13px');
| |
| − | $('#navLogo a').css('padding', '20px 13px 0 13px');
| |
| − | $('#navLogo a').css('height', '107px');
| |
| − | });
| |
| − |
| |
| − | $( "nav" ).mouseleave(function() {
| |
| − | $('nav').addClass('scrolled');
| |
| − | $('nav li a').css('padding', '28px 13px 0 13px');
| |
| − | $('#navLogo a').css('padding', '0px 13px 0 13px');
| |
| − | $('#navLogo a').css('height', '10px');
| |
| − | $('nav a').css('height', '29');
| |
| − | });
| |
| − |
| |
| − | $( "nav" ).mousehover(function() {
| |
| − | $('nav').removeClass('scrolled');
| |
| − | $( "nav a" ).css('height', '72');
| |
| − | $('nav li a').css('padding', '55px 13px 0 13px');
| |
| − | $('#navLogo a').css('padding', '20px 13px 0 13px');
| |
| − | $('#navLogo a').css('height', '103px');
| |
| − | });
| |
| − |
| |
| − | }
| |
| − |
| |
| − | if (scroll <= 0 ) {
| |
| − | $('nav').removeClass('scrolled');
| |
| − | $('nav li a').css('padding', '55px 13px 0 13px');
| |
| − | $('#navLogo a').css('padding', '20px 13px 0 13px');
| |
| − | $('#navLogo a').css('height', '103px');
| |
| − | $('nav a').css('height', '72');
| |
| − |
| |
| − | $( "nav" ).mouseleave(function() {
| |
| − | $('nav').removeClass('scrolled');
| |
| − | $('nav li a').css('padding', '55px 13px 0 13px');
| |
| − | $('#navLogo a').css('padding', '20px 13px 0 13px');
| |
| − | $('#navLogo a').css('height', '103px');
| |
| − | $('nav a').css('height', '72');
| |
| − | });
| |
| − |
| |
| − | $( "nav" ).mousehover(function() {
| |
| − | $('nav').removeClass('scrolled');
| |
| − | $( "nav a" ).css('height', '72');
| |
| − | $('nav li a').css('padding', '55px 13px 0 13px');
| |
| − | $('#navLogo a').css('padding', '20px 13px 0 13px');
| |
| − | $('#navLogo a').css('height', '103px');
| |
| − | });
| |
| − |
| |
| − | }
| |
| − |
| |
| − | });
| |
| − |
| |
| − | //``````````````````````````````````````````END OF JQUERY SCRIPTS````````````````````````````````````````````````````````````````
| |
| − |
| |
| − | </script>
| |
| − |
| |
| − | <style>
| |
| − |
| |
| − | /*`````````````````````````````````````````````START OF STYLES`````````````````````````````````````````````````````````````````*/
| |
| − |
| |
| − | .firstHeading{
| |
| − | display:none;
| |
| − | }
| |
| − |
| |
| − | body {
| |
| − | background-color:#303030;
| |
| − | margin:0;
| |
| − | }
| |
| − |
| |
| − | video#Skyline{
| |
| − | display:block;
| |
| − | margin:0px;
| |
| − | padding:0;
| |
| − | padding-top:86px;
| |
| − | position:absolute;
| |
| − | z-index:-1;
| |
| − | }
| |
| − |
| |
| − | /*``````````````````````````````````````````````START OF NAV BAR STYLES````````````````````````````````````````````````````````*/
| |
| − |
| |
| − | nav {
| |
| − | background: #666;
| |
| − | color: white;
| |
| − | transition: opacity 1s ease;
| |
| − | opacity: 1;
| |
| − | position: fixed;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 130px;
| |
| − | line-height: 130px;
| |
| − | transition: all 0.5s ease;
| |
| − | display:block;
| |
| − | float:right;
| |
| − | clear:both;
| |
| − | z-index:100;
| |
| − | }
| |
| − |
| |
| − | nav:hover{
| |
| − | opacity:1;
| |
| − | transition:all 0.5s ease;
| |
| − | height:130px;
| |
| − | }
| |
| − |
| |
| − | .scrolled {
| |
| − | opacity: 0.5;
| |
| − | height: 60px;
| |
| − | line-height: 100px;
| |
| − | }
| |
| − |
| |
| − | nav ul{
| |
| − | list-style:none;
| |
| − | padding:0;
| |
| − | margin-left:auto;
| |
| − | width:100%;
| |
| − | }
| |
| − |
| |
| − | nav li{
| |
| − | list-style:none;
| |
| − | padding:0;
| |
| − | display:inline;
| |
| − | }
| |
| − |
| |
| − | nav li a{
| |
| − | float:right;
| |
| − | color:#ffffff;
| |
| − | text-decoration:none;
| |
| − | text-align:center;
| |
| − | font-size:15px;
| |
| − | font-weight:bold;
| |
| − | padding:55px 13px 0 13px;
| |
| − | transition: all 0.5s ease;
| |
| − | }
| |
| − |
| |
| − | nav li a:link {
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | nav li a:visited {
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | #navLogo a{
| |
| − | display:block;
| |
| − | height:103px;
| |
| − | width:200px;
| |
| − | padding:24px 0px 0 0px;
| |
| − | margin-right:200px;
| |
| − | }
| |
| − |
| |
| − | #project a{
| |
| − | display:block;
| |
| − | height:72px;
| |
| − | width:80px;
| |
| − | }
| |
| − |
| |
| − | #judging a{
| |
| − | display:block;
| |
| − | height:72px;
| |
| − | width:85px;
| |
| − | }
| |
| − |
| |
| − | #pandp a{
| |
| − | display:block;
| |
| − | height:72px;
| |
| − | width:180px;
| |
| − | }
| |
| − |
| |
| − | #wikiflicks a{
| |
| − | display:block;
| |
| − | height:72px;
| |
| − | width:100px;
| |
| − | }
| |
| − |
| |
| − | #notebooks a{
| |
| − | display:block;
| |
| − | height:72px;
| |
| − | width:115px;
| |
| − | }
| |
| − |
| |
| − | #team a{
| |
| − | display:block;
| |
| − | height:72px;
| |
| − | width:60px;
| |
| − | margin-right:60px;
| |
| − | }
| |
| − |
| |
| − | #navLogo a:hover{
| |
| − | background-color:green;
| |
| − | }
| |
| − |
| |
| − | #project a:hover{
| |
| − | background-color:black;
| |
| − | }
| |
| − |
| |
| − | #judging a:hover{
| |
| − | background-color:green;
| |
| − | }
| |
| − |
| |
| − | #pandp a:hover{
| |
| − | background-color:yellow;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #wikiflicks a:hover{
| |
| − | background-color:blue;
| |
| − | }
| |
| − |
| |
| − | #notebooks a:hover{
| |
| − | background-color:purple;
| |
| − | }
| |
| − |
| |
| − | #team a:hover{
| |
| − | background-color:orange;
| |
| − | }
| |
| − |
| |
| − | /*`````````````````````````````````````````````END OF NAV BAR STYLES```````````````````````````````````````````````````````````*/
| |
| − |
| |
| − | /*`````````````````````````````````````````````START OF CONTENT STYLES`````````````````````````````````````````````````````````*/
| |
| − |
| |
| − | .main-container{
| |
| − | position:relative;
| |
| − | height:100%;
| |
| − | min-height:100%;
| |
| − | }
| |
| − |
| |
| − | .main-content{
| |
| − | position:relative;
| |
| − | display:block;
| |
| − | margin:auto;
| |
| − | padding-top:700px;
| |
| − | width: 1000px;
| |
| − | height:100%;
| |
| − | min-height:100%;
| |
| − | margin-bottom:100px;
| |
| − | }
| |
| − |
| |
| − | #abstract{
| |
| − | color:#44C2CC;
| |
| − | font-size: 6em;
| |
| − | line-height:80%;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | .content1{
| |
| − | color:#ffffff;
| |
| − | font-size:2em;
| |
| − | }
| |
| − |
| |
| − | /*`````````````````````````````````````````````START OF OTHER STYLES```````````````````````````````````````````````````````````*/
| |
| − |
| |
| − | footer{
| |
| − | width:100%;
| |
| − | height:100px;
| |
| − | position:absolute;
| |
| − | bottom: 0px;
| |
| − | background: #666;
| |
| − | padding:0px;
| |
| − | margin:0px;
| |
| − | }
| |
| − |
| |
| − | .footerContentHeader{
| |
| − | text-align: center;
| |
| − | color:#44C2CC;
| |
| − | font-size: 3em;
| |
| − | text-decorations:none;
| |
| − | line-height:80%;
| |
| − | }
| |
| − |
| |
| − | .footerContent{
| |
| − | color:#ffffff;
| |
| − | text-align: center;
| |
| − | font-size: 2em;
| |
| − | line-height:80%;
| |
| − | }
| |
| − |
| |
| − | #globalWrapper, #content {
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | border: 0px;
| |
| − | background-color: transparent;
| |
| − | margin: 0px;
| |
| − | padding: 0px;
| |
| − | font-size: 100%;
| |
| − | }
| |
| − |
| |
| − | /*`````````````````````````````````````````````````END OF OTHER STYLES`````````````````````````````````````````````````````````*/
| |
| − |
| |
| − | /*````````````````````````````````````````````````````END OF STYLES````````````````````````````````````````````````````````````*/
| |
| − | </style>
| |
| − |
| |
| − | </head>
| |
| − |
| |
| − | <!--`````````````````````````````````````````````````````START OF HTML````````````````````````````````````````````````````````-->
| |
| − |
| |
| − | <body>
| |
| − |
| |
| − | <div> <!--`````````````````````````````````````````START OF NAVIGATION HTML`````````````````````````````````````````````````-->
| |
| − |
| |
| − | <nav>
| |
| − |
| |
| − | <ul>
| |
| − |
| |
| − | <li id = "team"><a style="color:#FFFFFF; font-size: 200%;" href="https://2015.igem.org/Team:UCSF/Team">Team</a>
| |
| − | </li>
| |
| − |
| |
| − | <li id = "notebooks"><a style="color:#FFFFFF; font-size: 200%;" href="https://2015.igem.org/Team:UCSF/Notebook">Notebooks</a>
| |
| − | </li>
| |
| − |
| |
| − | <li id = "wikiflicks"><a style="color:#FFFFFF; font-size: 200%;" href="https://2015.igem.org/Team:UCSF/Wiki_Flicks">WikiFlicks</a>
| |
| − | </li>
| |
| − |
| |
| − | <li id = "pandp"><a style="color:#FFFFFF; font-size: 200%;" href="https://2015.igem.org/Team:UCSF/Human_Practices">Policy & Practices</a>
| |
| − | </li>
| |
| − |
| |
| − | <li id = "judging"><a style="color:#FFFFFF; font-size: 200%;" href= "https://2015.igem.org/Team:UCSF/Judging">Judging</a>
| |
| − | </li>
| |
| − |
| |
| − | <li id = "project"><a style="color:#FFFFFF; font-size: 200%;" href="https://2015.igem.org/Team:UCSF/Project">Project</a>
| |
| − | </li>
| |
| − |
| |
| − | <li id = "navLogo"><a href="https://2015.igem.org/Team:UCSF/Test">
| |
| − | <img src="https://static.igem.org/mediawiki/2015/a/ae/UCSF_Logo_Wiki.png" alt="UCSF 2015" height="80" width="125"></a>
| |
| − | </li>
| |
| − |
| |
| − | </ul>
| |
| − |
| |
| − | </nav>
| |
| − |
| |
| − | </div><!--`````````````````````````````````````````END OF NAVIGATION HTML```````````````````````````````````````````````````-->
| |
| − |
| |
| − | <div><!--````````````````````````````````````````````````START OF FOOTER HTML```````````````````````````````````````````````-->
| |
| − | <footer>
| |
| − |
| |
| − | <p class="footerContentHeader">Team UCSF
| |
| − | </p>
| |
| − |
| |
| − | <p class="footerContent">syssynbio@ucsf.edu
| |
| − | </p>
| |
| − |
| |
| − | </footer>
| |
| − | </div><!--`````````````````````````````````````````END OF FOOTER HTML```````````````````````````````````````````````````````-->
| |
| − |
| |
| − | </body>
| |
| − |
| |
| − | </html>
| |