Difference between revisions of "Team:LINKS China/Human Practices"

 
(30 intermediate revisions by one other user 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/6/6d/T--LINKS_China--bigheader_ihps.jpg" style="position: absolute; top:12.5vw; left: 16vw; width: 68vw;">
+
     <img src="https://static.igem.org/mediawiki/2021/6/6d/T--LINKS_China--bigheader_ihps.jpg" style="position: absolute; top:16vw; left: 16vw; width: 68vw;">
     <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;">
+
     <img src="https://static.igem.org/mediawiki/2021/f/fa/T--LINKS_China--descriptionplace_darkpurple.jpg" style="position: absolute; top:15vw; left: 22.5vw; width: 55vw;">
 
</div>
 
</div>
  
Line 185: Line 214:
 
<div id="sidebar_and_texts">
 
<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/a/a5/T--LINKS_China--sectionguider_purple1.png" id="section1_guider"></a></li>
 
              <li><a href="#section2"><img src="https://static.igem.org/mediawiki/2021/c/c0/T--LINKS_China--sectionguider_purple2.png
 
" id="section2_guider"></a></li>
 
              <li><a href="#section3"><img src="https://static.igem.org/mediawiki/2021/1/1b/T--LINKS_China--sectionguider_purple3.png" id="section3_guider"></a></li>
 
              <li><a href="#section4"><img src="https://static.igem.org/mediawiki/2021/2/29/T--LINKS_China--sectionguider_purple4.png" id="section4_guider"></a></li>
 
              <li><a href="#section5"><img src="https://static.igem.org/mediawiki/2021/6/6c/T--LINKS_China--sectionguider_purple5.png" id="section5_guider"></a></li>             
 
              <li><a href="#section6"><img src="https://static.igem.org/mediawiki/2021/e/e6/T--LINKS_China--sectionguider_purple6.png" id="section6_guider"></a></li>             
 
              <li><a href="#"><img src="https://static.igem.org/mediawiki/2021/c/c2/T--LINKS_China--sectionguider_purple7.png" id="section7_guider"></a></li>             
 
              <li><a href="#"><img src="https://static.igem.org/mediawiki/2021/c/ca/T--LINKS_China--sectionguider_purple8.png" id="section8_guider"></a></li>
 
          </ul>
 
 
 
 
          <ul class="section_header" style="list-style: none !important;">
 
              <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section1_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section2_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section3_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section4_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section5_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section6_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section7_header"></li>
 
              <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" 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">section1</a></li>
 
<li><a href="#section2">section2</a></li>
 
<li><a href="#section3">section3</a></li>
 
<li><a href="#section4">section4</a></li>
 
<li><a href="#section5">section5</a></li>
 
<li><a href="#section6">section6</a></li>
 
<li><a href="#section7">section7</a></li>
 
<li><a href="#section8">section8</a></li>
 
</ul>
 
</nav>
 
 
  </div>
 
<!------------------------------------SIDEBAR_END------------------------------------->
 
  
  
Line 255: Line 237:
 
     <section id="section2">
 
     <section id="section2">
 
     <h1>Interview a leather producer</h1>
 
     <h1>Interview a leather producer</h1>
     <section class="normal_texts">
+
     <div class="normal_texts">
 
         <br>
 
         <br>
 
         <p>First, we need to figure out why the market size of traditional leather market keeps growing and what are the advantages of animal furs that attract consumers to buy. To know that, we interviewed Mr. Song from Aowang Clothing Company which insists on utilizing animal fur to produce leather.  </p>
 
         <p>First, we need to figure out why the market size of traditional leather market keeps growing and what are the advantages of animal furs that attract consumers to buy. To know that, we interviewed Mr. Song from Aowang Clothing Company which insists on utilizing animal fur to produce leather.  </p>
Line 286: Line 268:
  
 
     <section id="section3">
 
     <section id="section3">
<h1>Consumer attitudes toward new leather material</h1>
+
    <h1>Consumer attitudes toward new leather material</h1>
     <section class="normal_texts">
+
     <div class="normal_texts">
 
     <br>
 
     <br>
 
     <p>After interviewing Aowang Clothing Company, we planned to identify the types of customers that might show interest to our product, so we sent out a questionnaire online. Through the questionnaire, we recognized the preference of potential consumers on leather products and types of consumers preferred purchasing biodegradable leather.  </p>
 
     <p>After interviewing Aowang Clothing Company, we planned to identify the types of customers that might show interest to our product, so we sent out a questionnaire online. Through the questionnaire, we recognized the preference of potential consumers on leather products and types of consumers preferred purchasing biodegradable leather.  </p>
 
     <p>As we found out that different customers tend to have different consumption behavior on leather products, we decided to discover the type of customers which prefer our biosynthesized and biodegradable leather the most. Therefore, we send out a questionnaire online to ask for the attitudes of consumers who tend to purchase leather products. Through this questionnaire, we identified the potential consumers of our product, and started to specify on developing characteristics that most consumers care about leather products. </p>
 
     <p>As we found out that different customers tend to have different consumption behavior on leather products, we decided to discover the type of customers which prefer our biosynthesized and biodegradable leather the most. Therefore, we send out a questionnaire online to ask for the attitudes of consumers who tend to purchase leather products. Through this questionnaire, we identified the potential consumers of our product, and started to specify on developing characteristics that most consumers care about leather products. </p>
 +
        <p>To see more details, click <button  onclick="myFunction6()" class="show_buttons">here</button></p>
 +
 +
          <div id="show_on_click6">
 +
                <object data="https://static.igem.org/mediawiki/2021/3/30/T--LINKS_China--HP_Question.pdf" type="application/pdf" width="100%" height=850>
 +
                      <p>Current browser doesn't support PDF. Download It:
 +
                      <a href=" ">Download PDF</a >.</p >
 +
                </object><br><br><br>
 +
          </div>
 
     <br>
 
     <br>
 
     </div>
 
     </div>
Line 298: Line 288:
  
  
 +
 +
    <section id="section4">
 
<h1>Material Theory Research—hydrogel experts Interview</h1>
 
<h1>Material Theory Research—hydrogel experts Interview</h1>
     <section class="normal_texts" id="section4">
+
     <div class="normal_texts">
 
         <br>
 
         <br>
 
         <p>After identifying consumers and properties of leather that we need to develop, we started the theory studies and experiments exploration.  
 
         <p>After identifying consumers and properties of leather that we need to develop, we started the theory studies and experiments exploration.  
Line 317: Line 309:
 
</div>
 
</div>
 
         <br><br>
 
         <br><br>
 +
    </div>
 
     </section>
 
     </section>
  
Line 322: Line 315:
  
  
 +
    <section id="section5">
 
<h1>Learning fermentation techniques</h1>
 
<h1>Learning fermentation techniques</h1>
     <section class="normal_texts" id="section5">
+
     <div class="normal_texts">
 
         <br>
 
         <br>
 
         <p>While we are experimenting on the SCOBY (symbiotic culture of bacteria and yeast) fermentation in a large scale, we encountered an issue that SCOBY was usually contaminated during the fermentation process, which largely affected our experimental progress. </p>
 
         <p>While we are experimenting on the SCOBY (symbiotic culture of bacteria and yeast) fermentation in a large scale, we encountered an issue that SCOBY was usually contaminated during the fermentation process, which largely affected our experimental progress. </p>
Line 336: Line 330:
 
                       <a href=" ">Download PDF</a >.</p >
 
                       <a href=" ">Download PDF</a >.</p >
 
                 </object><br><br><br></div>
 
                 </object><br><br><br></div>
<div class="picture_and_explanation">
+
  <video controls style="margin-left: 9vw; width: 60vw;">
      <img src="https://static.igem.org/mediawiki/2021/9/92/T--LINKS_China--overview1.png">
+
    <source src="https://static.igem.org/mediawiki/2021/2/2d/T--LINKS_China--HP_demo2KASHI.mov" type="video/mp4">
      <p><p>
+
  </video>
</div>
+
         <br><br><br>
         <br><br>
+
    </div>
 
     </section>
 
     </section>
  
Line 346: Line 340:
  
 
     <br><br><br>
 
     <br><br><br>
 +
 +
 +
    <section id="section6">
 
<h1>The potential of new leather production methods</h1>
 
<h1>The potential of new leather production methods</h1>
     <section class="normal_texts" id="section6">
+
     <div class="normal_texts">
 
         <br>
 
         <br>
 
         <p>As we have more experimental foundations and deeper understanding to the leather market, we wondered about the acceptance and attitudes of traditional industrial companies toward biosynthesized products.  
 
         <p>As we have more experimental foundations and deeper understanding to the leather market, we wondered about the acceptance and attitudes of traditional industrial companies toward biosynthesized products.  
Line 358: Line 355:
 
                       <a href=" ">Download PDF</a >.</p >
 
                       <a href=" ">Download PDF</a >.</p >
 
                 </object><br><br><br></div>
 
                 </object><br><br><br></div>
<div class="picture_and_explanation">
+
  <video controls style="margin-left: 9vw; width: 60vw;">
      <img src="https://static.igem.org/mediawiki/2021/7/71/T--LINKS_China--overview2.png">
+
    <source src="https://static.igem.org/mediawiki/2021/3/39/T--LINKS_China--HP_demo.BODUN.mov" type="video/mp4">
      <p>2<p>
+
  </video>
</div>
+
         <br><br><br>
         <br><br>
+
    </div>
 
     </section>
 
     </section>
  
 
<br><br><br>
 
<br><br><br>
  
 +
 +
    <section id="section7">
 
<h1>Developing our business model</h1>
 
<h1>Developing our business model</h1>
     <section class="normal_texts" id="section7">
+
     <div class="normal_texts">
 
         <br>
 
         <br>
 
         <p>After getting our biosynthesized leather ready for massive industrial production and sales, we realized that we need a large amount of money to purchase expensive equipment for enlarging the leather production in labs to industries. Hence, we began to plan marketing and finding investors for our startup of entrepreneurship. Jennifer Zhang, one of the potential investor of our project, watched the presentation we gave and provided insightful advices for us to solidify our business model. (click the entrepreneurship link to view more details)  
 
         <p>After getting our biosynthesized leather ready for massive industrial production and sales, we realized that we need a large amount of money to purchase expensive equipment for enlarging the leather production in labs to industries. Hence, we began to plan marketing and finding investors for our startup of entrepreneurship. Jennifer Zhang, one of the potential investor of our project, watched the presentation we gave and provided insightful advices for us to solidify our business model. (click the entrepreneurship link to view more details)  
Line 379: Line 378:
 
</div>
 
</div>
 
         <br><br>
 
         <br><br>
 +
    </div>
 
     </section>
 
     </section>
  
 
<br><br><br>
 
<br><br><br>
  
 +
 +
    <section id="section8">
 
<h1>Interview potential consumers for leather product</h1>
 
<h1>Interview potential consumers for leather product</h1>
     <section class="normal_texts" id="section7">
+
     <div class="normal_texts">
 
         <br>
 
         <br>
 
         <p>To figure out the characteristics of leather that most consumers care about, we interviewed headquarters of EEKA fashion company that focused on women’s apparel. EEKA fashion answered that the properties of materials are usually the most considered by customers when purchasing leather-made clothes. There are indeed consumers care about environmental harm and sustainability of leather, however, properties of leather is the most important factors that most consumers would care. EEKA fashion’s response reflected that consumers are willing to try biodegradable leather if the leather has the similar properties as traditional leather. Through the interview, we further recognize the area that we need to work on to satisfy consumers and replace traditional leather. </p>
 
         <p>To figure out the characteristics of leather that most consumers care about, we interviewed headquarters of EEKA fashion company that focused on women’s apparel. EEKA fashion answered that the properties of materials are usually the most considered by customers when purchasing leather-made clothes. There are indeed consumers care about environmental harm and sustainability of leather, however, properties of leather is the most important factors that most consumers would care. EEKA fashion’s response reflected that consumers are willing to try biodegradable leather if the leather has the similar properties as traditional leather. Through the interview, we further recognize the area that we need to work on to satisfy consumers and replace traditional leather. </p>
Line 396: Line 398:
 
                 </object><br><br><br></div>
 
                 </object><br><br><br></div>
  
<div class="picture_and_explanation">
+
  <video controls style="margin-left: 9vw; width: 60vw;">
      <img src="https://static.igem.org/mediawiki/2021/1/10/T--LINKS_China--over4.png">
+
    <source src="https://static.igem.org/mediawiki/2021/9/9f/T--LINKS_China--HP_DEMOshishang.mov" type="video/mp4">
      <p><p>
+
  </video>
</div>
+
 
            
 
            
         <br><br>
+
         <br><br><br>
 +
    </div>
 
     </section>
 
     </section>
  
Line 415: Line 417:
  
 
<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 443: Line 466:
 
   </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 500: Line 529:
 
       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/7/70/T--LINKS_China--bigimg_ihps.png);
 
       background-attachment:scroll;
 
       background-attachment:scroll;
 
       background-repeat: no-repeat;
 
       background-repeat: no-repeat;
 
       background-position:top;
 
       background-position:top;
       background-size: 105%;
+
       background-size: 110%;
 
       padding: 0;
 
       padding: 0;
 
     box-shadow: 0 0 0.4vw 0.4vw #fbedf3 inset;
 
     box-shadow: 0 0 0.4vw 0.4vw #fbedf3 inset;
Line 539: Line 568:
 
@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 641: Line 666:
 
@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 689: Line 710:
  
 
.section-nav{
 
.section-nav{
   display: block;
+
   display: none;
 
   background-color: #FFFFFF;
 
   background-color: #FFFFFF;
 
}
 
}
Line 753: Line 774:
 
       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 771: Line 794:
 
       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 880: Line 903:
 
       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 899: Line 922:
  
  
 
+
#show_on_click1, #show_on_click2, #show_on_click3, #show_on_click4, #show_on_click5, #show_on_click6{
 
+
 
+
#show_on_click1, #show_on_click2, #show_on_click3, #show_on_click4, #show_on_click5{
+
 
       display:none;
 
       display:none;
 
       transition: all 0.5s !important;
 
       transition: all 0.5s !important;
Line 920: Line 940:
 
     font-size: 1.5vw;
 
     font-size: 1.5vw;
 
}
 
}
 +
 +
 +
  
  
Line 974: Line 997:
  
  
#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 1,001: Line 1,019:
 
   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 1,031: Line 1,103:
 
   position: absolute;
 
   position: absolute;
 
   bottom: 11.11111vw;
 
   bottom: 11.11111vw;
   left: 69.79vw;
+
   left: 55.79vw;
 
}
 
}
  
Line 1,037: Line 1,109:
 
   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 1,049: Line 1,133:
 
   position: absolute;
 
   position: absolute;
 
   bottom: 4.5139vw;
 
   bottom: 4.5139vw;
   left: 87.847vw;
+
   left: 88.847vw;
 
}
 
}
  
Line 1,084: Line 1,168:
 
   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,167: Line 1,252:
  
  
<!----------------------------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,233: Line 1,258:
 
   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;
 
}
 
}
  
 
 
 
 
 
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);
 
  });
 
 
 
});
 
  
  
Line 1,293: Line 1,292:
 
}
 
}
  
 
+
function myFunction6() {
 
+
  var element = document.getElementById("show_on_click6");
 +
  element.classList.toggle("show");
 +
}
  
 
</script>
 
</script>
 +
 
</html>
 
</html>

Latest revision as of 15:45, 17 December 2021