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

 
(33 intermediate revisions by 4 users not shown)
Line 1: Line 1:
{{IGEM_TopBar}}
 
{{LINKS_China}}
 
 
<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---------------------------------------------->
 +
<head>
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/c/ce/T--LINKS_China--home_open_new.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/a/a1/T--LINKS_China--home_closed_new.png">
  
<div class="column full_size">
+
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/5/53/T--LINKS_China--team_open_new_v2.jpg">
<h1>Collaborations</h1>
+
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/9/92/T--LINKS_China--team_closed_new.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/9/99/T--LINKS_China--team_members_new_v2.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/6/62/T--LINKS_China--team_attributions_new_v2.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/2/21/T--LINKS_China--team_collaborations_new_v2.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/4/4a/T--LINKS_China--team_partnership_new_v2.png">
 +
 
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/2/21/T--LINKS_China--project_open_new_v2.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/4/40/T--LINKS_China--project_closed_new.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/7/7d/T--LINKS_China--project_description_new_v2.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/7/7b/T--LINKS_China--project_engineering_new_v2.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/9/91/T--LINKS_China--project_implementation_new_v2.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/7/76/T--LINKS_China--project_proofofconcept_new_v2.png">
 +
 
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/4/49/T--LINKS_China--parts_open_new_v2.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/1/16/T--LINKS_China--parts_closed_new.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/1/1b/T--LINKS_China--parts_partslist_new_v2.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/0/01/T--LINKS_China--parts_contribution_new_v2.png">
 +
 
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/c/c1/T--LINKS_China--wetlab_open_new_v2.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/3/39/T--LINKS_China--wetlab_closed_new.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/7/74/T--LINKS_China--wetlab_experiments_new_v2.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/c/cc/T--LINKS_China--wetlab_measurement_new_v2.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/b/b9/T--LINKS_China--wetlab_notebook_new_v2.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/1/1f/T--LINKS_China--wetlab_results_new_v2.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/6/6e/T--LINKS_China--wetlab_safety_new_v2.png">
 +
 
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/6/6f/T--LINKS_China--drylab_open_new_v2.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/6/6a/T--LINKS_China--drylab_closed_new.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/4/46/T--LINKS_China--drylab_modeling_new_v2.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/8/8d/T--LINKS_China--drylab_hardware_new_v2.png">
 +
 
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/7/79/T--LINKS_China--hps_open_new_v2.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/e/e6/T--LINKS_China--hps_closed_new.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/0/0a/T--LINKS_China--hps_ihps_new_v2.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/4/42/T--LINKS_China--hps_communication_new_v2.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/b/b9/T--LINKS_China--hps_sustainability_new_v2.png">
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/1/11/T--LINKS_China--hps_entreprenuership_new_v2.png">
 +
 
 +
</head>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<!------------------------------------------NavStart---------------------------------------------->
 +
<div id="outnav">
 +
 
 +
 
 +
 
 +
<!---Home Spider ---->
 +
  <a href="https://2021.igem.org/Team:LINKS_China"  class="dropbtn"><img src="https://static.igem.org/mediawiki/2021/3/33/T--LINKS_China--footer_teamlogo.png" id="homespider"></a>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<!---Seven Sections ---->
 +
<div class="sections">
 +
 
 +
 
 +
<!---Home ---->
 +
  <div class="dropdown" onmouseover="home_main.src='https://static.igem.org/mediawiki/2021/c/ce/T--LINKS_China--home_open_new.png'" onmouseout="home_main.src='https://static.igem.org/mediawiki/2021/a/a1/T--LINKS_China--home_closed_new.png'">
 +
  <a href="https://2021.igem.org/Team:LINKS_China"><img id="home_main" src="https://static.igem.org/mediawiki/2021/a/a1/T--LINKS_China--home_closed_new.png" class="dropbtn"></a>
 +
  </div>
 +
 
 +
 
 +
 
 +
<!---Team ---->
 +
  <div class="dropdown" onmouseover="team_main.src='https://static.igem.org/mediawiki/2021/5/53/T--LINKS_China--team_open_new_v2.jpg'" onmouseout="team_main.src='https://static.igem.org/mediawiki/2021/9/92/T--LINKS_China--team_closed_new.png'">
 +
    <img id="team_main" src="https://static.igem.org/mediawiki/2021/9/92/T--LINKS_China--team_closed_new.png" class="dropbtn">
 +
    <div class="dropdown-content">
 +
      <div><a href="https://2021.igem.org/Team:LINKS_China/Members"><img src='https://static.igem.org/mediawiki/2021/9/99/T--LINKS_China--team_members_new_v2.png' class="dropbtn"></a></div>
 +
      <div><a href="https://2021.igem.org/Team:LINKS_China/Attributions"><img src='https://static.igem.org/mediawiki/2021/6/62/T--LINKS_China--team_attributions_new_v2.png' class="dropbtn"></a></div>
 +
      <div><a href="https://2021.igem.org/Team:LINKS_China/Collaborations"><img src='https://static.igem.org/mediawiki/2021/2/21/T--LINKS_China--team_collaborations_new_v2.png' class="dropbtn" ></a></div>
 +
<div><a href="https://2021.igem.org/Team:LINKS_China/Partnership"><img src='https://static.igem.org/mediawiki/2021/4/4a/T--LINKS_China--team_partnership_new_v2.png' class="dropbtn" ></a></div>
 +
    </div>
 +
  </div>
 +
 
 +
 
 +
 
 +
<!---Project ---->
 +
  <div class="dropdown" onmouseover="project_main.src='https://static.igem.org/mediawiki/2021/2/21/T--LINKS_China--project_open_new_v2.png'" onmouseout="project_main.src='https://static.igem.org/mediawiki/2021/4/40/T--LINKS_China--project_closed_new.png'">
 +
    <img id="project_main" src="https://static.igem.org/mediawiki/2021/4/40/T--LINKS_China--project_closed_new.png" class="dropbtn">
 +
    <div class="dropdown-content">
 +
      <div><a href="https://2021.igem.org/Team:LINKS_China/Description"><img src='https://static.igem.org/mediawiki/2021/7/7d/T--LINKS_China--project_description_new_v2.png' class="dropbtn"></a></div>
 +
      <div><a href="https://2021.igem.org/Team:LINKS_China/Engineering"><img src='https://static.igem.org/mediawiki/2021/7/7b/T--LINKS_China--project_engineering_new_v2.png' class="dropbtn"></a></div>
 +
      <div><a href="https://2021.igem.org/Team:LINKS_China/Implementation"><img src='https://static.igem.org/mediawiki/2021/9/91/T--LINKS_China--project_implementation_new_v2.png' class="dropbtn" ></a></div>
 +
      <div><a href="https://2021.igem.org/Team:LINKS_China/Proof_Of_Concept"><img src='https://static.igem.org/mediawiki/2021/7/76/T--LINKS_China--project_proofofconcept_new_v2.png' class="dropbtn" ></a></div>
 +
    </div>
 +
  </div>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<!---Parts ---->
 +
 
 +
  <div class="dropdown" onmouseover="parts_main.src='https://static.igem.org/mediawiki/2021/4/49/T--LINKS_China--parts_open_new_v2.png'" onmouseout="parts_main.src='https://static.igem.org/mediawiki/2021/1/16/T--LINKS_China--parts_closed_new.png'">
 +
    <img id="parts_main" src="https://static.igem.org/mediawiki/2021/1/16/T--LINKS_China--parts_closed_new.png" class="dropbtn">
 +
    <div class="dropdown-content">
 +
      <div><a href="https://2021.igem.org/Team:LINKS_China/Parts_List"><img src='https://static.igem.org/mediawiki/2021/1/1b/T--LINKS_China--parts_partslist_new_v2.png' class="dropbtn"></a></div>
 +
      <div><a href="https://2021.igem.org/Team:LINKS_China/Contribution"><img src='https://static.igem.org/mediawiki/2021/0/01/T--LINKS_China--parts_contribution_new_v2.png' class="dropbtn"></a></div>
 +
    </div>
 +
  </div>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<!---Wet Lab ---->
 +
  <div class="dropdown" onmouseover="wetlab_main.src='https://static.igem.org/mediawiki/2021/c/c1/T--LINKS_China--wetlab_open_new_v2.png'" onmouseout="wetlab_main.src='https://static.igem.org/mediawiki/2021/3/39/T--LINKS_China--wetlab_closed_new.png'">
 +
    <img id="wetlab_main" src="https://static.igem.org/mediawiki/2021/3/39/T--LINKS_China--wetlab_closed_new.png" class="dropbtn">
 +
    <div class="dropdown-content">
 +
      <div><a href="https://2021.igem.org/Team:LINKS_China/Experiments"><img src='https://static.igem.org/mediawiki/2021/7/74/T--LINKS_China--wetlab_experiments_new_v2.png' class="dropbtn"></a></div>
 +
      <div><a href="https://2021.igem.org/Team:LINKS_China/Measurement"><img src='https://static.igem.org/mediawiki/2021/c/cc/T--LINKS_China--wetlab_measurement_new_v2.png' class="dropbtn"></a></div>
 +
      <div><a href="https://2021.igem.org/Team:LINKS_China/Notebook"><img src='https://static.igem.org/mediawiki/2021/b/b9/T--LINKS_China--wetlab_notebook_new_v2.png' class="dropbtn" ></a></div>
 +
      <div><a href="https://2021.igem.org/Team:LINKS_China/Results"><img src='https://static.igem.org/mediawiki/2021/1/1f/T--LINKS_China--wetlab_results_new_v2.png' class="dropbtn" ></a></div>
 +
      <div><a href="https://2021.igem.org/Team:LINKS_China/Safety"><img src='https://static.igem.org/mediawiki/2021/6/6e/T--LINKS_China--wetlab_safety_new_v2.png' class="dropbtn" ></a></div>
 +
    </div>
 +
  </div>
 +
 
 +
 
 +
 
 +
 
 +
<!---Dry Lab ---->
 +
  <div class="dropdown" onmouseover="drylab_main.src='https://static.igem.org/mediawiki/2021/6/6f/T--LINKS_China--drylab_open_new_v2.png'" onmouseout="drylab_main.src='https://static.igem.org/mediawiki/2021/6/6a/T--LINKS_China--drylab_closed_new.png'">
 +
    <img id="drylab_main" src="https://static.igem.org/mediawiki/2021/6/6a/T--LINKS_China--drylab_closed_new.png" class="dropbtn">
 +
    <div class="dropdown-content">
 +
      <div><a href="https://2021.igem.org/Team:LINKS_China/Model"><img src='https://static.igem.org/mediawiki/2021/4/46/T--LINKS_China--drylab_modeling_new_v2.png' class="dropbtn"></a></div>
 +
      <div><a href="https://2021.igem.org/Team:LINKS_China/Hardware"><img src='https://static.igem.org/mediawiki/2021/8/8d/T--LINKS_China--drylab_hardware_new_v2.png' class="dropbtn"></a></div>
 +
    </div>
 +
  </div>
 +
 
 +
 
 +
 
 +
<!---HPs---->
 +
  <div class="dropdown" onmouseover="hps_main.src='https://static.igem.org/mediawiki/2021/7/79/T--LINKS_China--hps_open_new_v2.png'" onmouseout="hps_main.src='https://static.igem.org/mediawiki/2021/e/e6/T--LINKS_China--hps_closed_new.png'">
 +
    <img id="hps_main" src="https://static.igem.org/mediawiki/2021/e/e6/T--LINKS_China--hps_closed_new.png" class="dropbtn">
 +
    <div class="dropdown-content">
 +
      <div><a href="https://2021.igem.org/Team:LINKS_China/Human_Practices"><img src='https://static.igem.org/mediawiki/2021/0/0a/T--LINKS_China--hps_ihps_new_v2.png' class="dropbtn"></a></div>
 +
      <div><a href="https://2021.igem.org/Team:LINKS_China/Communication"><img src='https://static.igem.org/mediawiki/2021/4/42/T--LINKS_China--hps_communication_new_v2.png' class="dropbtn"></a></div>
 +
      <div><a href="https://2021.igem.org/Team:LINKS_China/Sustainable"><img src='https://static.igem.org/mediawiki/2021/b/b9/T--LINKS_China--hps_sustainability_new_v2.png' class="dropbtn"></a></div>
 +
      <div><a href="https://2021.igem.org/Team:LINKS_China/Entrepreneurship"><img src='https://static.igem.org/mediawiki/2021/1/11/T--LINKS_China--hps_entreprenuership_new_v2.png' class="dropbtn"></a></div>
 +
    </div>
 +
  </div>
  
<p>
 
Sharing and collaboration are core values of iGEM. We encourage you to reach out and work with other teams on difficult problems that you can more easily solve together.
 
</p>
 
  
<h3>Silver Medal Criterion #2</h3>
 
<p>
 
Document your collaboration(s) clearly on this page to compete for the silver medal criterion #2 on collaboration.
 
  
<br><br>
 
Please see the <a href="https://2021.igem.org/Judging/Medals">2021 Medals Page</a> for more information.
 
</p>
 
 
</div>
 
</div>
 +
</div>
 +
<!------------------------------------------------NavEnd------------------------------------------------->
  
<div class="column two_thirds_size">
 
  
<h4> Which teams can we work with? </h4>
+
<div id="big_header">
<p>
+
    <img src="https://static.igem.org/mediawiki/2021/2/22/T--LINKS_China--bigheader_collaboration.jpg" style="position: absolute; top:12.7vw; left: 23vw; width: 54vw;">
You can work with any other iGEM 2021 team in the competition. You can also work with non-iGEM research groups, but they do not count towards the iGEM team collaboration silver medal criterion.
+
    <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;">
</p>
+
</div>
  
 +
<div id="main_content">
 +
<!-------------
 +
  <div id="horizontal_zipper_header">
 +
    <img src="https://static.igem.org/mediawiki/2021/7/72/T--LINKS_China--horizontal_zipper2.0.jpg"><img src="https://static.igem.org/mediawiki/2021/7/72/T--LINKS_China--horizontal_zipper2.0.jpg">
 +
  </div>--------->
 +
 
 +
  
 +
<!------------------------------------SIDEBAR_AND_TEXT------------------------------------->
 +
<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/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/3/35/T--LINKS_China--sectionguider_test3.2.jpg" id="section2_guider"></a></li>
 +
             
 +
              <li><a href="#section3"><img src="https://static.igem.org/mediawiki/2021/a/aa/T--LINKS_China--section_guidertest5.1.jpg" id="section3_guider"></a></li>             
 +
                         
 +
              <li><a href="#section4"><img src="https://static.igem.org/mediawiki/2021/0/03/T--LINKS_China--section_guidertest7.2.jpg" id="section4_guider"></a></li>             
 +
              <li><a href="#section5"><img src="https://static.igem.org/mediawiki/2021/c/cb/T--LINKS_China--section_guidertest8.1.jpg" id="section5_guider"></a></li>
 +
          </ul>
 +
 +
 +
 +
          <ul class="section_header" style="list-style: none !important;">
 +
              <li><img src="https://static.igem.org/mediawiki/2021/f/f4/T--LINKS_China--sidebar_team_1.png" id="section1_header"></li>
 +
              <li><img src="https://static.igem.org/mediawiki/2021/2/24/T--LINKS_China--sidebar_team_2.png" id="section2_header"></li>
 +
              <li><img src="https://static.igem.org/mediawiki/2021/8/8b/T--LINKS_China--sidebar_team_3.png" id="section3_header"></li>
 +
              <li><img src="https://static.igem.org/mediawiki/2021/d/d5/T--LINKS_China--sidebar_team_4.png" id="section4_header"></li>
 +
              <li><img src="https://static.igem.org/mediawiki/2021/6/60/T--LINKS_China--sidebar_team_5.png" id="section5_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">Cooperation</a></li>
 +
<li><a href="#section2">Dye education</a></li>
 +
<li><a href="#section3">Work with Whittle</a></li>
 +
<li><a href="#section4">Work with BNDS_China</a></li>
 +
<li><a href="#section5">Work with AISSU_Union</a></li>
 +
</ul>
 +
</nav>
 +
 +
  </div>
 +
<!------------------------------------SIDEBAR_END------------------------------------->
 +
 +
 +
<!------------------------------------TEXT_START------------------------------------->
 +
 +
  <div id="texts">
 +
 +
    <section id="">
 +
    <h1>Cooperation</h1>
 +
    <br>
 +
 +
    <div class="normal_texts">
 +
        <br>
 +
        <p>Along with making progressions in our own laboratory, we also reach out to make mutualistic connections with other iGEM teams. Some cooperative activities that we participated in are described below.</p>
 +
    <br>
 +
    </div>
 +
    </section>
 +
 +
 +
<br><br><br>
 +
 +
 +
    <section id="section1">
 +
    <h1>CCIC Event</h1>
 +
    <div class="normal_texts">
 +
      <br>
 +
        <p>In August, we participated actively in the 8th Conference of China iGEMer Community (CCIC). Due to the COVID-19 restrictions, we were unable to attend the physical meeting in Shanghai, but we joined the online meeting room and reached out to make connections with a variety of iGEM teams. As we were paying attention to the speeches delivered by other teams, we found out that some teams shared a common goal with us, or that part of their project were inspiring to our project. Directly after the meeting, we contacted several teams for brief discussions, but the communication did not extend itself into a long term collaboration.</p>
 +
        <p>For example, we had contacted with team SCUT-CHINA and obtained advices and inspiration regarding artistic representations of the project. Prior to construction of promotion video, we found it very difficult to design an animatic and artistic illustration of our project. PPT was too dull, and pure animation consumed too much time. Attracted by the unique and animated promotion video from SCUT-CHINA, we contacted the graphics leader of the team and asked for advices in making team representations. SCUT-CHINA offered us valuable and practical advices regarding the use of PPT and animations. They also recommended us useful apps like FOCUSKY.</p>
 +
        <p>Thanks to the CCIC meeting, we also made connections with BJU_China, NWU-CHINA-A, and QHFZ-China and developed closer collaborations in the future. Together, we hosted an online educational activity in September, and more detailed information was present in the following paragraph. </p>
 +
 +
    <div class="picture_and_explanation">
 +
          <img src="https://static.igem.org/mediawiki/2021/a/a5/T--LINKS_China--Presentation_poster_for_CCIC_event.png">
 +
          <p>Figure 1. Presentation poster for CCIC event</p>
 +
    </div>
 
</div>
 
</div>
 +
    <br>
 +
    </section>
  
 +
<br><br><br>
  
 +
    <section id="section2">
 +
<h1>Cooperation with BJU_China, NWU-CHINA-A, QHFZ-China</h1>
 +
    <div class="normal_texts">
 +
    <br>
 +
    <p>In September, BJU_China invited NWU-CHINA-A, QHFZ-China, and LINKS_China to hosted an online educational forum that is open to the public. The theme of the educational forum was about the history, application, production, and artistic importance of pigments and dyes. Synthetic biology was also a big part of the educational activity, since the activity is designed to publicize the idea that syn-bio technology can be applied to daily life events like the production of pigments and dyes. Together, the four teams hoped that this activity will help the public to develop deeper understanding about dyes and develop interest in synthetic biology.</p>
 +
    <p>The designated date for our team’s online presentation was September 19, and we hosted the forum using Tencent Meeting app to an audience group of more than 100 people. Most of our audiences were college students. During the presentation, we explained the cultural and historical significance of pigment by referencing its usage in the Greco-Roman Era and in the traditional Chinese tie-dye industry. We mentioned a variety of ways to manufacture dyes from fermenting the shells of snails to the employment of modern chemical additives. Last but not least, we linked dye production to the synthetic biology field by introducing the audience of pigments produced by genetically modified microorganisms. In the modern period, people do not have to rely on plants, animals, or chemicals to produce dye in traditional ways, but the syn-bio technology offers us a brand new way of manufacturing dyes using microorganisms like genetically modified E.coli.</p>
 +
    <p>Overall, the cooperative educational activity lasted for four days, and most of the audience members appreciated the activity and sent positive feedbacks.
 +
(Link to the recorded video of presentation posted on bilibili (<a href="https://b23.tv/vQqtLR">https://b23.tv/vQqtLR</a>)</p>
 +
  <div class="picture_and_explanation">
 +
      <img src="https://static.igem.org/mediawiki/2021/f/ff/T--LINKS_China--poster.png">
 +
      <p>Figure 2a. LINKS_China’s poster about the online forum. The words in the center advocate the audience to “join the adventure to the miraculous pigment world”<p>
 +
</div>
 +
  <div class="picture_and_explanation">
 +
      <img src="https://static.igem.org/mediawiki/2021/7/72/T--LINKS_China--colla2b.png">
 +
      <p>Figure 2.b Logo from NWU-CHINA-A, QHFZ-China, LINKS_China, and BJU_China; order from left to right<p>
 +
</div>
  
<div class="column third_size">
+
    <br></div>
<p>
+
    </section>
Here are some suggestions for projects you could work on with other teams:
+
</p>
+
  
<ul>
+
<br><br><br>
<li> Improve the function of another team's BioBrick Part or Device</li>
+
 
<li> Characterize another team's part </li>
+
    <section id="section3">
<li> Debug a construct </li>
+
<h1>Cooperation with Whittle</h1>
<li> Model or simulate another team's system </li>
+
    <div class="normal_texts">
<li> Test another team's software</li>
+
    <br>
<li> Help build and test another team's hardware project</li>
+
    <p>Sharing the same laboratory, we assisted members of Whittle in their daily experiments. Specifically, we gave them advices in expression of proteins and molecular cloning experiments. Moreover, we also contributed to the progression of Whittle’s project by giving them the ptac-RiboJ bio-brick and informed them ways to make use of it.</p>
<li> Mentor a high-school team</li>
+
  <div class="picture_and_explanation">
</ul>
+
      <img src="https://static.igem.org/mediawiki/2021/5/5b/T--LINKS_China--colla3.png">
 +
      <p><p>
 
</div>
 
</div>
 +
    <br></div>
 +
    </section>
 +
 +
<br><br><br>
 +
 +
    <section id="section4">
 +
<h1>Cooperation with BNDS_China</h1>
 +
    <div class="normal_texts">
 +
    <br>
 +
    <p>Facilitating the project development of BNDS_China, we invited them to visit our laboratory and use the microplate reader, which allowed them to test their sensor samples and receive a visual result. Using the microplate reader in our laboratory, BNDS_China was able to make quantitative measurement, which is a crucial criterion for bronze award.</p>
 +
    <p>In return, the instructor of BNDS_China, Tingzhen Liu, provided help to our hardware construction and gave useful suggestions to us for improvement of the NeoLeathic Tanner. </p>'
 +
  <div class="picture_and_explanation">
 +
      <img src="https://static.igem.org/mediawiki/2021/e/ed/T--LINKS_China--colla4.png">
 +
      <p><p>
 +
</div>
 +
    <br></div>
 +
    </section>
 +
    <br><br><br>
 +
 +
 +
    <section id="section5">
 +
<h1>Cooperation with AISSU-Union</h1>
 +
    <div class="normal_texts">
 +
    <br>
 +
<p>Sharing the same laboratory, we cooperate and build strong partnership with team AISSU-Union. The mutualistic bond between the two teams propels both teams to progress more efficiently and effectively. Cooperation with AISSU-Union includes utilizing of Yeast Toolkit, transformation of yeast, constructing plasmid vectors, and wiki support. A detailed description of the collaboration with AISSU-Union can be reviewed in the partnership page. (Link to partnership)</p>
 +
  <div class="picture_and_explanation">
 +
      <img src="https://static.igem.org/mediawiki/2021/f/fd/T--LINKS_China--colla5.png">
 +
      <p><p>
 +
</div>
 +
    <br></div>
 +
    </section>
 +
 +
<br><br><br>
 +
 +
 +
 +
 +
 +
 +
 +
</div>
 +
</div>
 +
<br><br><br>
 +
<!------------------------------------TEXT_END------------------------------------->
 +
 +
<div id="footer">
 +
  <div id="footer-text">
 +
    <h3>Sponsors</h3>
 +
  </div>
 +
  <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" style="width:auto;height:3.4722222222222vw;"></a>
 +
  </div>
 +
  <div id="linkspider-logo">
 +
    <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 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" style="width:auto;height:4.1666666666667vw;"></a>
 +
  </div>
 +
  <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" style="width:auto;height:5.2083333333333vw;"></a>
 +
  </div>
 +
  <div id="taft-logo">
 +
    <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 id="footer-text2">
 +
    <h3>Follow Us</h3>
 +
  </div>
 +
  <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" 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 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" 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 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" style="width:auto;height:4.8611111111111vw;"></a>
 +
  </div>
 +
  <img src="https://static.igem.org/mediawiki/2021/a/aa/T--LINKS_China--footer4.png" class="footer">
 +
</div>
 +
 +
 +
 +
 +
 +
 +
<style>
 +
html {
 +
scroll-behavior: smooth;
 +
}
 +
 +
 +
/*----------------------------------------FONTS--------------------------------------------*/
 +
@font-face{
 +
    font-family: "Jost" ;
 +
    src: url("https://static.igem.org/mediawiki/2021/6/65/T--LINKS_China--fonts_jost.ttf");
 +
}
 +
 +
 +
@font-face{
 +
    font-family: "Roboto";
 +
    src: url("https://static.igem.org/mediawiki/2021/6/66/T--LINKS_China--fonts_roboto_regular.ttf");
 +
}
 +
 +
@font-face{
 +
    font-family: "Lato";
 +
    src: url("https://static.igem.org/mediawiki/2021/d/d2/T--LINKS_China--fonts_lato_regular.ttf");
 +
}
 +
 +
 +
@font-face{
 +
    font-family: "Open Sans";
 +
    src: url("https://static.igem.org/mediawiki/2021/5/5e/T--LINKS_China--fonts_opensans.ttf");
 +
}
 +
 +
@font-face{
 +
    font-family: "LatoLight";
 +
    src: url("https://static.igem.org/mediawiki/2021/f/f9/T--LINKS_China--fonts_Latolight.ttf")
 +
}
 +
 +
 +
 +
 +
/*--------------------------------------BIG HEADER AND HORIZONTAL ZIPPER------------------------------------------*/
 +
#big_header{
 +
      width: 100vw;
 +
      height: 49vw;
 +
      background: url(https://static.igem.org/mediawiki/2021/6/6b/T--LINKS_China--headerimg_collaborationsv2.png);
 +
      background-attachment:scroll;
 +
      background-repeat: no-repeat;
 +
      background-position:top;
 +
      background-size: 105%;
 +
      padding: 0;
 +
    box-shadow: 0 0 0.4vw 0.4vw #fbedf3 inset;
 +
}
 +
 +
#big_header img{
 +
      width: 100vw;
 +
      height: auto;
 +
      padding: 0;
 +
}
 +
 +
 +
#horizontal_zipper_header{
 +
      display: flex;
 +
}
 +
 +
#horizontal_zipper_header img{
 +
      flex: 50%;
 +
      width: 48vw;
 +
      height: 1vw;
 +
      padding: 2vw;
 +
 +
}
 +
 +
 +
 +
 +
 +
 +
 +
 +
/*--------------------------------------SIDEBAR FOR COMPUTERS------------------------------------------*/
 +
 +
@media only screen and (min-device-width: 768px) {
 +
#sidebar_and_texts {
 +
  display: grid;
 +
  grid-template-columns: 0.27fr 1.63fr;
 +
  gap: 0px 0px;
 +
  align-items: baseline;
 +
}
 +
 +
#sidebar {
 +
  position: sticky;
 +
  top: 5vw;
 +
  left: 3vw;
 +
  margin: 0;
 +
  font-size: 2.25em;
 +
  line-height: 1.2;
 +
  height: 22vw;
 +
  width: 3.9vw;
 +
  border: 3.3px solid #600136;
 +
  border-radius: 1.25vw;
 +
  background-attachment:scroll;
 +
  background-repeat: no-repeat;
 +
  background-position:top;
 +
  background-size: 100%;
 +
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
 +
}
 +
 +
#sidebar .section_guider{
 +
    position: absolute;
 +
    z-index: 2;
 +
    list-style: none !important;
 +
}
 +
 +
 +
 +
#sidebar .section_guider li{
 +
    z-index: 2;
 +
    list-style: none !important;
 +
}
 +
 +
 +
#sidebar .section_guider img{
 +
    width: 2.56vw;
 +
    top: 4px;
 +
    margin: 0vw 0vw 0vw 0vw;
 +
    right: 36.7px;
 +
    height: auto;
 +
    z-index: 2;
 +
    list-style: none !important;
 +
    position: relative;
 +
}
 +
 +
#sidebar .section_header li{
 +
    z-index: 2;
 +
    list-style: none !important;
 +
    position: relative;
 +
}
 +
 +
#sidebar .section_header{
 +
    position: relative;
 +
    z-index: 2;
 +
    list-style: none !important;
 +
}
 +
 +
#sidebar .section_header img{
 +
    position: relative;
 +
    width: 11.2vw;
 +
    top: -1.3vw;
 +
    padding: 1.88vw 0vw 0vw 0vw;
 +
    right: 0.55vw;
 +
    height: auto;
 +
    z-index: 2;
 +
    list-style: none !important;
 +
    position: relative;
 +
    opacity: 0;
 +
    float: initial;
 +
}
 +
 +
#sidebar #top_button img{
 +
    position: relative;
 +
    width: 5vw;
 +
    top: 1.5vw;
 +
    left: -0.525vw;
 +
}
 +
 +
.section-nav{
 +
  display: none;
 +
}
 +
}
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
/*--------------------------------------SIDEBAR FOR IPADS AND PHONES------------------------------------------*/
 +
 +
 +
@media only screen and (max-device-width: 768px) {
 +
#sidebar_and_texts {
 +
  display: grid;
 +
  grid-template-columns: 0.31fr 1.59fr;
 +
  gap: 0px 0px;
 +
  align-items: baseline;
 +
}
 +
 +
#sidebar {
 +
  display: block;
 +
  border: 0px solid #600136;
 +
}
 +
 +
 +
#sidebar .section_guider{
 +
    display: none;
 +
}
 +
 +
 +
#sidebar .section_guider li{
 +
      display: none;
 +
}
 +
 +
 +
#sidebar .section_guider img{
 +
      display: none
 +
}
 +
 +
 +
#sidebar .section_header{
 +
    display: none;
 +
}
 +
 +
 +
#sidebar .section_header li{
 +
    display: none;
 +
}
 +
 +
 +
#sidebar .section_header img{
 +
    display: none;
 +
}
 +
 +
 +
#sidebar #top_button img{
 +
    display: none;
 +
}
 +
 +
 +
.section-nav{
 +
  display: block;
 +
  background-color: #FFFFFF;
 +
}
 +
.section-nav li.active > a {
 +
color: #630330;
 +
font-weight: 1200;
 +
}
 +
 +
/* Sidebar Navigation */
 +
.section-nav {
 +
padding-left: 0;
 +
border: 3px solid #efefef;
 +
        color: white;
 +
        width: 11vw;
 +
        height: 30vw;
 +
font-size: 9pt;
 +
        border-radius: 17px;
 +
}
 +
 +
.section-nav li {
 +
        list-style: none;
 +
}
 +
 +
 +
 +
.section-nav li a {
 +
text-decoration: none;
 +
display: block;
 +
padding: .125rem 0;
 +
color: #ccc;
 +
transition: all 50ms ease-in-out;
 +
        right: 3vw;
 +
}
 +
 +
 +
.section-nav a:hover,
 +
.section-nav a:focus {
 +
color: #630330;
 +
}
 +
}
 +
 +
 +
 +
 +
 +
 +
 +
/*--------------------------------------MAIN TEXTS------------------------------------------*/
 +
#texts{
 +
      position: relative;
 +
      top: 0vw;
 +
      padding: 3vw;
 +
      overflow: hidden;
 +
}
 +
 +
#texts h1{
 +
      font-size: 5em;
 +
      color: #630330;
 +
      font-family: 'Open Sans';
 +
      z-index: 5;
 +
      font-weight: bolder;
 +
      line-height: 1.2;
 +
      letter-spacing: 0.6px;
 +
      text-shadow: 2px 2px 5px #C0C0C0;
 +
}
 +
 +
 +
#texts .normal_texts h2{
 +
      font-size: 20pt;
 +
      font-weight: 520;
 +
      font-family: "Open Sans";
 +
      margin-left: 2.4vw;
 +
      margin-right: 2.4vw;
 +
      line-height: 2.3vw;
 +
}
 +
 +
 +
 +
#texts .normal_texts{
 +
      background: white;
 +
      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);
 +
      margin-left: 0.3vw;
 +
      margin-right: 3vw;
 +
}
 +
 +
 +
#texts .normal_texts p{
 +
      margin: 1.6vw 2.5vw;
 +
      font-size: 1.5em;
 +
      font-weight: 300;
 +
      font-family: "LatoLight";
 +
}
 +
 +
 +
#texts .normal_texts ol{
 +
      margin: 1.4vw 4.5vw;
 +
      font-size: 1.5em;
 +
      font-weight: 300;
 +
      font-family: "LatoLight";
 +
}
 +
 +
#texts .normal_texts li{
 +
      margin: 0.7vw;
 +
      font-weight: 300;
 +
      font-family: "LatoLight";
 +
}
 +
 +
 +
 +
 +
#texts .funfacts{
 +
      background-image:url(https://static.igem.org/mediawiki/2021/d/de/T--LINKS_China--funfacts_bubblev2.jpg);
 +
      width: 55vw;
 +
      height: 30vw;
 +
      margin-left: 7vw;
 +
      background-attachment:scroll;
 +
      background-repeat: no-repeat;
 +
      background-position:top;
 +
      background-size: 100%;
 +
     
 +
}
 +
 +
#texts .funfacts p{
 +
      position: relative;
 +
      top: 12.5vw;
 +
      margin-left: 8.7vw;
 +
      margin-right: 24vw;
 +
      margin-bottom: 0;
 +
}
 +
 +
 +
#texts .horizontal_zipper_texts{
 +
    width: 65vw;
 +
    height: auto;
 +
}
 +
 +
 +
 +
/*--------------------------------------IMAGES AND EXPLANATIONS------------------------------------------*/
 +
 +
.picture_and_explanation{
 +
      text-align: center !important;
 +
}
 +
 +
.picture_and_explanation img{
 +
      max-width: 60vw;
 +
      height: auto;
 +
}
 +
 +
.picture_and_explanation p{
 +
      text-align: center !important; 
 +
      font-size: 1.1em !important;
 +
      font-family: Arial;
 +
      color: grey;
 +
      margin-left: 5vw !important;
 +
      margin-right: 5vw !important;
 +
}
 +
 +
 +
 +
 +
/*--------------------------------------SIDENOTES------------------------------------------*/
 +
 +
#side_notes {
 +
      background: #dcdcdc;
 +
      margin: 1vw 5vw;
 +
}
 +
 +
#side_notes h2{
 +
      font-size: 20pt;
 +
      font-weight: 650;
 +
      font-family: "Open Sans";
 +
      padding: 2.1vw 1.5vw 0 1.5vw; 
 +
}
 +
 +
#side_notes p{
 +
      padding: 0 1.5vw 2.1vw 1.5vw; 
 +
}
 +
 +
 +
 +
 +
 +
/*--------------------------------------REFERENCES------------------------------------------*/
 +
 +
 +
#texts .references{
 +
      background: white;
 +
      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);
 +
      margin-left: 0.3vw;
 +
      margin-right: 3vw;
 +
      font-family: "LatoLight";
 +
}
 +
 +
 +
#texts .references ol{
 +
      margin: 2vw 2.5vw;
 +
      font-size: 1em;
 +
      font-family: "LatoLight";
 +
}
 +
 +
#texts .references li{
 +
      margin: 1vw;
 +
      font-family: "LatoLight";
 +
}
 +
 +
 +
 +
/*--------------------------------------MAIN BACKGROUND------------------------------------------*/
 +
#main_content{
 +
      background-image: url(https://static.igem.org/mediawiki/2021/2/22/T--LINKS_China--background_lightpurple.png);
 +
      background-attachment:scroll;
 +
      background-repeat: repeat;
 +
      background-position:top;
 +
      background-size: 100%;
 +
      width: auto;
 +
      height: auto;
 +
      background-blend-mode: lighten; 
 +
}
 +
 +
 +
 +
 +
 +
 +
/*--------------------------------------FOOTER------------------------------------------*/
 +
 +
 +
#footer{
 +
          background-image: url("https://static.igem.org/mediawiki/2021/0/0a/T--LINKS_China--footer_test1.png");
 +
}
 +
 +
.banner {
 +
  align: center;
 +
  height: auto;
 +
  width: 100vw;
 +
  margin-bottom: 0px;
 +
  padding-bottom: 0px;
 +
}
 +
 +
 +
 +
.footer {
 +
  align: center;
 +
  width: 100vw;
 +
  height: auto;
 +
  margin-bottom: 0px;
 +
  padding-bottom: 0px;
 +
}
 +
 +
 +
.footer img{
 +
  height: 3vw !important;
 +
}
 +
 +
 +
 +
 +
 +
 +
#snapgene-logo {
 +
  position: absolute;
 +
  bottom: 5.46vw;
 +
  left: 14.83vw;
 +
}
 +
 +
 +
#footer-divider {
 +
  position: absolute;
 +
  bottom: 3.82vw;
 +
  left: 18.75vw;
 +
}
 +
 +
h3 {
 +
  font-size: 200%;
 +
  color: #66023c;
 +
}
 +
 +
#footer-text {
 +
  position: absolute;
 +
  bottom: 11.111vw;
 +
  left: 7.139vw;
 +
}
 +
 +
#linkspider-logo {
 +
  position: absolute;
 +
  bottom: 9.0667vw;
 +
  left: 14.4vw;
 +
}
 +
 +
#basis-logo {
 +
  position: absolute;
 +
  bottom: 9.514vw;
 +
  left: 19.389vw;
 +
}
 +
 +
#scie-logo {
 +
  position: absolute;
 +
  bottom: 2.8139vw;
 +
  left: 40.07vw;
 +
}
 +
 +
#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;
 +
  bottom: 3.819vw;
 +
  left: 54.4vw;
 +
}
 +
 +
#footer-text2 {
 +
  position: absolute;
 +
  bottom: 11.11111vw;
 +
  left: 55.79vw;
 +
}
 +
 +
#ins-logo {
 +
  position: absolute;
 +
  bottom: 4.51389vw;
 +
  left: 56.7444vw;
 +
}
 +
 +
#footer-divider2 {
 +
  position: absolute;
 +
  bottom: 3.819vw;
 +
  left: 64.4vw;
 +
}
 +
 +
#bilibili-logo {
 +
  position: absolute;
 +
  bottom: 4.7555556vw;
 +
  left: 69.08vw;
 +
}
 +
 +
#footer-divider3 {
 +
  position: absolute;
 +
  bottom: 3.819vw;
 +
  left: 83.4vw;
 +
}
 +
 +
#email-logo {
 +
  position: absolute;
 +
  bottom: 4.5139vw;
 +
  left: 88.847vw;
 +
}
 +
 +
 +
 +
 +
 +
 +
 +
/*-----------------------------------------NAV_BAR_START-----------------------------------------------*/
 +
 +
 +
/* CLEAR DEFAULT SETTINGS **************************************************/
 +
#sideMenu, #top_title, .patrollink, #firstHeading,  #home_logo, #sideMenu { display:none; }
 +
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; border:none;}
 +
body, html {background-color:white; width: 100%; height: 100%;}
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
 +
#bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
 +
 +
/*Navigation Bar*/.
 +
* {
 +
  box-sizing: border-box;
 +
}
 +
 +
 +
/* Navbar container */
 +
#outnav {
 +
  overflow: visible;
 +
  zoom:1.0;
 +
  font-family: Arial;
 +
  position: fixed;
 +
  display: float;
 +
  z-index: 100;
 +
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
 +
  top: -100px;
 +
}
 +
 +
#outnav:after{
 +
  content:" ";
 +
  display: block;
 +
  clear: both;
 +
  height: 0;
 +
  visibility: hidden;
 +
  display: float;
 +
}
 +
 +
 +
#outnav img{
 +
  max-width: 100%;
 +
}
 +
 +
#homespider{
 +
  width: 7.7vw;
 +
  height: auto;
 +
  position: relative;
 +
  left: 1vw;
 +
}
 +
 +
/* Six sections */
 +
.sections{
 +
  display: flex;
 +
  column-gap: 0.4vw;
 +
  justify-content: space-between;
 +
  position: relative;
 +
  left: 2.8vw;
 +
}
 +
 +
 +
 +
/* Links (including logo) inside the navbar */
 +
#outnav a{
 +
  float: left;
 +
  text-align: center;
 +
}
 +
 +
 +
/* Dropdown container */
 +
.dropdown {
 +
  overflow: hidden;
 +
  float: left;
 +
}
 +
 +
 +
 +
/* Dropdown button */
 +
.dropdown .dropbtn {
 +
  width: 12.4vw;
 +
  height: auto;
 +
  position: relative;
 +
}
 +
 +
 +
 +
/* Dropdown content (hidden by default) */
 +
.dropdown-content {
 +
  display: none;
 +
  position: absolute;
 +
  object-fit:cover;
 +
}
 +
 +
 +
 +
/* Show dropdown content on hover */
 +
.dropdown:hover .dropdown-content {
 +
  display: block;
 +
  object-fit:cover;
 +
}
 +
 +
 +
 +
 +
#globalWrapper{
 +
    padding-bottom: 0px !important;
 +
}
 +
 +
</style>
 +
 +
 +
<!----------------------------SIDEBAR_EFFECT--------------------------->
 +
<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;
 +
window.onscroll = function() {
 +
var currentScrollPos = window.pageYOffset;
 +
  if (prevScrollpos > currentScrollPos) {
 +
    document.getElementById("outnav").style.top = "17px";
 +
    document.getElementById("sidebar").style.top = "9.7vw";
 +
  } else {
 +
    document.getElementById("outnav").style.top = "-100px";
 +
    document.getElementById("sidebar").style.top = "5vw";
 +
  }
 +
  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);
 +
  });
 +
 
 +
});
 +
</script>
 
</html>
 
</html>

Latest revision as of 15:25, 17 December 2021