Team:CityU HK/HumanPractice

From 2014.igem.org

(Difference between revisions)
 
(298 intermediate revisions not shown)
Line 1: Line 1:
{{:Team:CityU_HK/Template}}
{{:Team:CityU_HK/Template}}
-
{{:Team:CityU HK/Template/CSS}}
 
<html>
<html>
Line 6: Line 5:
<head>
<head>
-
<style>
 
-
h1 {
 
-
      text-align: center;
 
-
      font-weight: 800;
 
-
      color: #555555;
 
-
}
 
-
 
-
p {
 
-
      text-align: center;
 
-
      font-weight: 100;
 
-
      color:#555555;
 
-
}
 
 +
<style>
.jumbotron {
.jumbotron {
-
       background-image: url('https://static.igem.org/mediawiki/2014/1/15/CityUHK_HumanPractice_jumbotron.JPG');
+
       background-image: url('https://static.igem.org/mediawiki/parts/7/75/CityUHK_HP_1400x700_Maria.jpg');
-
       background-size: 1300px 790px;
+
       background-size: 100% ;
-
       height: 790px;
+
      background-repeat: no-repeat;
 +
       height: 640px;
       position: relative;
       position: relative;
-
       top: -10px;
+
       top: -53px;
 +
      margin-bottom: 0;
 +
      z-index: -1;
}
}
.jumbotron h1 {
.jumbotron h1 {
-
    color: #fff;
+
     font-weight: 600;
-
     font-weight: 400;
+
     font-family: 'Raleway', sans-serif;
     font-family: 'Raleway', sans-serif;
     font-size: 8em;
     font-size: 8em;
 +
    margin:0;
 +
    position: relative;
 +
    top: -50px;
}
}
.jumbotron p {
.jumbotron p {
     color: #fff;
     color: #fff;
-
     font-weight: 200;
+
     font-weight: 300;
     font-family: 'Raleway', sans-serif;
     font-family: 'Raleway', sans-serif;
-
     font-size: 3em;
+
     font-size: 1.7em;
-
     width: 500px;
+
     width: 800px;
 +
    text-align: center;
 +
    margin:0 auto;
 +
    position: relative;
 +
    top: -100px;
}
}
 +
 +
#introduction {
 +
    margin:0;
 +
    padding: 0 0 80px 0;
 +
}
 +
 +
#presentation {
 +
    background: #F0EEEA;
 +
    margin:0;
 +
    padding: 50px 0 70px 0;
 +
}
 +
 +
#presentation h1 {
 +
      padding-bottom: 50px;
 +
      margin:0;
 +
}
 +
 +
#survey h2 {
 +
      font-size: 25px;
 +
      padding: 10px;
 +
      text-align: center;
 +
      font-weight: 400;
 +
      color: #555555;
 +
}
 +
 +
iframe {
 +
      width: 100%;
 +
      margin:0 auto;
 +
      border-radius: 3px;
 +
}
 +
 +
#survey img {
 +
      width: 100%;
 +
      margin:0 auto;
 +
}
 +
 +
#main-content h1 {
 +
      text-align: center;
 +
      font-weight: 600;
 +
      color: #555555;
 +
}
 +
 +
#main-content p {
 +
    color: #555555;
 +
      text-align: justify;
 +
      font-weight: 400;
 +
      font-size: 1em;
 +
      /*padding: 0 10% 0 10%;*/
 +
      max-width: 900px;
 +
      margin: 0 auto;
 +
      line-height: 2;
 +
}
 +
 +
#main-content a {
 +
        color: #3cc;
 +
        font-weight: bold;
 +
}
 +
 +
#main-content a:hover {
 +
        color: orange;
 +
        text-decoration: none;
 +
}
 +
 +
.arrow-down {
 +
width: 0;
 +
height: 0;
 +
border-left: 50px solid transparent;
 +
border-right: 50px solid transparent;
 +
border-top: 30px solid #fff;
 +
        position: relative;
 +
        top: 20px;
 +
        margin: 0 auto;
 +
        z-index: 2;
 +
}
 +
#arrow2 {
 +
        border-top: 30px solid #F0EEEA;
 +
        position: relative;
 +
        top: -10px;
 +
}
 +
 +
#lightbox h1 {
 +
        color:#555555;
 +
      font-weight:400;
 +
}
 +
#footer h3 {
 +
color: #dde0e4;
 +
        font-family: 'Raleway', sans-serif;
 +
        font-size: 18px;
 +
        font-weight: bold;
 +
        padding-bottom: 20px;
 +
}
 +
 +
#footer p {
 +
color: #777777;
 +
text-align: center;
 +
        font-size: 16px;
 +
        font-weight: 400;
 +
}
 +
 +
#copyright p {
 +
        font-size: 16px;
 +
        font-weight: 400;
 +
        color: #777777;
 +
        font-family: 'Raleway', sans-serif;
 +
}
 +
</style>
 +
 +
<style>  /*============ word animation===========*/
 +
.jumbotron h1 {
 +
color:#fff;
 +
  text-align: center;
 +
  -webkit-transform-style: preserve-3d;
 +
  -moz-transform-style: preserve-3d;
 +
  transform-style: preserve-3d;
 +
  -webkit-transform: translate3d(0,0,0);
 +
  -moz-transform: translate3d(0,0,0);
 +
  transform: translate3d(0,0,0);
 +
  opacity: 0;
 +
  -webkit-animation: anim 3.2s ease-out forwards 1s;
 +
  animation: anim 3.2s ease-out forwards 1s;
 +
}
 +
strong {
 +
  display: block;
 +
  font-weight: 400;
 +
}
 +
 +
 +
@-webkit-keyframes anim {
 +
  0% {
 +
    text-shadow: 0 0 50px #fff;
 +
    letter-spacing: 80px;
 +
    opacity: 0;
 +
    -webkit-transform: rotateY(-90deg);
 +
  }
 +
  50% {
 +
    text-shadow: 0 0 1px #fff;
 +
    opacity: 0.8;
 +
    -webkit-transform: rotateY(0deg);
 +
  }
 +
  75% {
 +
    text-shadow: 0 0 1px #fff;
 +
    opacity: 0.8;
 +
    -webkit-transform: rotateY(0deg) translateZ(60px);
 +
  }
 +
  100% {
 +
    text-shadow: 0 0 1px #fff;
 +
    opacity: 0.8;
 +
    letter-spacing: 8px;
 +
    -webkit-transform: rotateY(0deg) translateZ(100px);
 +
  }
 +
 +
}
 +
@keyframes anim {
 +
  0% {
 +
    text-shadow: 0 0 50px #fff;
 +
    letter-spacing: 80px;
 +
    opacity: 0;
 +
    -moz-transform: rotateY(-90deg);
 +
  }
 +
  50% {
 +
    text-shadow: 0 0 1px #fff;
 +
    opacity: 0.8;
 +
    -moz-transform: rotateY(0deg);
 +
  }
 +
  75% {
 +
    text-shadow: 0 0 1px #fff;
 +
    opacity: 0.8;
 +
    -moz-transform: rotateY(0deg) translateZ(60px);
 +
  }
 +
  100% {
 +
    text-shadow: 0 0 1px #fff;
 +
    opacity: 0.8;
 +
    letter-spacing: 8px;
 +
    -moz-transform: rotateY(0deg) translateZ(100px);
 +
  }
 +
</style>
 +
 +
<style>  <!--=============lightbox css ============-->
 +
 +
.italic { font-style: italic; }
 +
.small { font-size: 0.8em; }
 +
 +
#lightbox {
 +
      padding: 0 100px 30px 100px;
 +
      margin:0;
 +
}
 +
 +
/** LIGHTBOX MARKUP **/
 +
 +
.lightbox {
 +
/** Default lightbox to hidden */
 +
display: none;
 +
 +
/** Position and style */
 +
position: fixed;
 +
z-index: 999;
 +
width: 100%;
 +
height: 100%;
 +
text-align: center;
 +
top: 0;
 +
left: 0;
 +
background: rgba(0,0,0,0.8);
 +
}
 +
 +
.lightbox img {
 +
/** Pad the lightbox image */
 +
max-width: 90%;
 +
max-height: 80%;
 +
margin-top: 2%;
 +
}
 +
 +
.lightbox:target {
 +
/** Remove default browser outline */
 +
outline: none;
 +
 +
/** Unhide lightbox **/
 +
display: block;
 +
}           
</style>
</style>
</head>
</head>
-
<body>
+
<body id="top">
<div class="jumbotron">
<div class="jumbotron">
<div class="container">
<div class="container">
       <h1>Human Practice</h1>
       <h1>Human Practice</h1>
-
       <p>We educated secondary school kids about synthetic biology and the safety issues. Laboratory workshop was held to let school kids do science experiments.</p>
+
       <p>We educated secondary school kids about synthetic biology and the safety issues. We also conducted a survey on understanding of synthetic biology in public.</p>
</div>
</div>
</div>
</div>
-
<div class="container">
+
 
-
<div class="row">
+
<div class="row" id="main-content">
 +
    <div class="col-md-12" id="introduction">
 +
          <h1> Introduction</h1>
 +
          <p>Synthetic Biology is certainly an emerging topic of importance in the field of Biotechnology. While every Synthetic Biologist or iGEMer is working hard on their masterpiece, at the same time, we should also promote Synthetic Biology to the general public. Society is always a key factor for the development of a new Science discipline or subject like Synthetic Biology. This is because what we are doing has a positive impact on society. </p>
 +
            <br><p>In order to gain greater support and trust from the public and promote the development of Synthetic Biology, we have the responsibility to objectively inform society about recent advances in Synthetic Biology and the iGEM competition. We believe that educating high school students is one of the most powerful means to build up a positive image for Synthetic Biology. For this reason, we have approached local high school students in our human practice outreach to provide them with information about this new scientific field.</p>
 +
    </div>
 +
 
 +
    <div class="col-md-12">
 +
            <div class="arrow-down"></div>
 +
    </div>
     <div class="col-md-12" id="presentation">
     <div class="col-md-12" id="presentation">
           <h1> What we have done</h1>
           <h1> What we have done</h1>
-
           <p>This part is under construction.</p>
+
           <p>We have delivered a <b>seminar</b> on Synthetic Biology and the iGEM competition to our local high school students. At the seminar, we aimed:</p> <br>
 +
          <p><b>1.  To teach students more about Genetics.</p></b><br>
 +
          <p><b>2.  To give a clearer picture about Synthetic Biology to Secondary School students.</p></b> <br>
 +
          <p><b>3.  To raise the awareness and interest of students in the field of Biotechnology.</p></b><br>
 +
          <p><b>4.  To build a knowledge base for Secondary students in the field of Synthetic Biology.</p></b><br> 
 +
          <p>Basically, in our sharing, we provided information about the iGEM competition and the past inventions of the iGEMers, background about the CityU HK iGEM project, the essence of Synthetic Biology and some safety concerns in the field of Synthetic Biology. Please find our <b>presentation materials</b> on <a href="http://app.emaze.com/535871/human-practice-copy1-copy1">this link</a>. We hope you will have a lot of fun exploring our wiki!</p>
 +
     
     </div>
     </div>
 +
    <div class="col-md-12">
 +
            <div class="arrow-down" id="arrow2"></div>
 +
    </div>
     <div class="col-md-12" id="survey">
     <div class="col-md-12" id="survey">
 +
            <h1> Survey </h1>
 +
            <p> We have also designed a set of survey questions for our audiences to fill in after listening to our seminar. The survey was designed based on the aims of the talk. Through the survey results, we can see if our outreach has achieved our aims. We visited and presented a seminar to a class of high school Biology students on 18/8/2014. Also, we invited two groups of high school Science students to visit our iGEM laboratory on 17/7/2014 and 18/7/2014. In total, 55 students attended and participated in our iGEM workshop at City University. </p>
 +
 +
            <h2>What did the students think?</h2>
 +
                  <iframe src='http://my.visme.co/embed/igem-human-practice-c4' height='500' width='1200' style='border: 0px;' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
 +
 +
<br><br><br>
 +
                  <p>Following the seminar, we raised an important question, asking the high school students for their ideas about the creation of new biological machines. Below are some of their feedbacks:</p>
 +
                  <img src="https://static.igem.org/mediawiki/2014/e/e4/CityU_HK_Hp_survey.jpg" height="30%">
 +
                  <p>We could see that our audience were  very receptive and open-minded to Synthetic Biology. They thought it is a positive thing and they would also like to participate in this great event in the future! All of them also have potential to be  Synthetic Biologists because their ideas were creative, beyond our expectations!</p>
 +
<br><br><br>
     </div>
     </div>
</div> <!--end of row-->
</div> <!--end of row-->
-
</div> <!-- end of container-->
 
 +
          <!-- thumbnail image wrapped in a link -->
 +
          <div class="row" id="lightbox">
 +
              <div class="col-md-12">
 +
              <center><h1>Gallery</h1></center>
 +
              <a href="#img1">
 +
                    <img src="https://static.igem.org/mediawiki/2014/5/5e/CityU_HK_Hp_gallery_img1_big.jpg" width="250px" height="166px">
 +
              </a>
 +
              <a href="#img2">
 +
                    <img src="https://static.igem.org/mediawiki/2014/2/25/CityU_HK_hp_gallery_img2.JPG" width="250px" height="166px">
 +
              </a>
 +
              <a href="#img3">
 +
                    <img src="https://static.igem.org/mediawiki/2014/4/4d/CityU_HK_Hp_gallery_img3.jpg" width="250px" height="166px">
 +
              </a>
 +
              <a href="#img4">
 +
                    <img src="https://static.igem.org/mediawiki/2014/8/87/CityU_HK_Hp_gallery_img4.jpg" width="250px" height="166px">
 +
              </a>
 +
              <a href="#img5">
 +
                    <img src="https://static.igem.org/mediawiki/2014/1/19/CityU_HK_Hp_gallery_img5.jpg" width="250px" height="166px">
 +
              </a>
 +
              <a href="#img6">
 +
                    <img src="https://static.igem.org/mediawiki/2014/5/5f/CityU_HK_Hp_gallery_img6.jpg" width="250px" height="166px">
 +
              </a>
 +
              <a href="#img7">
 +
                    <img src="https://static.igem.org/mediawiki/2014/3/3c/CityU_HK_Hp_gallery_img7.jpg" width="250px" height="166px">
 +
              </a>
 +
              <a href="#img8">
 +
                    <img src="https://static.igem.org/mediawiki/2014/a/ab/CityU_HK_hp_gallery_img8.jpg" width="250px" height="166px">
 +
              </a>
 +
 +
 +
            <!-- lightbox container hidden with CSS -->
 +
                <a href="#_" class="lightbox" id="img1">
 +
                      <img src="https://static.igem.org/mediawiki/2014/5/5e/CityU_HK_Hp_gallery_img1_big.jpg">
 +
                </a>
 +
                <a href="#_" class="lightbox" id="img2">
 +
                      <img src="https://static.igem.org/mediawiki/2014/2/25/CityU_HK_hp_gallery_img2.JPG">
 +
                </a>
 +
                <a href="#_" class="lightbox" id="img3">       
 +
                      <img src="https://static.igem.org/mediawiki/2014/4/4d/CityU_HK_Hp_gallery_img3.jpg">
 +
                </a>
 +
                <a href="#_" class="lightbox" id="img4">       
 +
                      <img src="https://static.igem.org/mediawiki/2014/8/87/CityU_HK_Hp_gallery_img4.jpg">
 +
                </a>
 +
                <a href="#_" class="lightbox" id="img5">       
 +
                      <img src="https://static.igem.org/mediawiki/2014/1/19/CityU_HK_Hp_gallery_img5.jpg">
 +
                </a>
 +
                <a href="#_" class="lightbox" id="img6">       
 +
                      <img src="https://static.igem.org/mediawiki/2014/5/5f/CityU_HK_Hp_gallery_img6.jpg">
 +
                </a>
 +
                <a href="#_" class="lightbox" id="img7">       
 +
                      <img src="https://static.igem.org/mediawiki/2014/3/3c/CityU_HK_Hp_gallery_img7.jpg">
 +
                </a>
 +
                <a href="#_" class="lightbox" id="img8">       
 +
                      <img src="https://static.igem.org/mediawiki/2014/a/ab/CityU_HK_hp_gallery_img8.jpg">
 +
                </a>
 +
            </div></div>
<!--==================== footer ===========================-->
<!--==================== footer ===========================-->
<div id="footer" class="row">
<div id="footer" class="row">
<div class="col-md-7">
<div class="col-md-7">
-
       <h4>Sponsors</h3>
+
       <h3>Sponsors</h3>
       <a href="http://www.cityu.edu.hk/" target="_blank"><img src="https://static.igem.org/mediawiki/2014/9/9c/CityU_HK_citylogo.png" width="95"></a>
       <a href="http://www.cityu.edu.hk/" target="_blank"><img src="https://static.igem.org/mediawiki/2014/9/9c/CityU_HK_citylogo.png" width="95"></a>
     <a href="http://www6.cityu.edu.hk/bhdbapp/deptweb/index.html" target="_blank"><img src="https://static.igem.org/mediawiki/2014/9/98/CityU_HK_bchlogo.png" width="80"></a>
     <a href="http://www6.cityu.edu.hk/bhdbapp/deptweb/index.html" target="_blank"><img src="https://static.igem.org/mediawiki/2014/9/98/CityU_HK_bchlogo.png" width="80"></a>
 +
      <img src="https://static.igem.org/mediawiki/2014/b/b1/CityU_HK_Invitrogen.png" width="100">
 +
    <img src="https://static.igem.org/mediawiki/2014/7/7a/CityU_HK_Neblogocol.png" width="135">
 +
    <img src="https://static.igem.org/mediawiki/2014/d/dc/CityU_HK_IDT-Logo.png" width="125">
</div> <!-- end of col-md-7-->
</div> <!-- end of col-md-7-->
 +
<div class="col-md-5">
<div class="col-md-5">
-
       <h4>Stay connected!</h4>
+
       <h3>Stay connected!</h3>
-
       <p>email: <a href="#">cityuhk.igem@gmail.com</a></p>
+
       <p>email: <a href="mailto:cityuhk.igem@gmail.com">cityuhk.igem@gmail.com</a></p>
-
       <a href="#"><img src="https://s3.amazonaws.com/sbweb/images/icon-facebook-grey-150x150.png" width="50" height="48"></a>
+
       <a href="http://www.facebook.com/igem.2014CityU"><img src="https://static.igem.org/mediawiki/2014/3/31/CityU_HK_fb_logo.png" width="50" height="48"></a>
-
       <a href="#"><img src="http://ibo2014.org/wordpress/wp-content/themes/ibo2014/img/navbar/twitter_icon.png" width="49" height="51"></a>
+
       <a href="http://twitter.com/CityUHK_iGEM"><img src="http://ibo2014.org/wordpress/wp-content/themes/ibo2014/img/navbar/twitter_icon.png" width="49" height="51"></a>
-
       <a href="#"><img src="http://3.bp.blogspot.com/-zNUyQIVgA8Q/Ue8USlgr8II/AAAAAAAAl1w/6ZCWqhS59Ts/s1600/youtube.png" width="52" height="50"></a>
+
       <a href="http://www.youtube.com/channel/UC0_bUWwafB4m0K6mFdXN7-w"><img src="https://static.igem.org/mediawiki/2014/1/12/CityU_HK_youtube_logo.png" width="52" height="50"></a>
</div> <!--end of col-md-5-->
</div> <!--end of col-md-5-->
-
</div> <!-- end of #footer -->
+
</div> <!-- end of row-->
 +
<div class="row">
 +
<div id="copyright" class="col-md-12">
 +
<p>Copyright &copy; iGEM CityU HK 2014. All Rights Reserved</p>
 +
</div>
 +
</div>
 +
<!--end of footer—>
</body>
</body>
</html>
</html>

Latest revision as of 03:36, 18 October 2014

Bootstrap 101 Template

Human Practice

We educated secondary school kids about synthetic biology and the safety issues. We also conducted a survey on understanding of synthetic biology in public.

Introduction

Synthetic Biology is certainly an emerging topic of importance in the field of Biotechnology. While every Synthetic Biologist or iGEMer is working hard on their masterpiece, at the same time, we should also promote Synthetic Biology to the general public. Society is always a key factor for the development of a new Science discipline or subject like Synthetic Biology. This is because what we are doing has a positive impact on society.


In order to gain greater support and trust from the public and promote the development of Synthetic Biology, we have the responsibility to objectively inform society about recent advances in Synthetic Biology and the iGEM competition. We believe that educating high school students is one of the most powerful means to build up a positive image for Synthetic Biology. For this reason, we have approached local high school students in our human practice outreach to provide them with information about this new scientific field.

What we have done

We have delivered a seminar on Synthetic Biology and the iGEM competition to our local high school students. At the seminar, we aimed:


1. To teach students more about Genetics.


2. To give a clearer picture about Synthetic Biology to Secondary School students.


3. To raise the awareness and interest of students in the field of Biotechnology.


4. To build a knowledge base for Secondary students in the field of Synthetic Biology.


Basically, in our sharing, we provided information about the iGEM competition and the past inventions of the iGEMers, background about the CityU HK iGEM project, the essence of Synthetic Biology and some safety concerns in the field of Synthetic Biology. Please find our presentation materials on this link. We hope you will have a lot of fun exploring our wiki!

Survey

We have also designed a set of survey questions for our audiences to fill in after listening to our seminar. The survey was designed based on the aims of the talk. Through the survey results, we can see if our outreach has achieved our aims. We visited and presented a seminar to a class of high school Biology students on 18/8/2014. Also, we invited two groups of high school Science students to visit our iGEM laboratory on 17/7/2014 and 18/7/2014. In total, 55 students attended and participated in our iGEM workshop at City University.

What did the students think?




Following the seminar, we raised an important question, asking the high school students for their ideas about the creation of new biological machines. Below are some of their feedbacks:

We could see that our audience were very receptive and open-minded to Synthetic Biology. They thought it is a positive thing and they would also like to participate in this great event in the future! All of them also have potential to be Synthetic Biologists because their ideas were creative, beyond our expectations!