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

(Prototype team page)
 
 
(14 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">
 +
 +
<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/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 class="column full_size judges-will-not-evaluate">
 
<h3>★  ALERT! </h3>
 
<p>This page is used by the judges to evaluate your team for the <a href="https://2021.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2021.igem.org/Judging/Awards"> award listed below</a>. </p>
 
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2021.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
 
 
</div>
 
</div>
 +
</div>
 +
<!------------------------------------------------NavEnd------------------------------------------------->
  
  
<div class="clear"></div>
+
<div id="big_header">
 +
    <img src="https://static.igem.org/mediawiki/2021/3/3b/T--LINKS_China--bigheader_implementation.jpg" style="position: absolute; top:11.5vw; left: 19vw; width: 62vw;">
 +
    <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>--------->
 +
 
 +
  
<div class="column full_size">
+
<!------------------------------------SIDEBAR_AND_TEXT------------------------------------->
<h1>Proposed Implementation</h1>
+
<div id="sidebar_and_texts">
<h3>Silver Medal Criterion #4</h3>
+
  
<p>Explain how you would implement your project in the real world.
+
 
<br><br>
+
<!------------------------------------SIDEBAR_START------------------------------------->
Please see the <a href="https://2021.igem.org/Judging/Medals">2021 Medals Page</a> for more information. </p>
+
  <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/b/b9/T--LINKS_China--section_guidertest4.1.jpg" id="section3_guider"></a></li>
 +
              <li><a href="#section4"><img src="https://static.igem.org/mediawiki/2021/a/aa/T--LINKS_China--section_guidertest5.1.jpg" id="section4_guider"></a></li>                           
 +
              <li><a href="#section5"><img src="https://static.igem.org/mediawiki/2021/0/03/T--LINKS_China--section_guidertest7.2.jpg" id="section5_guider"></a></li>             
 +
              <li><a href="#section6"><img src="https://static.igem.org/mediawiki/2021/c/cb/T--LINKS_China--section_guidertest8.1.jpg" id="section6_guider"></a></li>
 +
          </ul>
 +
 
 +
 
 +
 
 +
          <ul class="section_header" style="list-style: none !important;">
 +
              <li><img src="https://static.igem.org/mediawiki/2021/9/9b/T--LINKS_China--sidebar_implementation1.png" id="section1_header"></li>
 +
              <li><img src="https://static.igem.org/mediawiki/2021/a/af/T--LINKS_China--sidebar_implementation2.png" id="section2_header"></li>
 +
              <li><img src="https://static.igem.org/mediawiki/2021/6/6a/T--LINKS_China--sidebar_implementation3.png" id="section3_header"></li>
 +
              <li><img src="https://static.igem.org/mediawiki/2021/0/08/T--LINKS_China--sidebar_implementation4.png" id="section4_header"></li>
 +
              <li><img src="https://static.igem.org/mediawiki/2021/8/84/T--LINKS_China--sidebar_implementation5.png" id="section5_header"></li>
 +
              <li><img src="https://static.igem.org/mediawiki/2021/9/9e/T--LINKS_China--sidebar_implementation6.png" id="section6_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">Abstract</a></li>
 +
<li><a href="#section2">Target 1: BCM Production</a></li>
 +
<li><a href="#section3">Target 2: Spider Silk</a></li>
 +
<li><a href="#section4">Target 3: Dye Production</a></li>
 +
<li><a href="#section5">Target 4: Yeast Engineering</a></li>
 +
<li><a href="#section6">Conclusion</a></li>
 +
</ul>
 +
</nav>
 +
 
 +
  </div>
 +
<!------------------------------------SIDEBAR_END------------------------------------->
 +
 
 +
<!------------------------------------TEXT_START------------------------------------->
 +
 
 +
  <div id="texts">
 +
    <h1>Background</h1>
 +
    <br>
 +
 
 +
    <section class="normal_texts" id="section1">
 +
        <br>
 +
<div class="picture_and_explanation">
 +
      <img src="https://static.igem.org/mediawiki/2021/c/ca/T--LINKS_China--im1.png">
 +
      <p><p>
 
</div>
 
</div>
  
 +
        <p>Leather production is a significant industry not only in China, but also in the entire world’s market. Though leather begins as a favorable byproduct of butcher houses, the leather industry nowadays is build on top of tons of polluted black water in the sewage and hills of white skull from slain animals. According to Food and Agricultural Organization of the United Nations, 6.5 million tons of raw bovine hide alone was produced in 2015, accounting for the slaughter of millions of cows. Skin from these dead beasts is brutally pealed off and further processed with chemicals like sodium dichromate in factories. Harmful chemicals often stay in the waste water discharged by the leather processing factories. Chromium, a crucial chemical used in the tanning process and often found in waste water, is proved to be a carcinogen that causes damage to blood, kidneys, eyes, heart, and lungs if overly consumed. Sadly, many of everyday companies and luxury companies are relying on the traditional leather producing industry for raw leather supply.</p>
 +
        <br>
 +
    </section>
 +
 +
 +
<br><br><br>
 +
 +
    <h1>Target User of the BC Membrane</h1>
 +
    <section class="normal_texts" id="section2">
 +
        <br>
 +
        <p>Targeting small entry lux companies in the fashion industry as our main end users, our product is designed to function as a more preferable substitute for the traditional leather producing industry. Considering that the fashion industry not only cares about the uniqueness of the raw material, but that it also put strong emphasis on the appearance of the material and the properties that the material possesses, we synthesize the BC leather using harmless microorganisms to grant it natural color and adding spider silk proteins produced by yeast and E.coli to modify its qualities. The combination of spider silk and colored cellulose membrane creates a surprisingly ductile and smooth material that may spark a revolution in the fashion industry. Thus, our product possesses unique properties that are more favorable and fashionable than that of tradition leather, and it is less costly comparing to the great amount of money required to graze the animals, shelter the animals, and process their skin. Therefore, our product will be a more affordable and preferable leather substitute especially for small entry lux companies.</p>
 +
<div class="picture_and_explanation">
 +
      <img src="https://static.igem.org/mediawiki/2021/c/c2/T--LINKS_China--im2.png">
 +
      <p><p>
 +
</div>
 +
        <br>
 +
    </section>
 +
 +
<br><br><br>
 +
 +
 +
<h1>Practical Application</h1>
 +
    <section class="normal_texts" id="section3">
 +
    <br>
 +
    <p>Primarily, we envision the usage of our product in the entry lux companies to start with increasing concern for animal welfare problems and sustainability issues created by the existing leather-producing industries. As the public become more aware of the cruelty behind animal skin and water pollution during the tanning process of leather production, those who are aware of the problems will naturally call for change. People will start to advocate against leather consumption, and some people will even stop purchasing leather products or switch to affordable leather substitutes and faux leathers.  Recognizing the change in the public’s attitude toward leather products, many entry lux companies that sell leather products will change to satisfy the demand of their consumers. Since our product is biodegradable and sustainable, as it is produced solely by harmless microorganisms like Komagataeibacter and brewer’s yeast, and that it is naturally colorful and aromatic, the BC leather will be an ideal supply choice for these entry lux companies. A company can easily turn the naturally dyed BC leather into delicate hand bags or comfortable shoes without doing much, since the BC leather itself is already softened by the addition of spider silk protein and dyed with natural pigments produced by microorganisms.</p>
 +
<div class="picture_and_explanation">
 +
      <img src="https://static.igem.org/mediawiki/2021/b/b3/T--LINKS_China--im3.png">
 +
      <p><p>
 +
</div>
 +
    <br>
 +
    </section>
 +
 +
<br><br><br>
 +
 +
 +
<h1>Possible Challenges</h1>
 +
    <section class="normal_texts" id="section4">
 +
        <br>
 +
        <p>Though our synthetic leather possesses unique traits that are preferable to the entry lux companies, one of the primary challenge that we need to take into consideration is the need of a sterilized assembly line for mass production. Since we are envisioning high demand for large area of BC leather from luxury companies, we have to be able to grow large pieces of BC membrane in sterilized environment to avoid contamination by foreign microorganisms. Although we are able to maintain a relatively small assembly line that produces healthy BC leather in the laboratory, a more perfected assembly line of bigger size will make our product more applicable in the real world.</p>
 +
        <br>
 +
    </section>
 +
 +
<br><br><br>
 +
 +
 +
<h1>Application of Byproducts</h1>
 +
    <section class="normal_texts" id="section5">
 +
        <br>
 +
        <p>Going in another direction, the byproduct of the BC leather, which is the indigo and Tyrian purple dye produced by microorganisms, can also be applied to the real world as a substitute to chemical dyes in the textile industry. Throughout history, dye plays an important role in human life. For example, the bandhnu, or the tie-dye technique, is culturally significant to Chinese people. Chinese families back then will use string to tie the fabrics and soak them in a huge tub containing Indigo dyes, and this way of dyeing is continuously used even in modern days. Looking back in history, the famous Tyrian purple dye is indeed a significant pigment to the Roman royalties. The pigment was sold in insanely high price because nobles and church members demand it in such a great quantity. Purple has been the color of royalty, and it is extremely difficult to produce using the shell of snails back then. Even in the modern period, naturally produced dye is very expensive, so various companies start to use chemically manufactured dyes that produce harm to the environment. Luckily, we can incorporate syn-bio techniques to solve this issue. Synthesizing dyes like indigo and Tyrian purple from tryptophan using E.coli will greatly reduce the cost of the product, thus producing cheaper dyes. It is possibly for us to supply the naturally produced indigo dye and Tyrian purple dye to textile factories that are seeking for a cheaper and environmental friendlier substitute of the traditional dye.</p>
 +
        <p>Maximizing the contributions that our project can offer to the real world, we also envision the usage of our synthetic yeast that can produce natural fragrance in the perfume industry. Other than using the yeast to add pleasant smell to our BC leather, we can supply our yeast to perfume companies that are searching for a cheap producer of sweet scent. Rather than mixing tons of oil extracted from various plants or produced by different chemicals, the company can easily purchase fragranced liquid produced by the harmless yeast.</p>
 +
        <p>ust to list out more possibilities, the leftover culture media can be utilized in the real world as well. The acetic acid produced during the fermentation of BC leather can be collected and used as raw materials for pills and medicines.</p>
 +
<div class="picture_and_explanation">
 +
      <img src="https://static.igem.org/mediawiki/2021/1/1e/T--LINKS_China--im4.png">
 +
      <p style="text-align: center !important;">Silk fabric dyed with our synthetic pigments<p>
 +
</div>       
 +
<br>
 +
    </section>
 +
    <br><br><br>
 +
<h1>Safety Concerns</h1>
 +
    <section class="normal_texts" id="section6">
 +
        <br>
 +
        <p>Concerning the safety aspect of the implementation of our project, we deliberately use Komagataeibacter and S. cerevisiae, which are both edible and possess minimal threat to the environment and the human body, to synthesize the BC leather. Various proteins produced by E.coli may be used to give the BC membrane preferable properties, but it also possesses minimal harm to the human body. Furthermore, our BC leather will be further manufactured into various products only for external uses when applied to the real world, which also guarantees safety since at no point will our product be directly consumed by the users through ingestion.</p>
 +
        <br>
 +
    </section>
 +
 +
<br><br><br>
 +
 +
 +
 +
 +
    <h1>References</h1>
 +
    <section class="references" id="section8">
 +
        <br>
 +
        <ol>
 +
          <p><i>1. Intergovernmental Group on Meat and Dairy Products Sub-group on Hides and Skins
 +
(2016). World statistical compendium for raw hides and skins, leather and leather footwear 1999-2015. Food and Agricultural Organization of the United Nations, I5599E/1/05.16
 +
</i></p>
 +
          <p><i>2. Dayan, A. D.; Paine, A. J. (2001). Mechanisms of chromium toxicity, carcinogenicity and allergenicity: Review of the literature from 1985 to 2000. Human & Experimental Toxicology. 20 (9): 439–451. doi:10.1191/096032701682693062. PMID 11776406.</i></p>
 +
        </ol>
 +
        <br>
 +
    </section>
 +
 +
 +
 +
</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/b/b7/T--LINKS_China--bigimg_implementation.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: 28vw;
 +
  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: 2vw;
 +
    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;
 +
}
 +
 +
 +
 +
 +
 +
 +
#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 22:33, 17 December 2021