|
|
(29 intermediate revisions not shown) |
Line 1: |
Line 1: |
| + | {{Team:York_UK/MainHeader}} |
| <html> | | <html> |
| | | |
Line 4: |
Line 5: |
| <title>iGEM York</title> | | <title>iGEM York</title> |
| <meta charset="utf-8"> | | <meta charset="utf-8"> |
- | <style type="text/css"> | + | |
- | body {
| + | |
- | width: 1080px;
| + | <link href='http://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'> |
- | margin: 0 auto;
| + | |
- | font-family: 'Lato', sans-serif; /*geriau skaitosi */
| + | |
- | /*font-family: helvetica_neue; */
| + | |
- | }
| + | |
| | | |
- | @font-face {
| |
- | font-family: helvetica_neue;
| |
- | src: url('fonts/ufonts.com_helvetica_neue_ultralight.ttf');
| |
- | }
| |
| | | |
- | #navigation {
| + | <!-- This is a comment, by the way --> |
- | /* position: relative;
| + | |
- | top: 0;
| + | |
- | left: 0px;*/
| + | |
- | /*height: 3em;*/
| + | |
- | /*width: 200px;*/ | + | |
- | height: 40px;
| + | |
- | font-weight: 600;
| + | |
- | | + | |
- | }
| + | |
- | | + | |
- | | + | |
- | #navigation ul{
| + | |
- | padding: 0;
| + | |
- | list-style-type:none;
| + | |
- | margin-top: 2px;
| + | |
- | margin-bottom: 5px;
| + | |
- | }
| + | |
- | | + | |
- | #navigation li {
| + | |
- | float: left;
| + | |
- | font-size: 16px;
| + | |
- | padding-left: 2px;
| + | |
- | /* For IE 7 */
| + | |
- | | + | |
- | /* zoom: 1;
| + | |
- | *display: inline;*/
| + | |
- | }
| + | |
- | | + | |
- | #navigation li #popdown {
| + | |
- | position: absolute;
| + | |
- | width: 147px;
| + | |
- | left: -10000px;
| + | |
- | margin: 0;
| + | |
- | }
| + | |
- | | + | |
- | #navigation li:hover #popdown {
| + | |
- | left: auto;
| + | |
- | float: left;
| + | |
- | }
| + | |
- | | + | |
- | #navigation li:hover ul li{
| + | |
- | padding: 0;
| + | |
- | }
| + | |
- | | + | |
- | #navigation a {
| + | |
- | display: block;
| + | |
- | text-decoration: none;
| + | |
- | color: rgb(255, 255, 255);
| + | |
- | padding-right: 0;
| + | |
- | width: 168px;
| + | |
- | height: 21px;
| + | |
- | padding: 20px 0px 10px 10px;
| + | |
- | background: #33a21f;
| + | |
- | }
| + | |
- | | + | |
- | #navigation a:hover {
| + | |
- | background: #46e12c;
| + | |
- | }
| + | |
- | | + | |
- | #navigation .selected{
| + | |
- | background: #fad210;
| + | |
- | }
| + | |
- | | + | |
- | #nav2 {
| + | |
- | clear: both;
| + | |
- | margin-right: 60px;
| + | |
- | overflow: hidden;
| + | |
- | display: block;
| + | |
- | background-color: #ffffff;
| + | |
- | margin-left: 2px;
| + | |
- | width: 1077px;
| + | |
- | height: 37px;
| + | |
- | border-width: 1px 0px 1px 0px;
| + | |
- | border-color: #c0c0c0;
| + | |
- | /* border-color: #ffffff;
| + | |
- | border-bottom-color: #ffffff;*/
| + | |
- | border-style: solid;
| + | |
- | }
| + | |
- | | + | |
- | #nav2 a{
| + | |
- | float: right;
| + | |
- | display: inline-block;
| + | |
- | /*display: ;*/
| + | |
- | text-decoration: none;
| + | |
- | padding-top: 10px;
| + | |
- | padding-bottom: 3px;
| + | |
- | padding-left:10px;
| + | |
- | width: 168px;
| + | |
- | background-color: #fad210;
| + | |
- | font-size: 17px;
| + | |
- | color: #ffffff;
| + | |
- | font-weight: 700;
| + | |
- | border-width: 1px 1px 1px 0px;
| + | |
- | border-style: solid;
| + | |
- | border-color: #cbaf1d;
| + | |
- | }
| + | |
- | | + | |
- | #nav2 a:hover{
| + | |
- | /*display: inline-block;*/
| + | |
- | /*display: ;*/
| + | |
- | /* text-decoration: none;
| + | |
- | width: 168px;*/
| + | |
- | background-color: #ffffff;
| + | |
- | color: #fad210;
| + | |
- | }
| + | |
- | | + | |
- | | + | |
- | | + | |
- | #nav2 .selected{
| + | |
- | background-color: #ffffff;
| + | |
- | color: #fad210;
| + | |
- | }
| + | |
- | | + | |
- | #nav2 #team{
| + | |
- | display: none;
| + | |
- | width: 900px;
| + | |
- | position: relative;
| + | |
- | left: -900px;
| + | |
- | }
| + | |
- | | + | |
- | #nav2 #project{
| + | |
- | display: none;
| + | |
- | position: relative;
| + | |
- | width: 1620px;
| + | |
- | left: -1620px;
| + | |
- | | + | |
- | }
| + | |
- | | + | |
- | #nav2 #notebook{
| + | |
- | display: none;
| + | |
- | position: relative;
| + | |
- | width: 720px;
| + | |
- | left: -720px;
| + | |
- | }
| + | |
- | | + | |
- | #nav2 #acknowledgments{
| + | |
- | display: none;
| + | |
- | position: relative;
| + | |
- | width: 540px;
| + | |
- | left: -540px;
| + | |
- | }
| + | |
- | | + | |
- | #team > a:nth-child(5){
| + | |
- | border-width: 1px 1px 1px 1px;
| + | |
- | }
| + | |
- | | + | |
- | #project > a:nth-child(9){
| + | |
- | border-width: 1px 1px 1px 1px;
| + | |
- | }
| + | |
- | | + | |
- | #notebook > a:nth-child(4){
| + | |
- | border-width: 1px 1px 1px 1px;
| + | |
- | }
| + | |
- | | + | |
- | #acknowledgments > a:nth-child(3){
| + | |
- | border-width: 1px 1px 1px 1px;
| + | |
- | }
| + | |
- | | + | |
- | #content {
| + | |
- | margin-top: 15px;
| + | |
- | }
| + | |
- | | + | |
- | #navlocal{
| + | |
- | float: left;
| + | |
- | padding: 0;
| + | |
- | }
| + | |
- | | + | |
- | #navlocal ul{
| + | |
- | padding: 0;
| + | |
- | margin: 0;
| + | |
- | list-style-type:none;
| + | |
- | width: 245px;
| + | |
- | }
| + | |
- | | + | |
- | #navlocal div{
| + | |
- | display: block;
| + | |
- | padding: 3px 0px 3px 77px;
| + | |
- | border-style: solid;
| + | |
- | border-color: #c1bfc0;
| + | |
- | border-width: 0px 0px 1px 0px;
| + | |
- | /* border-left-width: 0px;
| + | |
- | border-right-width: 0px;*/
| + | |
- | }
| + | |
- | | + | |
- | #navlocal li:first-child{
| + | |
- | padding: 3px 0px 3px 47px;
| + | |
- | border-width: 1px 0px 1px 0px;
| + | |
- | border-style: solid;
| + | |
- | border-color: #c1bfc0;
| + | |
- | background-color: #dfdfdd;
| + | |
- | }
| + | |
- | | + | |
- | | + | |
- | /*#navlocal #overview{
| + | |
- | border-top-width: 1px;
| + | |
- | }*/
| + | |
- | | + | |
- | #conlocal{
| + | |
- | border-width: 1px 1px 1px 1px;
| + | |
- | border-style: solid;
| + | |
- | border-color: #c1bfc0;
| + | |
- | margin-left: 245px;
| + | |
- | }
| + | |
- | | + | |
- | #conlocal img{
| + | |
- | padding: 0;
| + | |
- | margin: 0;
| + | |
- | }
| + | |
- | | + | |
- | #conlocal div{
| + | |
- | display: block;
| + | |
- | display: none;
| + | |
- | }
| + | |
- | | + | |
- | #conlocal h2{
| + | |
- | margin-left: 20px;
| + | |
- | color: #656364;
| + | |
- | }
| + | |
- | | + | |
- | #conlocal p{
| + | |
- | margin-top: 0;
| + | |
- | margin-left: 20px;
| + | |
- | color: #656364;
| + | |
- | }</style>
| + | |
- |
| + | |
- | <link href='http://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
| + | |
- | <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
| + | |
| <script type="text/javascript"> | | <script type="text/javascript"> |
- |
| |
- | function selection(){
| |
- | // Checks whether a specific link or just a section link selected
| |
- | var queries = {};
| |
- | queryString = document.location.search;
| |
- | if(queryString == ""){
| |
- | queryString = $("#navlocal > ul:nth-child(1) > li:nth-child(2) > div").text().toLowerCase();
| |
- | } else{
| |
- | $.each(document.location.search.substr(1).split('&'),function(c,q){
| |
- | var i = q.split('=');
| |
- | queries[i[0].toString()] = i[1].toString();
| |
- | });
| |
- | queryString = queries['page'];
| |
- | }
| |
- |
| |
- | currentLocation = (window.location.pathname.substr(window.location.pathname.lastIndexOf('/') + 1));
| |
- | currentContent = $("#" + queryString);
| |
- | console.log("#" + queryString);
| |
- | console.log("[href='"+currentLocation +"?page="+currentContent.text().toLowerCase()+"']");
| |
- | currentContent.css("background","#fad210");
| |
- | $("[href='"+currentLocation +"?page="+queryString+"']").toggleClass("selected");
| |
- | currentContent = $("#" + (currentContent.attr('id')+"content"));
| |
- | currentContent.show("slow");
| |
- |
| |
- |
| |
- | $("#navlocal div").click(function(){
| |
- | newContent = $("#"+$(this).attr('id')+"content");
| |
- |
| |
- | if((newContent.attr("id")) != currentContent.attr('id')){
| |
- | currentContent.slideUp("slow");
| |
- | currentContentId = currentContent.attr('id').substring(0, currentContent.attr('id').length - 7);
| |
- | $("#"+currentContentId).css("background","#ffffff");
| |
- | $("[href='"+currentLocation +"?page="+currentContentId+"']").toggleClass("selected");
| |
- | currentContent = newContent;
| |
- | currentContent.delay(300).show("slow");
| |
- | $(this).css("background","#fad210");
| |
- | $("[href='"+currentLocation +"?page="+$(this).attr('id')+"']").toggleClass("selected");
| |
- | }
| |
- | })
| |
- | };
| |
- |
| |
- |
| |
- | function navigation(){
| |
- | currentMenu = "";
| |
- | $("#navigation a").mouseover(function(){
| |
- | if( currentMenu != "")
| |
- | currentMenu.slideUp(queue = false);
| |
- |
| |
- | $("#"+$(this).text().toLowerCase()).slideDown(500);
| |
- | currentMenu = $("#"+$(this).text().toLowerCase());
| |
- | $("#"+$(this).text().toLowerCase()).mouseleave(function(){
| |
- | $(this).delay(500).slideUp();
| |
- | })
| |
- |
| |
- |
| |
- | })
| |
- | }
| |
- |
| |
- |
| |
- | $(document).ready(function(){
| |
- | $("img").mousemove(function(e){
| |
- | var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
| |
- | var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
| |
- | $("span:first").text("( e.pageX, e.pageY ) : " + pageCoords);
| |
- | $("span:last").text("( e.clientX, e.clientY ) : " + clientCoords);
| |
- | });
| |
- | });
| |
- |
| |
- |
| |
- |
| |
| $(document).ready(function(){ | | $(document).ready(function(){ |
| navigation(""); | | navigation(""); |
| }) | | }) |
| </script> | | </script> |
- |
| |
- |
| |
- |
| |
- |
| |
- |
| |
- | <!-- This is a comment, by the way -->
| |
| | | |
| </head> | | </head> |
| | | |
| <body> | | <body> |
- | <div id="navigation"> | + | <div id="container"> |
- | <ul>
| + | <div id="world-bg"> |
- | <li><a class="selected" href="home.html">Home</a></li>
| + | <div class="bubble" id="recycle-bubble"> |
- | <li><a href="team.html">Team</a></li>
| + | <p> |
- | <li><a href="project.html">Project</a></li>
| + | Recycling <span class="hide">- cleaning our waters of toxic gold ions in the process</span> |
- | <li><a href="notebook.html">Notebook</a></li>
| + | </p> |
- | <li><a href="outreach.html">Outreach</a></li>
| + | </div> |
- | <li><a href="acknowledgments.html">Acknowledgments</a></li>
| + | <div class="bubble" id="energy-bubble"> |
- | </ul>
| + | <p> |
- | </div>
| + | Energy <span class="hide">- needed all around the planet</span> |
- | <div id="content">
| + | </p> |
- | <div id="nav2">
| + | </div> |
- | <div id="team">
| + | <div class="bubble" id="battery-bubble"> |
- | <a href="team.html?page=contacts">Contacts</a>
| + | <p> |
- | <a href="team.html?page=university">The University</a>
| + | Battery <span class="hide">- bring everything together to create an Energy Revolution!</span> |
- | <a href="team.html?page=biography">Biography</a>
| + | </p> |
- | <a href="team.html?page=profile">Profile</a>
| + | </div> |
- | <a href="team.html?page=overview">Overview</a>
| + | <div class="bubble" id="fuel-bubble"> |
- | </div>
| + | <p> |
- | <div id="project">
| + | Fuel Cells <span class="hide">- produce energy using live bacteria</span> |
- | <a href="project.html?page=Overview">Overview</a>
| + | </p> |
- | <a href="project.html?page=chassis">Chassis</a>
| + | </div> |
- | <a href="project.html?page=parts">Parts</a>
| + | <div class="bubble" id="gold-bubble"> |
- | <a href="project.html?page=results">Results</a>
| + | <p> |
- | <a href="project.html?page=microbial">Microbial Feul Cells</a>
| + | Gold <span class="hide">- used in fuel cells for higher energy production</span> |
- | <a href="project.html?page=achievements">Achievements</a>
| + | </p> |
- | <a href="project.html?page=collaborations">Collaborations</a>
| + | </div> |
- | <a href="project.html?page=gallery">Gallery</a>
| + | <div id="world-wrapper"> |
- | <a href="project.html?page=safety">Safety</a>
| + | <div id="world"> |
- | </div>
| + | </div> |
- | <div id="notebook">
| + | </div> |
- | <a href="notebook.html?page=wetlab">Wet Lab</a>
| + | </div> |
- | <a href="notebook.html?page=drylab">Dry Lab</a>
| + | |
- | <a href="notebook.html?page=protocols">Protocols</a>
| + | </div> |
- | <a href="notebook.html?page=modeling">Modeling</a>
| + | |
- | </div>
| + | |
- | <div id="acknowledgments">
| + | |
- | <a href="acknowledgments.html?page=sponsors">Sponsors</a>
| + | |
- | <a href="acknowledgments.html?page=references">References</a>
| + | |
- | <a href="acknowledgments.html?page=Attributions">Attributions</a>
| + | |
- | </div>
| + | |
- | | + | |
- | </div>
| + | |
- | <!-- <p>
| + | |
- | <span>Move the mouse over the div.</span>
| + | |
- | <span> </span>
| + | |
- | </p> -->
| + | |
- | <img src="images/homepage_future.jpg" width="1080" height="125" alt="Future in Your Eyes, future in York UNI team">
| + | |
- | <img src="images/homepage_tree.jpg" width="1080" height="515" alt="Tree with benefits">
| + | |
- | <img src="images/long_dash.jpg" width="1080" height="25" alt="Just a dash">
| + | |
- | <img src="images/homepage_young.jpg" width="1080" height="490" alt="Young and confident team">
| + | |
- | <img src="images/long_dash.jpg" width="1080" height="25" alt="Just a dash">
| + | |
- | <img src="images/homepage_project.jpg" width="1080" height="490" alt="An awesome project">
| + | |
| | | |
| </div> | | </div> |