|
|
Line 107: |
Line 107: |
| <!------------------------------------------ HEADER END --------------------------------------------------> | | <!------------------------------------------ HEADER END --------------------------------------------------> |
| | | |
− | <section class="page-content fixed-header-content"> | + | <section class="page-content fixed-header-content expandable"> |
− | <!---------- SUB HEADLINE ------------->
| + | |
− | <h2 class="page-subheadline">Subheadline</h2>
| + | |
− | | + | |
− | | + | |
− | <!------------------------------------------ TWO COLUMN IMG LEFT -------------------------------------------------->
| + | |
− | | + | |
| <div class="width-limit"> | | <div class="width-limit"> |
− | <div class="two-columns"> | + | <div class="protocolls-header"> |
− | <div> | + | <h2 class="page-subheadline"></h2> |
− | <!-- IMAGE --> | + | <div class="protocolls-buttons"> |
− | <img class="is-revealing" src="https://static.igem.org/mediawiki/2019/5/54/T--Humboldt_Berlin--ideonella_grafik.png" alt="ideonella grafic" /> | + | <div class="collapse-all"> |
| + | <img src="https://static.igem.org/mediawiki/2019/3/3e/T--Humboldt_Berlin--ArrowDown.jpg"> |
| + | Collapse all |
| + | </div> |
| + | <div class="expand-all"> |
| + | <img src="https://static.igem.org/mediawiki/2019/3/3e/T--Humboldt_Berlin--ArrowDown.jpg"> |
| + | Expand all |
| + | </div> |
| </div> | | </div> |
− | <div>
| + | </div> |
− | <!----------------------------------------------------------------------->
| + | <div class="expandable-container"> |
− | <!----------------------------TEXT---------------------------->
| + | <div class="expandable-preview"> |
− | <!----------------------------------------------------------------------->
| + | <p class="medium-sized"> |
− | <h3 class="headline3">Text Headline</h3>
| + | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam |
− | <p class="block-text medium-sized"> | + | nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam |
− | Text for the two column thingy here | + | 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 ame |
| </p> | | </p> |
| + | <img src="https://static.igem.org/mediawiki/2019/5/5d/T--Humboldt_Berlin--chlamy_wusel.jpeg" alt="preview" /> |
| </div> | | </div> |
− | </div>
| + | <div class="expandable-more"> |
− | | + | <div class="two-columns"> |
− | | + | <div> |
− | <!--------------------------------------- TWO COLUMN IMG LEFT END -----------------------------------------------> | + | <p class="medium-sized"> |
− | | + | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam |
− | <!---------------------------------------------- QUOTE --------------------------------------------------------> | + | nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam |
− | | + | erat, sed diam voluptua. |
− | <blockquote class="quote image-left">
| + | </p> |
− | <div class="quote-image-container">
| + | <p class="medium-sized"> |
− | <!-- QUOTE IMAGE -->
| + | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam |
− | <img src="https://static.igem.org/mediawiki/2019/2/2d/T--Humboldt_Berlin--flasche_igem.png" alt="plastic bottle illustration" />
| + | 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 ame. |
| + | 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 ame |
| + | </p> |
| + | </div> |
| + | <div> |
| + | <p class="medium-sized"> |
| + | 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 ame |
| + | </p> |
| + | <p class="medium-sized"> |
| + | 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 ame |
| + | </p> |
| + | </div> |
| + | </div> |
| </div> | | </div> |
− | <div class="block-text big-underline big-text"> | + | <div class="expandable-readall"> |
− | <!-----------------------------------------------------------------------> | + | <span class="readmore">Read more</span> |
− | <!---------------------------- Quote Text ---------------------------->
| + | <span class="readless">Read less</span> |
− | <!-----------------------------------------------------------------------> | + | <img src="https://static.igem.org/mediawiki/2019/3/3e/T--Humboldt_Berlin--ArrowDown.jpg"> |
− | <p><b>
| + | |
− | Have the Quote Text Here - it is underlined
| + | |
− | </b></p> | + | |
| </div> | | </div> |
− | </blockquote> | + | </div> |
− | | + | <div class="expandable-container"> |
− | <!---------------------------------------------- QUOTE END ------------------------------------------------------->
| + | <div class="expandable-preview"> |
− | | + | <p class="medium-sized"> |
− | | + | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam |
− | <!------------------------------------------ TWO COLUMN IMG RIGHT ------------------------------------------------>
| + | nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam |
− | | + | erat, sed diam voluptua. At vero eos et accusam et justo duo dolores |
− | <div class="two-columns"> | + | et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est |
− | <div> | + | Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame |
− | <!----------------------------------------------------------------------->
| + | |
− | <!------------------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> | | </p> |
| + | <img src="https://static.igem.org/mediawiki/2019/0/0e/T--Humboldt_Berlin--chlamydomonas_schaubild_eng.png" alt="preview" /> |
| </div> | | </div> |
− | <div> | + | <div class="expandable-more"> |
− | <!--- IMAGE ---> | + | <div class="two-columns"> |
− | <img class="is-revealing" src="https://static.igem.org/mediawiki/2019/b/bc/T--Humboldt_Berlin--microplastic_icon.png" alt="microplastic icon" />
| + | <div> |
| + | <p class="medium-sized"> |
| + | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam |
| + | nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam |
| + | erat, sed diam voluptua. |
| + | </p> |
| + | <p class="medium-sized"> |
| + | 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 ame. |
| + | 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 ame |
| + | </p> |
| + | </div> |
| + | <div> |
| + | <p class="medium-sized"> |
| + | 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 ame |
| + | </p> |
| + | <p class="medium-sized"> |
| + | 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 ame |
| + | </p> |
| + | </div> |
| + | </div> |
| </div> | | </div> |
− | </div>
| + | <div class="expandable-readall"> |
− | | + | <span class="readmore">Read more</span> |
− | <!--------------------------------------- TWO COLUMN IMG RIGHT END ------------------------------------------------>
| + | <span class="readless">Read less</span> |
− | | + | <img src="https://static.igem.org/mediawiki/2019/3/3e/T--Humboldt_Berlin--ArrowDown.jpg"> |
− | | + | |
− | <!------------------------------------------ TWO COLUMN LONG TEXT ------------------------------------------------>
| + | |
− | <div class="two-columns-headline">
| + | |
− | <!-- HEADLINE -->
| + | |
− | <h3 class="headline3">Long text headline</h3>
| + | |
− | </div>
| + | |
− | <div class="two-columns block-text medium-sized not-centered no-margin-top">
| + | |
− | <div>
| + | |
− | <!-- TEXT - PARAGRAPHS ARE WRAPPED IN <p> TAGS -->
| + | |
− | <p>
| + | |
− | Paragraph Left 1
| + | |
− | </p>
| + | |
− | <p>
| + | |
− | Paragraph Left 2
| + | |
− | </p>
| + | |
− | <br />
| + | |
− | <!-- IMAGE INBETWEEN -->
| + | |
− | <img src="https://static.igem.org/mediawiki/2019/4/42/T--Humboldt_Berlin--chlamy_overview-cloning-system.png" alt="Pverview of the hierarchical and modular cloning system"/> | + | |
− | <p>
| + | |
− | Paragraph Left 3
| + | |
− | </p>
| + | |
− | </div>
| + | |
− | <div>
| + | |
− | <p>
| + | |
− | Paragraph Right 1
| + | |
− | </p>
| + | |
− | <p>
| + | |
− | Paragraph Right 2
| + | |
− | </p>
| + | |
− | <p>
| + | |
− | Paragraph Right 3
| + | |
− | </p>
| + | |
− | <p>
| + | |
− | Paragraph Right 4
| + | |
− | </p>
| + | |
| </div> | | </div> |
| </div> | | </div> |
| </div> | | </div> |
| </section> | | </section> |
− |
| |
− | <!------------------------------------------ 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 ---------------------------------------->
| |
− |
| |
− | </main>
| |
| | | |
| <!------------------------------------------ FOOTER ----------------------------------------> | | <!------------------------------------------ FOOTER ----------------------------------------> |
Line 320: |
Line 317: |
| ); | | ); |
| } | | } |
| + | |
| + | var readMores = document.querySelectorAll('.expandable-readall'); |
| + | var allContainers = document.querySelectorAll('.expandable-container'); |
| + | |
| + | for (var i = 0; i < readMores.length; i++) { |
| + | readMores[i].addEventListener('click', function(event) { |
| + | var container = this.closest('.expandable-container'); |
| + | if (container.classList.contains('open')) { |
| + | container.classList.remove('open'); |
| + | } else { |
| + | container.classList.add('open'); |
| + | } |
| + | }); |
| + | } |
| + | |
| + | document.querySelector('.collapse-all').addEventListener('click', function() { |
| + | for (var i = 0; i < allContainers.length; i++) { |
| + | allContainers[i].classList.remove('open'); |
| + | }; |
| + | }); |
| + | |
| + | document.querySelector('.expand-all').addEventListener('click', function() { |
| + | for (var i = 0; i < allContainers.length; i++) { |
| + | allContainers[i].classList.add('open'); |
| + | }; |
| + | }); |
| </script> | | </script> |
| | | |
| </html> | | </html> |