|
|
| (75 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| − | {{Template:Cologne-Duesseldorf/css}}
| |
| − | {{Template:Cologne-Duesseldorf/header}}
| |
| − | <html>
| |
| | | | |
| − | <head>
| |
| − | <style>
| |
| − | .tab {
| |
| − | display:flex;
| |
| − | flex-direction:row;
| |
| − | justify-content: center;
| |
| − | }
| |
| − |
| |
| − | .tab button {
| |
| − | background-color:#fff;
| |
| − | border:none;
| |
| − | border-bottom:5px solid #ccc;
| |
| − | outline:none;
| |
| − | transition: 0.3s;
| |
| − | width: 100%;
| |
| − | padding: 20px;
| |
| − | }
| |
| − |
| |
| − | .tab button:hover{
| |
| − | background-color:#eee;
| |
| − | }
| |
| − |
| |
| − | .tab button.active {
| |
| − | border-bottom:5px solid #149375;
| |
| − | }
| |
| − |
| |
| − | .tabcontent {
| |
| − | display:none;
| |
| − | }
| |
| − |
| |
| − | .tabcontent:first-child{
| |
| − | display:block;
| |
| − | }
| |
| − |
| |
| − | .tabcontent {
| |
| − | -webkit-animation: fadeEffect 1s;
| |
| − | animation: fadeEffect 1s; /* Fading effect takes 1 second */
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes fadeEffect {
| |
| − | from {opacity: 0;}
| |
| − | to {opacity: 1;}
| |
| − | }
| |
| − |
| |
| − | @keyframes fadeEffect {
| |
| − | from {opacity: 0;}
| |
| − | to {opacity: 1;}
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − | </head>
| |
| − |
| |
| − | <body>
| |
| − | <article>
| |
| − |
| |
| − | <h2>Medal Criteria</h2>
| |
| − |
| |
| − | <div class="tab">
| |
| − | <button class="tablinks" onclick="openTab(event, 'bronze')" id="defaultOpen">
| |
| − | <img src="https://static.igem.org/mediawiki/2017/1/17/T--Cologne-Duesseldorf--medal-bronze.png">
| |
| − | </button>
| |
| − | <button class="tablinks" onclick="openTab(event, 'silver')">
| |
| − | <img src="https://static.igem.org/mediawiki/2017/a/ab/T--Cologne-Duesseldorf--medal-silver.png">
| |
| − | </button>
| |
| − | <button class="tablinks" onclick="openTab(event, 'gold')" id="defaultOpen">
| |
| − | <img src="https://static.igem.org/mediawiki/2017/b/be/T--Cologne-Duesseldorf--medal-gold.png">
| |
| − | </button>
| |
| − | <button class="tablinks" onclick="openTab(event, 'special')">
| |
| − | <img src="https://static.igem.org/mediawiki/2017/d/d2/T--Cologne-Duesseldorf--medal-special.png">
| |
| − | </button>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | <div id="bronze" class="tabcontent">
| |
| − | <h3>Bronze</h3>
| |
| − | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam viverra sem commodo dui ultrices, ut varius dui ultrices. Quisque interdum eleifend erat vitae lobortis. Vestibulum dapibus erat sed justo fermentum ullamcorper. Praesent molestie eros non purus hendrerit, cursus pretium lorem malesuada. Nulla in enim in est congue mollis. Ut dui mauris, ultrices id ultricies et, cursus et urna. Suspendisse potenti. Ut lobortis interdum condimentum. Pellentesque scelerisque ante vitae accumsan tincidunt. Vivamus non urna fringilla, eleifend purus sit amet, aliquam magna. Vivamus nisl mauris, suscipit a neque sit amet, semper ultricies nunc. Curabitur et augue a purus convallis sagittis sed in odio. Maecenas vitae maximus neque, a tincidunt diam.</p>
| |
| − | </div>
| |
| − | <div id="silver" class="tabcontent">
| |
| − | <h3>Silver</h3>
| |
| − | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam viverra sem commodo dui ultrices, ut varius dui ultrices. Quisque interdum eleifend erat vitae lobortis. Vestibulum dapibus erat sed justo fermentum ullamcorper. Praesent molestie eros non purus hendrerit, cursus pretium lorem malesuada. Nulla in enim in est congue mollis. Ut dui mauris, ultrices id ultricies et, cursus et urna. Suspendisse potenti. Ut lobortis interdum condimentum. Pellentesque scelerisque ante vitae accumsan tincidunt. Vivamus non urna fringilla, eleifend purus sit amet, aliquam magna. Vivamus nisl mauris, suscipit a neque sit amet, semper ultricies nunc. Curabitur et augue a purus convallis sagittis sed in odio. Maecenas vitae maximus neque, a tincidunt diam.</p>
| |
| − | </div>
| |
| − | <div id="gold" class="tabcontent">
| |
| − | <h3>Bronze</h3>
| |
| − | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam viverra sem commodo dui ultrices, ut varius dui ultrices. Quisque interdum eleifend erat vitae lobortis. Vestibulum dapibus erat sed justo fermentum ullamcorper. Praesent molestie eros non purus hendrerit, cursus pretium lorem malesuada. Nulla in enim in est congue mollis. Ut dui mauris, ultrices id ultricies et, cursus et urna. Suspendisse potenti. Ut lobortis interdum condimentum. Pellentesque scelerisque ante vitae accumsan tincidunt. Vivamus non urna fringilla, eleifend purus sit amet, aliquam magna. Vivamus nisl mauris, suscipit a neque sit amet, semper ultricies nunc. Curabitur et augue a purus convallis sagittis sed in odio. Maecenas vitae maximus neque, a tincidunt diam.</p>
| |
| − | </div>
| |
| − | <div id="special" class="tabcontent">
| |
| − | <h3>Silver</h3>
| |
| − | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam viverra sem commodo dui ultrices, ut varius dui ultrices. Quisque interdum eleifend erat vitae lobortis. Vestibulum dapibus erat sed justo fermentum ullamcorper. Praesent molestie eros non purus hendrerit, cursus pretium lorem malesuada. Nulla in enim in est congue mollis. Ut dui mauris, ultrices id ultricies et, cursus et urna. Suspendisse potenti. Ut lobortis interdum condimentum. Pellentesque scelerisque ante vitae accumsan tincidunt. Vivamus non urna fringilla, eleifend purus sit amet, aliquam magna. Vivamus nisl mauris, suscipit a neque sit amet, semper ultricies nunc. Curabitur et augue a purus convallis sagittis sed in odio. Maecenas vitae maximus neque, a tincidunt diam.</p>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − | </article>
| |
| − | </body>
| |
| − | <script>
| |
| − | function openTab(evt, tabName) {
| |
| − | // Declare all variables
| |
| − | var i, tabcontent, tablinks;
| |
| − |
| |
| − | // Get all elements with class="tabcontent" and hide them
| |
| − | tabcontent = document.getElementsByClassName("tabcontent");
| |
| − | for (i = 0; i < tabcontent.length; i++) {
| |
| − | tabcontent[i].style.display = "none";
| |
| − | }
| |
| − |
| |
| − | // Get all elements with class="tablinks" and remove the class "active"
| |
| − | tablinks = document.getElementsByClassName("tablinks");
| |
| − | for (i = 0; i < tablinks.length; i++) {
| |
| − | tablinks[i].className = tablinks[i].className.replace(" active", "");
| |
| − | }
| |
| − |
| |
| − | // Show the current tab, and add an "active" class to the button that opened the tab
| |
| − | document.getElementById(tabName).style.display = "block";
| |
| − | evt.currentTarget.className += " active";
| |
| − | }
| |
| − | // Get the element with id="defaultOpen" and click on it
| |
| − | document.getElementById("defaultOpen").click();
| |
| − | </script>
| |
| − | </html>
| |
| − | {{Template:Cologne-Duesseldorf/footer}}
| |
| − | {{Template:Cologne-Duesseldorf/js}}
| |
