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

 
(15 intermediate revisions by 3 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>Communication </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">
  
−
<h3>Gold Medal Criterion #6: Education & Communication</h3>
+
<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">
  
−
<p> Develop and implement education, science communication, and/or outreach materials related to synthetic biology.
+
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/4/49/T--LINKS_China--parts_open_new_v2.png">
−
<br><br>
+
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/1/16/T--LINKS_China--parts_closed_new.png">
−
All activities must follow Safety policies for <a href="https://2021.igem.org/Safety/Policies#subjects">Human Subjects Research</a>.
+
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/1/1b/T--LINKS_China--parts_partslist_new_v2.png">
−
<br><br>
+
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/0/01/T--LINKS_China--parts_contribution_new_v2.png">
−
Please see the <a href="https://2021.igem.org/Judging/Medals">2021 Medals Page</a> for more information.  
+
 
−
</p>
+
<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>
  
  
  
 
</div>
 
</div>
 +
</div>
 +
<!------------------------------------------------NavEnd------------------------------------------------->
 +
 +
 +
<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/f/fa/T--LINKS_China--descriptionplace_darkpurple.jpg" style="position: absolute; top:12vw; left: 22.5vw; width: 55vw;">
 +
</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">
 +
 +
 +
 +
 +
 +
<!------------------------------------TEXT_START------------------------------------->
 +
 +
  <div id="texts">
 +
    <h1>Online streaming education and social media account</h1>
 +
    <br>
 +
 +
    <section class="normal_texts" id="section1">
 +
        <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>
 +
 +
 +
<br><br><br>
 +
 +
    <h1>Roadshow</h1>
 +
    <section class="normal_texts" id="section2">
 +
        <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>
 +
    </section>
 +
 +
<br><br><br>
 +
 +
 +
<h1>The 5th Southern China Regional Meeting</h1>
 +
    <section class="normal_texts" id="section3">
 +
    <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>
 +
    </section>
 +
 +
<br><br><br>
 +
 +
 +
<h1>CCIC</h1>
 +
    <section class="normal_texts" id="section4">
 +
        <br>
 +
<div class="picture_and_explanation">
 +
      <img src="https://static.igem.org/mediawiki/2021/6/6f/T--LINKS_China--com2.png">
 +
      <p>CCiC<p>
 +
</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 helped LINKS_China get fully prepare for the final presentation in November.</p>
 +
        <br>
 +
    </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/f/f2/T--LINKS_China--bigimg_communication.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 {
 +
}
 +
 +
#sidebar {
 +
  position: sticky;
 +
  top: 5vw;
 +
  left: 3vw;
 +
  margin: 0;
 +
  font-size: 2.25em;
 +
  line-height: 1.2;
 +
  height: 34vw;
 +
  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.75vw 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: 0.5vw;
 +
    left: -0.525vw;
 +
}
 +
 +
.section-nav{
 +
  display: none;
 +
}
 +
}
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
/*--------------------------------------SIDEBAR FOR IPADS AND PHONES------------------------------------------*/
 +
 +
 +
@media only screen and (max-device-width: 768px) {
 +
#sidebar_and_texts {
 +
}
 +
 +
#sidebar {
 +
  display: none;
 +
  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: none;
 +
  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;
 +
      margin-left: 4.5vw;
 +
      margin-right: 4.5vw;
 +
}
 +
 +
 +
#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: 4.5vw;
 +
      margin-right: 4.5vw;
 +
}
 +
 +
 +
#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;
 +
}
 +
 +
.picture_and_explanation img{
 +
      max-width: 60vw;
 +
      height: auto;
 +
}
 +
 +
.picture_and_explanation p{
 +
      font-size: 1.1em !important;
 +
      font-family: Arial;
 +
      color: grey;
 +
      text-align: center;
 +
      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: 4.5vw;
 +
      margin-right: 4.5vw;
 +
      font-family: "LatoLight";
 +
}
 +
 +
 +
#texts .references ol{
 +
      margin: 2vw 2.5vw;
 +
      font-size: 1em;
 +
      font-family: "LatoLight";
 +
}
 +
 +
#texts .references li{
 +
      margin: 1vw;
 +
      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;
 +
}
 +
 +
 +
 +
 +
 +
 +
/*--------------------------------------MAIN BACKGROUND------------------------------------------*/
 +
#main_content{
 +
      background-image: url(https://static.igem.org/mediawiki/2021/e/e8/T--LINKS_China--background_darkpurple.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>
 +
 +
 +
<script>
 +
var prevScrollpos = window.pageYOffset;
 +
window.onscroll = function() {
 +
var currentScrollPos = window.pageYOffset;
 +
  if (prevScrollpos > currentScrollPos) {
 +
    document.getElementById("outnav").style.top = "17px";
 +
  } else {
 +
    document.getElementById("outnav").style.top = "-100px";
 +
  }
 +
  prevScrollpos = currentScrollPos;
 +
}
 +
 +
 +
 +
 +
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");
 +
}
 +
 +
function myFunction3() {
 +
  var element = document.getElementById("show_on_click3");
 +
  element.classList.toggle("show");
 +
}
 +
 +
function myFunction4() {
 +
  var element = document.getElementById("show_on_click4");
 +
  element.classList.toggle("show");
 +
}
 +
 +
function myFunction5() {
 +
  var element = document.getElementById("show_on_click5");
 +
  element.classList.toggle("show");
 +
}
  
 +
</script>
  
 
</html>
 
</html>

Latest revision as of 15:46, 17 December 2021