Want more features on Pastebin? Sign Up, it's FREE!
Guest

edit

By: a guest on Mar 28th, 2013  |  syntax: HTML  |  size: 8.17 KB  |  views: 18  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
This paste has a previous version, view the difference. Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <html> <!-- STYLES -->
  2.   <head>
  3.     <style>
  4.        
  5.         #internet-explorer {
  6.                 margin-top: 0px;
  7.                 text-align: center;    
  8.                 color: #C30;
  9.                 font-family: monospace;
  10.                 font-weight: bold;
  11.         }
  12.        
  13.  
  14.         /*----- HEADER -----*/
  15.         #header {
  16.                 height: 200px;
  17.                 padding-bottom: 20px;
  18.         }
  19.        
  20.         #headerTitle {
  21.                 text-align: right;
  22.                 font-weight: bold;
  23.                 font-size: 36px;
  24.         }
  25.  
  26.         #logo {
  27.                 left: 20%;
  28.                 align: left;
  29.                 width: 120px;
  30.                 height: 120px;
  31.         }
  32.        
  33.         #headerSubTitle {
  34.                 font-size: 14px;
  35.                 letter-spacing: 2px;
  36.                 color: #666;   
  37.         }
  38.        
  39.         a#igem, a#igem:visited {
  40.                 color: inherit;
  41.                 text-decoration: none; 
  42.         }
  43.        
  44.         a#igem:hover, a#igem:active {
  45.                 color: #F93;
  46.                 text-decoration: underline;    
  47.         }
  48.  
  49.         /*----- HEADER BUTTONS -----*/
  50.         .nav_button {
  51.                 bottom: 20%;
  52.                 display: table;
  53.         }
  54.        
  55.         .nav_buttonText {
  56.                 color: #222;
  57.                 text-align: center;
  58.                 vertical-align: middle;
  59.                 display: table-cell;   
  60.         }
  61.        
  62.         a.nav_buttonLink, a.nav_buttonLink:visited {
  63.                 text-decoration: none; 
  64.                 color: black;
  65.         }
  66.         a.nav_buttonLink:hover, a.nav_buttonLink:active {
  67.                 color: #F93;
  68.                 text-decoration: underline;
  69.         }
  70.  
  71.         /*----- END OF BUTTONS -----*/
  72.        
  73.         /*----- END OF HEADER -----*/
  74.  
  75.         /*----- MAIN CONTENT -----*/
  76.        
  77.         .title-link, .title-link:active, .title-link:visited {
  78.                 text-decoration: none;
  79.                 color: inherit;
  80.         }
  81.  
  82.         .title-link:hover {
  83.                 text-decoration: underline;
  84.                 color: #F93;
  85.         }
  86.         #first-panel {
  87.                 display: ;
  88.                 background: white;
  89.                 border:1px solid white;
  90.                 padding-left: 15px;
  91.                 -moz-border-radius-topright: 20px;
  92.                 -webkit-border-top-right-radius: 20px;
  93.                 -moz-border-radius-bottomright: 20px;
  94.                 -webkit-border-bottom-right-radius: 20px;
  95.                 width: 100%;
  96.                 height: auto;
  97.         }
  98.        
  99.         #second-panel {
  100.                 display: none;
  101.                 background: white;
  102.                 border:1px solid white;
  103.                 padding-left: 15px;
  104.                 -moz-border-radius-topright: 20px;
  105.                 -webkit-border-top-right-radius: 20px;
  106.                 -moz-border-radius-bottomright: 20px;
  107.                 -webkit-border-bottom-right-radius: 20px;
  108.                 width: 100%;
  109.                 height: auto;
  110.         }
  111.        
  112.         #third-panel {
  113.                 display: none;
  114.                 background: white;
  115.                 border:1px solid white;
  116.                 padding-left: 15px;
  117.                 -moz-border-radius-topright: 20px;
  118.                 -webkit-border-top-right-radius: 20px;
  119.                 -moz-border-radius-bottomright: 20px;
  120.                 -webkit-border-bottom-right-radius: 20px;
  121.                 width: 100%;
  122.                 height: auto;
  123.         }
  124.        
  125.         #fourth-panel {
  126.                 display: none;
  127.                 background: white;
  128.                 border:1px solid white;
  129.                 padding-left: 15px;
  130.                 -moz-border-radius-topright: 20px;
  131.                 -webkit-border-top-right-radius: 20px;
  132.                 -moz-border-radius-bottomright: 20px;
  133.                 -webkit-border-bottom-right-radius: 20px;
  134.                 width: 100%;
  135.                 height: auto;
  136.         }
  137.        
  138.         /*----- FIRST CONTENT -----*/
  139.        
  140.         /*----- SECOND CONTENT -----*/
  141.        
  142.         /*----- THIRD CONTENT -----*/
  143.        
  144.         /*----- FOURTH CONTENT -----*/ 
  145.        
  146.         </style>
  147.   </head>
  148. </html>
  149.  
  150. <html>
  151.   <head>
  152.    
  153.     <!-- FIRST BUTTON -->
  154.         <script type="text/javascript">
  155.         $(document).ready(function(){
  156.             $("#nav-button-link-first").click(function(){
  157.                 $("#first-panel").toggle("fast");
  158.                         $("#second-panel").hide("fast");
  159.                         $("#third-panel").hide("fast");
  160.                         $("#fourth-panel").hide("fast");
  161.                 $(this).toggleClass("active");
  162.                 return false;
  163.             });
  164.         });
  165.         </script>
  166.    
  167.     <script type="text/javascript">
  168.         $(document).ready(function(){
  169.             $("#first-title-link").click(function(){
  170.                 $("#first-panel").toggle("fast");
  171.                         $("#second-panel").hide("fast");
  172.                         $("#third-panel").hide("fast");
  173.                         $("#fourth-panel").hide("fast");
  174.                 $(this).toggleClass("active");
  175.                 return false;
  176.             });
  177.         });
  178.         </script>
  179.    
  180.     <!-- SECOND BUTTON -->
  181.    
  182.     <script type="text/javascript">
  183.         $(document).ready(function(){
  184.             $("#nav-button-link-second").click(function(){
  185.                 $("#second-panel").toggle("fast");
  186.                         $("#first-panel").hide("fast");
  187.                         $("#third-panel").hide("fast");
  188.                         $("#fourth-panel").hide("fast");
  189.                 $(this).toggleClass("active");
  190.                 return false;
  191.             });
  192.         });
  193.         </script>
  194.    
  195.     <script type="text/javascript">
  196.         $(document).ready(function(){
  197.             $("#second-title-link").click(function(){
  198.                 $("#second-panel").toggle("fast");
  199.                         $("#first-panel").hide("fast");
  200.                         $("#third-panel").hide("fast");
  201.                         $("#fourth-panel").hide("fast");
  202.                 $(this).toggleClass("active");
  203.                 return false;
  204.             });
  205.         });
  206.         </script>
  207.    
  208.     <!-- THIRD BUTTON -->
  209.    
  210.     <script type="text/javascript">
  211.         $(document).ready(function(){
  212.             $("#nav-button-link-third").click(function(){
  213.                 $("#third-panel").toggle("fast");
  214.                         $("#first-panel").hide("fast");
  215.                         $("#second-panel").hide("fast");
  216.                         $("#fourth-panel").hide("fast");
  217.                 $(this).toggleClass("active");
  218.                 return false;
  219.             });
  220.         });
  221.         </script>
  222.    
  223.     <script type="text/javascript">
  224.         $(document).ready(function(){
  225.             $("#third-title-link").click(function(){
  226.                 $("#third-panel").toggle("fast");
  227.                         $("#first-panel").hide("fast");
  228.                         $("#second-panel").hide("fast");
  229.                         $("#fourth-panel").hide("fast");
  230.                 $(this).toggleClass("active");
  231.                 return false;
  232.             });
  233.         });
  234.         </script>
  235.    
  236.     <!-- FOURTH BUTTON -->
  237.    
  238.     <script type="text/javascript">
  239.         $(document).ready(function(){
  240.             $("#nav-button-link-fourth").click(function(){
  241.                 $("#fourth-panel").toggle("fast");
  242.                         $("#first-panel").hide("fast");
  243.                         $("#second-panel").hide("fast");
  244.                         $("#third-panel").hide("fast");
  245.                 $(this).toggleClass("active");
  246.                 return false;
  247.             });
  248.         });
  249.         </script>
  250.    
  251.     <script type="text/javascript">
  252.         $(document).ready(function(){
  253.             $("#fourth-title-link").click(function(){
  254.                 $("#fourth-panel").toggle("fast");
  255.                         $("#first-panel").hide("fast");
  256.                         $("#second-panel").hide("fast");
  257.                         $("#third-panel").hide("fast");
  258.                 $(this).toggleClass("active");
  259.                 return false;
  260.             });
  261.         });
  262.         </script>
  263.   </head>
  264. </html>
  265.  
  266.  
  267. <html>
  268.   <div id="header">
  269.   <!--<img src="assets/logo.png" id="logo">-->
  270.   <div id="headerTitle">
  271. </html>
  272. <center>SPS_London</center>
  273. <html>
  274.   </div>
  275. </html>
  276.  
  277. <html>
  278. <div id="headerSubTitle">
  279. </html>
  280. <center>TMNP Collective</center>
  281. <html>
  282.   </div>
  283.   <div id="headerSubTitle">
  284. </html>
  285. <center>An <html><a id="igem"></html>iGEM<html></a></html> Team</center>
  286.  
  287. <html>
  288.   </div>
  289.     <!--[if gte IE 2 ]>
  290.                 <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>
  291.    <![endif]-->
  292. </html>
  293.  
  294. <center>
  295. {| style="text-align: center; margin-left: 50px; width: 500px;"
  296. |
  297. <html>
  298.   <a class="nav_buttonLink" id="nav-button-link-first" href="#first"><div class="nav_button" id="first"><p class="nav_buttonText">
  299. HOME
  300. </html>
  301. <html>
  302.   </p></div></a>
  303. </html>
  304. |
  305. <html>
  306. <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">
  307. </html>
  308. PROJECT
  309. <html>
  310.   </p></div></a>
  311. </html>
  312. |
  313. <html>
  314.   <a class="nav_buttonLink" id="nav-button-link-third" href="#third"><div class="nav_button" id="third"><p class="nav_buttonText">
  315. </html>
  316. THE TEAM
  317. <html>
  318.   </p></div></a>
  319. </html>
  320.  
  321. |
  322. <html>
  323.   <a class="nav_buttonLink" id="nav-button-link-fourth" href="#fourth"><div class="nav_button" id="fourth"><p class="nav_buttonText">
  324. </html>
  325. NOTEBOOK
  326. <html>
  327.   </p></div></a>
  328. </html>
  329. |-
  330. |}
  331. </center></div>
  332.  
  333. <html>
  334. <a class="title-link" id="first-title-link" id="#first"><h3>first</h3></a>
  335.         <div id="first-panel">
  336.                 <div class="nav-box">
  337.                 <ul>
  338.                 <li>Hi</li>
  339.                 </ul>
  340.             </div>
  341.            
  342.             <div class="panel-content">
  343.                         <p>this is all inside the first panel</p>
  344.                 </div> <!--of panel content-->    
  345.         </div>
  346. </html>
  347.  
  348. <html>
  349.   <a class="title-link" id="first-title-link" id="#first"><h3>
  350. </html>
  351. Home
  352. <html>
  353.   </h3></a>
  354.   <div id="first-panel">
  355. </html>
  356. hello
  357.  
  358. <html>
  359.   </div>
  360. </html>
  361. *g
  362. *g
  363. *g
  364. *g
  365. *g
  366. *g
  367. *g
  368. *g
  369. *g
  370. *g
  371. *g
clone this paste RAW Paste Data