|
|
| (131 intermediate revisions not shown) |
| Line 1: |
Line 1: |
| - | <html>
| |
| - | <style type="text/css">
| |
| - | *{
| |
| - | margin: 0px;
| |
| - | padding: 0px;
| |
| - | }
| |
| - | #all_content{
| |
| - | font-family: "Helvetica";
| |
| - | margin: 12px;
| |
| - | padding: 0px;
| |
| - | border: 1px solid black;
| |
| - | width: 900px;
| |
| - | height: 570px;
| |
| - | background-color: #000033;
| |
| - | -moz-border-radius: 8px;
| |
| - | -webkit-border-radius: 8px;
| |
| - | z-index: 100;
| |
| - | }
| |
| - | .content{
| |
| - | height: 546px;
| |
| - | width: 790px;
| |
| - | background-image: url(https://static.igem.org/mediawiki/2013/f/fc/UNIK_Copenhagen_Notebook_Paper.jpg);
| |
| - | background-size: 50%;
| |
| - | border: 1px solid gray;
| |
| - | padding: 10px;
| |
| - | margin: 0px;
| |
| - | z-index: 100;
| |
| - | }
| |
| - | .left_page, .right_page{
| |
| - | float: left;
| |
| - | width: 375px;
| |
| - | height: 526px;
| |
| - | margin: 10px;
| |
| - | z-index: 0;
| |
| - | }
| |
| - | #items{
| |
| - | float: left;
| |
| - | padding: 0px;
| |
| - | margin: 1px -41px 1px 41px;
| |
| - | z-index: 100;
| |
| - | }
| |
| - | #tabs{
| |
| - | margin: 0px;
| |
| - | padding: 0px;
| |
| - | z-index: 100;
| |
| - | }
| |
| - | #tabs li{
| |
| - | display: block;
| |
| - | list-style: none;
| |
| - | padding: 0px;
| |
| - | margin: 0px;
| |
| - | width: 46px;
| |
| - | height: 46px;
| |
| - | z-index: 100;
| |
| - | }
| |
| - | #tabs li a{
| |
| - | -moz-border-radius-topright: 10px;
| |
| - | -webkit-border-top-right-radius: 10px;
| |
| - | -moz-border-radius-bottomright: 10px;
| |
| - | -webkit-border-bottom-right-radius: 10px;
| |
| - | text-align: center;
| |
| - | display: block;
| |
| - | font-size: 25px;
| |
| - | color: black;
| |
| - | background-color: #6699cc;
| |
| - | text-decoration: none;
| |
| - | border: 1px solid gray;
| |
| - | border-left: none;
| |
| - | padding: 11px 14px 32px 14px;
| |
| - | z-index: 100;
| |
| - | }
| |
| - | #tabs li a:hover{
| |
| - | background-color: #e3e3e5;
| |
| - | border: 1px solid #666666;
| |
| - | border-left: none;
| |
| - | }
| |
| - | #tabs li a.active{
| |
| - | background-color: #e3e3e5;
| |
| - | color: black;
| |
| - | border: 1px solid gray;
| |
| - | border-left: none;
| |
| - | }
| |
| - | #content2, #content3, #content4, #content5, #content6, #content7, #content8, #content9, #content10, #content11, #content12{
| |
| - | display: none;
| |
| - | padding: 10px;
| |
| - | z-index: 100;
| |
| - | }
| |
| | | | |
| - | </style>
| |
| - |
| |
| - | <script type="text/javascript">
| |
| - | function ThisTab(new_tab, new_content) {
| |
| - |
| |
| - | document.getElementById('content1').style.display = 'none';
| |
| - | document.getElementById('content2').style.display = 'none';
| |
| - | document.getElementById('content3').style.display = 'none';
| |
| - | document.getElementById('content4').style.display = 'none';
| |
| - | document.getElementById('content5').style.display = 'none';
| |
| - | document.getElementById('content6').style.display = 'none';
| |
| - | document.getElementById('content7').style.display = 'none';
| |
| - | document.getElementById('content8').style.display = 'none';
| |
| - | document.getElementById('content9').style.display = 'none';
| |
| - | document.getElementById('content10').style.display = 'none';
| |
| - | document.getElementById('content11').style.display = 'none';
| |
| - | document.getElementById('content12').style.display = 'none';
| |
| - | document.getElementById(new_content).style.display = 'block';
| |
| - |
| |
| - | document.getElementById('tab1').className = '';
| |
| - | document.getElementById('tab2').className = '';
| |
| - | document.getElementById('tab3').className = '';
| |
| - | document.getElementById('tab4').className = '';
| |
| - | document.getElementById('tab5').className = '';
| |
| - | document.getElementById('tab6').className = '';
| |
| - | document.getElementById('tab7').className = '';
| |
| - | document.getElementById('tab8').className = '';
| |
| - | document.getElementById('tab9').className = '';
| |
| - | document.getElementById('tab10').className = '';
| |
| - | document.getElementById('tab11').className = '';
| |
| - | document.getElementById('tab12').className = '';
| |
| - | document.getElementById(new_tab).className = 'active';
| |
| - | }
| |
| - | </script>
| |
| - |
| |
| - | <div id="all_content">
| |
| - | <div id="items">
| |
| - | <div id="content1" class="content">
| |
| - | <div class="left_page">
| |
| - | <h1>Week 1</h1>
| |
| - | <p> 8<sup>th</sup>-14<sup>th</sup> of July </p>
| |
| - | <p>This week the team . . .</p>
| |
| - | </div>
| |
| - | <div class="right_page">
| |
| - | <p> RIGHT PAGE HERE! Hello :) </p>
| |
| - | </div>
| |
| - | </div>
| |
| - |
| |
| - | <div id="content2" class="content">
| |
| - | <h1>Week 2</h1>
| |
| - | <p>This week the team . . .</p>
| |
| - |
| |
| - | </div>
| |
| - |
| |
| - | <div id="content3" class="content">
| |
| - | <div class="left_page">
| |
| - | <h1>Week 3</h1>
| |
| - | <p>This week the team...</p>
| |
| - | </div>
| |
| - | <div class="right_page">
| |
| - | <p> more text on this page!</p>
| |
| - | </div>
| |
| - | </div>
| |
| - |
| |
| - | <div id="content4" class="content">
| |
| - | <div class="left_page">
| |
| - | <h1>Week 4</h1>
| |
| - | <p>This week the team...</p>
| |
| - | </div>
| |
| - | <div class="right_page">
| |
| - | <p> more text on this page!</p>
| |
| - | </div>
| |
| - | </div>
| |
| - |
| |
| - | <div id="content5" class="content">
| |
| - | <div class="left_page">
| |
| - | <h1>Week 5</h1>
| |
| - | <p>This week the team . . .</p>
| |
| - | </div>
| |
| - | <div class="right_page">
| |
| - | <p> more text on this page!</p>
| |
| - | </div>
| |
| - | </div>
| |
| - |
| |
| - | <div id="content6" class="content">
| |
| - | <div class="left_page">
| |
| - | <h1>Week 6</h1>
| |
| - | <p>This week the team...</p>
| |
| - | </div>
| |
| - | <div class="right_page">
| |
| - | <p> more text on this page!</p>
| |
| - | </div>
| |
| - | </div>
| |
| - |
| |
| - | <div id="content7" class="content">
| |
| - | <div class="left_page">
| |
| - | <h1>Week 7</h1>
| |
| - | <p>This week the team...</p>
| |
| - | </div>
| |
| - | <div class="right_page">
| |
| - | <p> more text on this page!</p>
| |
| - | </div>
| |
| - | </div>
| |
| - |
| |
| - | <div id="content8" class="content">
| |
| - | <div class="left_page">
| |
| - | <h1>Week 8</h1>
| |
| - | <p>This week the team...</p>
| |
| - | </div>
| |
| - | <div class="right_page">
| |
| - | <p> more text on this page!</p>
| |
| - | </div>
| |
| - | </div>
| |
| - |
| |
| - | <div id="content9" class="content">
| |
| - | <div class="left_page">
| |
| - | <h1>Week 9</h1>
| |
| - | <p>This week the team...</p>
| |
| - | </div>
| |
| - | <div class="right_page">
| |
| - | <p> more text on this page!</p>
| |
| - | </div>
| |
| - | </div>
| |
| - |
| |
| - | <div id="content10" class="content">
| |
| - | <div class="left_page">
| |
| - | <h1>Week 10</h1>
| |
| - | <p>This week the team...</p>
| |
| - | </div>
| |
| - | <div class="right_page">
| |
| - | <p> more text on this page!</p>
| |
| - | </div>
| |
| - | </div>
| |
| - |
| |
| - | <div id="content11" class="content">
| |
| - | <div class="left_page">
| |
| - | <h1>Week 11</h1>
| |
| - | <p>This week the team...</p>
| |
| - | </div>
| |
| - | <div class="right_page">
| |
| - | <p> more text on this page!</p>
| |
| - | </div>
| |
| - | </div>
| |
| - |
| |
| - | <div id="content12" class="content">
| |
| - | <div class="left_page">
| |
| - | <h1>Week 12</h1>
| |
| - | <p>This week the team...</p>
| |
| - | </div>
| |
| - | <div class="right_page">
| |
| - | <p> more text on this page!</p>
| |
| - | </div>
| |
| - | </div>
| |
| - |
| |
| - | </div>
| |
| - | <div id="items">
| |
| - | <ul id="tabs">
| |
| - | <li><a href="javascript:ThisTab('tab1', 'content1');" id="tab1" class="active">1</a></li>
| |
| - | <li><a href="javascript:ThisTab('tab2', 'content2');" id="tab2">2</a></li>
| |
| - | <li><a href="javascript:ThisTab('tab3', 'content3');" id="tab3">3</a></li>
| |
| - | <li><a href="javascript:ThisTab('tab4', 'content4');" id="tab4">4</a></li>
| |
| - | <li><a href="javascript:ThisTab('tab5', 'content5');" id="tab5">5</a></li>
| |
| - | <li><a href="javascript:ThisTab('tab6', 'content6');" id="tab6">6</a></li>
| |
| - | <li><a href="javascript:ThisTab('tab7', 'content7');" id="tab7">7</a></li>
| |
| - | <li><a href="javascript:ThisTab('tab8', 'content8');" id="tab8">8</a></li>
| |
| - | <li><a href="javascript:ThisTab('tab9', 'content9');" id="tab9">9</a></li>
| |
| - | <li><a href="javascript:ThisTab('tab10', 'content10');" id="tab10">10</a></li>
| |
| - | <li><a href="javascript:ThisTab('tab11', 'content11');" id="tab11">11</a></li>
| |
| - | <li><a href="javascript:ThisTab('tab12', 'content12');" id="tab12">12</a></li>
| |
| - | </ul>
| |
| - | </div>
| |
| - | </div>
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - | </html>
| |
"
