(Prototype team page) |
|||
Line 2: | Line 2: | ||
<html> | <html> | ||
+ | <div class="has-animations landing-page no-js"> | ||
+ | <div class="container"> | ||
+ | <nav> | ||
+ | <div class="width-limit nav-content"> | ||
+ | <div> | ||
+ | <a href="/Team:Humboldt_Berlin"> | ||
+ | <img class="nav-logo" src="https://static.igem.org/mediawiki/2019/4/41/T--Humboldt_Berlin--logo-only.png" alt="small header logo" /> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="nav-right"> | ||
+ | <input type="checkbox" /> | ||
+ | <span></span> | ||
+ | <span></span> | ||
+ | <span></span> | ||
− | <div class=" | + | <div class="menu-items"> |
+ | <a href="/Team:Humboldt_Berlin"> | ||
+ | Home | ||
+ | </a> | ||
+ | <div class="devider"></div> | ||
+ | <div class="item"> | ||
+ | <a href="/Team:Humboldt_Berlin/Team">Team</a> | ||
+ | <div class="submenu"> | ||
+ | <a href="/Team:Humboldt_Berlin/Team">Team members</a> | ||
+ | <a href="/Team:Humboldt_Berlin/Collaborations">Collaboration</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="devider"></div> | ||
+ | <div class="item"> | ||
+ | <a class="active" href="/Team:Humboldt_Berlin/Description">Project</a> | ||
+ | <div class="submenu"> | ||
+ | <a href="/Team:Humboldt_Berlin/Description">Description</a> | ||
+ | <a href="/Team:Humboldt_Berlin/Design">Design</a> | ||
+ | <a href="/Team:Humboldt_Berlin/Experiments">Experimentals</a> | ||
+ | <a class="active" href="/Team:Humboldt_Berlin/Notebook">Notebook</a> | ||
+ | <a href="/Team:Humboldt_Berlin/Contribution">Contribution</a> | ||
+ | <a href="/Team:Humboldt_Berlin/Results">Results</a> | ||
+ | <a href="/Team:Humboldt_Berlin/Demonstrate">Demonstrate</a> | ||
+ | <a href="/Team:Humboldt_Berlin/Improve">Improve</a> | ||
+ | <a href="/Team:Humboldt_Berlin/Attributions">Attributions</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="devider"></div> | ||
+ | <div class="item"> | ||
+ | <a href="/Team:Humboldt_Berlin/Parts">Parts</a> | ||
+ | <div class="submenu"> | ||
+ | <a href="/Team:Humboldt_Berlin/Parts">Parts overview</a> | ||
+ | <a href="/Team:Humboldt_Berlin/Basic_Part">Basic parts</a> | ||
+ | <a href="/Team:Humboldt_Berlin/Composite_Part">Composite parts</a> | ||
+ | <a href="/Team:Humboldt_Berlin/Part_Collection">Parts collection</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="devider"></div> | ||
+ | <div class="item"> | ||
+ | <a href="/Team:Humboldt_Berlin/Safety">Safety</a> | ||
+ | </div> | ||
+ | <div class="devider"></div> | ||
+ | <div class="item"> | ||
+ | <a href="/Team:Humboldt_Berlin/Human_Practices">Human Practices</a> | ||
+ | <div class="submenu"> | ||
+ | <a href="/Team:Humboldt_Berlin/Human_Practices">Human Practises</a> | ||
+ | <a href="/Team:Humboldt_Berlin/Public_Engagement">Education & Engagement</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="devider"></div> | ||
+ | <div class="item"> | ||
+ | <a>Awards</a> | ||
+ | <div class="submenu"> | ||
+ | <a href="/Team:Humboldt_Berlin/Entrepreneurship">Entrepreneurship</a> | ||
+ | <a href="/Team:Humboldt_Berlin/Hardware">Hardware</a> | ||
+ | <a href="/Team:Humboldt_Berlin/Measurement">Measurement</a> | ||
+ | <a href="/Team:Humboldt_Berlin/Model">Model</a> | ||
+ | <a href="/Team:Humboldt_Berlin/Plant">Plant</a> | ||
+ | <a href="/Team:Humboldt_Berlin/Software">Software</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="devider"></div> | ||
+ | <a href="https://igem.org/2019_Judging_Form?team=Humboldt_Berlin"> | ||
+ | For Judges | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </nav> | ||
− | < | + | <section class="full-height width-limit notebook"> |
− | < | + | <div class="timeline"> |
+ | <div class="timeline-month">Januar</div> | ||
+ | <div class="timeline-dot"></div> | ||
+ | <div class="timeline-month">Februar</div> | ||
+ | <div class="timeline-month">März</div> | ||
+ | </div> | ||
+ | <div class="infobox"> | ||
+ | infobox | ||
+ | </div> | ||
+ | </section> | ||
+ | </main> | ||
− | < | + | <script> |
− | + | const infobox = document.querySelector('.infobox'); | |
− | + | window.addEventListener("scroll", function () { | |
− | + | const elements = document.querySelectorAll('.timeline > div'); | |
− | + | ||
− | + | [].forEach.call(elements, function(el) { | |
− | + | if (isElementVisible(el)) { | |
− | + | el.classList.add('active-timeline-el') | |
− | + | } else { | |
− | + | el.classList.remove('active-timeline-el') | |
− | + | } | |
− | + | }); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | const activeElements = document.querySelectorAll('.active-timeline-el'); | ||
+ | const lastActive = activeElements[activeElements.length - 1] | ||
+ | infobox.innerHTML = lastActive.innerHTML | ||
+ | }); | ||
+ | |||
+ | function isElementVisible(el) { | ||
+ | var top = el.offsetTop; | ||
+ | |||
+ | while(el.offsetParent) { | ||
+ | el = el.offsetParent; | ||
+ | top += el.offsetTop; | ||
+ | } | ||
+ | |||
+ | return ( | ||
+ | top <= window.pageYOffset + 195 | ||
+ | ); | ||
+ | } | ||
+ | </script> | ||
</html> | </html> |
Revision as of 05:41, 13 August 2019
Januar
Februar
März
infobox