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

Line 1: Line 1:
 
{{Humboldt_Berlin}}
 
{{Humboldt_Berlin}}
 
<html>
 
<html>
−
 
  
 
<div class="has-animations description no-js" id="container">
 
<div class="has-animations description no-js" id="container">
 
     <div class="container">
 
     <div class="container">
  
−
<!------------------------------------------ NAVIGATION -------------------------------------------------->
+
        <!------------------------------------------ NAVIGATION -------------------------------------------------->
−
<!-- INFO: move the class="active" to the correct <a> Tag -->
+
        <!-- INFO: move the class="active" to the correct <a> Tag -->
  
 
         <nav>
 
         <nav>
Line 91: Line 90:
 
         </nav>
 
         </nav>
  
−
<!------------------------------------------ NAVIGATION END -------------------------------------------------->
+
        <!------------------------------------------ NAVIGATION END -------------------------------------------------->
  
−
<!------------------------------------------ HEADER-------------------------------------------------->
+
        <!------------------------------------------ HEADER-------------------------------------------------->
 
         <div class="fixed-header-container">
 
         <div class="fixed-header-container">
 
             <section class="fixed-image-header">
 
             <section class="fixed-image-header">
Line 99: Line 98:
 
                 <img src="https://static.igem.org/mediawiki/2019/3/3f/T--Humboldt_Berlin--parts10.jpeg" alt="Building Blocks" />
 
                 <img src="https://static.igem.org/mediawiki/2019/3/3f/T--Humboldt_Berlin--parts10.jpeg" alt="Building Blocks" />
 
             </section>
 
             </section>
−
           
+
 
 
             <!-- HEADLINE TEXT -->
 
             <!-- HEADLINE TEXT -->
−
             <h1 class="page-headline description" style="color:#ffffff">Part</br></br>Collection</h1>
+
             <h1 class="page-headline description" style="color:#ffffff">Part</br>
 +
                </br>Collection</h1>
 
         </div>
 
         </div>
  
−
<!------------------------------------------ HEADER END -------------------------------------------------->
+
        <!------------------------------------------ HEADER END -------------------------------------------------->
  
 
         <section class="page-content fixed-header-content">
 
         <section class="page-content fixed-header-content">
Line 110: Line 110:
 
             <h2 class="page-subheadline">Subheadline</h2>
 
             <h2 class="page-subheadline">Subheadline</h2>
  
−
 
+
            <!------------------------------------------ TWO COLUMN IMG LEFT -------------------------------------------------->
−
<!------------------------------------------ TWO COLUMN IMG LEFT -------------------------------------------------->
+
  
 
             <div class="width-limit">
 
             <div class="width-limit">
Line 130: Line 129:
 
                 </div>
 
                 </div>
  
 +
                <!--------------------------------------- TWO COLUMN IMG LEFT END ----------------------------------------------->
  
−
<!--------------------------------------- TWO COLUMN IMG LEFT END ----------------------------------------------->
+
                <!---------------------------------------------- QUOTE -------------------------------------------------------->
−
 
+
−
<!---------------------------------------------- QUOTE -------------------------------------------------------->
+
  
 
                 <blockquote class="quote image-left">
 
                 <blockquote class="quote image-left">
Line 150: Line 148:
 
                 </blockquote>
 
                 </blockquote>
  
−
<!---------------------------------------------- QUOTE END ------------------------------------------------------->
+
                <!---------------------------------------------- QUOTE END ------------------------------------------------------->
  
−
 
+
                <!------------------------------------------ TWO COLUMN IMG RIGHT ------------------------------------------------>
−
<!------------------------------------------ TWO COLUMN IMG RIGHT ------------------------------------------------>
+
  
 
                 <div class="two-columns">
 
                 <div class="two-columns">
Line 171: Line 168:
 
                 </div>
 
                 </div>
  
−
<!--------------------------------------- TWO COLUMN IMG RIGHT END ------------------------------------------------>
+
                <!--------------------------------------- TWO COLUMN IMG RIGHT END ------------------------------------------------>
−
 
+
  
−
<!------------------------------------------ TWO COLUMN LONG TEXT ------------------------------------------------>
+
                <!------------------------------------------ TWO COLUMN LONG TEXT ------------------------------------------------>
 
                 <div class="two-columns-headline">
 
                 <div class="two-columns-headline">
 
                     <!-- HEADLINE -->
 
                     <!-- HEADLINE -->
Line 190: Line 186:
 
                         <br />
 
                         <br />
 
                         <!-- IMAGE INBETWEEN -->
 
                         <!-- 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"/>
+
                         <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>
 
                         <p>
 
                             Paragraph Left 3
 
                             Paragraph Left 3
Line 211: Line 207:
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
        </section>
+
            <!------------------------------------------ TWO COLUMN LONG TEXT END -------------------------------------------->
  
−
<!------------------------------------------ TWO COLUMN LONG TEXT END -------------------------------------------->
+
            <!------------------------------------------ DEVIDER LINE -------------------------------------------->
 +
            <div class="greyblue-devider"></div>
 +
            <!------------------------------------------ DEVIDER LINE END -------------------------------------------->
  
−
<!------------------------------------------ DEVIDER LINE -------------------------------------------->
+
            <!------------------------------------------ TWO COLUMN SMALL TEXT -------------------------------------------->
−
        <div class="greyblue-devider"></div>
+
−
<!------------------------------------------ DEVIDER LINE END -------------------------------------------->
+
  
 +
            <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 -------------------------------------------->
+
            <!------------------------------------------ TWO COLUMN SMALL TEXT END ---------------------------------------->
  
−
        <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>
 
         </section>
  
−
<!------------------------------------------ TWO COLUMN SMALL TEXT END ---------------------------------------->
+
     </div>
−
 
+
−
     </main>
+
  
−
<!------------------------------------------ FOOTER ---------------------------------------->
+
    <!------------------------------------------ FOOTER ---------------------------------------->
 
     <div class="footer-container">
 
     <div class="footer-container">
 
         <footer class="width-limit">
 
         <footer class="width-limit">
Line 287: Line 282:
 
     </div>
 
     </div>
  
 +
    <!------------------------------------------ FOOTER END ---------------------------------------->
  
−
<!------------------------------------------ FOOTER END ---------------------------------------->
+
    <script>
−
 
+
        (function () {
−
<script>
+
          document.querySelector('.no-js').classList.add('js')
−
(function () {
+
          document.querySelector('.no-js').classList.remove('no-js')
−
  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');
−
window.addEventListener("scroll", function () {
+
       
−
  const elements = document.querySelectorAll('.is-revealing');
+
          [].forEach.call(elements, function(el) {
−
 
+
            if (isElementVisible(el)) {
−
  [].forEach.call(elements, function(el) {
+
              el.classList.add('is-revealing-visible')
−
    if (isElementVisible(el)) {
+
            }
−
      el.classList.add('is-revealing-visible')
+
          });
−
    }
+
        });
−
  });
+
       
−
});
+
        function isElementVisible(el) {
−
 
+
          var top = el.offsetTop;
−
function isElementVisible(el) {
+
          var height = el.offsetHeight;
−
  var top = el.offsetTop;
+
       
−
  var height = el.offsetHeight;
+
          while(el.offsetParent) {
−
 
+
            el = el.offsetParent;
−
  while(el.offsetParent) {
+
            top += el.offsetTop;
−
    el = el.offsetParent;
+
          }
−
    top += el.offsetTop;
+
       
−
  }
+
          return (
−
 
+
            (top + height) <= (window.pageYOffset + window.innerHeight) + 100
−
  return (
+
          );
−
    (top + height) <= (window.pageYOffset + window.innerHeight) + 100
+
        }
−
  );
+
    </script>
−
}
+
−
</script>
+
  
 
</html>
 
</html>

Revision as of 11:05, 12 October 2019

Building Blocks

Part

Collection

Subheadline

ideonella grafic

Text Headline

Text for the two column thingy here

plastic bottle illustration

Have the Quote Text Here - it is underlined

Headline

Text for the two column image right block

microplastic icon

Long text headline

Paragraph Left 1

Paragraph Left 2


Pverview of the hierarchical and modular cloning system

Paragraph Left 3

Paragraph Right 1

Paragraph Right 2

Paragraph Right 3

Paragraph Right 4

Small Text Left Column

Small Text Right Column