Difference between revisions of "Team:LINKS China/Human Practices"

 
(24 intermediate revisions by one other user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 +
<style>
 +
.loading {
 +
    position: fixed;
 +
    left: 0px;
 +
    top: 0px;
 +
    width: 100vw;
 +
    height: 100vw;
 +
    z-index: 100;
 +
    background-color: #f6f2f4;
 +
}
 +
.loading img{
 +
    position: relative;
 +
    height: auto;
 +
    width: 70vw;
 +
    display: block;
 +
    margin: auto;
 +
        }
 +
</style>
  
 +
<div class="loading" >
 +
    <img src="https://static.igem.org/mediawiki/2021/b/be/T--LINKS_China--loadernew1.jpg">
 +
</div>
 +
 +
<script>
 +
    window.onload = function()
 +
    {
 +
        setTimeout(function(){$('.loading').fadeOut();}, 1000);
 +
    }
 +
 +
</script>
 
<!------------------------------------------Preloading---------------------------------------------->
 
<!------------------------------------------Preloading---------------------------------------------->
 
<head>
 
<head>
Line 170: Line 199:
  
 
<div id="big_header">
 
<div id="big_header">
     <img src="https://static.igem.org/mediawiki/2021/6/6d/T--LINKS_China--bigheader_ihps.jpg" style="position: absolute; top:12.5vw; left: 16vw; width: 68vw;">
+
     <img src="https://static.igem.org/mediawiki/2021/6/6d/T--LINKS_China--bigheader_ihps.jpg" style="position: absolute; top:16vw; left: 16vw; width: 68vw;">
     <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;">
+
     <img src="https://static.igem.org/mediawiki/2021/f/fa/T--LINKS_China--descriptionplace_darkpurple.jpg" style="position: absolute; top:15vw; left: 22.5vw; width: 55vw;">
 
</div>
 
</div>
  
Line 185: Line 214:
 
<div id="sidebar_and_texts">
 
<div id="sidebar_and_texts">
  
 
<!------------------------------------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/a/a5/T--LINKS_China--sectionguider_purple1.png" id="section1_guider"></a></li>
 
              <li><a href="#section2"><img src="https://static.igem.org/mediawiki/2021/c/c0/T--LINKS_China--sectionguider_purple2.png
 
" id="section2_guider"></a></li>
 
              <li><a href="#section3"><img src="https://static.igem.org/mediawiki/2021/1/1b/T--LINKS_China--sectionguider_purple3.png" id="section3_guider"></a></li>
 
              <li><a href="#section4"><img src="https://static.igem.org/mediawiki/2021/2/29/T--LINKS_China--sectionguider_purple4.png" id="section4_guider"></a></li>
 
              <li><a href="#section5"><img src="https://static.igem.org/mediawiki/2021/6/6c/T--LINKS_China--sectionguider_purple5.png" id="section5_guider"></a></li>             
 
              <li><a href="#section6"><img src="https://static.igem.org/mediawiki/2021/e/e6/T--LINKS_China--sectionguider_purple6.png" id="section6_guider"></a></li>             
 
              <li><a href="#section7"><img src="https://static.igem.org/mediawiki/2021/c/c2/T--LINKS_China--sectionguider_purple7.png" id="section7_guider"></a></li>             
 
              <li><a href="#section8"><img src="https://static.igem.org/mediawiki/2021/c/ca/T--LINKS_China--sectionguider_purple8.png" id="section8_guider"></a></li>
 
          </ul>
 
 
 
 
          <ul class="section_header" style="list-style: none !important;">
 
              <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section1_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section2_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section3_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section4_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section5_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section6_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section7_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" 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">section1</a></li>
 
<li><a href="#section2">section2</a></li>
 
<li><a href="#section3">section3</a></li>
 
<li><a href="#section4">section4</a></li>
 
<li><a href="#section5">section5</a></li>
 
<li><a href="#section6">section6</a></li>
 
<li><a href="#section7">section7</a></li>
 
<li><a href="#section8">section8</a></li>
 
</ul>
 
</nav>
 
 
  </div>
 
<!------------------------------------SIDEBAR_END------------------------------------->
 
  
  
Line 291: Line 273:
 
     <p>After interviewing Aowang Clothing Company, we planned to identify the types of customers that might show interest to our product, so we sent out a questionnaire online. Through the questionnaire, we recognized the preference of potential consumers on leather products and types of consumers preferred purchasing biodegradable leather.  </p>
 
     <p>After interviewing Aowang Clothing Company, we planned to identify the types of customers that might show interest to our product, so we sent out a questionnaire online. Through the questionnaire, we recognized the preference of potential consumers on leather products and types of consumers preferred purchasing biodegradable leather.  </p>
 
     <p>As we found out that different customers tend to have different consumption behavior on leather products, we decided to discover the type of customers which prefer our biosynthesized and biodegradable leather the most. Therefore, we send out a questionnaire online to ask for the attitudes of consumers who tend to purchase leather products. Through this questionnaire, we identified the potential consumers of our product, and started to specify on developing characteristics that most consumers care about leather products. </p>
 
     <p>As we found out that different customers tend to have different consumption behavior on leather products, we decided to discover the type of customers which prefer our biosynthesized and biodegradable leather the most. Therefore, we send out a questionnaire online to ask for the attitudes of consumers who tend to purchase leather products. Through this questionnaire, we identified the potential consumers of our product, and started to specify on developing characteristics that most consumers care about leather products. </p>
 +
        <p>To see more details, click <button  onclick="myFunction6()" class="show_buttons">here</button></p>
 +
 +
          <div id="show_on_click6">
 +
                <object data="https://static.igem.org/mediawiki/2021/3/30/T--LINKS_China--HP_Question.pdf" type="application/pdf" width="100%" height=850>
 +
                      <p>Current browser doesn't support PDF. Download It:
 +
                      <a href=" ">Download PDF</a >.</p >
 +
                </object><br><br><br>
 +
          </div>
 
     <br>
 
     <br>
 
     </div>
 
     </div>
Line 340: Line 330:
 
                       <a href=" ">Download PDF</a >.</p >
 
                       <a href=" ">Download PDF</a >.</p >
 
                 </object><br><br><br></div>
 
                 </object><br><br><br></div>
<div class="picture_and_explanation">
+
  <video controls style="margin-left: 9vw; width: 60vw;">
      <img src="https://static.igem.org/mediawiki/2021/9/92/T--LINKS_China--overview1.png">
+
    <source src="https://static.igem.org/mediawiki/2021/2/2d/T--LINKS_China--HP_demo2KASHI.mov" type="video/mp4">
      <p><p>
+
  </video>
</div>
+
         <br><br><br>
         <br><br>
+
 
     </div>
 
     </div>
 
     </section>
 
     </section>
Line 366: Line 355:
 
                       <a href=" ">Download PDF</a >.</p >
 
                       <a href=" ">Download PDF</a >.</p >
 
                 </object><br><br><br></div>
 
                 </object><br><br><br></div>
<div class="picture_and_explanation">
+
  <video controls style="margin-left: 9vw; width: 60vw;">
      <img src="https://static.igem.org/mediawiki/2021/7/71/T--LINKS_China--overview2.png">
+
    <source src="https://static.igem.org/mediawiki/2021/3/39/T--LINKS_China--HP_demo.BODUN.mov" type="video/mp4">
      <p>2<p>
+
  </video>
</div>
+
         <br><br><br>
         <br><br>
+
 
     </div>
 
     </div>
 
     </section>
 
     </section>
Line 410: Line 398:
 
                 </object><br><br><br></div>
 
                 </object><br><br><br></div>
  
<div class="picture_and_explanation">
+
  <video controls style="margin-left: 9vw; width: 60vw;">
      <img src="https://static.igem.org/mediawiki/2021/1/10/T--LINKS_China--over4.png">
+
    <source src="https://static.igem.org/mediawiki/2021/9/9f/T--LINKS_China--HP_DEMOshishang.mov" type="video/mp4">
      <p><p>
+
  </video>
</div>
+
 
            
 
            
         <br><br>
+
         <br><br><br>
 
     </div>
 
     </div>
 
     </section>
 
     </section>
Line 430: Line 417:
  
 
<div id="footer">
 
<div id="footer">
  <div id="links-logo">
 
    <a href="https://2021.igem.org/Team:LINKS_China"><img src="https://static.igem.org/mediawiki/2021/3/33/T--LINKS_China--footer_teamlogo.png" height="100" width="auto"></a>
 
  </div>
 
  <div id="footer-divider">
 
    <img src="https://static.igem.org/mediawiki/2021/0/0d/T--LINKS_China--black_vertical_footer_divider2.png" height="125" width="2">
 
  </div>
 
 
   <div id="footer-text">
 
   <div id="footer-text">
 
     <h3>Sponsors</h3>
 
     <h3>Sponsors</h3>
 
   </div>
 
   </div>
 
   <div id="snapgene-logo">
 
   <div id="snapgene-logo">
     <a href="https://www.snapgene.com/"><img src="https://static.igem.org/mediawiki/2021/5/5e/T--LINKS_China--SnapGeneLogo.jpg"></a>
+
     <a href="https://www.snapgene.com/"><img src="https://static.igem.org/mediawiki/2021/5/5e/T--LINKS_China--SnapGeneLogo.jpg" style="width:auto;height:3.4722222222222vw;"></a>
 
   </div>
 
   </div>
 
   <div id="linkspider-logo">
 
   <div id="linkspider-logo">
     <img src="https://static.igem.org/mediawiki/2021/3/38/T--LINKS_China--linkspider_logo.png" height="100" width="auto">
+
     <a href="https://www.links-academy.net"><img src="https://static.igem.org/mediawiki/2021/3/38/T--LINKS_China--linkspider_logo.png" style="width:auto;height:4.8611111111111vw;"></a>
 
   </div>
 
   </div>
 
   <div id="basis-logo">
 
   <div id="basis-logo">
     <a href="https://basis-global.com/"><img src="https://static.igem.org/mediawiki/2021/7/7d/T--LINKS_China--basis_logo.png" height="100" width="auto"></a>
+
     <a href="https://basis-global.com/"><img src="https://static.igem.org/mediawiki/2021/7/7d/T--LINKS_China--basis_logo.png" style="width:auto;height:4.1666666666667vw;"></a>
 
   </div>
 
   </div>
 
   <div id="scie-logo">
 
   <div id="scie-logo">
     <a href="https://www.scie.com.cn/"><img src="https://static.igem.org/mediawiki/2021/e/ec/T--LINKS_China--scie_logo.png" height="100" width="auto"></a>
+
     <a href="https://www.scie.com.cn/"><img src="https://static.igem.org/mediawiki/2021/e/ec/T--LINKS_China--scie_logo.png" style="width:auto;height:5.2083333333333vw;"></a>
 
   </div>
 
   </div>
   <div id="footer-divider2">
+
   <div id="taft-logo">
     <img src="https://static.igem.org/mediawiki/2021/0/0d/T--LINKS_China--black_vertical_footer_divider2.png" height="125" width="2">
+
     <a href="https://www.taftschool.org/"><img src="https://static.igem.org/mediawiki/2021/5/55/T--LINKS_China--tuft_logo_tp.png" style="width:auto;height:4.5138888888889vw;"></a>
 +
  </div>
 +
  <div id="nanshan-logo">
 +
    <a href="http://www.szsy.cn"><img src="https://static.igem.org/mediawiki/2021/1/18/T--LINKS_China--nanshan_logo_new_tp.png" style="width:auto;height:2.7777777777778vw;"></a>
 +
  </div>
 +
  <div id="uwc-logo">
 +
    <a href="http://www.uwcchina.org/en"><img src="https://static.igem.org/mediawiki/2021/4/4e/T--LINKS_China--uwc_logo.png" style="width:auto;height:5.2083333333333vw;"></a>
 +
  </div>
 +
  <div id="vma-logo">
 +
    <a href="https://en.vankemeisha.com/"><img src="https://static.igem.org/mediawiki/2021/8/88/T--LINKS_China--vma_logo_tp.png" style="width:auto;height:5.9027777777778vw;"></a>
 +
  </div>
 +
  <div id="hotchkiss-logo">
 +
    <a href="https://www.hotchkiss.org/"><img src="https://static.igem.org/mediawiki/2021/6/67/T--LINKS_China--hotchkiss_logo.png" style="width:auto;height:4.8611111111111vw;"></a>
 +
  </div>
 +
  <div id="chelt-logo">
 +
    <a href="https://www.cheltladiescollege.org/"><img src="https://static.igem.org/mediawiki/2021/a/af/T--LINKS_China--chelt_logo.png" style="width:auto;height:5.2083333333333vw;"></a>
 +
  </div>
 +
  <div id="ridley-logo">
 +
    <a href="https://www.ridleycollege.com/"><img src="https://static.igem.org/mediawiki/2021/3/36/T--LINKS_China--ridley_logo.png" style="width:auto;height:4.8611111111111vw;"></a>
 +
  </div>
 +
  <div id="guangzhou-logo">
 +
    <a href="https://www.chgzfls.com"><img src="https://static.igem.org/mediawiki/2021/8/83/T--LINKS_China--guangzhou_logo_tp.png" style="width:auto;height:5.2083333333333vw;"></a>
 +
  </div>
 +
  <div id="gca-logo">
 +
    <a href="https://www.gcarams.org/"><img src="https://static.igem.org/mediawiki/2021/9/9f/T--LINKS_China--gca_logo_tp.png" style="width:auto;height:4.5138888888889vw;"></a>
 +
  </div>
 +
  <div id="footer-divider">
 +
    <img src="https://static.igem.org/mediawiki/2021/0/0d/T--LINKS_China--black_vertical_footer_divider2.png" style="width:0.13888888888889vw;height:8.6805555555556vw;">
 
   </div>
 
   </div>
 
   <div id="footer-text2">
 
   <div id="footer-text2">
Line 458: Line 466:
 
   </div>
 
   </div>
 
   <div id="ins-logo">
 
   <div id="ins-logo">
     <a href="https://www.instagram.com/links_china/"><img src="https://static.igem.org/mediawiki/2021/0/07/T--LINKS_China--ins_logo_tp.png" height="90" width="auto"></a>
+
     <a href="https://www.instagram.com/links_china/"><img src="https://static.igem.org/mediawiki/2021/0/07/T--LINKS_China--ins_logo_tp.png" style="width:auto;height:4.8611111111111vw;"></a>
 +
  </div>
 +
  <div id="footer-divider2">
 +
    <img src="https://static.igem.org/mediawiki/2021/0/0d/T--LINKS_China--black_vertical_footer_divider2.png" style="width:0.13888888888889vw;height:8.6805555555556vw;">
 
   </div>
 
   </div>
 
   <div id="bilibili-logo">
 
   <div id="bilibili-logo">
     <a href="https://space.bilibili.com/71190254?from=search&seid=7679001301054558817&spm_id_from=333.337.0.0"><img src="https://static.igem.org/mediawiki/2021/0/01/T--LINKS_China--bilibili_logo_tp.png" height="60" width="auto"></a>
+
     <a href="https://space.bilibili.com/71190254?from=search&seid=7679001301054558817&spm_id_from=333.337.0.0"><img src="https://static.igem.org/mediawiki/2021/0/01/T--LINKS_China--bilibili_logo_tp.png" style="width:auto;height:4.1666666666667vw;""></a>
 +
  </div>
 +
  <div id="footer-divider3">
 +
    <img src="https://static.igem.org/mediawiki/2021/0/0d/T--LINKS_China--black_vertical_footer_divider2.png" style="width:0.13888888888889vw;height:8.6805555555556vw;">
 
   </div>
 
   </div>
 
   <div id="email-logo">
 
   <div id="email-logo">
     <a href="mailto: links_china@outlook.com"><img src="https://static.igem.org/mediawiki/2021/d/df/T--LINKS_China--email_logo.png" height="90" width="auto"></a>
+
     <a href="mailto: links_china@outlook.com"><img src="https://static.igem.org/mediawiki/2021/d/df/T--LINKS_China--email_logo.png" style="width:auto;height:4.8611111111111vw;"></a>
 
   </div>
 
   </div>
 
   <img src="https://static.igem.org/mediawiki/2021/a/aa/T--LINKS_China--footer4.png" class="footer">
 
   <img src="https://static.igem.org/mediawiki/2021/a/aa/T--LINKS_China--footer4.png" class="footer">
Line 515: Line 529:
 
       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/7/70/T--LINKS_China--bigimg_ihps.png);
 
       background-attachment:scroll;
 
       background-attachment:scroll;
 
       background-repeat: no-repeat;
 
       background-repeat: no-repeat;
 
       background-position:top;
 
       background-position:top;
       background-size: 105%;
+
       background-size: 110%;
 
       padding: 0;
 
       padding: 0;
 
     box-shadow: 0 0 0.4vw 0.4vw #fbedf3 inset;
 
     box-shadow: 0 0 0.4vw 0.4vw #fbedf3 inset;
Line 554: Line 568:
 
@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 619: Line 629:
 
     width: 11.2vw;
 
     width: 11.2vw;
 
     top: -1.3vw;
 
     top: -1.3vw;
     padding: 1.63vw 0vw 0vw 0vw;
+
     padding: 1.75vw 0vw 0vw 0vw;
 
     right: 0.55vw;
 
     right: 0.55vw;
 
     height: auto;
 
     height: auto;
Line 656: Line 666:
 
@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 704: Line 710:
  
 
.section-nav{
 
.section-nav{
   display: block;
+
   display: none;
 
   background-color: #FFFFFF;
 
   background-color: #FFFFFF;
 
}
 
}
Line 768: Line 774:
 
       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 786: Line 794:
 
       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 895: Line 903:
 
       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 914: Line 922:
  
  
 
+
#show_on_click1, #show_on_click2, #show_on_click3, #show_on_click4, #show_on_click5, #show_on_click6{
 
+
 
+
#show_on_click1, #show_on_click2, #show_on_click3, #show_on_click4, #show_on_click5{
+
 
       display:none;
 
       display:none;
 
       transition: all 0.5s !important;
 
       transition: all 0.5s !important;
Line 935: Line 940:
 
     font-size: 1.5vw;
 
     font-size: 1.5vw;
 
}
 
}
 +
 +
 +
  
  
Line 989: Line 997:
  
  
#links-logo {
 
  position: absolute;
 
  bottom: 4.17vw;
 
  left: 10.4vw;
 
}
 
  
 
#snapgene-logo {
 
#snapgene-logo {
 
   position: absolute;
 
   position: absolute;
   bottom: 4.86vw;
+
   bottom: 5.46vw;
   left: 20.83vw;
+
   left: 14.83vw;
 
}
 
}
  
Line 1,016: Line 1,019:
 
   position: absolute;
 
   position: absolute;
 
   bottom: 11.111vw;
 
   bottom: 11.111vw;
   left: 20.139vw;
+
   left: 7.139vw;
 
}
 
}
  
 
#linkspider-logo {
 
#linkspider-logo {
 
   position: absolute;
 
   position: absolute;
   bottom: 4.1667vw;
+
   bottom: 9.0667vw;
   left: 43.4vw;
+
   left: 14.4vw;
 
}
 
}
  
 
#basis-logo {
 
#basis-logo {
 
   position: absolute;
 
   position: absolute;
   bottom: 4.514vw;
+
   bottom: 9.514vw;
   left: 51.389vw;
+
   left: 19.389vw;
 
}
 
}
  
 
#scie-logo {
 
#scie-logo {
 
   position: absolute;
 
   position: absolute;
   bottom: 4.5139vw;
+
   bottom: 2.8139vw;
   left: 60.07vw;
+
   left: 40.07vw;
 
}
 
}
  
#footer-divider2 {
+
#taft-logo {
 +
  position: absolute;
 +
  bottom: 9.375vw;
 +
  left: 24.305555555556vw;
 +
}
 +
 
 +
#nanshan-logo {
 +
  position: absolute;
 +
  bottom: 2.4305555555556vw;
 +
  left: 15.625vw;
 +
}
 +
 
 +
#vma-logo {
 +
  position: absolute;
 +
  bottom: 8.6805555555556vw;
 +
  left: 28.819444444444vw;
 +
}
 +
 
 +
#uwc-logo {
 +
  position: absolute;
 +
  bottom: 2.7777777777778vw;
 +
  left: 31.597222222222vw;
 +
}
 +
 
 +
#hotchkiss-logo {
 +
  position: absolute;
 +
  bottom: 9.0277777777778vw;
 +
  left: 34.722222222222vw;
 +
}
 +
 
 +
#chelt-logo {
 +
  position: absolute;
 +
  bottom: 9.0277777777778vw;
 +
  left: 39.236111111111vw;
 +
}
 +
 
 +
#ridley-logo {
 +
  position: absolute;
 +
  bottom: 9.0277777777778vw;
 +
  left: 43.75vw;
 +
}
 +
 
 +
#guangzhou-logo {
 +
  position: absolute;
 +
  bottom: 2.7777777777778vw;
 +
  left: 48.263888888889vw;
 +
}
 +
 
 +
#gca-logo {
 +
  position: absolute;
 +
  bottom: 9.0277777777778vw;
 +
  left: 48.611111111111vw;
 +
}
 +
 
 +
#footer-divider {
 
   position: absolute;
 
   position: absolute;
 
   bottom: 3.819vw;
 
   bottom: 3.819vw;
   left: 68.4vw;
+
   left: 54.4vw;
 
}
 
}
  
Line 1,046: Line 1,103:
 
   position: absolute;
 
   position: absolute;
 
   bottom: 11.11111vw;
 
   bottom: 11.11111vw;
   left: 69.79vw;
+
   left: 55.79vw;
 
}
 
}
  
Line 1,052: Line 1,109:
 
   position: absolute;
 
   position: absolute;
 
   bottom: 4.51389vw;
 
   bottom: 4.51389vw;
   left: 69.4444vw;
+
   left: 56.7444vw;
 +
}
 +
 
 +
#footer-divider2 {
 +
  position: absolute;
 +
  bottom: 3.819vw;
 +
  left: 64.4vw;
 
}
 
}
  
 
#bilibili-logo {
 
#bilibili-logo {
 
   position: absolute;
 
   position: absolute;
   bottom: 5.5555556vw;
+
   bottom: 4.7555556vw;
   left: 77.08vw;
+
   left: 69.08vw;
 +
}
 +
 
 +
#footer-divider3 {
 +
  position: absolute;
 +
  bottom: 3.819vw;
 +
  left: 83.4vw;
 
}
 
}
  
Line 1,064: Line 1,133:
 
   position: absolute;
 
   position: absolute;
 
   bottom: 4.5139vw;
 
   bottom: 4.5139vw;
   left: 87.847vw;
+
   left: 88.847vw;
 
}
 
}
  
Line 1,099: Line 1,168:
 
   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,182: Line 1,252:
  
  
<!----------------------------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,248: Line 1,258:
 
   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;
 
}
 
}
  
 
 
 
 
 
window.addEventListener('DOMContentLoaded', () => {
 
 
  const observer = new IntersectionObserver(entries => {
 
    entries.forEach(entry => {
 
      const id = entry.target.getAttribute('id');
 
      if (entry.intersectionRatio > 0) {
 
        document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.add('active');
 
      } else {
 
        document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.remove('active');
 
      }
 
    });
 
  });
 
 
  // Track all sections that have an `id` applied
 
  document.querySelectorAll('section[id]').forEach((section) => {
 
    observer.observe(section);
 
  });
 
 
 
});
 
  
  
Line 1,308: Line 1,292:
 
}
 
}
  
 
+
function myFunction6() {
 
+
  var element = document.getElementById("show_on_click6");
 +
  element.classList.toggle("show");
 +
}
  
 
</script>
 
</script>
 +
 
</html>
 
</html>

Latest revision as of 15:45, 17 December 2021