education backbone

wiki/pages/education.html

 {% extends "layout.html" %}
   
-{% block title %}Education{% endblock %}
-{% block lead %}Innovative educational tools and outreach activities have the ability to establish a two-way dialogue with new communities by discussing public values and the science behind synthetic biology.{% endblock %}
+{% block title %}Project Description {% endblock %} 
+{% block lead %} {% endblock %}
 
 {% block page_content %}
 
-<div class="row mt-4">
-  <div class="col">
-    <div class="bd-callout bd-callout-info">
-      <h4>Best Education</h4>
-      <p>How have you developed new opportunities to include more people in shaping synthetic biology? Innovative educational tools and outreach activities have the ability to establish a two-way dialogue with new communities by discussing public values and the science behind synthetic biology. Document your approach and what was learned by everyone involved to compete for this award.</p>
-      <p>To compete for the Best Education prize, select the prize on the <a href="https://competition.igem.org/deliverables/judging-form">judging form</a> and describe your work on this page.</p>
-      <hr>
-      <p>Please see the <a href="https://competition.igem.org/judging/awards">2024 Awards Page</a> for more information.</p>
-    </div>
+<div class="pagecontainer">
+  <div class="title2">
+    <span>Project Description</span>
   </div>
-</div>
+  <div class="pagebody">
+    <div class="pagenav">
+        <div onclick="goTo(document.getElementById('one'))"><span id="subtitle1" style="color: #62D881;">Introduction</span></div>
+        <div onclick="goTo(document.getElementById('two'))"><span id="subtitle2" style="color: #62D881;">High School Lectures</span></div>
+        <div onclick="goTo(document.getElementById('three'))"><span id="subtitle3" style="color: #62D881;">Kinderboerderij Tanthof </span></div>
+        <div onclick="goTo(document.getElementById('four'))"><span id="subtitle4" style="color: #62D881;">Social Media</span></div>
+        <div onclick="goTo(document.getElementById('five'))"><span id="subtitle5" style="color: #62D881;">Outreach</span></div>
+    </div>
+    <div class="pagecontent">
+        <!-- 1 -->
+        <div class="h" id="one">
+            <div class="h1">Introduction</div>
+            </div>
+        <!-- 2 -->
+        <div class="h" id="two" style="margin-top: -100px">
+          <div class="h1">High School Lectures</div>
+          </div>
+        <!-- 3 -->
+        <div class="h" id="three">
+          <div class="h1">Inspiring Future Scientists at Kinderboerderij Tanthof</div>
+         </div>
+        <div class="h" id="four">
+          <div class="h1">Learning Through Social Media</div>
+
+        </div>
+
+           <div class="h" id="five">
+            <div class="h1">Outreach</div>
+            <div class="h2">SynBIONL</div>
+            <div class="h2">Dutch iGEM Meetup</div>
+            <div class="h2">OWee/IP</div>
+          </div>
 
-<div class="row mt-4">
-  <div class="col">
-    <h2>Inspirations</h2>
-    <hr>
-    <ul>
-      <li><a href="https://2020.igem.org/Team:CCA_San_Diego/Education">2020 CCA San Diego</a></li>
-      <li><a href="https://2020.igem.org/Team:Lambert_GA/Education">2020 Lambert GA</a></li>
-      <li><a href="https://2020.igem.org/Team:Stanford/Education">2020 Stanford</a></li>
-      <li><a href="https://2020.igem.org/Team:Waseda/Education">2020 Waseda</a></li>
-      <li><a href="https://2020.igem.org/Team:Fudan/Education">2020 Fudan</a></li>
-      <li><a href="https://2020.igem.org/Team:Toulouse_INSA-UPS/Education">2020 Toulouse INSA UPS</a></li>
-    </ul>
-  </div>
 </div>
+<script>
+  var TopDistance = 120;
+  let elements = [document.getElementById('one'),
+  document.getElementById('two'), 
+  document.getElementById('three'), 
+  document.getElementById('four'), 
+  document.getElementById('five')];
+  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'));
+  }
+  window.addEventListener("scroll", HighlightCheck);
+</script>
+
 
 {% endblock %}