Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <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
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement