Ibrahym501 (Talk | contribs) |
Ibrahym501 (Talk | contribs) |
||
Line 9: | Line 9: | ||
− | < | + | <h3 align="center">Overview</h3> |
+ | <div class="a"><p align="justify">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> | ||
+ | <div class="tab"> | ||
+ | <button class="tablinks" onclick="openCity(event, 'Cliente')" id="defaultOpen"><img src="https://static.igem.org/mediawiki/2018/b/bc/T--Tec-Chihuahua--Rectangle.jpg"</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'Necesidad')" id="defaultOpen"><img src="https://static.igem.org/mediawiki/2018/b/bc/T--Tec-Chihuahua--Rectangle.jpg"</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'Hipotesis')" id="defaultOpen"><img src="https://static.igem.org/mediawiki/2018/b/bc/T--Tec-Chihuahua--Rectangle.jpg"</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'Solucion')" id="defaultOpen"><img src="https://static.igem.org/mediawiki/2018/b/bc/T--Tec-Chihuahua--Rectangle.jpg"</button> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <script> | ||
+ | // Get the element with id="defaultOpen" and click on it | ||
+ | document.getElementById("defaultOpen").click(); | ||
+ | function openCity(evt, cityName) { | ||
+ | var i, tabcontent, tablinks; | ||
+ | tabcontent = document.getElementsByClassName("tabcontent"); | ||
+ | for (i = 0; i < tabcontent.length; i++) { | ||
+ | tabcontent[i].style.display = "none"; | ||
+ | } | ||
+ | tablinks = document.getElementsByClassName("tablinks"); | ||
+ | for (i = 0; i < tablinks.length; i++) { | ||
+ | tablinks[i].className = tablinks[i].className.replace(" active", ""); | ||
+ | } | ||
+ | document.getElementById(cityName).style.display = "block"; | ||
+ | evt.currentTarget.className += " active"; | ||
+ | } | ||
+ | </script> | ||
+ | <style> | ||
+ | body {font-family: Arial;} | ||
+ | |||
+ | /* Style the tab */ | ||
+ | .tab { | ||
+ | overflow: hidden; | ||
+ | border: 1px solid #fff; | ||
+ | background-color: #fff; | ||
+ | box-shadow: 0px 0px; | ||
+ | shadow-color: #000; | ||
+ | padding-left: 320px; | ||
+ | padding-right: 300px; | ||
+ | border-radius: 15px; | ||
+ | } | ||
+ | |||
+ | /* Style the buttons inside the tab */ | ||
+ | .tab button { | ||
+ | background-color: rgba(239,200,2,0.5); | ||
+ | float: middle; | ||
+ | border: none; | ||
+ | outline: none; | ||
+ | cursor: pointer; | ||
+ | padding: 14px 16px; | ||
+ | transition: 0.3s; | ||
+ | font-size: 17px; | ||
+ | border-radius: 15px; | ||
+ | } | ||
+ | |||
+ | /* Change background color of buttons on hover */ | ||
+ | .tab button:hover { | ||
+ | background-color: #efc802; | ||
+ | } | ||
+ | |||
+ | /* Create an active/current tablink class */ | ||
+ | .tab button.active { | ||
+ | background-color: #efc802; | ||
+ | } | ||
+ | |||
+ | /* Style the tab content */ | ||
+ | .tabcontent { | ||
+ | display: none; | ||
+ | padding: 6px 6px; | ||
+ | border: 1px solid #fff; | ||
+ | border-top: none; | ||
+ | } | ||
+ | </style> | ||
</div> | </div> | ||
</div> | </div> | ||
</html> | </html> | ||
− | |||
{{:Team:Tec-Chihuahua/Templates/footer}} | {{:Team:Tec-Chihuahua/Templates/footer}} |
Revision as of 20:06, 3 October 2018
![](https://static.igem.org/mediawiki/2018/2/2b/T--Tec-Chihuahua--Entletters.png)
Overview
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.