Difference between revisions of "Team:LINKS China/Sustainable"

Line 171: Line 171:
 
<div id="big_header">
 
<div id="big_header">
 
     <img src="https://static.igem.org/mediawiki/2021/2/2e/T--LINKS_China--bigheader_sustainability.jpg" style="position: absolute; top:15vw; left: 20vw; width: 60vw;">
 
     <img src="https://static.igem.org/mediawiki/2021/2/2e/T--LINKS_China--bigheader_sustainability.jpg" style="position: absolute; top:15vw; left: 20vw; width: 60vw;">
     <img src="https://static.igem.org/mediawiki/2021/0/0f/T--LINKS_China--descriptionplace_lightpurple.jpg" style="position: absolute; top:12vw; left: 22.5vw; width: 55vw;">
+
     <img src="https://static.igem.org/mediawiki/2021/f/fa/T--LINKS_China--descriptionplace_darkpurple.jpg" style="position: absolute; top:12vw; left: 22.5vw; width: 55vw;">
 
</div>
 
</div>
  
Line 186: Line 186:
  
  
<!------------------------------------SIDEBAR_START------------------------------------->
 
  <div id="sidebar">
 
  
          <ul class="section_guider" style="list-style: none !important;">
 
              <li><a href="#section1"><img src="https://static.igem.org/mediawiki/2021/b/b4/T--LINKS_China--sectionguider_test1.2.jpg" id="section1_guider"></a></li>
 
              <li><a href="#section2"><img src="https://static.igem.org/mediawiki/2021/8/80/T--LINKS_China--sectionguider_test2.2.jpg
 
" id="section2_guider"></a></li>
 
              <li><a href="#section3"><img src="https://static.igem.org/mediawiki/2021/3/35/T--LINKS_China--sectionguider_test3.2.jpg" id="section3_guider"></a></li>
 
              <li><a href="#section4"><img src="https://static.igem.org/mediawiki/2021/b/b9/T--LINKS_China--section_guidertest4.1.jpg" id="section4_guider"></a></li>
 
              <li><a href="#section5"><img src="https://static.igem.org/mediawiki/2021/a/aa/T--LINKS_China--section_guidertest5.1.jpg" id="section5_guider"></a></li>             
 
              <li><a href="#section6"><img src="https://static.igem.org/mediawiki/2021/4/41/T--LINKS_China--section_guidertest6.1.jpg" id="section6_guider"></a></li>             
 
              <li><a href="#"><img src="https://static.igem.org/mediawiki/2021/0/03/T--LINKS_China--section_guidertest7.2.jpg" id="section7_guider"></a></li>             
 
              <li><a href="#"><img src="https://static.igem.org/mediawiki/2021/c/cb/T--LINKS_China--section_guidertest8.1.jpg" id="section8_guider"></a></li>
 
          </ul>
 
 
 
 
          <ul class="section_header" style="list-style: none !important;">
 
              <li><img src="https://static.igem.org/mediawiki/2021/c/c3/T--LINKS_China--section_header_purple.jpg" id="section1_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/c/c3/T--LINKS_China--section_header_purple.jpg" id="section2_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/c/c3/T--LINKS_China--section_header_purple.jpg" id="section3_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/c/c3/T--LINKS_China--section_header_purple.jpg" id="section4_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/c/c3/T--LINKS_China--section_header_purple.jpg" id="section5_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/c/c3/T--LINKS_China--section_header_purple.jpg" id="section6_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/c/c3/T--LINKS_China--section_header_purple.jpg" id="section7_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/c/c3/T--LINKS_China--section_header_purple.jpg" id="section8_header"></li>
 
          </ul>
 
 
      <a id="top_button" href="#"><img src="https://static.igem.org/mediawiki/2021/8/8e/T--LINKS_China--top_button.jpg"></a>
 
 
 
<nav class="section-nav">
 
<ul>
 
<li><a href="#section1">Overview</a></li>
 
<li><a href="#section2">Producing Bacterial Cellulose</a></li>
 
<li><a href="#section3">Spider Silk modification of BC’s properties</a></li>
 
<li><a href="#section4">Dyeing BC with Natural Dyes</a></li>
 
<li><a href="#section5">Producing ethyl acetate from the byproducts of fermentation</a></li>
 
<li><a href="#section6">References</a></li>
 
<li><a href="#section7"></a></li>
 
<li><a href="#section8"></a></li>
 
</ul>
 
</nav>
 
 
  </div>
 
<!------------------------------------SIDEBAR_END------------------------------------->
 
  
  
Line 377: Line 332:
 
       width: 100vw;
 
       width: 100vw;
 
       height: 49vw;
 
       height: 49vw;
       background: url(https://static.igem.org/mediawiki/2021/4/43/T--LINKS_China--backgroundimg_results.jpg);
+
       background: url(https://static.igem.org/mediawiki/2021/3/3c/T--LINKS_China--bigimg_sustainable.png);
 
       background-attachment:scroll;
 
       background-attachment:scroll;
 
       background-repeat: no-repeat;
 
       background-repeat: no-repeat;
Line 416: Line 371:
 
@media only screen and (min-device-width: 768px) {
 
@media only screen and (min-device-width: 768px) {
 
#sidebar_and_texts {
 
#sidebar_and_texts {
  display: grid;
 
  grid-template-columns: 0.27fr 1.63fr;
 
  gap: 0px 0px;
 
  align-items: baseline;
 
 
}
 
}
  
Line 518: Line 469:
 
@media only screen and (max-device-width: 768px) {
 
@media only screen and (max-device-width: 768px) {
 
#sidebar_and_texts {
 
#sidebar_and_texts {
  display: grid;
 
  grid-template-columns: 0.31fr 1.59fr;
 
  gap: 0px 0px;
 
  align-items: baseline;
 
 
}
 
}
  
 
#sidebar {
 
#sidebar {
   display: block;
+
   display: none;
 
   border: 0px solid #600136;
 
   border: 0px solid #600136;
 
}
 
}
Line 566: Line 513:
  
 
.section-nav{
 
.section-nav{
   display: block;
+
   display: none;
 
   background-color: #FFFFFF;
 
   background-color: #FFFFFF;
 
}
 
}
Line 630: Line 577:
 
       letter-spacing: 0.6px;
 
       letter-spacing: 0.6px;
 
       text-shadow: 2px 2px 5px #C0C0C0;
 
       text-shadow: 2px 2px 5px #C0C0C0;
 +
      margin-left: 4.5vw;
 +
      margin-right: 4.5vw;
 
}
 
}
  
Line 648: Line 597:
 
       border-radius: 24px;
 
       border-radius: 24px;
 
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
       margin-left: 0.3vw;
+
       margin-left: 4.5vw;
       margin-right: 3vw;
+
       margin-right: 4.5vw;
 
}
 
}
  
Line 757: Line 706:
 
       border-radius: 24px;
 
       border-radius: 24px;
 
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
       margin-left: 0.3vw;
+
       margin-left: 4.5vw;
       margin-right: 3vw;
+
       margin-right: 4.5vw;
 
       font-family: "LatoLight";
 
       font-family: "LatoLight";
 
}
 
}
Line 773: Line 722:
 
       font-family: "LatoLight";
 
       font-family: "LatoLight";
 
}
 
}
 +
 +
 +
 +
#show_on_click1, #show_on_click2, #show_on_click3, #show_on_click4, #show_on_click5{
 +
      display:none;
 +
      transition: all 0.5s !important;
 +
}
 +
 +
.show{
 +
      display:block !important;
 +
      transition: all 0.5s !important;
 +
}
 +
 +
 +
.show_buttons{
 +
    color: grey;
 +
    font-family: "Lato";
 +
    cursor: pointer;
 +
    border: none;
 +
    font-size: 1.5vw;
 +
}
 +
 +
 +
  
  
Line 778: Line 751:
 
/*--------------------------------------MAIN BACKGROUND------------------------------------------*/
 
/*--------------------------------------MAIN BACKGROUND------------------------------------------*/
 
#main_content{
 
#main_content{
       background-image: url(https://static.igem.org/mediawiki/2021/2/22/T--LINKS_China--background_lightpurple.png);
+
       background-image: url(https://static.igem.org/mediawiki/2021/e/e8/T--LINKS_China--background_darkpurple.png);
 
       background-attachment:scroll;
 
       background-attachment:scroll;
 
       background-repeat: repeat;
 
       background-repeat: repeat;
Line 937: Line 910:
 
   z-index: 100;
 
   z-index: 100;
 
   transition: top 0.3s; /* Transition effect when sliding down (and up) */
 
   transition: top 0.3s; /* Transition effect when sliding down (and up) */
 +
  top:-100px;
 
}
 
}
  
Line 1,020: Line 994:
  
  
<!----------------------------SIDEBAR_EFFECT--------------------------->
 
 
<script>
 
<script>
$(document).ready( function() {
 
 
    $("#section1_guider").hover( function() {
 
        $("#section1_header").animate({opacity: 1}, 350);
 
    }, function() {
 
        $("#section1_header").animate({opacity: 0}, 150);
 
    });
 
 
 
    $("#section2_guider").hover( function() {
 
        $("#section2_header").animate({opacity: 1}, 350);
 
    }, function() {
 
        $("#section2_header").animate({opacity: 0}, 150);
 
    });
 
 
 
 
    $("#section3_guider").hover( function() {
 
        $("#section3_header").animate({opacity: 1}, 350);
 
    }, function() {
 
        $("#section3_header").animate({opacity: 0}, 150);
 
    });
 
 
 
    $("#section4_guider").hover( function() {
 
        $("#section4_header").animate({opacity: 1}, 350);
 
    }, function() {
 
        $("#section4_header").animate({opacity: 0}, 150);
 
    });
 
 
    $("#section5_guider").hover( function() {
 
        $("#section5_header").animate({opacity: 1}, 350);
 
    }, function() {
 
        $("#section5_header").animate({opacity: 0}, 150);
 
    });
 
 
    $("#section6_guider").hover( function() {
 
        $("#section6_header").animate({opacity: 1}, 350);
 
    }, function() {
 
        $("#section6_header").animate({opacity: 0}, 150);
 
    });
 
 
    $("#section7_guider").hover( function() {
 
        $("#section7_header").animate({opacity: 1}, 350);
 
    }, function() {
 
        $("#section7_header").animate({opacity: 0}, 150);
 
    });
 
    $("#section8_guider").hover( function() {
 
        $("#section8_header").animate({opacity: 1}, 350);
 
    }, function() {
 
        $("#section8_header").animate({opacity: 0}, 150);
 
    });
 
 
 
 
 
});
 
 
<!----------------------------NAVBAR_EFFECT--------------------------->
 
 
var prevScrollpos = window.pageYOffset;
 
var prevScrollpos = window.pageYOffset;
 
window.onscroll = function() {
 
window.onscroll = function() {
Line 1,086: Line 1,000:
 
   if (prevScrollpos > currentScrollPos) {
 
   if (prevScrollpos > currentScrollPos) {
 
     document.getElementById("outnav").style.top = "17px";
 
     document.getElementById("outnav").style.top = "17px";
    document.getElementById("sidebar").style.top = "9.7vw";
 
 
   } else {
 
   } else {
 
     document.getElementById("outnav").style.top = "-100px";
 
     document.getElementById("outnav").style.top = "-100px";
    document.getElementById("sidebar").style.top = "5vw";
 
 
   }
 
   }
 
   prevScrollpos = currentScrollPos;
 
   prevScrollpos = currentScrollPos;
Line 1,097: Line 1,009:
  
  
 +
function myFunction1() {
 +
  var element = document.getElementById("show_on_click1");
 +
  element.classList.toggle("show");
 +
}
  
 +
function myFunction2() {
 +
  var element = document.getElementById("show_on_click2");
 +
  element.classList.toggle("show");
 +
}
  
window.addEventListener('DOMContentLoaded', () => {
+
function myFunction3() {
 +
  var element = document.getElementById("show_on_click3");
 +
  element.classList.toggle("show");
 +
}
  
  const observer = new IntersectionObserver(entries => {
+
function myFunction4() {
    entries.forEach(entry => {
+
  var element = document.getElementById("show_on_click4");
      const id = entry.target.getAttribute('id');
+
  element.classList.toggle("show");
      if (entry.intersectionRatio > 0) {
+
}
        document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.add('active');
+
 
      } else {
+
function myFunction5() {
        document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.remove('active');
+
  var element = document.getElementById("show_on_click5");
      }
+
  element.classList.toggle("show");
    });
+
}
  });
+
  
  // Track all sections that have an `id` applied
 
  document.querySelectorAll('section[id]').forEach((section) => {
 
    observer.observe(section);
 
  });
 
 
 
});
 
 
</script>
 
</script>
 +
 
</html>
 
</html>

Revision as of 00:23, 22 October 2021