Difference between revisions of "Team:Melbourne/Project"
(Creating Project Page) |
|||
| (62 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
{{Melbourne}} | {{Melbourne}} | ||
| + | <html> | ||
<html> | <html> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | <script> | |
| − | </ | + | function openCity(cityName, elmnt, color) { |
| + | // Hide all elements with class="tabcontent" by default */ | ||
| + | var i, tabcontent, tablinks; | ||
| + | tabcontent = document.getElementsByClassName("tabcontent"); | ||
| + | for (i = 0; i < tabcontent.length; i++) { | ||
| + | tabcontent[i].style.display = "none"; | ||
| + | } | ||
| + | |||
| + | // Remove the background color of all tablinks/buttons | ||
| + | tablinks = document.getElementsByClassName("tablink"); | ||
| + | for (i = 0; i < tablinks.length; i++) { | ||
| + | tablinks[i].style.backgroundColor = ""; | ||
| + | } | ||
| + | |||
| + | // Show the specific tab content | ||
| + | document.getElementById(cityName).style.display = "block"; | ||
| + | |||
| + | // Add the specific color to the button used to open the tab content | ||
| + | elmnt.style.backgroundColor = color; | ||
| + | } | ||
| + | |||
| + | // Get the element with id="defaultOpen" and click on it | ||
| + | document.getElementById("defaultOpen").click(); | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | </script> | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | <style> | ||
| + | /* Style the tab buttons */ | ||
| + | .tablink { | ||
| + | background-color: #555; | ||
| + | color: white; | ||
| + | float: left; | ||
| + | border: none; | ||
| + | outline: none; | ||
| + | cursor: pointer; | ||
| + | padding: 14px 16px; | ||
| + | font-size: 17px; | ||
| + | width: 25%; | ||
| + | } | ||
| + | |||
| + | /* Change background color of buttons on hover */ | ||
| + | .tablink:hover { | ||
| + | background-color: #777; | ||
| + | } | ||
| + | |||
| + | /* Set default styles for tab content */ | ||
| + | .tabcontent { | ||
| + | color: white; | ||
| + | display: none; | ||
| + | padding: 50px; | ||
| + | padding-top:20px; | ||
| + | text-align: center; | ||
| + | margin: auto | ||
| + | } | ||
| + | |||
| + | /* Style each tab content individually */ | ||
| + | #overview { | ||
| + | background-color:#426487; | ||
| + | } | ||
| + | |||
| + | #notebook { | ||
| + | background-image:url(https://media.giphy.com/media/gH2bKIakvLuW4/giphy.gif); | ||
| + | background-color:black; | ||
| + | } | ||
| + | |||
| + | #attributions { | ||
| + | background-image:url(https://media.giphy.com/media/3NeSk2IVEd2FYUQEcM/giphy.gif); | ||
| + | background-color:black} | ||
| + | |||
| + | #Design { | ||
| + | background-image:url(https://media.giphy.com/media/xUA7bfDro97ipc4fu0/giphy.gif); | ||
| + | background-color:black} | ||
| + | |||
| + | |||
| + | .main { | ||
| + | padding-top:100px; | ||
| + | } | ||
| + | </style> | ||
| + | |||
| + | |||
<body> | <body> | ||
| − | + | <img class="mosaic_img" src="https://static.igem.org/mediawiki/2018/2/2e/T--Melbourne--igem_mosaic.png" style="margin-top:35px; width:100%"> | |
| − | < | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| + | <button class="tablink" onclick="openCity('overview', this, '#0D306A')" id="defaultOpen">Project Overview</button> | ||
| + | <button class="tablink" onclick="openCity('notebook', this, '#0D306A')">Notebook</button> | ||
| + | <button class="tablink" onclick="openCity('attributions', this, '#0D306A')">Attribution</button> | ||
| + | <button class="tablink" onclick="openCity('Design', this, '#0D306A')">Design</button> | ||
| − | |||
| + | <div id="overview" class="tabcontent"> | ||
| + | <img class="overview_img" src="https://static.igem.org/mediawiki/2018/5/53/T--Melbourne--project_overview.png" style="width:40%; margin-top:35px;"> | ||
| + | </div> | ||
| + | <div id="notebook" class="tabcontent"> | ||
| + | <img class="overview_img" src="https://static.igem.org/mediawiki/2018/b/bd/T--Melbourne--notebook_pt1.png" style="width:40%; margin-top:35px;"><br> | ||
| + | <img class="overview_img" src="https://static.igem.org/mediawiki/2018/5/5d/T--Melbourne--notebook_pt2.png" style="width:40%;"> | ||
| + | </div> | ||
| + | <div id="attributions" class="tabcontent"> | ||
| + | <img class="overview_img" src="https://static.igem.org/mediawiki/2018/d/d0/T--Melbourne--attributions.png" style="width:40%; margin-top:35px;"> | ||
| + | </div> | ||
| + | <div id="Design" class="tabcontent"> | ||
| + | <img class="overview_img" src="https://static.igem.org/mediawiki/2018/4/4b/T--Melbourne--project_design.png" style="width:40%; margin-top:35px;"> | ||
| + | </div> | ||
| + | |||
| + | <div id="footer"> | ||
| + | Property of Team Melbourne | ||
| + | </div> | ||
| + | |||
| + | </body> | ||
</html> | </html> | ||
Latest revision as of 02:08, 18 October 2018
