Team:Sheffield/Project
From 2014.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | |||
- | |||
<html> | <html> | ||
<head> | <head> | ||
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> | <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> | ||
<link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'> | <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'> | ||
+ | <script src="http://code.jquery.com/jquery-1.11.1.js"></script> | ||
+ | <script> | ||
+ | $(document).ready(function() { // Document ready | ||
+ | $(document).scroll(function() { | ||
+ | if ($(document).scrollTop() > 0) { | ||
+ | $("#navigationBar").addClass("scrolling"); | ||
+ | $("#teamLogo li a img").addClass("scrolling"); | ||
+ | $("#shefUniLogo li a img").addClass("scrolling"); | ||
+ | } else { | ||
+ | $("#navigationBar").removeClass("scrolling"); | ||
+ | $("#teamLogo li a img").removeClass("scrolling"); | ||
+ | $("#shefUniLogo li a img").removeClass("scrolling"); | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
<style> | <style> | ||
- | . | + | #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;} /*-- hides default wiki settings --*/ |
- | + | ||
- | + | #menubar.left-menu.noprint ul li:last-child { | |
- | + | display:none; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #top-section { | |
- | width: | + | border: 0 none; |
+ | height: 14px; | ||
+ | z-index: 10001; | ||
+ | /*top: 0;*/ | ||
+ | /*position: fixed;*/ | ||
+ | width: 975px; | ||
+ | left: 50%; | ||
+ | margin-left: -487px; | ||
} | } | ||
- | . | + | #globalWrapper, #content { |
+ | /*position: fixed;*/ | ||
+ | /*top: 0;*/ | ||
+ | width: 100%; | ||
+ | /*height: 100%;*/ | ||
+ | border: 0px; | ||
+ | background-color: transparent; | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | } | ||
+ | |||
+ | html, body, .wrapper { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2014/5/5b/BgImgSheffield.jpg'); | ||
+ | background-repeat: repeat; | ||
+ | } | ||
+ | |||
+ | #bodyContent { | ||
+ | background-color: transparent; | ||
+ | /*overflow-y: scroll;*/ | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | h1 { | ||
text-align: center; | text-align: center; | ||
- | font-family: ' | + | font-family: 'Oswald', sans-serif; |
- | font-size: | + | font-size: 40px; |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
border: none; | border: none; | ||
} | } | ||
- | + | h2 { | |
- | + | font-family: 'Oswald', sans-serif; | |
+ | font-size: 30px; | ||
+ | border: none; | ||
+ | line-height: 35px; | ||
} | } | ||
+ | h3 { | ||
+ | font-family: 'Oswald', sans-serif; | ||
+ | font-weight: bold; | ||
+ | font-size: 18px; | ||
+ | } | ||
- | + | p, #bodyContent ul:not(#navigationBar), ol { | |
- | + | font-family: 'Lato', sans-serif; | |
- | + | font-size: 16px; | |
} | } | ||
- | + | ||
- | + | #navigationBar, #navigationBar ul { | |
- | + | margin: 0 auto; | |
+ | padding: 0; | ||
} | } | ||
- | + | #navigationBar { | |
- | background-color: | + | position: fixed; |
+ | top: 0px; | ||
+ | display: table-row; | ||
+ | height: 60px; | ||
+ | width: 100%; | ||
+ | min-width: 1400px; | ||
+ | list-style: none; | ||
+ | font-family: 'Oswald', sans-serif; | ||
+ | font-size: 16px; | ||
+ | -webkit-transition: background-color 0.5s linear; | ||
+ | -moz-transition: background-color 0.5s linear; | ||
+ | -o-transition: background-color 0.5s linear; | ||
+ | transition: background-color 0.5s linear; | ||
+ | z-index: 10000; | ||
} | } | ||
- | + | ||
- | . | + | .menuText { |
- | + | padding-top: 8px; | |
} | } | ||
- | + | ||
- | . | + | #navigationBar.scrolling { |
- | background-color: | + | background-color: white; |
} | } | ||
- | + | ||
- | + | #navigationBar li { | |
- | + | display: table-cell; | |
+ | height: 100%; | ||
+ | vertical-align: middle; | ||
+ | float: right; | ||
+ | text-align: left; | ||
} | } | ||
- | + | ||
- | + | #navigationBar > li:hover > ul { | |
- | + | visibility: visible; | |
+ | opacity: 1; | ||
+ | transition-delay:0s; | ||
} | } | ||
- | + | #navigationBar > li > ul { | |
- | width: | + | visibility: hidden; |
- | margin- | + | position: absolute; |
- | + | width: 220px; | |
- | padding- | + | margin-top: 8px; |
+ | opacity: 0; | ||
+ | -webkit-transition: opacity 0.5s linear; | ||
+ | -moz-transition: opacity 0.5s linear; | ||
+ | -o-transition: opacity 0.5s linear; | ||
+ | transition: opacity 0.5s linear; | ||
+ | } | ||
+ | |||
+ | #navigationBar li a { | ||
+ | display: block; | ||
+ | padding: 10px 10px; | ||
+ | text-decoration: none; | ||
+ | white-space: nowrap; | ||
+ | color: black; | ||
+ | opacity: 0.9; | ||
+ | } | ||
+ | |||
+ | #navigationBar li span { | ||
+ | } | ||
+ | |||
+ | #navigationBar li span a { | ||
+ | padding: 0; | ||
+ | padding-top: 10px; | ||
+ | text-decoration: none; | ||
+ | white-space: nowrap; | ||
+ | color: black; | ||
+ | opacity: 0.9; | ||
+ | } | ||
+ | |||
+ | #navigationBar li a:hover { | ||
+ | color: #FBA917; | ||
+ | } | ||
+ | |||
+ | #navigationBar > li > ul > li { | ||
+ | width: 100%; | ||
+ | margin: 0 0 0 0; | ||
+ | } | ||
+ | |||
+ | #navigationBar > li > ul > li > a { | ||
+ | background-color: #000000; | ||
+ | opacity: 0.9; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | #navigationBar > li > ul > li > a:hover { | ||
+ | color: #FBA917; | ||
+ | } | ||
+ | |||
+ | #igemLogo { | ||
+ | height: 40px; | ||
+ | opacity: 0.8; | ||
padding-right: 10px; | padding-right: 10px; | ||
} | } | ||
- | + | #teamLogo, #shefUniLogo { | |
- | + | float: left; | |
+ | margin-right: auto; | ||
} | } | ||
- | # | + | #teamLogo li a img, #shefUniLogo li a img { |
- | + | height: 80px; | |
- | + | -webkit-transition: height 0.25s linear; | |
- | + | -moz-transition: height 0.25s linear; | |
- | + | -o-transition: height 0.25s linear; | |
- | + | transition: height 0.25s linear; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | # | + | #teamLogo li a img.scrolling { |
- | + | height: 40px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | # | + | #shefUniLogo li a img.scrolling { |
- | + | height: 40px; | |
} | } | ||
- | + | .socialMediaIcon { | |
- | + | padding: 0px 0px; | |
+ | margin: 0; | ||
} | } | ||
- | + | .socialMediaIcon div { | |
- | position: | + | position: relative; |
- | + | width: 40px; | |
- | + | height: 40px; | |
} | } | ||
- | |||
- | + | .whiteIcon, .blackIcon, .colouredIcon { | |
- | + | position: absolute; | |
- | + | top: 0; | |
- | + | left: 0; | |
- | + | width: 40px; | |
- | + | height: 40px; | |
- | + | } | |
- | + | ||
- | + | .blackIcon { | |
- | + | z-index: 1; | |
- | + | } | |
- | + | ||
- | } | + | .colouredIcon { |
- | + | z-index: 2; | |
- | + | visibility: hidden; | |
- | + | } | |
- | + | ||
- | + | .socialMediaIcon div:hover > .blackIcon { | |
- | + | visibility: hidden; | |
- | + | } | |
- | + | ||
- | + | .socialMediaIcon div:hover > .colouredIcon { | |
- | + | visibility: visible; | |
- | } | + | } |
- | </ | + | |
+ | .subPageTitle { | ||
+ | text-align: center; | ||
+ | font-family: 'Lato', sans-serif; | ||
+ | font-size: 60px; | ||
+ | letter-spacing: -2px; | ||
+ | color: white; | ||
+ | font-weight: 300; | ||
+ | margin-top: 100px; | ||
+ | margin-bottom: 70px; | ||
+ | border: none; | ||
+ | } | ||
+ | |||
+ | .gap5px { | ||
+ | padding-top: 5px; | ||
+ | } | ||
+ | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
- | < | + | <div id="topMenu"> |
- | + | <ul id="navigationBar"> | |
- | + | <li><a href=""><img id="igemLogo" src="https://static.igem.org/mediawiki/2014/7/7d/IGEMLogo.png"></a></li> | |
- | + | <li> | |
- | + | <span> | |
- | <li>< | + | <a class="socialMediaIcon" href="http://twitter.com/iGEMSheffield"> |
- | + | <div> | |
- | + | <img class="blackIcon" src="https://static.igem.org/mediawiki/2014/b/b2/TwitterBlack.png"> | |
- | + | <img class="colouredIcon" src="https://static.igem.org/mediawiki/2014/7/78/TwitterColour.png"> | |
- | + | </div> | |
- | <li><a class=" | + | </a> |
+ | </span> | ||
+ | </li> | ||
+ | <li> | ||
+ | <span> | ||
+ | <a class="socialMediaIcon" href="http://www.facebook.com/iGEMSheffield2014"> | ||
+ | <div> | ||
+ | <img class="blackIcon" src="https://static.igem.org/mediawiki/2014/b/b6/FacebookBlack.png"> | ||
+ | <img class="colouredIcon" src="https://static.igem.org/mediawiki/2014/1/1b/FacebookColour.png"> | ||
+ | </div> | ||
+ | </a> | ||
+ | </span> | ||
+ | </li> | ||
+ | <li class="menuText"><a href="">Attributions ▾</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/Acknowledgements">Acknowledgements</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/Sponsors">Sponsors</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="menuText"><a href="">Notebook ▾</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/LabProtocols">Lab Protocols</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/WetLabJournal">Wet Lab Journal</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/DryLabJournal">Dry Lab Journal</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="menuText"><a href="">Policy and Practices ▾</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/SocioBrick">SocioBricks</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/Notions">Notions of Responsibility</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/IndustryCollaboration">Industry Collaboration</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/SynBio">Synthetic Biology @ Sheffield</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/LabNotation">Lab Notation</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/outreach">Outreach</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/collaboration">Collaboration</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="menuText"><a href="">Results ▾</a> | ||
+ | <ul> | ||
+ | <li><a href="">FadR Characterisation</a></li> | ||
+ | <li><a href="">Lipase Assay</a></li> | ||
+ | <li><a href="">Keratinase Assay</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="menuText"><a href="">Modelling ▾</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/modelling">Product Design</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/manufacture"> ↳ Budget</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/manufacture2"> ↳ Premium</a></li> | ||
+ | <li><a href="">Enzyme Kinetics</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="menuText"><a href="https://2014.igem.org/Team:Sheffield/Project">Project</a></li> | ||
+ | <li class="menuText"><a href="">Team ▾</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/team1">Meet the Team</a></li> | ||
+ | <li><a href="https://igem.org/Team.cgi?id=1498">Official Team Profile</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/gallery">Gallery</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="menuText"><a href="https://2014.igem.org/Team:Sheffield">Home</a></li> | ||
+ | <span id="teamLogo"><li><a href="https://2014.igem.org/Team:Sheffield"><img src="https://static.igem.org/mediawiki/2014/d/da/TeamLogo.png"></a></li></span> | ||
+ | <span id="shefUniLogo"><li><a href="https://www.sheffield.ac.uk/"><img src="https://static.igem.org/mediawiki/2014/b/bd/UoSLogo.gif"></a></li></span> | ||
</ul> | </ul> | ||
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> | ||
- | |||
- | |||
- |
Revision as of 01:32, 18 October 2014