Loading menubar.....

Difference between revisions of "Team:CAU China/Public Engagement"

Line 311: Line 311:
  
 
.h2,h2 {
 
.h2,h2 {
   font-size: 2rem
+
   font-size: 2.5rem
 
}
 
}
  
Line 2,944: Line 2,944:
 
   float: left;
 
   float: left;
 
   min-width: 10rem;
 
   min-width: 10rem;
   padding: .5rem 0;
+
   padding: 0rem 1.5rem;
 +
  padding-bottom:1rem;
 
   margin: .125rem 0 0;
 
   margin: .125rem 0 0;
 
   font-size: 1rem;
 
   font-size: 1rem;
Line 5,732: Line 5,733:
 
   -ms-flex-pack: center;
 
   -ms-flex-pack: center;
 
   justify-content: center;
 
   justify-content: center;
   width: 15%;
+
   width: 1%;
   color: #fff;
+
   color: #ff9ea6;
 
   text-align: center;
 
   text-align: center;
 
   opacity: .5
 
   opacity: .5
Line 6,048: Line 6,049:
  
 
.d-inline {
 
.d-inline {
   display: inline!important
+
   display: inline!important;
 +
  font-size:1.75rem
 
}
 
}
  
Line 9,197: Line 9,199:
 
   .post-content a{
 
   .post-content a{
 
     color:#40E0D0;
 
     color:#40E0D0;
 +
  }
 +
 +
  .post-content p1{
 +
    color:#000000;
 +
    font-size: 1.5rem;
 +
  }
 +
 +
  .post-content li{
 +
    color:#000000;
 +
    font-size: 1.5rem;
 
   }
 
   }
  
Line 9,268: Line 9,280:
 
     transition: background-color 0.3s ease 0s, color 0.3s ease 0s;
 
     transition: background-color 0.3s ease 0s, color 0.3s ease 0s;
 
     border-radius: 80%;
 
     border-radius: 80%;
     box-shadow: 0 0 0 1px #d9d9d9 inset;
+
     box-shadow: 0 0 0 1px #000000 inset;
 
     color: #4d4d4d;
 
     color: #4d4d4d;
 
   }
 
   }
Line 9,529: Line 9,541:
 
     <a class="navbar-brand" href="https://2019.igem.org/Team:CAU_China">
 
     <a class="navbar-brand" href="https://2019.igem.org/Team:CAU_China">
 
       <img src="https://2019.igem.org/wiki/images/e/e1/T--CAU_China--logo.png" alt="logo" style="width:70px;height:28px">
 
       <img src="https://2019.igem.org/wiki/images/e/e1/T--CAU_China--logo.png" alt="logo" style="width:70px;height:28px">
       <h5 class="d-inline ml-3">CAU_China</h5>
+
       <h5 class="d-inline ml-3">CAU_China</h5>
 
     </a>
 
     </a>
 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
Line 9,583: Line 9,595:
 
           </a>
 
           </a>
 
           <div class="dropdown-menu">
 
           <div class="dropdown-menu">
             <a class="dropdown-item" href="https://2019.igem.org/Team:CAU_China/Human_Practices">Human Practices</a>
+
             <a class="dropdown-item" href="https://2019.igem.org/Team:CAU_China/Human_Practices">Overview</a>
 +
            <a class="dropdown-item" href="https://2019.igem.org/Team:CAU_China/Integrated_HP">Integrated_HP</a>
 
             <a class="dropdown-item" href="https://2019.igem.org/Team:CAU_China/Public_Engagement">Education & Engagement</a>
 
             <a class="dropdown-item" href="https://2019.igem.org/Team:CAU_China/Public_Engagement">Education & Engagement</a>
 
           </div>
 
           </div>
Line 9,589: Line 9,602:
 
         <li class="nav-item dropdown mx-3">
 
         <li class="nav-item dropdown mx-3">
 
           <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
 
           <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
             AWARDS
+
             MODEL
 
           </a>
 
           </a>
 
           <div class="dropdown-menu">
 
           <div class="dropdown-menu">
            <a class="dropdown-item" href="https://2019.igem.org/Team:CAU_China/Measurement">Measurement</a>
 
 
             <a class="dropdown-item" href="https://2019.igem.org/Team:CAU_China/Model">Model</a>
 
             <a class="dropdown-item" href="https://2019.igem.org/Team:CAU_China/Model">Model</a>
 +
            <a class="dropdown-item" href="https://2019.igem.org/Team:CAU_China/Decision_Model">Decision Model</a>
 +
            <a class="dropdown-item" href="https://2019.igem.org/Team:CAU_China/Dynamics_Model">Dynamics Model</a>
 
           </div>
 
           </div>
 
         </li>
 
         </li>
Line 9,758: Line 9,772:
 
         <div class="col-md-10" style="height: 100%;margin-top: 4em;">
 
         <div class="col-md-10" style="height: 100%;margin-top: 4em;">
 
       <div id="logoPrinteria" class="item" style="
 
       <div id="logoPrinteria" class="item" style="
     background-image: url(https://2019.igem.org/wiki/images/f/f6/T--CAU_China--Lab14.jpg);
+
     background-image: url(https://2019.igem.org/wiki/images/6/61/T--CAU_China--Lab5.jpg);
 
     height: 100%;
 
     height: 100%;
 
     width: 100%;background-attachment: fixed;background-size: cover;"><img src="https://2019.igem.org/wiki/images/a/a1/T--CAU_China--word-education_%26_engagement.png" style=" margin-top: 0px;">
 
     width: 100%;background-attachment: fixed;background-size: cover;"><img src="https://2019.igem.org/wiki/images/a/a1/T--CAU_China--word-education_%26_engagement.png" style=" margin-top: 0px;">
Line 9,774: Line 9,788:
 
</div>
 
</div>
  
 +
<div class="phaContainer">
 +
  <aside id="phaContentsOuter">
 +
    <aside id="phaContents" class="table-of-contents">
 +
      <!-- will be generated with JS -->
 +
    </aside>
 +
  </aside>
 +
  <main class="post-content">
 +
    <h2>Overview & Design</h2>
 +
    <div class="row">
 +
      <div class="col-12">
 +
        <p>
 +
          &nbsp;&nbsp;&nbsp;&nbsp;Our education and public engagement work are divided into two major areas, one for students and one for the public. Students, especially college students, have a good knowledge base, so we can discuss the true meaning of synthetic biology and promote the iGEM competition. Of course, the rigorous logic of synthetic biology has to be cultivated from an early age. Therefore, we contacted Beijing Chaoyang Foreign Language School and led the middle school students to make biological models together, to complete their own designs and to experience the engineering ideas in synthetic biology. In the process of making biological models together, we were also influenced by the novel ideas of the children and opened up our minds. For the public, many biological terms are not easy to understand, so we use WeChat platform and scientific animations to make more people understand synthetic biology.
 +
        </p>
 +
      </div>
 +
      </div>
 +
    <h2>The"Synthetic Biology Corner"</h2>
 +
    <div class="row">
 +
      <div class="col-12">
 +
        <p>
 +
          &nbsp;&nbsp;&nbsp;&nbsp;We received support from 7 professors in our college and introduced the ideas of synthetic biology to the students in biology-related courses such as molecular biology, microbiology, and microbial genetics, and after class, we discussed with them about what's on their mind. Because it was introduced in front of the classroom ten minutes ahead of each class, we called it "synthetic biology corner." This trick of using piecemeal time to introduce knowledge has aroused the interest of many students, and we usually continue our discussion after class.
 +
        </p>
 +
      </div>
 +
    </div>
  
 +
    <div class="row">
 +
      <div class="col-12 col-md-6">
 +
        <img src="https://2019.igem.org/wiki/images/d/d3/T--CAU_China--Hp22.png" style="width:400px;height:280px;margin-left: 0%;margin-top: 0%;" class="figure-img img-fluid rounded" >
  
 +
      </div>
 +
      <div class="col-12 col-md-6">
 +
        <figure class="figure">
 +
          <img src="https://2019.igem.org/wiki/images/b/b5/T--CAU_China--Hp23.png" style="width:400px;height:280px;margin-left: 0%;margin-top: 0%;" class="figure-img img-fluid rounded" >
  
 +
        </figure>
 +
      </div>
 +
    </div>
  
 +
    <style>
 +
      .btn {
 +
        font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
 +
        transition: 0.1s linear;
 +
        -webkit-transition: 0.1s linear;
 +
        -moz-transition: 0.1s linear;
 +
        border-radius: 6px;
 +
        padding-top: 0.46428571em;
 +
        padding-bottom: 0.46428571em;
 +
        padding-right: 2.78571429em;
 +
        padding-left: 2.78571429em;
 +
        border: 1px solid #252525;
 +
        border-width: 1px;
 +
        font-size: inherit;
 +
        line-height: 1.85714286em;
 +
      }
 +
      .btn .btn__text,
 +
      .btn i {
 +
        color: #ff9ea6;
 +
        border-color: #252525;
 +
        font-weight: 700;
 +
        font-size: 0.85714286em;
 +
      }
 +
 +
      .carousel-inner > .item > img,
 +
      .carousel-inner > .item > a > img {
 +
        display: block;
 +
        max-width: 100%;
 +
        height: auto;
 +
      }
 +
 +
      .carousel {
 +
        position: relative;
 +
      }
 +
      .carousel-inner {
 +
        position: relative;
 +
        width: 100%;
 +
        overflow: hidden;
 +
      }
 +
      .carousel-inner > .item {
 +
        position: relative;
 +
        display: none;
 +
        -webkit-transition: .6s ease-in-out left;
 +
        -o-transition: .6s ease-in-out left;
 +
        transition: .6s ease-in-out left;
 +
      }
 +
      .carousel-inner > .item > img,
 +
      .carousel-inner > .item > a > img {
 +
        line-height: 1;
 +
      }
 +
      @media all and (transform-3d), (-webkit-transform-3d) {
 +
        .carousel-inner > .item {
 +
          -webkit-transition: -webkit-transform .6s ease-in-out;
 +
          -o-transition:      -o-transform .6s ease-in-out;
 +
          transition:        transform .6s ease-in-out;
 +
 +
          -webkit-backface-visibility: hidden;
 +
          backface-visibility: hidden;
 +
          -webkit-perspective: 1000;
 +
          perspective: 1000;
 +
        }
 +
        .carousel-inner > .item.next,
 +
        .carousel-inner > .item.active.right {
 +
          left: 0;
 +
          -webkit-transform: translate3d(100%, 0, 0);
 +
          transform: translate3d(100%, 0, 0);
 +
        }
 +
        .carousel-inner > .item.prev,
 +
        .carousel-inner > .item.active.left {
 +
          left: 0;
 +
          -webkit-transform: translate3d(-100%, 0, 0);
 +
          transform: translate3d(-100%, 0, 0);
 +
        }
 +
        .carousel-inner > .item.next.left,
 +
        .carousel-inner > .item.prev.right,
 +
        .carousel-inner > .item.active {
 +
          left: 0;
 +
          -webkit-transform: translate3d(0, 0, 0);
 +
          transform: translate3d(0, 0, 0);
 +
        }
 +
      }
 +
      .carousel-inner > .active,
 +
      .carousel-inner > .next,
 +
      .carousel-inner > .prev {
 +
        display: block;
 +
      }
 +
      .carousel-inner > .active {
 +
        left: 0;
 +
      }
 +
      .carousel-inner > .next,
 +
      .carousel-inner > .prev {
 +
        position: absolute;
 +
        top: 0;
 +
        width: 100%;
 +
      }
 +
      .carousel-inner > .next {
 +
        left: 100%;
 +
      }
 +
      .carousel-inner > .prev {
 +
        left: -100%;
 +
      }
 +
      .carousel-inner > .next.left,
 +
      .carousel-inner > .prev.right {
 +
        left: 0;
 +
      }
 +
      .carousel-inner > .active.left {
 +
        left: -100%;
 +
      }
 +
      .carousel-inner > .active.right {
 +
        left: 100%;
 +
      }
 +
      .carousel-control {
 +
        position: absolute;
 +
        top: 0;
 +
        bottom: 0;
 +
        left: 0;
 +
        width: 15%;
 +
        font-size: 20px;
 +
        color: #fff;
 +
        text-align: center;
 +
        text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
 +
        filter: alpha(opacity=50);
 +
        opacity: .5;
 +
      }
 +
      .carousel-control.left {
 +
        background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
 +
        background-image:      -o-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
 +
        background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
 +
        background-image:        linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
 +
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
 +
        background-repeat: repeat-x;
 +
      }
 +
      .carousel-control.right {
 +
        right: 0;
 +
        left: auto;
 +
        background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
 +
        background-image:      -o-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
 +
        background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
 +
        background-image:        linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
 +
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
 +
        background-repeat: repeat-x;
 +
      }
 +
      .carousel-control:hover,
 +
      .carousel-control:focus {
 +
        color: #fff;
 +
        text-decoration: none;
 +
        filter: alpha(opacity=90);
 +
        outline: 0;
 +
        opacity: .9;
 +
      }
 +
      .carousel-control .icon-prev,
 +
      .carousel-control .icon-next,
 +
      .carousel-control .glyphicon-chevron-left,
 +
      .carousel-control .glyphicon-chevron-right {
 +
        position: absolute;
 +
        top: 50%;
 +
        z-index: 5;
 +
        display: inline-block;
 +
      }
 +
      .carousel-control .icon-prev,
 +
      .carousel-control .glyphicon-chevron-left {
 +
        left: 50%;
 +
        margin-left: -10px;
 +
      }
 +
      .carousel-control .icon-next,
 +
      .carousel-control .glyphicon-chevron-right {
 +
        right: 50%;
 +
        margin-right: -10px;
 +
      }
 +
      .carousel-control .icon-prev,
 +
      .carousel-control .icon-next {
 +
        width: 20px;
 +
        height: 20px;
 +
        margin-top: -10px;
 +
        font-family: serif;
 +
        line-height: 1;
 +
      }
 +
      .carousel-control .icon-prev:before {
 +
        content: '\2039';
 +
      }
 +
      .carousel-control .icon-next:before {
 +
        content: '\203a';
 +
      }
 +
      .carousel-indicators {
 +
        position: absolute;
 +
        bottom: 10px;
 +
        left: 50%;
 +
        z-index: 15;
 +
        width: 60%;
 +
        padding-left: 0;
 +
        margin-left: -30%;
 +
        text-align: center;
 +
        list-style: none;
 +
      }
 +
      .carousel-indicators li {
 +
        display: inline-block;
 +
        width: 10px;
 +
        height: 10px;
 +
        margin: 1px;
 +
        text-indent: -999px;
 +
        cursor: pointer;
 +
        background-color: #000 \9;
 +
        background-color: rgba(0, 0, 0, 0);
 +
        border: 1px solid #fff;
 +
        border-radius: 10px;
 +
      }
 +
      .carousel-indicators .active {
 +
        width: 12px;
 +
        height: 12px;
 +
        margin: 0;
 +
        background-color: #fff;
 +
      }
 +
      .carousel-caption {
 +
        position: absolute;
 +
        right: 15%;
 +
        bottom: 20px;
 +
        left: 15%;
 +
        z-index: 10;
 +
        padding-top: 20px;
 +
        padding-bottom: 20px;
 +
        color: #fff;
 +
        text-align: center;
 +
        text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
 +
      }
 +
      .carousel-caption .btn {
 +
        text-shadow: none;
 +
      }
 +
      @media screen and (min-width: 768px) {
 +
        .carousel-control .glyphicon-chevron-left,
 +
        .carousel-control .glyphicon-chevron-right,
 +
        .carousel-control .icon-prev,
 +
        .carousel-control .icon-next {
 +
          width: 30px;
 +
          height: 30px;
 +
          margin-top: -15px;
 +
          font-size: 30px;
 +
        }
 +
        .carousel-control .glyphicon-chevron-left,
 +
        .carousel-control .icon-prev {
 +
          margin-left: -15px;
 +
        }
 +
        .carousel-control .glyphicon-chevron-right,
 +
        .carousel-control .icon-next {
 +
          margin-right: -15px;
 +
        }
 +
        .carousel-caption {
 +
          right: 20%;
 +
          left: 20%;
 +
          padding-bottom: 30px;
 +
        }
 +
        .carousel-indicators {
 +
          bottom: 20px;
 +
        }
 +
      }
 +
    </style>
 +
    <h2>iGEM Competition Propagation</h2>
 +
    <div class="row">
 +
      <div class="col-12">
 +
        <p>
 +
          &nbsp;&nbsp;&nbsp;&nbsp;We hosted an iGEM competition propaganda talk in our university and invited students from all grades and from all divisions to participate. In order to let more students know about it, we sent WeChat posts to expand the influence, hung our own poster in the campus, and distributed the iGEM brochures for the participants. At the meeting, we introduced the history of iGEM competition, the award requirements, team formation and the design of our E.SPA. The students who participated in the talk also raised many questions. Many students expressed their wish to participate in the competition next year.
 +
        </p>
 +
      </div>
 +
      <img src="https://2019.igem.org/wiki/images/c/cc/T--CAU_China--Hp32.jpg" style="width:500px;height:800px;margin-left: 22%;margin-top: 0%;" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
 +
    </div>
 +
    <div style="
 +
                        text-align: center;"><a class="btn btn--primary-1" href="https://2019.igem.org/wiki/images/b/b1/T--CAU_China--Hp30.pdf" style="
 +
                        border: none;
 +
                        ;
 +
                        background: #96FED1;
 +
                        padding-right: 2.78571429em;" target="blank">
 +
      <span class="btn__text">Biological handbook</span>
 +
    </a>
 +
    </div>
 +
    <h2>Middle School Workshop</h2>
 +
    <div class="row">
 +
      <div class="col-12">
 +
        <p>
 +
          &nbsp;&nbsp;&nbsp;&nbsp;In addition to promoting synthetic biology at the university, we also went to Beijing Chaoyang Foreign Language School to uncover the genetic secrets to the middle school students. After teaching the basics of DNA structure and central dogma, we set up a small workshop and made biological models together. The children’s ideas such as using E. coli as a coating that can automatically change color according to temperature are very creative, and have given us inspirations too.
 +
        </p>
 +
        <div class="row" style="padding-left:-50px" >
 +
          <div id="myCarousel" class="carousel slide" style="
 +
  margin:50px; width:825px;padding-left: 50px;">
 +
            <ol class="carousel-indicators">
 +
              <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 +
              <li data-target="#myCarousel" data-slide-to="1"></li>
 +
              <li data-target="#myCarousel" data-slide-to="2"></li>
 +
            </ol>
 +
            <div class="carousel-inner">
 +
              <div class="item active">
 +
                <img style="width:400px;height:250px;margin-left: 20%;margin-top: 0%;" src="https://2019.igem.org/wiki/images/b/b6/T--CAU_China--Hp24.png" alt="First slide">
 +
              </div>
 +
              <div class="item">
 +
                <img style="width:400px;height:250px;margin-left: 20%;margin-top: 0%;" src="https://2019.igem.org/wiki/images/e/e4/T--CAU_China--Hp25.png" alt="Second slide">
 +
              </div>
 +
              <div class="item">
 +
                <img  style="width:400px;height:250px;margin-left: 20%;margin-top: 0%;" src="https://2019.igem.org/wiki/images/6/6f/T--CAU_China--Hp26.png" alt="Third slide">
 +
              </div>
 +
            </div>
 +
            <a class="carousel-control left" href="#myCarousel"
 +
              data-slide="prev"> <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
 +
            <a class="carousel-control right" href="#myCarousel"
 +
              data-slide="next">&rsaquo;</a>
 +
          </div>
 +
        </div>
 +
        <p>
 +
          &nbsp;&nbsp;&nbsp;&nbsp;Below are some excellent examples made by these children.
 +
        </p>
 +
      </div>
 +
    </div>
 +
 +
    <div class="row">
 +
      <div class="col-xs-12 col-sm-6" >
 +
 +
        <img  style="width:400px;height:250px;margin-left: 0%;margin-top: 0%;" src="https://2019.igem.org/wiki/images/5/52/T--CAU_China--Hp28.png" alt="Third slide">
 +
 +
        <b>Figure 1</b> Animal Cell Structure Model by Zhiming Luo
 +
        <img  style="width:400px;height:250px;margin-left: 0%;margin-top: 0%;" src="https://2019.igem.org/wiki/images/d/d6/T--CAU_China--Hp27.png" alt="Third slide">
 +
 +
        <b>Figure 2</b> Eukaryotic Genetic Information by Haoran Gao
 +
      </div>
 +
      <div class="col-xs-12 col-sm-6">
 +
        <img  style="width:400px;height:520px;margin-left: 0%;margin-top: 0%;" src="https://2019.igem.org/wiki/images/5/51/T--CAU_China--Hp29.png" alt="Third slide">
 +
 +
        <b>Figure 3</b> DNA structure model by Lijing Xu
 +
      </div>
 +
    </div>
 +
 +
 +
    <h2>Scientific Animation - The World of Microorganisms </h2>
 +
    <div class="row">
 +
      <div class="col-12">
 +
        <p>
 +
          &nbsp;&nbsp;&nbsp;&nbsp;During the project E.SPA, we have always been thinking about how to popularize the power of microbes to the public. Therefore, we accepted the invitation of iGEM-Tianjin and joined the production of the " The World of Microorganisms " video compilation with 7 other teams. Based on the properties of the three bacteria species used in our project E.SPA, we created their cartoon characters with a simple introduction to arouse the public’s interest and deepen their understandings of microorganisms.
 +
        </p>
 +
      </div>
 +
    </div>
 +
 +
    <div style="
 +
                        text-align: center;"><a class="btn btn--primary-1" href="https://2019.igem.org/wiki/images/8/8a/T--CAU_China--video1.mov" style="
 +
                        border: none;
 +
                        ;
 +
                        background: #96FED1;
 +
                        padding-right: 2.78571429em;" target="blank">
 +
      <span class="btn__text">Kown More</span>
 +
    </a>
 +
    </div>
 +
 +
 +
    <h2>WeChat Official Account - iGEM CAU </h2>
 +
    <div class="row">
 +
      <div class="col-12">
 +
        <p>
 +
          &nbsp;&nbsp;&nbsp;&nbsp;According to the statistics, WeChat has 1.04 billion users in 2018. In China, everyone uses it and it has become the most important social media platform. Therefore, we created our own WeChat official account iGEM CAU and regularly post updates of our project E.SPA as well as the knowledge of synthetic biology, expecting to bring our knowledge to more users.
 +
        </p>
 +
      </div>
 +
    </div>
 +
 +
    <div style="
 +
                        text-align: center;"><a class="btn btn--primary-1" href="https://2019.igem.org/wiki/images/b/b1/T--CAU_China--Hp30.pdf" style="
 +
                        border: none;
 +
                        ;
 +
                        background: #96FED1;
 +
                        padding-right: 2.78571429em;" target="blank">
 +
      <span class="btn__text">Kown More</span>
 +
    </a>
 +
    </div>
 +
 +
 +
 +
 +
 +
 +
 +
</main>
 +
</div>
  
 
<script type="text/javascript" src="https://2019.igem.org/Template:CAU_China/5test_js?action=raw&amp;ctype=text/javascript"></script>
 
<script type="text/javascript" src="https://2019.igem.org/Template:CAU_China/5test_js?action=raw&amp;ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2019.igem.org/Template:CAU_China/9test_js?action=raw&amp;ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2019.igem.org/Template:CAU_China/10test_js?action=raw&amp;ctype=text/javascript"></script>
  
  
Line 10,037: Line 10,461:
  
 
   .navbar-collapse:after{clear:both;}
 
   .navbar-collapse:after{clear:both;}
   body{font-size:14px;line-height:1.42857143;color:#000;background-color:#ffffff;}
+
   body{font-size:16px;line-height:1.42857143;color:#000;background-color:#ffffff;}
   a{color: #2f4a98;text-decoration:none;}
+
   a{font-size:16px;color: #2f4a98;text-decoration:none;padding-left: 4px;padding-right: 24px}
 
   a:hover,
 
   a:hover,
 
   a:focus{color:#23527c;text-decoration:underline;}
 
   a:focus{color:#23527c;text-decoration:underline;}
Line 10,050: Line 10,474:
 
   /*** Footer ****/
 
   /*** Footer ****/
  
   footer{padding:2px 0;font-size:1px;color: #000;border-top:4px solid  #2f4a98;}
+
   footer{padding:2px 0;font-size:1px;color: #000;border-top:4px solid  #ff9ea6;}
 
   footer h4 { margin: 0; font-size: 16px; color: #004a98; margin-bottom:15px; }
 
   footer h4 { margin: 0; font-size: 16px; color: #004a98; margin-bottom:15px; }
  
Line 10,171: Line 10,595:
 
<div class="container">
 
<div class="container">
 
   <div class="footer_logo">
 
   <div class="footer_logo">
     <img src="https://2019.igem.org/wiki/images/9/90/T--CAU_China--logo2.png" alt="CTG: Crompton Technology Group"style="width:170px;height:150px;margin-left: 50%;margin-top: -15%;">
+
     <img src="https://2019.igem.org/wiki/images/9/90/T--CAU_China--logo2.png" alt="CTG: Crompton Technology Group"style="width:170px;height:150px;margin-left: 40%;margin-top: -16%;">
 
   </div>
 
   </div>
 
   <div class="footer_address">
 
   <div class="footer_address">
     <h4>College of Biology, China Agricultural University</h4>
+
     <h4>China Agricultural University</h4>
     <p>Tsinghua east road, <br>
+
     <p style="font-size: 14px">Tsinghua East Road 17#<br>
       BeiJing <br>
+
       Haidian District <br>
 +
      Beijing 100083<br>
 
       China</p>
 
       China</p>
 
   </div>
 
   </div>
Line 10,182: Line 10,607:
 
     <h4>Registered in China </h4>
 
     <h4>Registered in China </h4>
  
     <p><a href="tel:+86(0)-6273 7682"><i class="fa fa-phone"></i> +86(0)-6273 7682 </a><br>
+
     <p><a href="tel:+86(0)-6273 7682"style="font-size: 14px"><i class="fa fa-phone"></i> +86(0)-6273 7682 </a><br>
       <a href="mailto:igem2019cau@gmail.com"><i class="fa fa-envelope"></i> igem2019cau@gmail.com </a></p>
+
       <a href="mailto:igem2019cau@gmail.com"style="font-size: 14px"><i class="fa fa-envelope"></i> igem2019cau@gmail.com </a></p>
  
 
   </div>
 
   </div>
 
   <div class="footer_links">
 
   <div class="footer_links">
     <a href="http://utcaerospacesystems.com/Pages/Default.aspx"><img src="https://2019.igem.org/wiki/images/e/e1/T--CAU_China--logo.png" alt="UTC" target="_blank" rel="nofollow"style="width:150px;height:35;padding-right: 30%"></a>
+
     <a href="http://utcaerospacesystems.com/Pages/Default.aspx"><img src="https://2019.igem.org/wiki/images/e/e1/T--CAU_China--logo.png" alt="UTC" target="_blank" rel="nofollow"style="width:150px;height:35;padding-right: 40%"></a>
     <p>Follow us on: <a href="https://twitter.com/CollinsAero" target="_blank"><i class="fa fa-twitter" style="color: #55acee"></i> </a> <a href="https://mp.weixin.qq.com/s/Uti4lVH3ikfKt5vqaLG_AA" target="_blank"><i class="fa fa-wechat"></i> </a></p>
+
     <p style="font-size: 14px">Follow us on: <a href="https://twitter.com/CollinsAero" target="_blank" style="padding: 0rem 0rem"><i class="fa fa-twitter" style="color: #55acee"></i> </a> <a href="https://mp.weixin.qq.com/s/Uti4lVH3ikfKt5vqaLG_AA" target="_blank"style="padding: 0rem 0rem"><i class="fa fa-wechat"></i> </a></p>
 
   </div>
 
   </div>
 
</div>
 
</div>
Line 10,211: Line 10,636:
 
   <div class="footer-bottom">
 
   <div class="footer-bottom">
 
     <div class="row">
 
     <div class="row">
       <div class="col-sm-7 col-md-6 "><a href="" target="_blank" class="ue1">
+
       <div class="col-sm-7 col-md-6 "><a href="" target="_blank" class="ue1" style="font-size:14px;padding: 0rem 0rem">
 
         Copyright &copy;
 
         Copyright &copy;
 
         2019
 
         2019
         CAU_ESPA. All rights reserved |
+
         CAU_ESPA. All rights reserved | <a href="" target="_blank" class="ue1"style="font-size:14px;padding: 0rem 0rem">Website Design by</a><a href="https://2019.igem.org/Team:CAU_China/Team" target="_blank" class="ue" style="font-size:14px;padding: 0rem 0rem"> Leland</a>
        <a href="" target="_blank" class="ue1">Website Design by</a><a href="https://2019.igem.org/Team:CAU_China/Team" target="_blank" class="ue"> Leland</a>
+
 
       </div>
 
       </div>
 
     </div>
 
     </div>

Revision as of 12:46, 20 October 2019

Overview & Design

    Our education and public engagement work are divided into two major areas, one for students and one for the public. Students, especially college students, have a good knowledge base, so we can discuss the true meaning of synthetic biology and promote the iGEM competition. Of course, the rigorous logic of synthetic biology has to be cultivated from an early age. Therefore, we contacted Beijing Chaoyang Foreign Language School and led the middle school students to make biological models together, to complete their own designs and to experience the engineering ideas in synthetic biology. In the process of making biological models together, we were also influenced by the novel ideas of the children and opened up our minds. For the public, many biological terms are not easy to understand, so we use WeChat platform and scientific animations to make more people understand synthetic biology.

The"Synthetic Biology Corner"

    We received support from 7 professors in our college and introduced the ideas of synthetic biology to the students in biology-related courses such as molecular biology, microbiology, and microbial genetics, and after class, we discussed with them about what's on their mind. Because it was introduced in front of the classroom ten minutes ahead of each class, we called it "synthetic biology corner." This trick of using piecemeal time to introduce knowledge has aroused the interest of many students, and we usually continue our discussion after class.

iGEM Competition Propagation

    We hosted an iGEM competition propaganda talk in our university and invited students from all grades and from all divisions to participate. In order to let more students know about it, we sent WeChat posts to expand the influence, hung our own poster in the campus, and distributed the iGEM brochures for the participants. At the meeting, we introduced the history of iGEM competition, the award requirements, team formation and the design of our E.SPA. The students who participated in the talk also raised many questions. Many students expressed their wish to participate in the competition next year.

A generic square placeholder image with rounded corners in a figure.

Middle School Workshop

    In addition to promoting synthetic biology at the university, we also went to Beijing Chaoyang Foreign Language School to uncover the genetic secrets to the middle school students. After teaching the basics of DNA structure and central dogma, we set up a small workshop and made biological models together. The children’s ideas such as using E. coli as a coating that can automatically change color according to temperature are very creative, and have given us inspirations too.

    Below are some excellent examples made by these children.

Third slide Figure 1 Animal Cell Structure Model by Zhiming Luo Third slide Figure 2 Eukaryotic Genetic Information by Haoran Gao
Third slide Figure 3 DNA structure model by Lijing Xu

Scientific Animation - The World of Microorganisms

    During the project E.SPA, we have always been thinking about how to popularize the power of microbes to the public. Therefore, we accepted the invitation of iGEM-Tianjin and joined the production of the " The World of Microorganisms " video compilation with 7 other teams. Based on the properties of the three bacteria species used in our project E.SPA, we created their cartoon characters with a simple introduction to arouse the public’s interest and deepen their understandings of microorganisms.

WeChat Official Account - iGEM CAU

    According to the statistics, WeChat has 1.04 billion users in 2018. In China, everyone uses it and it has become the most important social media platform. Therefore, we created our own WeChat official account iGEM CAU and regularly post updates of our project E.SPA as well as the knowledge of synthetic biology, expecting to bring our knowledge to more users.