Difference between revisions of "Team:CSU CHINA/Education"

Line 4: Line 4:
 
   <meta charset='utf-8'>
 
   <meta charset='utf-8'>
 
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
−
   <meta name="description" content="不超过150个字符" />
+
   <meta name="description" content="" />
 
   <meta name="keywords" content="" />
 
   <meta name="keywords" content="" />
−
  <meta name="author" content="name, email@gmail.com" />
 
−
  <meta name="robots" content="index,follow" />
 
 
   <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
 
   <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
 
   <meta name="apple-mobile-web-app-capable" content="yes" />
 
   <meta name="apple-mobile-web-app-capable" content="yes" />
−
   <title>Proposed Implementation</title>
+
   <title>Model</title>
 
</head>
 
</head>
  
Line 22: Line 20:
 
         </div>
 
         </div>
 
         <div class="navbar-list mainlist">
 
         <div class="navbar-list mainlist">
−
          <a class="navbar-list__item " href="https://2020.igem.org/Team:CSU_CHINA">HOME</a>
+
            <a class="navbar-list__item " href="https://2020.igem.org/Team:CSU_CHINA">HOME</a>
−
          <a class="navbar-list__item" href="https://2020.igem.org/Team:CSU_CHINA/project">PROJECT</a>
+
            <div class="navbar-list__item" href="https://2020.igem.org/Team:CSU_CHINA/project">PROJECT
−
          <a class="navbar-list__item" href="https://2020.igem.org/Team:CSU_CHINA/team">TEAM</a>
+
              <div class="navbar-list__menu">
−
          <a class="navbar-list__item" href="https://2020.igem.org/Team:CSU_CHINA/parts">PARTS</a>
+
                <a class="navbar-list__menuItem">Description</a>
−
          <a class="navbar-list__item active" href="https://2020.igem.org/Team:CSU_CHINA/human_practices">HUMAN&nbsp;PRACTICES</a>
+
                <a class="navbar-list__menuItem">Design</a>
−
          <a class="navbar-list__item" href="https://2020.igem.org/Team:CSU_CHINA/judging_form">JUDGING&nbsp;FORM</a>
+
                <a class="navbar-list__menuItem">Results</a>
−
          <a class="navbar-list__item" href="https://2020.igem.org/Team:CSU_CHINA/award">AWARD</a>
+
                <a class="navbar-list__menuItem">Contribution</a>
 +
                <a class="navbar-list__menuItem">Proof of Concept</a>
 +
                <a class="navbar-list__menuItem">Engineering</a>
 +
                <a class="navbar-list__menuItem">Sponsors</a>
 +
              </div>
 +
            </div>
 +
            <div class="navbar-list__item" >TEAM
 +
              <div class="navbar-list__menu">
 +
                <a class="navbar-list__menuItem">Team Members</a>
 +
                <a class="navbar-list__menuItem">Attributions</a>
 +
                <a class="navbar-list__menuItem">Collaborations</a>
 +
                <a class="navbar-list__menuItem">Partnership</a>
 +
              </div>
 +
            </div>
 +
            <div class="navbar-list__item" href="https://2020.igem.org/Team:CSU_CHINA/team">LIB
 +
              <div class="navbar-list__menu">
 +
                <a class="navbar-list__menuItem">Experiments</a>
 +
                <a class="navbar-list__menuItem">Notebook</a>
 +
              </div>
 +
            </div>
 +
            <div class="navbar-list__item" href="https://2020.igem.org/Team:CSU_CHINA/team">PARTS
 +
              <div class="navbar-list__menu">
 +
                <a class="navbar-list__menuItem">Overview</a>
 +
                <a class="navbar-list__menuItem">Basic Parts</a>
 +
                <a class="navbar-list__menuItem">Composite Parts</a>
 +
                <a class="navbar-list__menuItem">Imporved Parts</a>
 +
              </div>
 +
            </div>
 +
            <a class="navbar-list__item active" href="https://2020.igem.org/Team:CSU_CHINA/Model">MODEL</a>
 +
            <div class="navbar-list__item">HUMAN&nbsp;PRACTICES
 +
              <div class="navbar-list__menu">
 +
                <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Education">Index</a>
 +
                <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Education">Science Communication</a>
 +
                <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Implementation">Proposed Implementation</a>
 +
              </div>
 +
            </div>
 +
            <a class="navbar-list__item" href="https://2020.igem.org/Team:CSU_CHINA/judging_form">JUDGING&nbsp;FORM</a>
 
         </div>
 
         </div>
 
         <div class="navbar-list">
 
         <div class="navbar-list">
Line 36: Line 70:
 
     </div>
 
     </div>
 
     <div class="content-team" id="home">
 
     <div class="content-team" id="home">
−
       <div class="pageHead">
+
       <div class="pageContent" style="padding-top: 4rem">
−
        <div class="pageHead-content">
+
         <div class="pageContent-side" style="opacity: 0;">
−
         </div>
+
−
      </div>
+
−
      <div class="pageContent">
+
−
        <div class="pageContent-side">
+
 
           <div class="pageContent-navlist" id="navlist">
 
           <div class="pageContent-navlist" id="navlist">
 
             <div class="pageContent-navlist__head">
 
             <div class="pageContent-navlist__head">
 
               <div class="logo"></div>
 
               <div class="logo"></div>
−
               <div class="title">-&nbsp;index&nbsp;-</div>
+
               <div class="title">-&nbsp;Model&nbsp;-</div>
 
             </div>
 
             </div>
−
            <a class="pageContent-navlist__item">Description</a>
 
−
            <a href="https://2020.igem.org/Team:CSU_CHINA/Education" class="pageContent-navlist__item">Science Communication</a>
 
−
            <a href="https://2020.igem.org/Team:CSU_CHINA/Implementation" class="pageContent-navlist__item active">Proposed Implementation</a>
 
 
           </div>
 
           </div>
 
         </div>
 
         </div>
−
         <div class="pageContent-main" id="content">
+
         <div class="pageContent-main" id="pagecontent">
 
           <h2 class="pageContent-main__title">Overview</h2>
 
           <h2 class="pageContent-main__title">Overview</h2>
 
           <div class="pageContent-main__textBox">
 
           <div class="pageContent-main__textBox">
−
             <p>
+
             <p>Being undergraduate iGEMers, we understand the inspiration that synthetic biology can kindle in young minds. To enlighten younger generations, we delivered lectures to students of various grades, explaining the profound in simple terms.</p>
−
                Even an excellent iGEM project is only helpful if it can be applied under real-world circumstances.              
+
−
            </p>
+
−
            <p>
+
−
                To enhance our algae's feasibility and make good for the real world, we carefully listened to stakeholders. With factual feedbacks, we figured out their expectations and integrated the opinions in further design.  
+
−
            </p>
+
 
           </div>
 
           </div>
−
           <h2 class="pageContent-main__title">Application in Sewage Treatment Plant</h2>
+
           <h2 class="pageContent-main__title">Synthetic Biology Day(Changsha No. 21 Middle School)</h2>
−
          <div class="pageContent-main__textBox">
+
−
            <p>
+
−
                To understand the existing wastewater treatment technology, evaluate the application and listen to others’ suggestions, we visited two Sewage Treatment Plants and asked some experts for advice.
+
−
            </p>
+
−
            <p>
+
−
                We described our program carefully, and after listening to our introduction, experts all agreed that our project has a good application prospect, but also informed us:
+
−
            </p>
+
−
            <ul>
+
−
                <li>
+
−
                    The most important factor influence application is the cost. Biosafety and Cadmium removal efficiency also counts!
+
−
                </li>
+
−
                <li>
+
−
                    Think about continuously improving the process’s processing capacity through debugging and practice in operation at a low cost. If the survival and proliferation of engineering algae and its cadmium removal activity do not require high environmental factors, the cost will low.
+
−
                </li>
+
−
                <li>
+
−
                    Consider operator training, infrastructure construction, other up-front investment, routine equipment maintenance, and waste recycling.
+
−
                </li>
+
−
                <li>
+
−
                    Making a fair presentation of these careful considerations will make the project more compelling to relevant enterprises.
+
−
                </li>
+
−
            </ul>
+
−
          </div>
+
−
          <h2 class="pageContent-main__title">Application in Farmland </h2>
+
−
          <div class="pageContent-main__textBox">
+
−
              <p>We realized that cadmium polluted-rice now is widespread, serious and harmful to human health through the interviews with our end users. Today, farmers do not have the means to detect and treat cadmium contaminated irrigation water equipment and methods. If they grow substandard rice, the only way they can do is to throw it away, causing substantial economic losses.</p>
+
−
              <p>After introducing the device’s design, farmers were worried about the chemical reagents we used in the toxin-antitoxin suicide system. Will these chemicals directly put into the farm produce secondary pollution that will affect rice growth and poison the rice? </p>
+
−
              <p>Then, we changed the toxin-antitoxin system to the second generation of the red and blue light control system. We could achieve the cadmium removal function of algae through the adjustment of the light, so there is no secondary pollution of the chemical reagent. Which you can find in our...</p>
+
−
              <p>After that, we revisited farmers with our new design. This time they accept improved devices that use LED tubes. The portable rechargeable battery could charge directly and conveniently, which confirmed that the application of practical. Also, we calculated the rupture time of the glueball through modeling. We instructed the farmers to collect cycas within this time, making it more convenient and safer. Which you can find in our...（建模组补充链接）Besides, the farmers’ thought that the second-generation system is too complicated to operate for them, also has to pay more electricity bill.</p>
+
−
              <p>How to reduce costs further? After research, the third generation of blue light regulation of the suicide system has been realized. Based on the red and blue light system’s tedious regulation and the low-cost performance of algae reuse, we simplified the system’s operation, saving energy and reducing costs.  Which you can find in our...（实验组补充链接）</p>
+
−
          </div>  
+
 
         </div>
 
         </div>
−
        <div class="pageContent-side"></div>
 
 
       </div>
 
       </div>
 
     </div>
 
     </div>
Line 100: Line 91:
 
</body>
 
</body>
 
<style>
 
<style>
 +
  .MathJax nobr>span.math>span{border-left-width:0 !important};
 
   html,
 
   html,
 
   body {
 
   body {
Line 167: Line 159:
 
   }
 
   }
 
   #content{
 
   #content{
−
width: 100%;
+
    width: 100%;
−
padding: 0!important;
+
    padding: 0!important;
−
margin: 0;
+
    margin: 0;
−
}
+
  }
−
#top_title{
+
  #top_title{
−
display:none;
+
    display:none;
−
}
+
  }
 
   #collapse>.navbar-list {
 
   #collapse>.navbar-list {
 
     flex-shrink: 0;
 
     flex-shrink: 0;
Line 189: Line 181:
 
   #collapse>.mainlist {
 
   #collapse>.mainlist {
 
     flex: 1;
 
     flex: 1;
−
     overflow-y: hidden;
+
     /* overflow-y: hidden;
−
     overflow-x: auto;
+
     overflow-x: auto; */
 +
    /* overflow: auto; */
 
   }
 
   }
  
Line 205: Line 198:
 
     transition: all .3s;
 
     transition: all .3s;
 
     border-radius: 2rem;
 
     border-radius: 2rem;
 +
    position: relative;
 +
    overflow: hidden;
 +
  }
 +
  #collapse>.navbar-list>.navbar-list__item:hover{
 +
    overflow: visible;
 +
  }
 +
  #collapse>.navbar-list>.navbar-list__item .navbar-list__menu{
 +
    position: absolute;
 +
    top: 2.2rem;
 +
    background-color: #ffffff;
 +
    border-radius: 5px;
 +
    box-shadow: 0 3px 10px -2px rgba(0,0,0,0.1);
 +
    width: 10rem;
 +
    left: calc(50% - 5rem);
 +
  }
 +
  #collapse>.navbar-list>.navbar-list__item .navbar-list__menuItem{
 +
    padding: .5rem 1rem;
 +
    color: #333;
 +
    display: block;
 +
    text-decoration: none;
 +
    cursor: pointer;
 
   }
 
   }
−
 
 
   #collapse>.navbar-list>.active,
 
   #collapse>.navbar-list>.active,
 
   #collapse>.navbar-list>.navbar-list__item:hover {
 
   #collapse>.navbar-list>.navbar-list__item:hover {
Line 325: Line 338:
 
     text-decoration: none;
 
     text-decoration: none;
 
     border-radius: 3px;
 
     border-radius: 3px;
 +
    cursor: pointer;
 
   }
 
   }
  
Line 333: Line 347:
 
   }
 
   }
  
−
   #content {
+
   #pagecontent {
 
     padding: 2rem 5%;
 
     padding: 2rem 5%;
 
     position: relative;
 
     position: relative;
 
     flex-shrink: 0;
 
     flex-shrink: 0;
 
     flex: 1;
 
     flex: 1;
 +
    max-width: 100%;
 
   }
 
   }
  
−
   #content>.pageContent-main__title {
+
   #pagecontent .pageContent-main__title {
 
     font-size: 2rem;
 
     font-size: 2rem;
 +
    line-height: 2.5rem;
 
     color: var(--dark);
 
     color: var(--dark);
 
     position: relative;
 
     position: relative;
Line 348: Line 364:
 
     margin: 3rem auto 2rem auto;
 
     margin: 3rem auto 2rem auto;
 
   }
 
   }
 +
  #pagecontent .pageContent-main__subtitle {
 +
    font-size: 1.5rem;
 +
    line-height: 2.5rem;
 +
    color: var(--dark);
 +
    position: relative;
 +
    display: block;
 +
    width: 95%;
 +
    margin: 3rem auto 2rem auto;
 +
  }
 +
  
−
   #content>.pageContent-main__title::after {
+
   #pagecontent .pageContent-main__title::after {
 
     content: "";
 
     content: "";
 
     position: absolute;
 
     position: absolute;
Line 359: Line 385:
 
   }
 
   }
  
−
   #content>.pageContent-main__textBox {
+
   #pagecontent .pageContent-main__textBox {
 
     width: 90%;
 
     width: 90%;
 
     margin: 1rem 5% 3rem 5%;
 
     margin: 1rem 5% 3rem 5%;
Line 367: Line 393:
 
   }
 
   }
  
−
   #content>.pageContent-main__textBox p {
+
   #pagecontent .pageContent-main__textBox p {
 
     margin-bottom: 1.1rem;
 
     margin-bottom: 1.1rem;
 
     font-size: 1.1rem;
 
     font-size: 1.1rem;
Line 373: Line 399:
 
   }
 
   }
  
−
   #content>.pageContent-main__textBox .name {
+
   #pagecontent .pageContent-main__textBox .name {
 
     font-weight: bold;
 
     font-weight: bold;
 
   }
 
   }
  
−
   #content>.pageContent-main__textBox .image {
+
   #pagecontent .pageContent-main__textBox .image {
 
     width: 80%;
 
     width: 80%;
 
     margin: 2rem 10%;
 
     margin: 2rem 10%;
 
   }
 
   }
−
 
+
  .pageContent-side .mytoc{
 +
    position: -webkit-sticky;
 +
    position: sticky;
 +
    top: 8rem;
 +
    background: transparent;
 +
    padding:1rem;
 +
    border: none;
 +
  }
 +
  .pageContent-side .mytoc .toc_list{
 +
    font-size: .9rem;
 +
    color: #888;
 +
    line-height: 1.5rem;
 +
  }
 +
  .pageContent-side .mytoc .toc_list .toclist__item{
 +
    color: #888;
 +
    text-decoration: none;
 +
  }
 +
  .pageContent-side .mytoc .toc_list .toclist__item:hover{
 +
    color: var(--primary)
 +
  }
 
   @media screen and (max-width: 800px) {
 
   @media screen and (max-width: 800px) {
 
     #home>.screen>#group1>.title {
 
     #home>.screen>#group1>.title {

Revision as of 18:52, 26 October 2020

Model

Overview

Being undergraduate iGEMers, we understand the inspiration that synthetic biology can kindle in young minds. To enlighten younger generations, we delivered lectures to students of various grades, explaining the profound in simple terms.

Synthetic Biology Day(Changsha No. 21 Middle School)