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

 
(23 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 +
<style>
 +
.loading {
 +
    position: fixed;
 +
    left: 0px;
 +
    top: 0px;
 +
    width: 100vw;
 +
    height: 100vw;
 +
    z-index: 100;
 +
    background-color: #f6f2f4;
 +
}
 +
.loading img{
 +
    position: relative;
 +
    height: auto;
 +
    width: 70vw;
 +
    display: block;
 +
    margin: auto;
 +
        }
 +
</style>
  
 +
<div class="loading" >
 +
    <img src="https://static.igem.org/mediawiki/2021/b/be/T--LINKS_China--loadernew1.jpg">
 +
</div>
 +
 +
<script>
 +
    window.onload = function()
 +
    {
 +
        setTimeout(function(){$('.loading').fadeOut();}, 1000);
 +
    }
 +
 +
</script>
 
<!------------------------------------------Preloading---------------------------------------------->
 
<!------------------------------------------Preloading---------------------------------------------->
 
<head>
 
<head>
Line 170: Line 199:
  
 
<div id="big_header">
 
<div id="big_header">
     <img src="https://static.igem.org/mediawiki/2021/2/2e/T--LINKS_China--bigheader_sustainability.jpg" style="position: absolute; top:14.5vw; left: 20vw; width: 60vw;">
+
     <img src="https://static.igem.org/mediawiki/2021/2/2e/T--LINKS_China--bigheader_sustainability.jpg" style="position: absolute; top:15vw; left: 20vw; width: 60vw;">
     <img src="https://static.igem.org/mediawiki/2021/0/0f/T--LINKS_China--descriptionplace_lightpurple.jpg" style="position: absolute; top:12vw; left: 22.5vw; width: 55vw;">
+
     <img src="https://static.igem.org/mediawiki/2021/f/fa/T--LINKS_China--descriptionplace_darkpurple.jpg" style="position: absolute; top:12vw; left: 22.5vw; width: 55vw;">
 
</div>
 
</div>
  
Line 186: Line 215:
  
  
<!------------------------------------SIDEBAR_START------------------------------------->
 
  <div id="sidebar">
 
  
          <ul class="section_guider" style="list-style: none !important;">
 
              <li><a href="#section1"><img src="https://static.igem.org/mediawiki/2021/b/b4/T--LINKS_China--sectionguider_test1.2.jpg" id="section1_guider"></a></li>
 
              <li><a href="#section2"><img src="https://static.igem.org/mediawiki/2021/8/80/T--LINKS_China--sectionguider_test2.2.jpg
 
" id="section2_guider"></a></li>
 
              <li><a href="#section3"><img src="https://static.igem.org/mediawiki/2021/3/35/T--LINKS_China--sectionguider_test3.2.jpg" id="section3_guider"></a></li>
 
              <li><a href="#section4"><img src="https://static.igem.org/mediawiki/2021/b/b9/T--LINKS_China--section_guidertest4.1.jpg" id="section4_guider"></a></li>
 
              <li><a href="#section5"><img src="https://static.igem.org/mediawiki/2021/a/aa/T--LINKS_China--section_guidertest5.1.jpg" id="section5_guider"></a></li>             
 
              <li><a href="#section6"><img src="https://static.igem.org/mediawiki/2021/4/41/T--LINKS_China--section_guidertest6.1.jpg" id="section6_guider"></a></li>             
 
              <li><a href="#"><img src="https://static.igem.org/mediawiki/2021/0/03/T--LINKS_China--section_guidertest7.2.jpg" id="section7_guider"></a></li>             
 
              <li><a href="#"><img src="https://static.igem.org/mediawiki/2021/c/cb/T--LINKS_China--section_guidertest8.1.jpg" id="section8_guider"></a></li>
 
          </ul>
 
  
  
 +
<!------------------------------------TEXT_START------------------------------------->
  
          <ul class="section_header" style="list-style: none !important;">
+
  <div id="texts">
              <li><img src="https://static.igem.org/mediawiki/2021/c/c3/T--LINKS_China--section_header_purple.jpg" id="section1_header"></li>
+
    <h1>Sustainable Development Goals</h1>
              <li><img src="https://static.igem.org/mediawiki/2021/c/c3/T--LINKS_China--section_header_purple.jpg" id="section2_header"></li>
+
    <br>
              <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>
+
    <section class="normal_texts" id="section1">
 +
        <br>
 +
        <p>SDG6: Clean water and Sanitation</p>
 +
        <p> - Our leather product will be able to complete the sustainable development goal number 6, clean water and sanitation. Our project will rid pollution coming from traditional leather companies because we will not produce either metal pollution, water pollution, or gas pollution into the environment. Our product is fully natural and biodegradable, and would not in any ways harm the environment. </p>
 +
        <p>SDG13: Climate Action</p>
 +
        <p> - The leather industries have emitted large amounts of gas into the environment, contributing to global warming and climate changes. However, our product will change this issue because we don’t need the involvement of gases, and only require supplies such as tea and sugar. Therefore, we would solve the issues concerning gas pollution from the leather companies, and lead the leather industry to develop positive climate action </p>
 +
        <p>SDG15: Life on Land</p>
 +
        <p> - To protect the animals that were been exploited for the leather products they can provide out of their skin, we developed this BCM leather that can be produced from microorganisms without the need to harm any animals. The cows that would be slaughtered for their skin would be saved because we provided an alternative to leather products, and we would lead the leather market to raise the overall awareness of leather farms. </p>
 +
        <br><br>
 +
    </section>
 +
<br><br><br>
  
  
<nav class="section-nav">
+
<h1>Issues of Animal Leather</h1>
<ul>
+
<br>
<li><a href="#section1">Overview</a></li>
+
    <section class="normal_texts" id="section2">
<li><a href="#section2">Producing Bacterial Cellulose</a></li>
+
<br>
<li><a href="#section3">Spider Silk modification of BC’s properties</a></li>
+
    <p>The leather industry devoted to making leather from animal skin is causing tremendous damage to the environment. The food, pastureland, water, and fossil fuel required to raise livestock are all the causes to the high pollution and costs to the environment in farming industries, especially those designated to fulfill leather industrial needs. According to PETA, animals on industrial factory farms, especially leather industries, “produce 130 times as much excrement as the entire human population.” On average, there are more than 1.4 billion cows, sheep, or goats, and many other kinds of animals, that were killed each year for Leather, and there are 2.29 million of other animals like buffaloes, pigs, and others, that were also killed for their skin. The 90% of animal produce, including skin trims, hair, wastes, and others that are not valuable to producing leather, were all wasted despite recycling plans. The aim of our project is to replace the unsustainable traditional leather industry, and bring a new era of more efficient, sustainable, and qualitative leather production. Our project would decrease the waste by-products produced to a great extent because we use Bacterial Cellulose Membrane (BCM) produced by microorganisms as leather supplies instead of Animal Leather. This product will not cause any harm to the animal lives on land and takes the simplest and most sustainable form of the production of leather.</p>
<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>
+
<div class="picture_and_explanation">
<!------------------------------------SIDEBAR_END------------------------------------->
+
      <img src="https://static.igem.org/mediawiki/2021/0/04/T--LINKS_China--suta1.png" style="width: 70vw;">
 +
      <p>The above image represents the number of Cattles farmed for commercial purposes<p>
 +
</div>
  
  
<!------------------------------------TEXT_START------------------------------------->
 
  
  <div id="texts">
+
      <p>Around the world, the influence of leather products cannot be underestimated, as there are 24 billion meter squared of area dedicated for the production of leather on Earth, taking into account the deforested areas that were either used to produce leather or were chemically damaged by waste pollution. The chemical pollution that resulted from mineral salts, formaldehyde, coal-tar derivatives, oils, dyes, and cyanide has also brought serious impacts to the environment. Amongst the most severe is Chromium, which is devastating to plants. They specifically damage the Nitrogen, Nitrate, and the nutrient intake needed for specific stages of plant growth, causing plants and forests that were covered for leather production. However, the BCM we produce would eliminate the issue of chemical and metal pollution because chromium wouldn’t be involved in our production process but we will instead use ethanol in the cleaning process. Ethanol, when diluted to a certain amount, would cause no harm to the environment. The excess water in the traditional animal leather production that is wasted can even be reused in our production process. Therefore, there would be no harm to the environment nor the production industry. </p>
    <h1></h1>
+
    <br>
+
  
    <section class="normal_texts" id="section1">
+
<div class="picture_and_explanation">
        <br>
+
      <img src="https://static.igem.org/mediawiki/2021/5/55/T--LINKS_China--sustainable_kombucha.png" style="width: 46vw;">
        <br>
+
      <p>Kombucha that produces a bacterial cellulose membrane</p>
 +
</div><br><br>
 
     </section>
 
     </section>
 +
<br><br><br>
  
 +
<h1>Problems of Artificial Leather</h1>
 +
<br>
 +
    <section class="normal_texts" id="section3">
 +
<br>
  
<br><br><br>
 
  
    <h1></h1>
+
        <p>The leather industry not only has animal leather but also artificial leather, including Polyvinyl Chloride (PVC), plastic that is composed of fabric, foam coating, and lacquer, polymers, and others. Each of the components of plastic are harmful to the environment. The foam coating is to be kept rigid and was modified in the production process to make it better suited for being a product, but was unbiodegradable. In modern artificial leather industries, the amount of CO2 released is tremendous, reaching a 15,190 Kg of CO2 for every 100 m2. The global area that has been used for leather production has already reached 1/10 of the worlds’ total surface area, and it is yet increasing. This hugely contributed to global warming, provided that leather production specifically accounts for around 14.5% of global greenhouse gas emissions.</p>
    <section class="normal_texts" id="section2">
+
        <br>
+
        <br>
+
    </section>
+
  
<br><br><br>
+
<div class="picture_and_explanation">
 +
      <img src="https://static.igem.org/mediawiki/2021/f/f0/T--LINKS_China--suta2.png" style="width:70vw">
 +
      <p>Evolution of global population and global CO2 emission since 1900<p>
 +
</div>
 +
      <p>Gas emissions are not the only harm of artificial leather, but there is also the lack of biodegradability. As a common problem to the environment, the concern for plastic has always been the priority in international organizations. If they were put into nature without care, it would take them 450 years to fully degrade into the soil. However, we solve the problem because our product is 100% biodegradable. We have specifically designed it the opposite to how they design foam coating, that we make it as biodegradable as possible. It will return eventually to nature because it was produced in a natural way. </p>
  
  
<h1></h1>
+
<div class="picture_and_explanation">
    <section class="normal_texts" id="section3">
+
      <img src="https://static.igem.org/mediawiki/2021/6/6c/T--LINKS_China--sustainability_3.png" style="width:70vw">
    <br>
+
      <p>BCM produced in the Petri dish</p>
    <br>
+
</div>
    </section>
+
  
<br><br><br>
 
  
 +
<p>The production process of man-made leather also has significant issues. The major stage in the production process is the polymerization of vinyl chloride, which produces a substance called vinyl chloride monomer (VCM). During the process, the workers use liquid petroleum to put the vinyl compound through thermal extraction and will eventually produce VCM. However, due to properties of the VCM, it is easily flammable, and when put into the environment, they are able to destroy the natural environment in the area they were disposed. Such concerns are nonexistent in our project because our product will not have any direct nor indirect harm that would cause environmental damage. It is purely natural as the BCM was produced from tea. We will be able to produce a leather sheet the size of a lamb from only 10L of Kombucha, largely increasing the production efficiency.</p>
  
<h1></h1>
 
    <section class="normal_texts" id="section4">
 
        <br>
 
        <br>
 
    </section>
 
  
<br><br><br>
+
<div class="picture_and_explanation">
 +
      <img src="https://static.igem.org/mediawiki/2021/5/50/T--LINKS_China--sustainability_5.png" style="width:43vw">
 +
      <p>Our biodegradable leather put in soil for three days</p>
 +
</div>
  
  
<h1></h1>
+
<br><br></section>
    <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>
 
<br><br><br>
  
<h1></h1>
+
<h1>The Issues of Leather Tanning</h1>
    <section class="normal_texts" id="section7">
+
<br>
        <br>
+
    <section class="normal_texts" id="section4">
        <br>
+
<br>
    </section>
+
<p>Tanning is a specific process of the leather industry that treats the skin manufactured by the production line and prepares the leather for dyeing pigments. Through the process of tanning, the chemicals being used in the production process would stabilize the collagen in animal skin and make the property of leather rigid and fit for selling as a product. However, this action would eliminate the biodegradability of the leather produced. This undermines the attempt to reuse leather products due to its lack of biodegradability, though leather companies have proposed plans to recycle the excess animal skin. During the tanning process, one of the main components is magnesium metal, which is combined with Oxygen. When the metal gets into water, it would stain the water in that it would damage the wildlife in the water sources and will be spread into the ocean from the streams and rivers. In the United States, 70% of the water pollution came from the leather industries, and this data is not only limited to the states. </p>
 +
 
 +
<div class="picture_and_explanation">
 +
      <img src="https://static.igem.org/mediawiki/2021/0/0c/T--LINKS_China--suta3.png" style="width:70vw">
 +
      <p>Water pollution as a result of the tanning of leather</p>
 +
</div>
 +
 
 +
 
 +
<p>The bluish color in the water that was been disposed into the sewer system was a result of the magnesium pollution. The color is actually deadly to the waters in the underwater ecosystems. However, our product uses microorganisms to produce natural pigments that would not cause any damage to the environment. By adopting our product, it is possible to solve the issue of artificial heavy metal pollution. It is even possible for us to use the traditional leather production system of processing because our supplies are sustainable. Not only are we able to mimic the production process but also the properties of traditional leather, fully replenishing the leather industrial market. </p>
 +
 
 +
<div class="picture_and_explanation">
 +
      <img src="https://static.igem.org/mediawiki/2021/e/e6/T--LINKS_China--poc7.png" style="width:80vw">
 +
      <p>Our BCM leather product</p>
 +
</div>
 +
 
 +
 
 +
        <br><br>
 +
    </section>
 +
 
 +
 
 +
 
 +
 
  
 
<br><br><br>
 
<br><br><br>
  
 +
<h1>CO<sub>2</sub> Emission Comparisons</h1>
 +
<br>
 +
    <section class="normal_texts" id="section4">
 +
<br>
 +
<p>We performed calculations to show how Neoleather production produces less carbon dioxide than other leather production methods.</p>
 +
<p>To determine how much CO<sub>2</sub> is emitted when producing Neoleather, we split our calculations into two parts: raw materials for SCOBY and Neoleather tanning</p>
 +
 +
<div class="picture_and_explanation">
 +
      <img src="https://static.igem.org/mediawiki/2021/1/18/T--LINKS_China--neoleather_ratings.jpg" style="width:70vw">
 +
      <p>Process of calculating Neoleather tanning.</p>
 +
</div>
 +
 +
<p>We took the rating of each component of the Neoleathic tanner and multiplied them with the components' usage time respectively, thereby deriving the total amount of electrical energy needed to produce one piece (600cm<sup>2</sup>) of Neoleather. We then determined how much coal is needed to generate the required energy, and then calculated how much CO<sub>2</sub> is emitted from burning the amount of coal needed. In the end, we determined that 0.25kg of CO<sub>2</sub> is emitted to produce one piece of Neoleather, or 0.42kg to produce 1m<sup>2</sup> of Neoleather</p>
 +
 +
<br>
 +
 +
<div class="picture_and_explanation">
 +
      <img src="https://static.igem.org/mediawiki/2021/4/44/T--LINKS_China--rawmaterials2.jpg" style="width:70vw">
 +
      <p>Raw materials CO2 emissions</p>
 +
</div>
 +
 +
<p>We determined the raw materials and the amount of raw materials required for each aspect of Neoleather culturing. We then calculated the amount of CO<sub>2</sub> emitted to produce such raw materials. Finally, we combined all the individual CO<sub>2</sub> emission calculations and derived the total amount of CO<sub>2</sub> emitted, which is 0.47kg per 1m<sup>2</sup> Neoleather.</p>
 +
 +
<p>Combining both Neoleather tanning and raw materials CO<sub>2</sub> emissions, we determined that about 0.89kg of CO<sub>2</sub> is emitted when producing 1m<sup>2</sup> of finished Neoleather.
 +
<br>
 +
<p>We then searched data of CO<sub>2</sub> emissions of producing other types of leather. For every m<sup>2</sup> of leather produced, traditional leather (including cattle farming) emits 110kg of CO<sub>2</sub>, traditional leather (excluding cattle farming) emits 17kg of CO<sub>2</sub>, and faux leather emits 14kg of CO<sub>2</sub>:</p>
 +
 +
<div class="picture_and_explanation">
 +
      <img src="https://static.igem.org/mediawiki/2021/0/04/T--LINKS_China--co2comparison.jpg" style="width:70vw">
 +
      <p>Different types of leather CO<sub>2</sub> emissions comparison</p>
 +
</div>
 +
 +
<p>As shown by the chart above, Neoleather production emits extremely low CO<sub>2</sub> relative to production of other types of leather. It is safe to say that Neoleather is theoretically a low-carbon and environmental friendly material.</p>
 +
 +
<br><br>
 +
    </section>
 +
 +
 +
 +
 
  
  
Line 303: Line 368:
 
         <br>
 
         <br>
 
         <ol>
 
         <ol>
          <li></li>
+
          <li>https://amberoot.com/blogs/blog/the-environmental-and-social-impact-of-leather</li>
          <li></li>
+
          <li>https://www.peta.org/issues/animals-used-for-clothing/leather-industry/leather-environmental-hazards/?v2=1</li>
          <li></li>
+
          <li>https://www.fibre2fashion.com/industry-article/6870/environmental-problems-caused-by-leather-processing-units </li>
          <li></li>
+
          <li>https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3976926/ </li>
          <li></li>
+
          <li>https://www.teknorapex.com/the-pvc-production-process </li>
          <li></li>
+
          <li>https://www.chemicalsafetyfacts.org/polyvinyl-chloride/</li>
          <li></li>
+
          <li>M. Yuttitham, Shabbir H. Gheewala, A. Chidthaisong,
          <li></li>
+
Carbon footprint of sugar produced from sugarcane in eastern Thailand, Journal of Cleaner Production, Volume 19, Issues 17–18, 2011, Pages 2119-2127, ISSN 0959-6526, https://doi.org/10.1016/j.jclepro.2011.07.017.</li>
          <li></li>
+
          <li>Berners-Lee, M. (2010, June 17). What's the carbon footprint of ... A cup of tea or coffee? The Guardian. Retrieved December 17, 2021, from https://www.theguardian.com/environment/green-living-blog/2010/jun/17/carbon-footprint-of-tea-coffee </li>
 +
          <li>Braun, M., Muñoz, I., Schmidt, J.H. and Thrane, M. (2016), Sustainability of Soy Protein from Life Cycle Assessment. The FASEB Journal, 30: 894.5-894.5. https://doi.org/10.1096/fasebj.30.1_supplement.894.5</li>
 +
          <li>Adom, F. (September 30, 2015). MATERIAL AND ENERGY FLOWS IN THE PRODUCTION OF MACRO AND MICRONUTRIENTS, BUFFERS, AND CHEMICALS USED IN BIOCHEMICAL PROCESSES FOR THE PRODUCTION OF FUELS AND CHEMICALS FROM BIOMASS: Argonne National Laboratory.</li>
 +
          <li>Winnipeg, Canada. 2012. Emission factors in kg CO2-equivalent per unit. https://www.winnipeg.ca/finance/findata/matmgt/documents/2012/682-2012/682-2012_Appendix_H-WSTP_South_End_Plant_Process_Selection_Report/Appendix%207.pdf</li>
 +
          <li>https://360energy.net/how-does-using-energy-create-carbon-emissions/</li>
 +
          <li>https://www.mcginley.co.uk/news/how-much-of-each-energy-source-does-it-take-to-power-your-home/bp254/</li>
 
         </ol>
 
         </ol>
 
         <br>
 
         <br>
Line 324: Line 394:
  
 
<div id="footer">
 
<div id="footer">
  <div id="links-logo">
 
    <a href="https://2021.igem.org/Team:LINKS_China"><img src="https://static.igem.org/mediawiki/2021/3/33/T--LINKS_China--footer_teamlogo.png" height="100" width="auto"></a>
 
  </div>
 
  <div id="footer-divider">
 
    <img src="https://static.igem.org/mediawiki/2021/0/0d/T--LINKS_China--black_vertical_footer_divider2.png" height="125" width="2">
 
  </div>
 
 
   <div id="footer-text">
 
   <div id="footer-text">
 
     <h3>Sponsors</h3>
 
     <h3>Sponsors</h3>
 
   </div>
 
   </div>
 
   <div id="snapgene-logo">
 
   <div id="snapgene-logo">
     <a href="https://www.snapgene.com/"><img src="https://static.igem.org/mediawiki/2021/5/5e/T--LINKS_China--SnapGeneLogo.jpg"></a>
+
     <a href="https://www.snapgene.com/"><img src="https://static.igem.org/mediawiki/2021/5/5e/T--LINKS_China--SnapGeneLogo.jpg" style="width:auto;height:3.4722222222222vw;"></a>
 
   </div>
 
   </div>
 
   <div id="linkspider-logo">
 
   <div id="linkspider-logo">
     <img src="https://static.igem.org/mediawiki/2021/3/38/T--LINKS_China--linkspider_logo.png" height="100" width="auto">
+
     <a href="https://www.links-academy.net"><img src="https://static.igem.org/mediawiki/2021/3/38/T--LINKS_China--linkspider_logo.png" style="width:auto;height:4.8611111111111vw;"></a>
 
   </div>
 
   </div>
 
   <div id="basis-logo">
 
   <div id="basis-logo">
     <a href="https://basis-global.com/"><img src="https://static.igem.org/mediawiki/2021/7/7d/T--LINKS_China--basis_logo.png" height="100" width="auto"></a>
+
     <a href="https://basis-global.com/"><img src="https://static.igem.org/mediawiki/2021/7/7d/T--LINKS_China--basis_logo.png" style="width:auto;height:4.1666666666667vw;"></a>
 
   </div>
 
   </div>
 
   <div id="scie-logo">
 
   <div id="scie-logo">
     <a href="https://www.scie.com.cn/"><img src="https://static.igem.org/mediawiki/2021/e/ec/T--LINKS_China--scie_logo.png" height="100" width="auto"></a>
+
     <a href="https://www.scie.com.cn/"><img src="https://static.igem.org/mediawiki/2021/e/ec/T--LINKS_China--scie_logo.png" style="width:auto;height:5.2083333333333vw;"></a>
 
   </div>
 
   </div>
   <div id="footer-divider2">
+
   <div id="taft-logo">
     <img src="https://static.igem.org/mediawiki/2021/0/0d/T--LINKS_China--black_vertical_footer_divider2.png" height="125" width="2">
+
     <a href="https://www.taftschool.org/"><img src="https://static.igem.org/mediawiki/2021/5/55/T--LINKS_China--tuft_logo_tp.png" style="width:auto;height:4.5138888888889vw;"></a>
 +
  </div>
 +
  <div id="nanshan-logo">
 +
    <a href="http://www.szsy.cn"><img src="https://static.igem.org/mediawiki/2021/1/18/T--LINKS_China--nanshan_logo_new_tp.png" style="width:auto;height:2.7777777777778vw;"></a>
 +
  </div>
 +
  <div id="uwc-logo">
 +
    <a href="http://www.uwcchina.org/en"><img src="https://static.igem.org/mediawiki/2021/4/4e/T--LINKS_China--uwc_logo.png" style="width:auto;height:5.2083333333333vw;"></a>
 +
  </div>
 +
  <div id="vma-logo">
 +
    <a href="https://en.vankemeisha.com/"><img src="https://static.igem.org/mediawiki/2021/8/88/T--LINKS_China--vma_logo_tp.png" style="width:auto;height:5.9027777777778vw;"></a>
 +
  </div>
 +
  <div id="hotchkiss-logo">
 +
    <a href="https://www.hotchkiss.org/"><img src="https://static.igem.org/mediawiki/2021/6/67/T--LINKS_China--hotchkiss_logo.png" style="width:auto;height:4.8611111111111vw;"></a>
 +
  </div>
 +
  <div id="chelt-logo">
 +
    <a href="https://www.cheltladiescollege.org/"><img src="https://static.igem.org/mediawiki/2021/a/af/T--LINKS_China--chelt_logo.png" style="width:auto;height:5.2083333333333vw;"></a>
 +
  </div>
 +
  <div id="ridley-logo">
 +
    <a href="https://www.ridleycollege.com/"><img src="https://static.igem.org/mediawiki/2021/3/36/T--LINKS_China--ridley_logo.png" style="width:auto;height:4.8611111111111vw;"></a>
 +
  </div>
 +
  <div id="guangzhou-logo">
 +
    <a href="https://www.chgzfls.com"><img src="https://static.igem.org/mediawiki/2021/8/83/T--LINKS_China--guangzhou_logo_tp.png" style="width:auto;height:5.2083333333333vw;"></a>
 +
  </div>
 +
  <div id="gca-logo">
 +
    <a href="https://www.gcarams.org/"><img src="https://static.igem.org/mediawiki/2021/9/9f/T--LINKS_China--gca_logo_tp.png" style="width:auto;height:4.5138888888889vw;"></a>
 +
  </div>
 +
  <div id="footer-divider">
 +
    <img src="https://static.igem.org/mediawiki/2021/0/0d/T--LINKS_China--black_vertical_footer_divider2.png" style="width:0.13888888888889vw;height:8.6805555555556vw;">
 
   </div>
 
   </div>
 
   <div id="footer-text2">
 
   <div id="footer-text2">
Line 352: Line 443:
 
   </div>
 
   </div>
 
   <div id="ins-logo">
 
   <div id="ins-logo">
     <a href="https://www.instagram.com/links_china/"><img src="https://static.igem.org/mediawiki/2021/0/07/T--LINKS_China--ins_logo_tp.png" height="90" width="auto"></a>
+
     <a href="https://www.instagram.com/links_china/"><img src="https://static.igem.org/mediawiki/2021/0/07/T--LINKS_China--ins_logo_tp.png" style="width:auto;height:4.8611111111111vw;"></a>
 +
  </div>
 +
  <div id="footer-divider2">
 +
    <img src="https://static.igem.org/mediawiki/2021/0/0d/T--LINKS_China--black_vertical_footer_divider2.png" style="width:0.13888888888889vw;height:8.6805555555556vw;">
 
   </div>
 
   </div>
 
   <div id="bilibili-logo">
 
   <div id="bilibili-logo">
     <a href="https://space.bilibili.com/71190254?from=search&seid=7679001301054558817&spm_id_from=333.337.0.0"><img src="https://static.igem.org/mediawiki/2021/0/01/T--LINKS_China--bilibili_logo_tp.png" height="60" width="auto"></a>
+
     <a href="https://space.bilibili.com/71190254?from=search&seid=7679001301054558817&spm_id_from=333.337.0.0"><img src="https://static.igem.org/mediawiki/2021/0/01/T--LINKS_China--bilibili_logo_tp.png" style="width:auto;height:4.1666666666667vw;""></a>
 +
  </div>
 +
  <div id="footer-divider3">
 +
    <img src="https://static.igem.org/mediawiki/2021/0/0d/T--LINKS_China--black_vertical_footer_divider2.png" style="width:0.13888888888889vw;height:8.6805555555556vw;">
 
   </div>
 
   </div>
 
   <div id="email-logo">
 
   <div id="email-logo">
     <a href="mailto: links_china@outlook.com"><img src="https://static.igem.org/mediawiki/2021/d/df/T--LINKS_China--email_logo.png" height="90" width="auto"></a>
+
     <a href="mailto: links_china@outlook.com"><img src="https://static.igem.org/mediawiki/2021/d/df/T--LINKS_China--email_logo.png" style="width:auto;height:4.8611111111111vw;"></a>
 
   </div>
 
   </div>
 
   <img src="https://static.igem.org/mediawiki/2021/a/aa/T--LINKS_China--footer4.png" class="footer">
 
   <img src="https://static.igem.org/mediawiki/2021/a/aa/T--LINKS_China--footer4.png" class="footer">
Line 409: Line 506:
 
       width: 100vw;
 
       width: 100vw;
 
       height: 49vw;
 
       height: 49vw;
       background: url(https://static.igem.org/mediawiki/2021/4/43/T--LINKS_China--backgroundimg_results.jpg);
+
       background: url(https://static.igem.org/mediawiki/2021/3/3c/T--LINKS_China--bigimg_sustainable.png);
 
       background-attachment:scroll;
 
       background-attachment:scroll;
 
       background-repeat: no-repeat;
 
       background-repeat: no-repeat;
Line 448: Line 545:
 
@media only screen and (min-device-width: 768px) {
 
@media only screen and (min-device-width: 768px) {
 
#sidebar_and_texts {
 
#sidebar_and_texts {
  display: grid;
 
  grid-template-columns: 0.27fr 1.63fr;
 
  gap: 0px 0px;
 
  align-items: baseline;
 
 
}
 
}
  
Line 550: Line 643:
 
@media only screen and (max-device-width: 768px) {
 
@media only screen and (max-device-width: 768px) {
 
#sidebar_and_texts {
 
#sidebar_and_texts {
  display: grid;
 
  grid-template-columns: 0.31fr 1.59fr;
 
  gap: 0px 0px;
 
  align-items: baseline;
 
 
}
 
}
  
 
#sidebar {
 
#sidebar {
   display: block;
+
   display: none;
 
   border: 0px solid #600136;
 
   border: 0px solid #600136;
 
}
 
}
Line 598: Line 687:
  
 
.section-nav{
 
.section-nav{
   display: block;
+
   display: none;
 
   background-color: #FFFFFF;
 
   background-color: #FFFFFF;
 
}
 
}
Line 662: Line 751:
 
       letter-spacing: 0.6px;
 
       letter-spacing: 0.6px;
 
       text-shadow: 2px 2px 5px #C0C0C0;
 
       text-shadow: 2px 2px 5px #C0C0C0;
 +
      margin-left: 4.5vw;
 +
      margin-right: 4.5vw;
 
}
 
}
  
Line 680: Line 771:
 
       border-radius: 24px;
 
       border-radius: 24px;
 
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
       margin-left: 0.3vw;
+
       margin-left: 4.5vw;
       margin-right: 3vw;
+
       margin-right: 4.5vw;
 
}
 
}
  
Line 752: Line 843:
 
       font-family: Arial;
 
       font-family: Arial;
 
       color: grey;
 
       color: grey;
       text-align: center;
+
       text-align: center !important;
 
       margin-left: 5vw !important;
 
       margin-left: 5vw !important;
 
       margin-right: 5vw !important;
 
       margin-right: 5vw !important;
Line 789: Line 880:
 
       border-radius: 24px;
 
       border-radius: 24px;
 
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
       margin-left: 0.3vw;
+
       margin-left: 4.5vw;
       margin-right: 3vw;
+
       margin-right: 4.5vw;
 
       font-family: "LatoLight";
 
       font-family: "LatoLight";
 
}
 
}
Line 805: Line 896:
 
       font-family: "LatoLight";
 
       font-family: "LatoLight";
 
}
 
}
 +
 +
 +
 +
#show_on_click1, #show_on_click2, #show_on_click3, #show_on_click4, #show_on_click5{
 +
      display:none;
 +
      transition: all 0.5s !important;
 +
}
 +
 +
.show{
 +
      display:block !important;
 +
      transition: all 0.5s !important;
 +
}
 +
 +
 +
.show_buttons{
 +
    color: grey;
 +
    font-family: "Lato";
 +
    cursor: pointer;
 +
    border: none;
 +
    font-size: 1.5vw;
 +
}
 +
 +
 +
  
  
Line 810: Line 925:
 
/*--------------------------------------MAIN BACKGROUND------------------------------------------*/
 
/*--------------------------------------MAIN BACKGROUND------------------------------------------*/
 
#main_content{
 
#main_content{
       background-image: url(https://static.igem.org/mediawiki/2021/2/22/T--LINKS_China--background_lightpurple.png);
+
       background-image: url(https://static.igem.org/mediawiki/2021/e/e8/T--LINKS_China--background_darkpurple.png);
 
       background-attachment:scroll;
 
       background-attachment:scroll;
 
       background-repeat: repeat;
 
       background-repeat: repeat;
Line 859: Line 974:
  
  
#links-logo {
 
  position: absolute;
 
  bottom: 4.17vw;
 
  left: 10.4vw;
 
}
 
  
 
#snapgene-logo {
 
#snapgene-logo {
 
   position: absolute;
 
   position: absolute;
   bottom: 4.86vw;
+
   bottom: 5.46vw;
   left: 20.83vw;
+
   left: 14.83vw;
 
}
 
}
  
Line 886: Line 996:
 
   position: absolute;
 
   position: absolute;
 
   bottom: 11.111vw;
 
   bottom: 11.111vw;
   left: 20.139vw;
+
   left: 7.139vw;
 
}
 
}
  
 
#linkspider-logo {
 
#linkspider-logo {
 
   position: absolute;
 
   position: absolute;
   bottom: 4.1667vw;
+
   bottom: 9.0667vw;
   left: 43.4vw;
+
   left: 14.4vw;
 
}
 
}
  
 
#basis-logo {
 
#basis-logo {
 
   position: absolute;
 
   position: absolute;
   bottom: 4.514vw;
+
   bottom: 9.514vw;
   left: 51.389vw;
+
   left: 19.389vw;
 
}
 
}
  
 
#scie-logo {
 
#scie-logo {
 
   position: absolute;
 
   position: absolute;
   bottom: 4.5139vw;
+
   bottom: 2.8139vw;
   left: 60.07vw;
+
   left: 40.07vw;
 
}
 
}
  
#footer-divider2 {
+
#taft-logo {
 +
  position: absolute;
 +
  bottom: 9.375vw;
 +
  left: 24.305555555556vw;
 +
}
 +
 
 +
#nanshan-logo {
 +
  position: absolute;
 +
  bottom: 2.4305555555556vw;
 +
  left: 15.625vw;
 +
}
 +
 
 +
#vma-logo {
 +
  position: absolute;
 +
  bottom: 8.6805555555556vw;
 +
  left: 28.819444444444vw;
 +
}
 +
 
 +
#uwc-logo {
 +
  position: absolute;
 +
  bottom: 2.7777777777778vw;
 +
  left: 31.597222222222vw;
 +
}
 +
 
 +
#hotchkiss-logo {
 +
  position: absolute;
 +
  bottom: 9.0277777777778vw;
 +
  left: 34.722222222222vw;
 +
}
 +
 
 +
#chelt-logo {
 +
  position: absolute;
 +
  bottom: 9.0277777777778vw;
 +
  left: 39.236111111111vw;
 +
}
 +
 
 +
#ridley-logo {
 +
  position: absolute;
 +
  bottom: 9.0277777777778vw;
 +
  left: 43.75vw;
 +
}
 +
 
 +
#guangzhou-logo {
 +
  position: absolute;
 +
  bottom: 2.7777777777778vw;
 +
  left: 48.263888888889vw;
 +
}
 +
 
 +
#gca-logo {
 +
  position: absolute;
 +
  bottom: 9.0277777777778vw;
 +
  left: 48.611111111111vw;
 +
}
 +
 
 +
#footer-divider {
 
   position: absolute;
 
   position: absolute;
 
   bottom: 3.819vw;
 
   bottom: 3.819vw;
   left: 68.4vw;
+
   left: 54.4vw;
 
}
 
}
  
Line 916: Line 1,080:
 
   position: absolute;
 
   position: absolute;
 
   bottom: 11.11111vw;
 
   bottom: 11.11111vw;
   left: 69.79vw;
+
   left: 55.79vw;
 
}
 
}
  
Line 922: Line 1,086:
 
   position: absolute;
 
   position: absolute;
 
   bottom: 4.51389vw;
 
   bottom: 4.51389vw;
   left: 69.4444vw;
+
   left: 56.7444vw;
 +
}
 +
 
 +
#footer-divider2 {
 +
  position: absolute;
 +
  bottom: 3.819vw;
 +
  left: 64.4vw;
 
}
 
}
  
 
#bilibili-logo {
 
#bilibili-logo {
 
   position: absolute;
 
   position: absolute;
   bottom: 5.5555556vw;
+
   bottom: 4.7555556vw;
   left: 77.08vw;
+
   left: 69.08vw;
 +
}
 +
 
 +
#footer-divider3 {
 +
  position: absolute;
 +
  bottom: 3.819vw;
 +
  left: 83.4vw;
 
}
 
}
  
Line 934: Line 1,110:
 
   position: absolute;
 
   position: absolute;
 
   bottom: 4.5139vw;
 
   bottom: 4.5139vw;
   left: 87.847vw;
+
   left: 88.847vw;
 
}
 
}
  
Line 969: Line 1,145:
 
   z-index: 100;
 
   z-index: 100;
 
   transition: top 0.3s; /* Transition effect when sliding down (and up) */
 
   transition: top 0.3s; /* Transition effect when sliding down (and up) */
 +
  top:-100px;
 
}
 
}
  
Line 1,052: Line 1,229:
  
  
<!----------------------------SIDEBAR_EFFECT--------------------------->
 
 
<script>
 
<script>
$(document).ready( function() {
 
 
    $("#section1_guider").hover( function() {
 
        $("#section1_header").animate({opacity: 1}, 350);
 
    }, function() {
 
        $("#section1_header").animate({opacity: 0}, 150);
 
    });
 
 
 
    $("#section2_guider").hover( function() {
 
        $("#section2_header").animate({opacity: 1}, 350);
 
    }, function() {
 
        $("#section2_header").animate({opacity: 0}, 150);
 
    });
 
 
 
 
    $("#section3_guider").hover( function() {
 
        $("#section3_header").animate({opacity: 1}, 350);
 
    }, function() {
 
        $("#section3_header").animate({opacity: 0}, 150);
 
    });
 
 
 
    $("#section4_guider").hover( function() {
 
        $("#section4_header").animate({opacity: 1}, 350);
 
    }, function() {
 
        $("#section4_header").animate({opacity: 0}, 150);
 
    });
 
 
    $("#section5_guider").hover( function() {
 
        $("#section5_header").animate({opacity: 1}, 350);
 
    }, function() {
 
        $("#section5_header").animate({opacity: 0}, 150);
 
    });
 
 
    $("#section6_guider").hover( function() {
 
        $("#section6_header").animate({opacity: 1}, 350);
 
    }, function() {
 
        $("#section6_header").animate({opacity: 0}, 150);
 
    });
 
 
    $("#section7_guider").hover( function() {
 
        $("#section7_header").animate({opacity: 1}, 350);
 
    }, function() {
 
        $("#section7_header").animate({opacity: 0}, 150);
 
    });
 
    $("#section8_guider").hover( function() {
 
        $("#section8_header").animate({opacity: 1}, 350);
 
    }, function() {
 
        $("#section8_header").animate({opacity: 0}, 150);
 
    });
 
 
 
 
 
});
 
 
<!----------------------------NAVBAR_EFFECT--------------------------->
 
 
var prevScrollpos = window.pageYOffset;
 
var prevScrollpos = window.pageYOffset;
 
window.onscroll = function() {
 
window.onscroll = function() {
Line 1,118: Line 1,235:
 
   if (prevScrollpos > currentScrollPos) {
 
   if (prevScrollpos > currentScrollPos) {
 
     document.getElementById("outnav").style.top = "17px";
 
     document.getElementById("outnav").style.top = "17px";
    document.getElementById("sidebar").style.top = "9.7vw";
 
 
   } else {
 
   } else {
 
     document.getElementById("outnav").style.top = "-100px";
 
     document.getElementById("outnav").style.top = "-100px";
    document.getElementById("sidebar").style.top = "5vw";
 
 
   }
 
   }
 
   prevScrollpos = currentScrollPos;
 
   prevScrollpos = currentScrollPos;
Line 1,129: Line 1,244:
  
  
 +
function myFunction1() {
 +
  var element = document.getElementById("show_on_click1");
 +
  element.classList.toggle("show");
 +
}
  
 +
function myFunction2() {
 +
  var element = document.getElementById("show_on_click2");
 +
  element.classList.toggle("show");
 +
}
  
window.addEventListener('DOMContentLoaded', () => {
+
function myFunction3() {
 +
  var element = document.getElementById("show_on_click3");
 +
  element.classList.toggle("show");
 +
}
  
  const observer = new IntersectionObserver(entries => {
+
function myFunction4() {
    entries.forEach(entry => {
+
  var element = document.getElementById("show_on_click4");
      const id = entry.target.getAttribute('id');
+
  element.classList.toggle("show");
      if (entry.intersectionRatio > 0) {
+
}
        document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.add('active');
+
 
      } else {
+
function myFunction5() {
        document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.remove('active');
+
  var element = document.getElementById("show_on_click5");
      }
+
  element.classList.toggle("show");
    });
+
}
  });
+
  
  // Track all sections that have an `id` applied
 
  document.querySelectorAll('section[id]').forEach((section) => {
 
    observer.observe(section);
 
  });
 
 
 
});
 
 
</script>
 
</script>
 +
 
</html>
 
</html>

Latest revision as of 22:15, 17 December 2021