backbone of materials and methods

wiki/pages/experiments.html

 {% extends "layout.html" %}
   
-{% block title %}Experiments{% endblock %}
-{% block lead %}Describe the research, experiments, and protocols you used in your iGEM project.{% endblock %}
+{% block title %}Project Description {% endblock %} 
+{% block lead %} {% endblock %}
 
 {% block page_content %}
 
-<div class="row mt-4">
-  <div class="col-lg-8">
-    <h2>What should this page contain?</h2>
-    <hr>
-    <p>Describe the research, experiments, and protocols you used in your iGEM project. These should be detailed enough for another team to repeat your experiments.</p>
-    <p>If you made Parts this year, please remember to put all information, characterization, and measurement data on the Part's Main Page on the <a href="https://parts.igem.org/Main_Page">Registry</a>.</p>
-  </div>
-  <div class="col-lg-4">
-    <h2>Inspirations</h2>
-    <hr>
-    <ul>
-      <li><a href="https://2019.igem.org/Team:Nantes/Experiments">2019 Nantes</a></li>
-      <li><a href="https://2019.igem.org/Team:TU_Eindhoven/Experiments">2019 TU Eindhoven</a></li>
-      <li><a href="https://2019.igem.org/Team:Mingdao/Demonstrate">2019 Mingdao</a></li>
-      <li><a href="https://2020.igem.org/Team:Amsterdam/Experiments">2020 Amsterdam</a></li>
-      <li><a href="https://2020.igem.org/Team:NCTU_Formosa/Experiments">2020 NCTU Formosa</a></li>
-      <li><a href="https://2020.igem.org/Team:USAFA/Experiments">2020 USAFA</a></li>
-    </ul>
+<div class="pagecontainer">
+     <div class="title2">
+    <span>Materials and Methods</span>
+     </div>
+    <div class="pagebody">
+    <div class="pagenav">
+        <div onclick="goTo(document.getElementById('one'))"><span id="subtitle1" style="color: #62D881;">UCYN-A Transit Peptide Sequence</span></div>
+        <div onclick="goTo(document.getElementById('two'))"><span id="subtitle2" style="color: #62D881;"><i>B. bigelowii</i> Proteome Analysis</span></div>
+        <div onclick="goTo(document.getElementById('three'))"><span id="subtitle3" style="color: #62D881;">Plasmid Design and Construction</span></div>
+        <div onclick="goTo(document.getElementById('four'))"><span id="subtitle4" style="color: #62D881;"><i>E. coli</i> Transformation and Verification</span></div>
+        <div onclick="goTo(document.getElementById('five'))"><span id="subtitle5" style="color: #62D881;"><i>S.cerevisiae </i>Transformation</span></div>
+        <div onclick="goTo(document.getElementById('six'))"><span id="subtitle5" style="color: #62D881;"><i>C. reinhardtii</i> Transformation</span></div>
+        <div onclick="goTo(document.getElementById('seven'))"><span id="subtitle5" style="color: #62D881;">PEG Fusion</span></div>
+        <div onclick="goTo(document.getElementById('eight'))"><span id="subtitle5" style="color: #62D881;">Protocols</span></div>
+        <div onclick="goTo(document.getElementById('nine'))"><span id="subtitle5" style="color: #62D881;">References</span></div>
+     
+      </div>
+    <div class="pagecontent">
+        <!-- 1 -->
+        <div class="h" id="one">
+        <div class="h1">UCYN-A Transit Peptide Sequence</div>
+        </div>
+
+        <!-- 2 -->
+        <div class="h" id="two">
+         <div class="h1"><i>B. bigelowii</i> Proteome Analysis</div>
+        </div>
+
+        <!-- 3 -->
+        <div class="h" id="three">
+          <div class="h1">Plasmid Design and Construction</div>
+        </div>
+        
+        <!-- 4 -->
+        <div class="h" id="four">
+          <div class="h1"> <i>Escherichia coli</i> Transformation and Verification</div>
+        </div>
+
+        <!-- 5 -->
+        <div class="h" id="five">
+           <div class="h1"><i>Saccharomyces cerevisiae</i> Transformation</div>
+        </div>
+
+        <!-- 6 -->
+        <div class="h" id="six">
+           <div class="h1"><i>Chlamydomonas reinhardtii</i> Transformation</div>
+        </div>
+
+        <!-- 7 -->
+        <div class="h" id="seven">
+           <div class="h1">Polyethylene Glycol (PEG) Fusion</div>
+        </div>
+
+        <!-- 8 -->
+        <div class="h" id="eight">
+          <div class="h1">Protocols</div>
+        </div>
+
+        <!-- 9 -->
+        <div class="h" id="nine">
+           <div class="h1">References</div>
+        </div>
+        
   </div>
+    </div>
 </div>
+<script>
+  var TopDistance = 120;
+  let elements = [document.getElementById('one'),
+  document.getElementById('two'), 
+  document.getElementById('three'), 
+  document.getElementById('four'), 
+  document.getElementById('five'),
+  document.getElementById('six'),
+  document.getElementById('seven'),
+  document.getElementById('eight'),
+  document.getElementById('nine')];
+  window.goTo = function(el){
+    document.documentElement.scrollTop += el.getBoundingClientRect().top - TopDistance;
+  }
+  function Highlight(el, subtitle){
+    if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
+        subtitle.style.color = "#62D881";
+    }
+    else{
+        subtitle.style.color = "#185A4F";
+    }
+  }
+  function HighlightCheck(){
+    Highlight(elements[0], document.getElementById('subtitle1'));
+    Highlight(elements[1], document.getElementById('subtitle2'));
+    Highlight(elements[2], document.getElementById('subtitle3'));
+    Highlight(elements[3], document.getElementById('subtitle4'));
+    Highlight(elements[4], document.getElementById('subtitle5'));
+    Highlight(elements[5], document.getElementById('subtitle6'));
+    Highlight(elements[6], document.getElementById('subtitle7'));
+    Highlight(elements[7], document.getElementById('subtitle8'));
+    Highlight(elements[8], document.getElementById('subtitle9'));
+  }
+  window.addEventListener("scroll", HighlightCheck);
+</script>
+
 
 {% endblock %}