|
|
Line 1: |
Line 1: |
− | <div> | + | {{Humboldt_Berlin}} |
− | <!-- IMAGE -->
| + | <html> |
− | <img class="is-revealing" src="https://static.igem.org/mediawiki/2019/4/42/T--Humboldt_Berlin--openPBR.png" alt="OPEN PBR LOGO" width ="200" height ="100" /> | + | |
− | </div>
| + | <div class="has-animations description no-js" id="container"> |
− |
| + | <div class="container"> |
− |
| + | |
− | <h3 class="headline3">Designing and building a bioreactor</h3>
| + | <!------------------------------------------ NAVIGATION --------------------------------------------------> |
− | <p class="block-text medium-sized">
| + | <!-- INFO: move the class="active" to the correct <a> Tag --> |
− | <UL class="no-bulletpoint hover-blue"> | + | |
− | <LI> | + | <nav> |
− | <h3>1 Design of the Bioreactor</h3> | + | <div class="width-limit nav-content"> |
− | | + | <div> |
− | <LI>
| + | <a href="/Team:Humboldt_Berlin"> |
− | <UL class="no-bulletpoint">
| + | <img class="nav-logo" src="https://static.igem.org/mediawiki/2019/4/41/T--Humboldt_Berlin--logo-only.png" alt="small header logo" /> |
− | <LI>
| + | </a> |
− | <h3>Human Practices</h3>
| + | </div> |
− | </LI>
| + | <div class="nav-right"> |
− | <LI>
| + | <input type="checkbox" /> |
− | <h3>Modeling</h3>
| + | <span></span> |
− | </LI>
| + | <span></span> |
− | <LI>
| + | <span></span> |
− | <h3>Outline</h3>
| + | |
− | </LI>
| + | <div class="menu-items"> |
− | </LI>
| + | <a href="/Team:Humboldt_Berlin"> |
− | <h3>2 Part overview </h3> | + | Home |
− | </UL> | + | </a> |
− | <LI> | + | <div class="devider"></div> |
− | <UL class="no-bulletpoint"> | + | <div class="item"> |
− | <LI>
| + | <a href="/Team:Humboldt_Berlin/Team">Team</a> |
− | <h3></h3>
| + | <div class="submenu"> |
− | </LI>
| + | <a href="/Team:Humboldt_Berlin/Team">Team members</a> |
− | <LI>
| + | <a href="/Team:Humboldt_Berlin/Collaborations">Collaborations</a> |
− | <h3></h3>
| + | </div> |
− | </LI>
| + | </div> |
− | <LI>
| + | <div class="devider"></div> |
− | <h3></h3>
| + | <div class="item"> |
− | </LI>
| + | <a href="/Team:Humboldt_Berlin/Description">Project</a> |
− | </LI> | + | <div class="submenu"> |
− | </UL> | + | <a href="/Team:Humboldt_Berlin/Description">Description</a> |
− | <LI>
| + | <a href="/Team:Humboldt_Berlin/Design">Design</a> |
− | <h3>3 Testing of components </h3>
| + | <a href="/Team:Humboldt_Berlin/Experiments">Experiments</a> |
− | <UL class="no-bulletpoint">
| + | <a href="/Team:Humboldt_Berlin/Notebook">Notebook</a> |
− | <LI>
| + | <a href="/Team:Humboldt_Berlin/Contribution">Contribution</a> |
− | <h3></h3>
| + | <a href="/Team:Humboldt_Berlin/Results">Results</a> |
− | </LI>
| + | <a href="/Team:Humboldt_Berlin/Demonstrate">Demonstrate</a> |
− | <LI>
| + | <a href="/Team:Humboldt_Berlin/Improve">Improve</a> |
− | <h3></h3>
| + | <a href="/Team:Humboldt_Berlin/Attributions">Attributions</a> |
− | </LI>
| + | </div> |
− | <LI>
| + | </div> |
− | <h3></h3>
| + | <div class="devider"></div> |
− | </LI>
| + | <div class="item"> |
− |
| + | <a href="/Team:Humboldt_Berlin/Parts">Parts</a> |
− |
| + | <div class="submenu"> |
− | </UL>
| + | <a href="/Team:Humboldt_Berlin/Parts">Parts overview</a> |
− |
| + | <a href="/Team:Humboldt_Berlin/Basic_Part">Basic parts</a> |
− | </LI> | + | <a href="/Team:Humboldt_Berlin/Composite_Part">Composite parts</a> |
− | | + | <a href="/Team:Humboldt_Berlin/Part_Collection">Parts collection</a> |
− | </LI> | + | </div> |
− |
| + | </div> |
− | </UL> | + | <div class="devider"></div> |
− | | + | <div class="item"> |
− | </p> | + | <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 Practices</a> |
| + | <a href="/Team:Humboldt_Berlin/Public_Engagement">Education & Engagement</a> |
| + | </div> |
| + | </div> |
| + | <div class="devider"></div> |
| + | <div class="item"> |
| + | <a class="active">Awards</a> |
| + | <div class="submenu"> |
| + | <a class="active" 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> |
| + | </div> |
| + | </div> |
| + | <div class="devider"></div> |
| + | <a href="https://2019.igem.org/Team:Humboldt_Berlin/Achievements"> |
| + | For Judges |
| + | </a> |
| + | </div> |
| </div> | | </div> |
| + | </div> |
| + | </nav> |
| + | |
| + | <!------------------------------------------ NAVIGATION END --------------------------------------------------> |
| | | |
| + | |
| | | |
| | | |
− | <div class="two-columns-headline"> | + | |
| + | <!------------------------------------------ HEADER--------------------------------------------------> |
| + | <div class="fixed-header-container"> |
| + | <section class="fixed-image-header"> |
| + | <!-- HEADER IMAGE --> |
| + | <img src="https://static.igem.org/mediawiki/2019/4/45/T--Humboldt_Berlin--3drender.png" alt="notebook" /> |
| + | </section> |
| + | |
| + | <!-- HEADLINE TEXT --> |
| + | <h1 class="page-headline description">Hardware</h1> |
| + | </div> |
| + | |
| + | <!------------------------------------------ HEADER END --------------------------------------------------> |
| + | |
| + | <section class="page-content fixed-header-content"> |
| + | |
| + | <!---------- SUB HEADLINE -------------> |
| + | <h2 class="page-subheadline">Our low-cost DIY Bioreactor</h2> |
| + | |
| + | <!------------------------------------------ TWO COLUMN IMG LEFT --------------------------------------------------> |
| + | |
| + | <div class="width-limit"> |
| + | <div class="two-columns"> |
| + | |
| + | <div> |
| + | <!-----------------------------------------------------------------------> |
| + | <!----------------------------TEXT----------------------------> |
| + | <!-----------------------------------------------------------------------> |
| + | <h3 class="headline3">Text Headline</h3> |
| + | <p class="block-text medium-sized"> |
| + | Text for the two column thingy here |
| + | </p> |
| + | </div> |
| + | </div> |
| + | |
| + | <!--------------------------------------- TWO COLUMN IMG LEFT END -----------------------------------------------> |
| + | |
| + | <!---------------------------------------------- QUOTE --------------------------------------------------------> |
| + | |
| + | <blockquote class="quote image-left"> |
| + | <div class="quote-image-container"> |
| + | <!-- QUOTE IMAGE --> |
| + | <img src="https://static.igem.org/mediawiki/2019/2/2d/T--Humboldt_Berlin--flasche_igem.png" alt="plastic bottle illustration" /> |
| + | </div> |
| + | <div class="block-text big-underline big-text"> |
| + | <!-----------------------------------------------------------------------> |
| + | <!---------------------------- Quote Text ----------------------------> |
| + | <!-----------------------------------------------------------------------> |
| + | <p><b> |
| + | Have the Quote Text Here - it is underlined |
| + | </b></p> |
| + | </div> |
| + | </blockquote> |
| + | |
| + | <!---------------------------------------------- QUOTE END -------------------------------------------------------> |
| + | |
| + | <!------------------------------------------ TWO COLUMN IMG RIGHT ------------------------------------------------> |
| + | |
| + | <div class="two-columns"> |
| + | <div> |
| + | <!-----------------------------------------------------------------------> |
| + | <!------------------IGEM PROJECTS THAT INSPIRED US-----------------------> |
| + | <!-----------------------------------------------------------------------> |
| + | <h3 class="headline3">Headline</h3> |
| + | <p class="block-text medium-sized"> |
| + | Text for the two column image right block |
| + | </p> |
| + | </div> |
| + | <div> |
| + | <!--- IMAGE ---> |
| + | <img class="is-revealing" src="https://static.igem.org/mediawiki/2019/b/bc/T--Humboldt_Berlin--microplastic_icon.png" alt="microplastic icon" /> |
| + | </div> |
| + | </div> |
| + | |
| + | <!--------------------------------------- TWO COLUMN IMG RIGHT END ------------------------------------------------> |
| + | |
| + | <!------------------------------------------ TWO COLUMN LONG TEXT ------------------------------------------------> |
| + | <div class="two-columns-headline"> |
| <!-- HEADLINE --> | | <!-- HEADLINE --> |
| <h3 class="headline3">Long text headline</h3> | | <h3 class="headline3">Long text headline</h3> |
Line 100: |
Line 206: |
| </div> | | </div> |
| </div> | | </div> |
| + | </div> |
| + | |
| + | <!------------------------------------------ TWO COLUMN LONG TEXT END --------------------------------------------> |
| + | |
| + | <!------------------------------------------ DEVIDER LINE --------------------------------------------> |
| + | <div class="greyblue-devider"></div> |
| + | <!------------------------------------------ DEVIDER LINE END --------------------------------------------> |
| + | |
| + | <!------------------------------------------ TWO COLUMN SMALL TEXT --------------------------------------------> |
| + | |
| + | <section class="width-limit"> |
| + | <div class="two-columns block-text not-centered small-sized"> |
| + | <div> |
| + | <!-- TEXT LEFT COLUMN --> |
| + | <p>Small Text Left Column |
| + | </div> |
| + | <div> |
| + | <!-- TEXT RIGHT COLUMN --> |
| + | <p>Small Text Right Column</p> |
| + | </div> |
| + | </div> |
| + | </section> |
| + | |
| + | <!------------------------------------------ TWO COLUMN SMALL TEXT END ----------------------------------------> |
| + | |
| + | </section> |
| + | |
| + | </div> |
| + | |
| + | <!------------------------------------------ FOOTER ----------------------------------------> |
| + | <div class="footer-container"> |
| + | <footer class="width-limit"> |
| + | <img src="https://static.igem.org/mediawiki/2019/e/ee/T--Humboldt_Berlin--logo_black.png" class="footer-logo" alt="Chlamylicious Logo Black" /> |
| + | <div class="footer-right"> |
| + | <ul> |
| + | <li> |
| + | <a href="/Team:Humboldt_Berlin"> |
| + | Home |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="/Team:Humboldt_Berlin/Team"> |
| + | Team |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="/Team:Humboldt_Berlin/Description"> |
| + | Project |
| + | </a> |
| + | </li> |
| + | </ul> |
| + | <ul> |
| + | <li> |
| + | <a href="/Team:Humboldt_Berlin/Parts"> |
| + | Parts |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="/Team:Humboldt_Berlin/Safety"> |
| + | Safety |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="/Team:Humboldt_Berlin/Human_Practices"> |
| + | Human Practices |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="https://igem.org/2019_Judging_Form?team=Humboldt_Berlin"> |
| + | For Judges |
| + | </a> |
| + | </li> |
| + | </ul> |
| + | </div> |
| + | </footer> |
| + | </div> |
| + | |
| + | <!------------------------------------------ FOOTER END ----------------------------------------> |
| + | |
| + | <script> |
| + | (function () { |
| + | document.querySelector('.no-js').classList.add('js') |
| + | document.querySelector('.no-js').classList.remove('no-js') |
| + | }()) |
| + | |
| + | window.addEventListener("scroll", function () { |
| + | const elements = document.querySelectorAll('.is-revealing'); |
| + | |
| + | [].forEach.call(elements, function(el) { |
| + | if (isElementVisible(el)) { |
| + | el.classList.add('is-revealing-visible') |
| + | } |
| + | }); |
| + | }); |
| + | |
| + | function isElementVisible(el) { |
| + | var top = el.offsetTop; |
| + | var height = el.offsetHeight; |
| + | |
| + | while(el.offsetParent) { |
| + | el = el.offsetParent; |
| + | top += el.offsetTop; |
| + | } |
| + | |
| + | return ( |
| + | (top + height) <= (window.pageYOffset + window.innerHeight) + 100 |
| + | ); |
| + | } |
| + | </script> |
| + | |
| + | </html> |