(Prototype team page) |
|||
(53 intermediate revisions by 2 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=" | + | <div class="loading" > |
− | < | + | <img src="https://static.igem.org/mediawiki/2021/b/be/T--LINKS_China--loadernew1.jpg"> |
− | + | ||
− | + | ||
</div> | </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> | ||
</div> | </div> | ||
− | + | <!------------------------------------------------NavEnd-------------------------------------------------> | |
− | < | + | |
− | |||
+ | <div id="big_header"> | ||
+ | <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:15vw; left: 22.5vw; width: 55vw;"> | ||
+ | </div> | ||
− | <div | + | <div id="main_content"> |
− | + | <!------------- | |
− | + | <div id="horizontal_zipper_header"> | |
− | < | + | <img src="https://static.igem.org/mediawiki/2021/7/72/T--LINKS_China--horizontal_zipper2.0.jpg"><img src="https://static.igem.org/mediawiki/2021/7/72/T--LINKS_China--horizontal_zipper2.0.jpg"> |
+ | </div>---------> | ||
+ | |||
+ | |||
+ | <!------------------------------------SIDEBAR_AND_TEXT-------------------------------------> | ||
+ | <div id="sidebar_and_texts"> | ||
− | |||
− | |||
− | |||
− | |||
+ | |||
+ | <!------------------------------------TEXT_START-------------------------------------> | ||
+ | |||
+ | <div id="texts"> | ||
+ | |||
+ | <section id="section1"> | ||
+ | <h1>Overview</h1> | ||
+ | <br> | ||
+ | <div class="normal_texts"> | ||
+ | <br> | ||
+ | <p>This year LINKS_China is bending our effort to produce a brand new leather material by integrating cellulose, a plant fiber with spidroin, an animal originated protein through bioengineering way. What is the best way to convert such material into products for the end consumers? We conducted a serial of interviews with traditional leather business people, scientists, traditional industrial companies, fashion companies and investors. </p> | ||
+ | <br> | ||
+ | </div> | ||
+ | </section> | ||
+ | |||
+ | |||
+ | <br><br><br> | ||
+ | |||
+ | |||
+ | <section id="section2"> | ||
+ | <h1>Interview a leather producer</h1> | ||
+ | <div class="normal_texts"> | ||
+ | <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>Aowang Clothing and Accessories Limited Company is one of the traditional leather industries that insist on using animals fur as the material for leather products. Since Aowang Clothing chose to manufacture leather products only by utilizing animal fur, we wondered why such industries persist in using animal fur rather than faux leather or biodegradable leather. By interviewing Mr. Song, we better understand the unique traits of traditional leather that attracts consumers the most and what we need to achieve to replace animal leather, such as softness level and stress level. </p> | ||
+ | <p>To see more details, click <button onclick="myFunction1()" class="show_buttons">here</button></p> | ||
+ | |||
+ | <div id="show_on_click1"> | ||
+ | <object data="https://static.igem.org/mediawiki/2021/4/41/T--LINKS_China--HP_aowang.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> | ||
+ | |||
+ | <div class="picture_and_explanation"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/c/c9/T--LINKS_China--over1.png"> | ||
+ | <p><p> | ||
</div> | </div> | ||
− | |||
+ | <br><br> | ||
+ | </div> | ||
+ | </section> | ||
+ | <br><br><br> | ||
− | |||
− | |||
− | |||
− | <p> | + | <section id="section3"> |
+ | <h1>Consumer attitudes toward new leather material</h1> | ||
+ | <div class="normal_texts"> | ||
+ | <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>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> | ||
+ | </div> | ||
+ | </section> | ||
+ | |||
+ | <br><br><br> | ||
+ | |||
+ | |||
+ | |||
+ | <section id="section4"> | ||
+ | <h1>Material Theory Research—hydrogel experts Interview</h1> | ||
+ | <div class="normal_texts"> | ||
+ | <br> | ||
+ | <p>After identifying consumers and properties of leather that we need to develop, we started the theory studies and experiments exploration. | ||
+ | To learn more about the theoretical basis of our material, we contacted two hydrogel doctorates, Yide Liu and Donghao Zhao, studying at Zhejiang University in China and ESPCI_PSL in France respectively. We hypothesized that our interlaced material of bacterial cellulose and spider silk fibroins might form a double network hydrogel. Our contact with these two experts was mainly to learn about hydrogels and their properties, the market applications of our material, and inquire about the properties and production method of double network hydrogels.</p> | ||
+ | |||
+ | <p>To see more details, click <button onclick="myFunction2()" class="show_buttons">here</button></p> | ||
+ | |||
+ | <div id="show_on_click2"> | ||
+ | <object data="https://static.igem.org/mediawiki/2021/7/7b/T--LINKS_China--HP_shuiningjiao.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> | ||
+ | |||
+ | <div class="picture_and_explanation"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/8/82/T--LINKS_China--over2.png"> | ||
+ | <p><p> | ||
</div> | </div> | ||
+ | <br><br> | ||
+ | </div> | ||
+ | </section> | ||
+ | <br><br><br> | ||
+ | <section id="section5"> | ||
+ | <h1>Learning fermentation techniques</h1> | ||
+ | <div class="normal_texts"> | ||
+ | <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>In order to ferment SCOBY normally without pollution, we visited Classy-Kiss, a yogurt company, to learn their fermentation methods. The visit to Classy-Kiss provided us great inspiration for our further development in hardware equipment which could sterilize the environment and ferment without contamination. </p> | ||
+ | <p>Inspired by Classy-Kiss, we designed a hardware equipment to solve the SCOBY contamination efficiently. (If you are interested in the hardware equipment, click the link)</p> | ||
− | + | <p>To see more details, click <button onclick="myFunction3()" class="show_buttons">here</button></p> | |
− | + | ||
− | + | ||
− | <p> | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | <div id="show_on_click3"> |
− | + | <object data="https://static.igem.org/mediawiki/2021/6/64/T--LINKS_China--HP_kashi.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> | ||
+ | <video controls style="margin-left: 9vw; width: 60vw;"> | ||
+ | <source src="https://static.igem.org/mediawiki/2021/2/2d/T--LINKS_China--HP_demo2KASHI.mov" type="video/mp4"> | ||
+ | </video> | ||
+ | <br><br><br> | ||
+ | </div> | ||
+ | </section> | ||
− | </ | + | |
+ | <br><br><br> | ||
+ | |||
+ | |||
+ | <section id="section6"> | ||
+ | <h1>The potential of new leather production methods</h1> | ||
+ | <div class="normal_texts"> | ||
+ | <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. | ||
+ | We visited the laboratory of China Boton, a traditional aromatic compounds supplier in Shenzhen. Although China Boton mainly produce fragrance in traditional method, they are continuously establishing synthetic biology teams to invent new ways of making spices. Through the positive attitudes of China Boton toward biosynthesized products, we can infer that traditional producers are inclusive to new techniques, willing to change and collaborate with synthetic biology teams. Therefore, we concluded that our leather product could set foundation in traditional markets. </p> | ||
+ | <p>To see more details, click <button onclick="myFunction5()" class="show_buttons">here</button></p> | ||
+ | |||
+ | <div id="show_on_click5"> | ||
+ | <object data="https://static.igem.org/mediawiki/2021/9/90/T--LINKS_China--HP_bodun.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> | ||
+ | <video controls style="margin-left: 9vw; width: 60vw;"> | ||
+ | <source src="https://static.igem.org/mediawiki/2021/3/39/T--LINKS_China--HP_demo.BODUN.mov" type="video/mp4"> | ||
+ | </video> | ||
+ | <br><br><br> | ||
+ | </div> | ||
+ | </section> | ||
+ | |||
+ | <br><br><br> | ||
+ | |||
+ | |||
+ | <section id="section7"> | ||
+ | <h1>Developing our business model</h1> | ||
+ | <div class="normal_texts"> | ||
+ | <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) | ||
+ | |||
+ | Advices from investors helped us to solidify our business map. As an important step of marketing, we focused on the characteristics that would most influence consumers’ choices on purchasing leathers. | ||
+ | </p> | ||
+ | <div class="picture_and_explanation"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/f/fb/T--LINKS_China--over3.png"> | ||
+ | <p><p> | ||
</div> | </div> | ||
+ | <br><br> | ||
+ | </div> | ||
+ | </section> | ||
+ | |||
+ | <br><br><br> | ||
+ | |||
+ | |||
+ | <section id="section8"> | ||
+ | <h1>Interview potential consumers for leather product</h1> | ||
+ | <div class="normal_texts"> | ||
+ | <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 see more details, click <button onclick="myFunction4()" class="show_buttons">here</button></p> | ||
+ | |||
+ | <div id="show_on_click4"> | ||
+ | <object data="https://static.igem.org/mediawiki/2021/f/f6/T--LINKS_China--HP_shishang.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> | ||
+ | |||
+ | <video controls style="margin-left: 9vw; width: 60vw;"> | ||
+ | <source src="https://static.igem.org/mediawiki/2021/9/9f/T--LINKS_China--HP_DEMOshishang.mov" type="video/mp4"> | ||
+ | </video> | ||
+ | |||
+ | <br><br><br> | ||
+ | </div> | ||
+ | </section> | ||
+ | |||
+ | <br><br><br> | ||
+ | |||
+ | |||
+ | |||
+ | |||
</div> | </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/7/70/T--LINKS_China--bigimg_ihps.png); | ||
+ | background-attachment:scroll; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position:top; | ||
+ | background-size: 110%; | ||
+ | padding: 0; | ||
+ | box-shadow: 0 0 0.4vw 0.4vw #fbedf3 inset; | ||
+ | } | ||
+ | |||
+ | #big_header img{ | ||
+ | width: 100vw; | ||
+ | height: auto; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | #horizontal_zipper_header{ | ||
+ | display: flex; | ||
+ | } | ||
+ | |||
+ | #horizontal_zipper_header img{ | ||
+ | flex: 50%; | ||
+ | width: 48vw; | ||
+ | height: 1vw; | ||
+ | padding: 2vw; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /*--------------------------------------SIDEBAR FOR COMPUTERS------------------------------------------*/ | ||
+ | |||
+ | @media only screen and (min-device-width: 768px) { | ||
+ | #sidebar_and_texts { | ||
+ | } | ||
+ | |||
+ | #sidebar { | ||
+ | position: sticky; | ||
+ | top: 5vw; | ||
+ | left: 3vw; | ||
+ | margin: 0; | ||
+ | font-size: 2.25em; | ||
+ | line-height: 1.2; | ||
+ | height: 34vw; | ||
+ | width: 3.9vw; | ||
+ | border: 3.3px solid #600136; | ||
+ | border-radius: 1.25vw; | ||
+ | background-attachment:scroll; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position:top; | ||
+ | background-size: 100%; | ||
+ | transition: top 0.3s; /* Transition effect when sliding down (and up) */ | ||
+ | } | ||
+ | |||
+ | #sidebar .section_guider{ | ||
+ | position: absolute; | ||
+ | z-index: 2; | ||
+ | list-style: none !important; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #sidebar .section_guider li{ | ||
+ | z-index: 2; | ||
+ | list-style: none !important; | ||
+ | } | ||
+ | |||
+ | |||
+ | #sidebar .section_guider img{ | ||
+ | width: 2.56vw; | ||
+ | top: 4px; | ||
+ | margin: 0vw 0vw 0vw 0vw; | ||
+ | right: 36.7px; | ||
+ | height: auto; | ||
+ | z-index: 2; | ||
+ | list-style: none !important; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #sidebar .section_header li{ | ||
+ | z-index: 2; | ||
+ | list-style: none !important; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #sidebar .section_header{ | ||
+ | position: relative; | ||
+ | z-index: 2; | ||
+ | list-style: none !important; | ||
+ | } | ||
+ | |||
+ | #sidebar .section_header img{ | ||
+ | position: relative; | ||
+ | width: 11.2vw; | ||
+ | top: -1.3vw; | ||
+ | padding: 1.75vw 0vw 0vw 0vw; | ||
+ | right: 0.55vw; | ||
+ | height: auto; | ||
+ | z-index: 2; | ||
+ | list-style: none !important; | ||
+ | position: relative; | ||
+ | opacity: 0; | ||
+ | float: initial; | ||
+ | } | ||
+ | |||
+ | #sidebar #top_button img{ | ||
+ | position: relative; | ||
+ | width: 5vw; | ||
+ | top: 0.5vw; | ||
+ | left: -0.525vw; | ||
+ | } | ||
+ | |||
+ | .section-nav{ | ||
+ | display: none; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /*--------------------------------------SIDEBAR FOR IPADS AND PHONES------------------------------------------*/ | ||
+ | |||
+ | |||
+ | @media only screen and (max-device-width: 768px) { | ||
+ | #sidebar_and_texts { | ||
+ | } | ||
+ | |||
+ | #sidebar { | ||
+ | display: none; | ||
+ | border: 0px solid #600136; | ||
+ | } | ||
+ | |||
+ | |||
+ | #sidebar .section_guider{ | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | #sidebar .section_guider li{ | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | #sidebar .section_guider img{ | ||
+ | display: none | ||
+ | } | ||
+ | |||
+ | |||
+ | #sidebar .section_header{ | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | #sidebar .section_header li{ | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | #sidebar .section_header img{ | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | #sidebar #top_button img{ | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | .section-nav{ | ||
+ | display: none; | ||
+ | background-color: #FFFFFF; | ||
+ | } | ||
+ | .section-nav li.active > a { | ||
+ | color: #630330; | ||
+ | font-weight: 1200; | ||
+ | } | ||
+ | |||
+ | /* Sidebar Navigation */ | ||
+ | .section-nav { | ||
+ | padding-left: 0; | ||
+ | border: 3px solid #efefef; | ||
+ | color: white; | ||
+ | width: 11vw; | ||
+ | height: 30vw; | ||
+ | font-size: 9pt; | ||
+ | border-radius: 17px; | ||
+ | } | ||
+ | |||
+ | .section-nav li { | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .section-nav li a { | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | padding: .125rem 0; | ||
+ | color: #ccc; | ||
+ | transition: all 50ms ease-in-out; | ||
+ | right: 3vw; | ||
+ | } | ||
+ | |||
+ | |||
+ | .section-nav a:hover, | ||
+ | .section-nav a:focus { | ||
+ | color: #630330; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /*--------------------------------------MAIN TEXTS------------------------------------------*/ | ||
+ | #texts{ | ||
+ | position: relative; | ||
+ | top: 0vw; | ||
+ | padding: 3vw; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | #texts h1{ | ||
+ | font-size: 5em; | ||
+ | color: #630330; | ||
+ | font-family: 'Open Sans'; | ||
+ | z-index: 5; | ||
+ | font-weight: bolder; | ||
+ | line-height: 1.2; | ||
+ | letter-spacing: 0.6px; | ||
+ | text-shadow: 2px 2px 5px #C0C0C0; | ||
+ | margin-left: 4.5vw; | ||
+ | margin-right: 4.5vw; | ||
+ | } | ||
+ | |||
+ | |||
+ | #texts .normal_texts h2{ | ||
+ | font-size: 20pt; | ||
+ | font-weight: 520; | ||
+ | font-family: "Open Sans"; | ||
+ | margin-left: 2.4vw; | ||
+ | margin-right: 2.4vw; | ||
+ | line-height: 2.3vw; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #texts .normal_texts{ | ||
+ | background: white; | ||
+ | border-radius: 24px; | ||
+ | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); | ||
+ | margin-left: 4.5vw; | ||
+ | margin-right: 4.5vw; | ||
+ | } | ||
+ | |||
+ | |||
+ | #texts .normal_texts p{ | ||
+ | margin: 1.6vw 2.5vw; | ||
+ | font-size: 1.5em; | ||
+ | font-weight: 300; | ||
+ | font-family: "LatoLight"; | ||
+ | } | ||
+ | |||
+ | |||
+ | #texts .normal_texts ol{ | ||
+ | margin: 1.4vw 4.5vw; | ||
+ | font-size: 1.5em; | ||
+ | font-weight: 300; | ||
+ | font-family: "LatoLight"; | ||
+ | } | ||
+ | |||
+ | #texts .normal_texts li{ | ||
+ | margin: 0.7vw; | ||
+ | font-weight: 300; | ||
+ | font-family: "LatoLight"; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | #texts .funfacts{ | ||
+ | background-image:url(https://static.igem.org/mediawiki/2021/d/de/T--LINKS_China--funfacts_bubblev2.jpg); | ||
+ | width: 55vw; | ||
+ | height: 30vw; | ||
+ | margin-left: 7vw; | ||
+ | background-attachment:scroll; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position:top; | ||
+ | background-size: 100%; | ||
+ | |||
+ | } | ||
+ | |||
+ | #texts .funfacts p{ | ||
+ | position: relative; | ||
+ | top: 12.5vw; | ||
+ | margin-left: 8.7vw; | ||
+ | margin-right: 24vw; | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | #texts .horizontal_zipper_texts{ | ||
+ | width: 65vw; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /*--------------------------------------IMAGES AND EXPLANATIONS------------------------------------------*/ | ||
+ | |||
+ | .picture_and_explanation{ | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .picture_and_explanation img{ | ||
+ | max-width: 60vw; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | .picture_and_explanation p{ | ||
+ | font-size: 1.1em !important; | ||
+ | font-family: Arial; | ||
+ | color: grey; | ||
+ | text-align: center; | ||
+ | margin-left: 5vw !important; | ||
+ | margin-right: 5vw !important; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /*--------------------------------------SIDENOTES------------------------------------------*/ | ||
+ | |||
+ | #side_notes { | ||
+ | background: #dcdcdc; | ||
+ | margin: 1vw 5vw; | ||
+ | } | ||
+ | |||
+ | #side_notes h2{ | ||
+ | font-size: 20pt; | ||
+ | font-weight: 650; | ||
+ | font-family: "Open Sans"; | ||
+ | padding: 2.1vw 1.5vw 0 1.5vw; | ||
+ | } | ||
+ | |||
+ | #side_notes p{ | ||
+ | padding: 0 1.5vw 2.1vw 1.5vw; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /*--------------------------------------REFERENCES------------------------------------------*/ | ||
+ | |||
+ | |||
+ | #texts .references{ | ||
+ | background: white; | ||
+ | border-radius: 24px; | ||
+ | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); | ||
+ | margin-left: 4.5vw; | ||
+ | margin-right: 4.5vw; | ||
+ | font-family: "LatoLight"; | ||
+ | } | ||
+ | |||
+ | |||
+ | #texts .references ol{ | ||
+ | margin: 2vw 2.5vw; | ||
+ | font-size: 1em; | ||
+ | font-family: "LatoLight"; | ||
+ | } | ||
+ | |||
+ | #texts .references li{ | ||
+ | margin: 1vw; | ||
+ | font-family: "LatoLight"; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #show_on_click1, #show_on_click2, #show_on_click3, #show_on_click4, #show_on_click5, #show_on_click6{ | ||
+ | display:none; | ||
+ | transition: all 0.5s !important; | ||
+ | } | ||
+ | |||
+ | .show{ | ||
+ | display:block !important; | ||
+ | transition: all 0.5s !important; | ||
+ | } | ||
+ | |||
+ | |||
+ | .show_buttons{ | ||
+ | color: grey; | ||
+ | font-family: "Lato"; | ||
+ | cursor: pointer; | ||
+ | border: none; | ||
+ | font-size: 1.5vw; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /*--------------------------------------MAIN BACKGROUND------------------------------------------*/ | ||
+ | #main_content{ | ||
+ | background-image: url(https://static.igem.org/mediawiki/2021/e/e8/T--LINKS_China--background_darkpurple.png); | ||
+ | background-attachment:scroll; | ||
+ | background-repeat: repeat; | ||
+ | background-position:top; | ||
+ | background-size: 100%; | ||
+ | width: auto; | ||
+ | height: auto; | ||
+ | background-blend-mode: lighten; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /*--------------------------------------FOOTER------------------------------------------*/ | ||
+ | |||
+ | |||
+ | #footer{ | ||
+ | background-image: url("https://static.igem.org/mediawiki/2021/0/0a/T--LINKS_China--footer_test1.png"); | ||
+ | } | ||
+ | |||
+ | .banner { | ||
+ | align: center; | ||
+ | height: auto; | ||
+ | width: 100vw; | ||
+ | margin-bottom: 0px; | ||
+ | padding-bottom: 0px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .footer { | ||
+ | align: center; | ||
+ | width: 100vw; | ||
+ | height: auto; | ||
+ | margin-bottom: 0px; | ||
+ | padding-bottom: 0px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .footer img{ | ||
+ | height: 3vw !important; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | #snapgene-logo { | ||
+ | position: absolute; | ||
+ | bottom: 5.46vw; | ||
+ | left: 14.83vw; | ||
+ | } | ||
+ | |||
+ | |||
+ | #footer-divider { | ||
+ | position: absolute; | ||
+ | bottom: 3.82vw; | ||
+ | left: 18.75vw; | ||
+ | } | ||
+ | |||
+ | h3 { | ||
+ | font-size: 200%; | ||
+ | color: #66023c; | ||
+ | } | ||
+ | |||
+ | #footer-text { | ||
+ | position: absolute; | ||
+ | bottom: 11.111vw; | ||
+ | left: 7.139vw; | ||
+ | } | ||
+ | |||
+ | #linkspider-logo { | ||
+ | position: absolute; | ||
+ | bottom: 9.0667vw; | ||
+ | left: 14.4vw; | ||
+ | } | ||
+ | |||
+ | #basis-logo { | ||
+ | position: absolute; | ||
+ | bottom: 9.514vw; | ||
+ | left: 19.389vw; | ||
+ | } | ||
+ | |||
+ | #scie-logo { | ||
+ | position: absolute; | ||
+ | bottom: 2.8139vw; | ||
+ | left: 40.07vw; | ||
+ | } | ||
+ | |||
+ | #taft-logo { | ||
+ | position: absolute; | ||
+ | bottom: 9.375vw; | ||
+ | left: 24.305555555556vw; | ||
+ | } | ||
+ | |||
+ | #nanshan-logo { | ||
+ | position: absolute; | ||
+ | bottom: 2.4305555555556vw; | ||
+ | left: 15.625vw; | ||
+ | } | ||
+ | |||
+ | #vma-logo { | ||
+ | position: absolute; | ||
+ | bottom: 8.6805555555556vw; | ||
+ | left: 28.819444444444vw; | ||
+ | } | ||
+ | |||
+ | #uwc-logo { | ||
+ | position: absolute; | ||
+ | bottom: 2.7777777777778vw; | ||
+ | left: 31.597222222222vw; | ||
+ | } | ||
+ | |||
+ | #hotchkiss-logo { | ||
+ | position: absolute; | ||
+ | bottom: 9.0277777777778vw; | ||
+ | left: 34.722222222222vw; | ||
+ | } | ||
+ | |||
+ | #chelt-logo { | ||
+ | position: absolute; | ||
+ | bottom: 9.0277777777778vw; | ||
+ | left: 39.236111111111vw; | ||
+ | } | ||
+ | |||
+ | #ridley-logo { | ||
+ | position: absolute; | ||
+ | bottom: 9.0277777777778vw; | ||
+ | left: 43.75vw; | ||
+ | } | ||
+ | |||
+ | #guangzhou-logo { | ||
+ | position: absolute; | ||
+ | bottom: 2.7777777777778vw; | ||
+ | left: 48.263888888889vw; | ||
+ | } | ||
+ | |||
+ | #gca-logo { | ||
+ | position: absolute; | ||
+ | bottom: 9.0277777777778vw; | ||
+ | left: 48.611111111111vw; | ||
+ | } | ||
+ | |||
+ | #footer-divider { | ||
+ | position: absolute; | ||
+ | bottom: 3.819vw; | ||
+ | left: 54.4vw; | ||
+ | } | ||
+ | |||
+ | #footer-text2 { | ||
+ | position: absolute; | ||
+ | bottom: 11.11111vw; | ||
+ | left: 55.79vw; | ||
+ | } | ||
+ | |||
+ | #ins-logo { | ||
+ | position: absolute; | ||
+ | bottom: 4.51389vw; | ||
+ | left: 56.7444vw; | ||
+ | } | ||
+ | |||
+ | #footer-divider2 { | ||
+ | position: absolute; | ||
+ | bottom: 3.819vw; | ||
+ | left: 64.4vw; | ||
+ | } | ||
+ | |||
+ | #bilibili-logo { | ||
+ | position: absolute; | ||
+ | bottom: 4.7555556vw; | ||
+ | left: 69.08vw; | ||
+ | } | ||
+ | |||
+ | #footer-divider3 { | ||
+ | position: absolute; | ||
+ | bottom: 3.819vw; | ||
+ | left: 83.4vw; | ||
+ | } | ||
+ | |||
+ | #email-logo { | ||
+ | position: absolute; | ||
+ | bottom: 4.5139vw; | ||
+ | left: 88.847vw; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /*-----------------------------------------NAV_BAR_START-----------------------------------------------*/ | ||
+ | |||
+ | |||
+ | /* CLEAR DEFAULT SETTINGS **************************************************/ | ||
+ | #sideMenu, #top_title, .patrollink, #firstHeading, #home_logo, #sideMenu { display:none; } | ||
+ | #content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; border:none;} | ||
+ | body, html {background-color:white; width: 100%; height: 100%;} | ||
+ | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | ||
+ | |||
+ | #bodyContent a[href ^="https://"], .link-https { padding-right:0px;} | ||
+ | |||
+ | /*Navigation Bar*/. | ||
+ | * { | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Navbar container */ | ||
+ | #outnav { | ||
+ | overflow: visible; | ||
+ | zoom:1.0; | ||
+ | font-family: Arial; | ||
+ | position: fixed; | ||
+ | display: float; | ||
+ | z-index: 100; | ||
+ | transition: top 0.3s; /* Transition effect when sliding down (and up) */ | ||
+ | top:-100px; | ||
+ | } | ||
+ | |||
+ | #outnav:after{ | ||
+ | content:" "; | ||
+ | display: block; | ||
+ | clear: both; | ||
+ | height: 0; | ||
+ | visibility: hidden; | ||
+ | display: float; | ||
+ | } | ||
+ | |||
+ | |||
+ | #outnav img{ | ||
+ | max-width: 100%; | ||
+ | } | ||
+ | |||
+ | #homespider{ | ||
+ | width: 7.7vw; | ||
+ | height: auto; | ||
+ | position: relative; | ||
+ | left: 1vw; | ||
+ | } | ||
+ | |||
+ | /* Six sections */ | ||
+ | .sections{ | ||
+ | display: flex; | ||
+ | column-gap: 0.4vw; | ||
+ | justify-content: space-between; | ||
+ | position: relative; | ||
+ | left: 2.8vw; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* Links (including logo) inside the navbar */ | ||
+ | #outnav a{ | ||
+ | float: left; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Dropdown container */ | ||
+ | .dropdown { | ||
+ | overflow: hidden; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* Dropdown button */ | ||
+ | .dropdown .dropbtn { | ||
+ | width: 12.4vw; | ||
+ | height: auto; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* Dropdown content (hidden by default) */ | ||
+ | .dropdown-content { | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | object-fit:cover; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* Show dropdown content on hover */ | ||
+ | .dropdown:hover .dropdown-content { | ||
+ | display: block; | ||
+ | object-fit:cover; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | #globalWrapper{ | ||
+ | padding-bottom: 0px !important; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | var prevScrollpos = window.pageYOffset; | ||
+ | window.onscroll = function() { | ||
+ | var currentScrollPos = window.pageYOffset; | ||
+ | if (prevScrollpos > currentScrollPos) { | ||
+ | document.getElementById("outnav").style.top = "17px"; | ||
+ | } else { | ||
+ | document.getElementById("outnav").style.top = "-100px"; | ||
+ | } | ||
+ | prevScrollpos = currentScrollPos; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | function myFunction1() { | ||
+ | var element = document.getElementById("show_on_click1"); | ||
+ | element.classList.toggle("show"); | ||
+ | } | ||
+ | |||
+ | function myFunction2() { | ||
+ | var element = document.getElementById("show_on_click2"); | ||
+ | element.classList.toggle("show"); | ||
+ | } | ||
+ | |||
+ | function myFunction3() { | ||
+ | var element = document.getElementById("show_on_click3"); | ||
+ | element.classList.toggle("show"); | ||
+ | } | ||
+ | |||
+ | function myFunction4() { | ||
+ | var element = document.getElementById("show_on_click4"); | ||
+ | element.classList.toggle("show"); | ||
+ | } | ||
+ | |||
+ | function myFunction5() { | ||
+ | var element = document.getElementById("show_on_click5"); | ||
+ | element.classList.toggle("show"); | ||
+ | } | ||
+ | |||
+ | function myFunction6() { | ||
+ | var element = document.getElementById("show_on_click6"); | ||
+ | element.classList.toggle("show"); | ||
+ | } | ||
+ | |||
+ | </script> | ||
+ | |||
+ | </html> |
Latest revision as of 15:45, 17 December 2021
![](https://static.igem.org/mediawiki/2021/b/be/T--LINKS_China--loadernew1.jpg)
![](https://static.igem.org/mediawiki/2021/6/6d/T--LINKS_China--bigheader_ihps.jpg)
![](https://static.igem.org/mediawiki/2021/f/fa/T--LINKS_China--descriptionplace_darkpurple.jpg)