|
|
(One intermediate revision not shown) |
Line 1: |
Line 1: |
- | {{:Team:UNIK_Copenhagen/template}}
| |
- | <html>
| |
- | <style type="text/css">
| |
- | *{
| |
- | margin: 0px;
| |
- | padding: 0px;
| |
- | }
| |
- | #all_content{
| |
- | z-index=50;
| |
- | position: relative;
| |
- | font-family: The Girl Next Door;
| |
- | margin: 30px;
| |
- | padding: 0px;
| |
- | border: 1px solid black;
| |
- | width: 900px;
| |
- | height: 570px;
| |
- | background-color: #000033;
| |
- | -moz-border-radius: 8px;
| |
- | -webkit-border-radius: 8px;
| |
- | }
| |
- | .content{
| |
- | height: 546px;
| |
- | width: 790px;
| |
- | background-image: url(paper3.jpg);
| |
- | background-size: 50%;
| |
- | border: 1px solid gray;
| |
- | padding: 10px;
| |
- | margin: 0px;
| |
- | }
| |
- | .left_page, .right_page{
| |
- | float: left;
| |
- | width: 375px;
| |
- | height: 526px;
| |
- | margin: 10px;
| |
- | }
| |
- | .items{
| |
- | float: left;
| |
- | padding: 0px;
| |
- | margin: 1px -41px 1px 41px;
| |
- | }
| |
- | #tabs{
| |
- | margin: 0px;
| |
- | padding: 0px;
| |
- | }
| |
- | #tabs li{
| |
- | display: block;
| |
- | list-style: none;
| |
- | padding: 0px;
| |
- | margin: 0px;
| |
- | width: 46px;
| |
- | height: 46px;
| |
- | }
| |
- | #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: 0px 14px 14px 14px;
| |
- | }
| |
- | #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;
| |
- | }
| |
| | | |
- | </style>
| |
- |
| |
- | <script type="text/javascript">
| |
- | function ThisTab(new_tab, new_content) {
| |
- | for(var i=1;i<13;i++){document.getElementById('content'+i).style.display = 'none';}
| |
- | document.getElementById(new_content).style.display = 'block';
| |
- |
| |
- | for(var i=1;i<13;i++){document.getElementById('tab'+i).className = '';}
| |
- | document.getElementById(new_tab).className = 'active';
| |
- | }
| |
- | </script>
| |
- |
| |
- | <link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door' rel='stylesheet' type='text/css'>
| |
- |
| |
- | <div class="the_content">
| |
- | <div id="all_content">
| |
- | <div class="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">
| |
- | <img src="black_medium.png" width="220px" position="absolute" top="0">
| |
- | <img src="MamC_gene.png" width="300px">
| |
- | </div>
| |
- | </div>
| |
- |
| |
- | <div id="content2" class="content">
| |
- | <div class="left_page">
| |
- | <h1>Week 2</h1>
| |
- | <p>This week the team . . .</p>
| |
- | </div>
| |
- | <div class="right_page">
| |
- | <p> more text on this page!</p>
| |
- | </div>
| |
- | </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 class="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>
| |
- | </div>
| |
- | </html>
| |