<html> <!-- STYLES -->
<head>
<style>
#internet-explorer {
margin-top: 0px;
text-align: center;
color: #C30;
font-family: monospace;
font-weight: bold;
}
/*----- HEADER -----*/
#header {
height: 200px;
padding-bottom: 20px;
}
#headerTitle {
text-align: right;
font-weight: bold;
font-size: 36px;
}
#logo {
left: 20%;
align: left;
width: 120px;
height: 120px;
}
#headerSubTitle {
font-size: 14px;
letter-spacing: 2px;
color: #666;
}
a#igem, a#igem:visited {
color: inherit;
text-decoration: none;
}
a#igem:hover, a#igem:active {
color: #F93;
text-decoration: underline;
}
/*----- HEADER BUTTONS -----*/
.nav_button {
bottom: 20%;
display: table;
}
.nav_buttonText {
color: #222;
text-align: center;
vertical-align: middle;
display: table-cell;
}
a.nav_buttonLink, a.nav_buttonLink:visited {
text-decoration: none;
color: black;
}
a.nav_buttonLink:hover, a.nav_buttonLink:active {
color: #F93;
text-decoration: underline;
}
/*----- END OF BUTTONS -----*/
/*----- END OF HEADER -----*/
/*----- MAIN CONTENT -----*/
.title-link, .title-link:active, .title-link:visited {
text-decoration: none;
color: inherit;
}
.title-link:hover {
text-decoration: underline;
color: #F93;
}
#first-panel {
display: ;
background: white;
border:1px solid white;
padding-left: 15px;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 100%;
height: auto;
}
#second-panel {
display: none;
background: white;
border:1px solid white;
padding-left: 15px;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 100%;
height: auto;
}
#third-panel {
display: none;
background: white;
border:1px solid white;
padding-left: 15px;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 100%;
height: auto;
}
#fourth-panel {
display: none;
background: white;
border:1px solid white;
padding-left: 15px;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 100%;
height: auto;
}
/*----- FIRST CONTENT -----*/
/*----- SECOND CONTENT -----*/
/*----- THIRD CONTENT -----*/
/*----- FOURTH CONTENT -----*/
</style>
</head>
</html>
<html>
<head>
<!-- FIRST BUTTON -->
<script type="text/javascript">
$(document).ready(function(){
$("#nav-button-link-first").click(function(){
$("#first-panel").toggle("fast");
$("#second-panel").hide("fast");
$("#third-panel").hide("fast");
$("#fourth-panel").hide("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#first-title-link").click(function(){
$("#first-panel").toggle("fast");
$("#second-panel").hide("fast");
$("#third-panel").hide("fast");
$("#fourth-panel").hide("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
<!-- SECOND BUTTON -->
<script type="text/javascript">
$(document).ready(function(){
$("#nav-button-link-second").click(function(){
$("#second-panel").toggle("fast");
$("#first-panel").hide("fast");
$("#third-panel").hide("fast");
$("#fourth-panel").hide("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#second-title-link").click(function(){
$("#second-panel").toggle("fast");
$("#first-panel").hide("fast");
$("#third-panel").hide("fast");
$("#fourth-panel").hide("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
<!-- THIRD BUTTON -->
<script type="text/javascript">
$(document).ready(function(){
$("#nav-button-link-third").click(function(){
$("#third-panel").toggle("fast");
$("#first-panel").hide("fast");
$("#second-panel").hide("fast");
$("#fourth-panel").hide("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#third-title-link").click(function(){
$("#third-panel").toggle("fast");
$("#first-panel").hide("fast");
$("#second-panel").hide("fast");
$("#fourth-panel").hide("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
<!-- FOURTH BUTTON -->
<script type="text/javascript">
$(document).ready(function(){
$("#nav-button-link-fourth").click(function(){
$("#fourth-panel").toggle("fast");
$("#first-panel").hide("fast");
$("#second-panel").hide("fast");
$("#third-panel").hide("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#fourth-title-link").click(function(){
$("#fourth-panel").toggle("fast");
$("#first-panel").hide("fast");
$("#second-panel").hide("fast");
$("#third-panel").hide("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
</head>
</html>
<html>
<div id="header">
<!--<img src="assets/logo.png" id="logo">-->
<div id="headerTitle">
</html>
<center>SPS_London</center>
<html>
</div>
</html>
<html>
<div id="headerSubTitle">
</html>
<center>TMNP Collective</center>
<html>
</div>
<div id="headerSubTitle">
</html>
<center>An <html><a id="igem"></html>iGEM<html></a></html> Team</center>
<html>
</div>
<!--[if gte IE 2 ]>
<p id="internet-explorer">This Wiki is designed for best use on <a href="https://www.google.com/intl/en_uk/chrome/browser/?hl=en-GB">Google Chrome</a> and <a href="https://www.mozilla.org/en-US/firefox/fx/#desktop">Mozilla Firefox</a>. Some key features are not available to your browser, please use a different browser or click <a href="">here</a>.</p>
<![endif]-->
</html>
<center>
{| style="text-align: center; margin-left: 50px; width: 500px;"
|
<html>
<a class="nav_buttonLink" id="nav-button-link-first" href="#first"><div class="nav_button" id="first"><p class="nav_buttonText">
HOME
</html>
<html>
</p></div></a>
</html>
|
<html>
<a class="nav_buttonLink" id="nav-button-link-second" href="#second"><div class="nav_button" style="margin-left: 10px;" id="second"><p class="nav_buttonText">
</html>
PROJECT
<html>
</p></div></a>
</html>
|
<html>
<a class="nav_buttonLink" id="nav-button-link-third" href="#third"><div class="nav_button" id="third"><p class="nav_buttonText">
</html>
THE TEAM
<html>
</p></div></a>
</html>
|
<html>
<a class="nav_buttonLink" id="nav-button-link-fourth" href="#fourth"><div class="nav_button" id="fourth"><p class="nav_buttonText">
</html>
NOTEBOOK
<html>
</p></div></a>
</html>
|-
|}
</center></div>
<html>
<a class="title-link" id="first-title-link" id="#first"><h3>first</h3></a>
<div id="first-panel">
<div class="nav-box">
<ul>
<li>Hi</li>
</ul>
</div>
<div class="panel-content">
<p>this is all inside the first panel</p>
</div> <!--of panel content-->
</div>
</html>
<html>
<a class="title-link" id="first-title-link" id="#first"><h3>
</html>
Home
<html>
</h3></a>
<div id="first-panel">
</html>
hello
<html>
</div>
</html>
*g
*g
*g
*g
*g
*g
*g
*g
*g
*g
*g