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

 
(5 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 171: Line 200:
 
<div id="big_header">
 
<div id="big_header">
 
     <img src="https://static.igem.org/mediawiki/2021/1/14/T--LINKS_China--bigheader_communication.jpg" style="position: absolute; top: 17vw; left: 22vw; width: 56vw;">
 
     <img src="https://static.igem.org/mediawiki/2021/1/14/T--LINKS_China--bigheader_communication.jpg" style="position: absolute; top: 17vw; left: 22vw; width: 56vw;">
−
     <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 215:
  
  
−
<!------------------------------------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 248: Line 232:
  
 
         <p>Although people come into contact with dying every day, there is a lack of understanding of the dyeing process. Therefore, we cooperate with NWU_CHINA_A, BJU_China, and QHFZ-China to deliver a series of online streaming lectures through Tencent Meeting, aiming to impart basic pigment knowledge. </p>
 
         <p>Although people come into contact with dying every day, there is a lack of understanding of the dyeing process. Therefore, we cooperate with NWU_CHINA_A, BJU_China, and QHFZ-China to deliver a series of online streaming lectures through Tencent Meeting, aiming to impart basic pigment knowledge. </p>
−
         <p>Firstly, we communicated with NWU_CHINA_A, BJU_China, and QHFZ-China to design the procedures of the direct broadcast. Then we made posters and posted them in the WeChat official accounts to hold people’s attention. Our team was in charge of presenting the topic “the production and application of pigments.” While delivering the online lectures, we mentioned both traditional dyes and the concept of synthetic biology pigments. In order to help the listeners have a better understanding of the biological dyes, we showed the process of dying using genetically modified microorganisms. After the four teams all finished their lectures, we asked for feedback from the listeners. They all claimed that they had learned a lot from the streaming educational activities. We posted the recorded video of our presentation on bilibili for the people that would like to know about dyes. 【【LINKS_China 2021】染色的奇妙物语 之 染料的生产与生活（education演讲录播）-哔哩哔哩】https://b23.tv/vQqtLR)</p>
+
         <p>Firstly, we communicated with NWU_CHINA_A, BJU_China, and QHFZ-China to design the procedures of the direct broadcast. Then we made posters and posted them in the WeChat official accounts to hold people’s attention. Our team was in charge of presenting the topic “the production and application of pigments.” While delivering the online lectures, we mentioned both traditional dyes and the concept of synthetic biology pigments. In order to help the listeners have a better understanding of the biological dyes, we showed the process of dying using genetically modified microorganisms. After the four teams all finished their lectures, we asked for feedback from the listeners. They all claimed that they had learned a lot from the streaming educational activities. We posted the recorded video of our presentation on bilibili for the people that would like to know about dyes. (<a href="https://b23.tv/vQqtLR">https://b23.tv/vQqtLR</a>)</p>
 
           <br>
 
           <br>
  
Line 259: Line 243:
 
     <section class="normal_texts" id="section2">
 
     <section class="normal_texts" id="section2">
 
         <br>
 
         <br>
−
         <p>After getting our bacterial cellulose membrane, we created a thorough business plan to make it a commercial product. Realizing we need a large amount of funding to achieve mass production, we reached out to Jennifer, one of our potential investors, and conducted a presentation about our business plan. Jennifer provided us with pieces of helpful advice to our plan more feasible.(Link to entrepreneurship)</p>
+
         <p>After getting our bacterial cellulose membrane, we created a thorough business plan to make it a commercial product. Realizing we need a large amount of funding to achieve mass production, we reached out to Jennifer, one of our potential investors, and conducted a presentation about our business plan. Jennifer provided us with pieces of helpful advice to make our plan more feasible.(<a href="https://2021.igem.org/Team:LINKS_China/Entrepreneurship">https://2021.igem.org/Team:LINKS_China/Entrepreneurship</a>)</p>
 
         <br>
 
         <br>
 
     </section>
 
     </section>
Line 284: Line 268:
 
</div>
 
</div>
  
−
         <p>From August 27 to August 29, we attended the 8th Conference of China iGEMer Community, known as CCiC. We improved our presentation according to the experience learned from the Southern China Regional Meeting. After presenting and looking at others' presentations, we found that several teams were also doing natural dyes. We held a cooperative educational live streaming about pigments after reaching out to these teams, including BJU_China, NWU-CHINA-A, and QHFZ-China. Furthermore, we have contacted SCUT-CHINA, and they offered us helpful advice in creating animations and presentations. CCiC helps LINKS_China get fully prepare for the final presentation in November.</p>
+
         <p>From August 27 to August 29, we attended the 8th Conference of China iGEMer Community, known as CCiC. We improved our presentation according to the experience learned from the Southern China Regional Meeting. After presenting and looking at others' presentations, we found that several teams were also doing natural dyes. We held a cooperative educational live streaming about pigments after reaching out to these teams, including BJU_China, NWU-CHINA-A, and QHFZ-China. Furthermore, we have contacted SCUT-CHINA, and they offered us helpful advice in creating animations and presentations. CCiC helped LINKS_China get fully prepare for the final presentation in November.</p>
 
         <br>
 
         <br>
 
     </section>
 
     </section>
Line 300: Line 284:
  
 
<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 328: Line 333:
 
   </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 385: Line 396:
 
       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/f/f2/T--LINKS_China--bigimg_communication.png);
 
       background-attachment:scroll;
 
       background-attachment:scroll;
 
       background-repeat: no-repeat;
 
       background-repeat: no-repeat;
Line 424: Line 435:
 
@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 526: Line 533:
 
@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 574: Line 577:
  
 
.section-nav{
 
.section-nav{
−
   display: block;
+
   display: none;
 
   background-color: #FFFFFF;
 
   background-color: #FFFFFF;
 
}
 
}
Line 638: Line 641:
 
       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 656: Line 661:
 
       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 765: Line 770:
 
       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 781: Line 786:
 
       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 786: Line 815:
 
/*--------------------------------------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 835: Line 864:
  
  
−
#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 862: Line 886:
 
   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 892: Line 970:
 
   position: absolute;
 
   position: absolute;
 
   bottom: 11.11111vw;
 
   bottom: 11.11111vw;
−
   left: 69.79vw;
+
   left: 55.79vw;
 
}
 
}
  
Line 898: Line 976:
 
   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 910: Line 1,000:
 
   position: absolute;
 
   position: absolute;
 
   bottom: 4.5139vw;
 
   bottom: 4.5139vw;
−
   left: 87.847vw;
+
   left: 88.847vw;
 
}
 
}
  
Line 945: Line 1,035:
 
   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,028: Line 1,119:
  
  
−
<!----------------------------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,094: Line 1,125:
 
   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,105: Line 1,134:
  
  
 +
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>

Latest revision as of 15:46, 17 December 2021