Difference between revisions of "Team:Humboldt Berlin/Experiments"

Line 94: Line 94:
 
<!------------------------------------------ NAVIGATION END -------------------------------------------------->
 
<!------------------------------------------ NAVIGATION END -------------------------------------------------->
  
−
<!------------------------------------------ HEADER-------------------------------------------------->
+
<div class="fixed-header-container">
−
        <div class="fixed-header-container">
+
 
             <section class="fixed-image-header">
 
             <section class="fixed-image-header">
−
                <!-- HEADER IMAGE -->
 
 
                 <img src="https://static.igem.org/mediawiki/2019/e/e9/T--Humboldt_Berlin--description-header.jpg" alt="notebook" />
 
                 <img src="https://static.igem.org/mediawiki/2019/e/e9/T--Humboldt_Berlin--description-header.jpg" alt="notebook" />
 
             </section>
 
             </section>
−
           
+
 
−
            <!-- HEADLINE TEXT -->
+
 
             <h1 class="page-headline description">Experiments</h1>
 
             <h1 class="page-headline description">Experiments</h1>
 
         </div>
 
         </div>
  
−
<!------------------------------------------ HEADER END -------------------------------------------------->
+
        <section class="page-content fixed-header-content experiments">
 +
            <h2 class="page-subheadline">Protocolls</h2>
 +
            <!-- TODO collapse all, expand all -->
  
−
        <section class="page-content fixed-header-content">
+
            <div class="experiments-container">
−
            <!---------- SUB HEADLINE ------------->
+
                <div class="experiments-bar">
−
            <h2 class="page-subheadline">Protocols</h2>
+
                    <h3 class="lightgreen">Chlamydomonas Protocol</h3>
  
−
 
+
                    <div class="experiments-bar-content">
−
<!------------------------------------------ TWO COLUMN IMG LEFT -------------------------------------------------->
+
                        <div class="experiments-bar">
−
 
+
                            <h3>Media & Plates</h3>
−
            <div class="width-limit">
+
                         </div>
−
                <div class="two-columns">
+
                         <div class="experiments-bar">
−
                    <div>
+
                             <h3>Cultivation</h3>
−
                        <!-- IMAGE -->
+
                         </div>
−
                        <img class="is-revealing" src="https://static.igem.org/mediawiki/2019/5/54/T--Humboldt_Berlin--ideonella_grafik.png" alt="ideonella grafic" />
+
                         <div class="experiments-bar">
−
                    </div>
+
                            <h3>Transformation</h3>
−
                    <div>
+
                        </div>
−
                        <!----------------------------------------------------------------------->
+
                        <div class="experiments-bar">
−
                        <!----------------------------TEXT---------------------------->
+
                             <h3>Colony Screening PCR</h3>
−
                        <!----------------------------------------------------------------------->
+
                         </div>
−
                        <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 -->
+
−
                    <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>
 
     </main>
Line 320: Line 210:
 
   );
 
   );
 
}
 
}
 +
 +
var dropdowns = document.querySelectorAll('.experiments-bar h3');
 +
        // TODO queryselectorall?
 +
        for (var i = 0; i < dropdowns.length; i++) {
 +
            dropdowns[i].addEventListener('click', function(event) {
 +
                var barContainer = this.closest('.experiments-bar');
 +
                if (barContainer.classList.contains('open')) {
 +
                    barContainer.classList.remove('open');
 +
                } else {
 +
                    barContainer.classList.add('open');
 +
                }
 +
            });
 +
        }
 
</script>
 
</script>
  
 
</html>
 
</html>

Revision as of 06:25, 27 September 2019

notebook

Experiments

Protocolls

Chlamydomonas Protocol

Media & Plates

Cultivation

Transformation

Colony Screening PCR