Difference between revisions of "Team:Humboldt Berlin/Basic Part"

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>

Revision as of 06:17, 9 October 2019

notebook

Headline