Difference between revisions of "Team:LINKS China/Proof Of Concept"

Line 1: Line 1:
−
{{IGEM_TopBar}}
 
−
{{LINKS_China}}
 
 
<html>
 
<html>
  
 +
<!------------------------------------------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">
 +
 +
<link rel="preload" as="image" href="https://static.igem.org/mediawiki/2021/5/53/T--LINKS_China--team_open_new_v2.jpg">
 +
<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/Modeling"><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/Integrated_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/Sustainability"><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 class="column full_size">
 
−
<h1>Proof of Concept</h1>
 
−
<h3>Gold Medal Criterion #4</h3>
 
−
<p>Expand upon your Silver medal work for Proposed Implementation and develop a proof of concept for your project.
 
  
−
<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 id="big_header">
 +
    <img src="https://static.igem.org/mediawiki/2021/1/15/T--LINKS_China--bigheader_proofofconcept.jpg" style="position: absolute; top:14vw; left: 17vw; width: 66vw;">
 +
    <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;">
 +
</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/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------------------------------------->
 +
 +
 +
<!------------------------------------TEXT_START------------------------------------->
 +
 +
  <div id="texts">
 +
    <h1></h1>
 +
    <br>
 +
 +
    <section class="normal_texts" id="section1">
 +
        <br>
 +
        <br>
 +
    </section>
 +
 +
 +
<br><br><br>
 +
 +
    <h1></h1>
 +
    <section class="normal_texts" id="section2">
 +
        <br>
 +
        <br>
 +
    </section>
 +
 +
<br><br><br>
 +
 +
 +
<h1></h1>
 +
    <section class="normal_texts" id="section3">
 +
    <br>
 +
    <br>
 +
    </section>
 +
 +
<br><br><br>
 +
 +
 +
<h1></h1>
 +
    <section class="normal_texts" id="section4">
 +
        <br>
 +
        <br>
 +
    </section>
 +
 +
<br><br><br>
 +
 +
 +
<h1></h1>
 +
    <section class="normal_texts" id="section5">
 +
        <br>
 +
        <br>
 +
    </section>
 +
    <br><br><br>
 +
<h1></h1>
 +
    <section class="normal_texts" id="section6">
 +
        <br>
 +
        <br>
 +
    </section>
 +
 +
<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>
 +
 +
 +
 +
</div>
 +
</div>
 +
<br><br><br>
 +
<!------------------------------------TEXT_END------------------------------------->
 +
 +
<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">
 +
    <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"></a>
 +
  </div>
 +
  <div id="linkspider-logo">
 +
    <img src="https://static.igem.org/mediawiki/2021/3/38/T--LINKS_China--linkspider_logo.png" height="100" width="auto">
 +
  </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" height="100" width="auto"></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" height="100" width="auto"></a>
 +
  </div>
 +
  <div id="footer-divider2">
 +
    <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-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" height="90" width="auto"></a>
 +
  </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" height="60" width="auto"></a>
 +
  </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" height="90" width="auto"></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/4/43/T--LINKS_China--backgroundimg_results.jpg);
 +
      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: 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 {
 +
  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;
 +
}
 +
 +
.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: 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;
 +
}
 +
 +
 +
 +
 +
 +
#links-logo {
 +
  position: absolute;
 +
  bottom: 4.17vw;
 +
  left: 10.4vw;
 +
}
 +
 +
#snapgene-logo {
 +
  position: absolute;
 +
  bottom: 4.86vw;
 +
  left: 20.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: 20.139vw;
 +
}
 +
 +
#linkspider-logo {
 +
  position: absolute;
 +
  bottom: 4.1667vw;
 +
  left: 43.4vw;
 +
}
 +
 +
#basis-logo {
 +
  position: absolute;
 +
  bottom: 4.514vw;
 +
  left: 51.389vw;
 +
}
 +
 +
#scie-logo {
 +
  position: absolute;
 +
  bottom: 4.5139vw;
 +
  left: 60.07vw;
 +
}
 +
 +
#footer-divider2 {
 +
  position: absolute;
 +
  bottom: 3.819vw;
 +
  left: 68.4vw;
 +
}
 +
 +
#footer-text2 {
 +
  position: absolute;
 +
  bottom: 11.11111vw;
 +
  left: 69.79vw;
 +
}
 +
 +
#ins-logo {
 +
  position: absolute;
 +
  bottom: 4.51389vw;
 +
  left: 69.4444vw;
 +
}
 +
 +
#bilibili-logo {
 +
  position: absolute;
 +
  bottom: 5.5555556vw;
 +
  left: 77.08vw;
 +
}
 +
 +
#email-logo {
 +
  position: absolute;
 +
  bottom: 4.5139vw;
 +
  left: 87.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) */
 +
}
 +
 +
#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>

Revision as of 11:33, 16 October 2021