API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Mar 28th, 2013
131
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.17 KB | None | 0 0
raw download clone embed print report
  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>
  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
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!