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

 
(10 intermediate revisions by 3 users 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/1/14/T--LINKS_China--bigheader_communication.jpg" style="position: absolute; top: 17vw; left: 26vw; width: 48vw;">
+
     <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 237: Line 221:
  
 
   <div id="texts">
 
   <div id="texts">
−
     <h1></h1>
+
     <h1>Online streaming education and social media account</h1>
 
     <br>
 
     <br>
  
 
     <section class="normal_texts" id="section1">
 
     <section class="normal_texts" id="section1">
 
         <br>
 
         <br>
−
         <br>
+
<div class="picture_and_explanation">
 +
      <img src="https://static.igem.org/mediawiki/2021/5/55/T--LINKS_China--com1.png">
 +
      <p>Online streaming education and social media account<p>
 +
</div>
 +
 
 +
         <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. (<a href="https://b23.tv/vQqtLR">https://b23.tv/vQqtLR</a>)</p>
 +
          <br>
 +
 
 
     </section>
 
     </section>
  
Line 248: Line 240:
 
<br><br><br>
 
<br><br><br>
  
−
     <h1></h1>
+
     <h1>Roadshow</h1>
 
     <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 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 257: Line 250:
  
  
−
<h1></h1>
+
<h1>The 5th Southern China Regional Meeting</h1>
 
     <section class="normal_texts" id="section3">
 
     <section class="normal_texts" id="section3">
 
     <br>
 
     <br>
 +
    <p>As a team based in Shenzhen, we attended the 5th Southern China regional Meeting on 5th August. The meeting was online due to the pandemic. We presented our project to the other 17 teams in the forum and got to know their project. Attending the conference helped us learn from the other teams and prepare for the following CCiC presentation. </p>
 
     <br>
 
     <br>
 
     </section>
 
     </section>
Line 266: Line 260:
  
  
−
<h1></h1>
+
<h1>CCIC</h1>
 
     <section class="normal_texts" id="section4">
 
     <section class="normal_texts" id="section4">
 
         <br>
 
         <br>
−
        <br>
+
<div class="picture_and_explanation">
−
    </section>
+
      <img src="https://static.igem.org/mediawiki/2021/6/6f/T--LINKS_China--com2.png">
−
 
+
      <p>CCiC<p>
−
<br><br><br>
+
</div>
−
 
+
  
−
<h1></h1>
+
         <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>
−
    <section class="normal_texts" id="section5">
+
−
         <br>
+
−
        <br>
+
−
    </section>
+
−
    <br><br><br>
+
−
<h1></h1>
+
−
    <section class="normal_texts" id="section6">
+
−
        <br>
+
 
         <br>
 
         <br>
 
     </section>
 
     </section>
Line 289: Line 274:
 
<br><br><br>
 
<br><br><br>
  
−
<h1></h1>
 
−
    <section class="normal_texts" id="section7">
 
−
        <br>
 
−
        <br>
 
−
    </section>
 
  
−
<br><br><br>
 
−
 
−
 
−
 
−
    <h1>References</h1>
 
−
    <section class="references" id="section8">
 
−
        <br>
 
−
        <ol>
 
−
          <li></li>
 
−
          <li></li>
 
−
          <li></li>
 
−
          <li></li>
 
−
          <li></li>
 
−
          <li></li>
 
−
          <li></li>
 
−
          <li></li>
 
−
          <li></li>
 
−
        </ol>
 
−
        <br>
 
−
    </section>
 
  
  
Line 324: 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 352: 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 409: 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 448: 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 550: 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 598: Line 577:
  
 
.section-nav{
 
.section-nav{
−
   display: block;
+
   display: none;
 
   background-color: #FFFFFF;
 
   background-color: #FFFFFF;
 
}
 
}
Line 662: 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 680: 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 789: 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 805: 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 810: 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 859: 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 886: 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 916: Line 970:
 
   position: absolute;
 
   position: absolute;
 
   bottom: 11.11111vw;
 
   bottom: 11.11111vw;
−
   left: 69.79vw;
+
   left: 55.79vw;
 
}
 
}
  
Line 922: 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 934: Line 1,000:
 
   position: absolute;
 
   position: absolute;
 
   bottom: 4.5139vw;
 
   bottom: 4.5139vw;
−
   left: 87.847vw;
+
   left: 88.847vw;
 
}
 
}
  
Line 969: 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,052: 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,118: 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,129: 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