Difference between revisions of "Team:Hong Kong UCCKE"

 
(89 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{Hong_Kong_UCCKE/CSS/reset.css}} {{Hong_Kong_UCCKE/CSS/bootstrap.css}} {{Hong_Kong_UCCKE/CSS/style.css}} {{Hong_Kong_UCCKE/CSS/latofonts.css}} {{Hong_Kong_UCCKE/CSS/font-awesome.css}} {{Hong_Kong_UCCKE/CSS/jcarousel.responsive.css}}
 
{{Hong_Kong_UCCKE/CSS/reset.css}} {{Hong_Kong_UCCKE/CSS/bootstrap.css}} {{Hong_Kong_UCCKE/CSS/style.css}} {{Hong_Kong_UCCKE/CSS/latofonts.css}} {{Hong_Kong_UCCKE/CSS/font-awesome.css}} {{Hong_Kong_UCCKE/CSS/jcarousel.responsive.css}}
 
<html>
 
<html>
 +
 +
<meta name="theme-color" content="#5379d0">
 +
<style>
 +
。wholehead {background-color: #5379d0 !important;}
 +
.mainfooter {background-color: #5379d0 !important;}
 +
@-webkit-keyframes colours {
 +
    0% {background-color: #d05353;}
 +
    25% {background-color: #b1d053;}
 +
    50% {background-color: #53d091;}
 +
    75% {background-color: #5372d0;}
 +
    100% {background-color: #d05353;}
 +
 +
}
 +
@-moz-keyframes colours {
 +
    0% {background-color: #d05353;}
 +
    25% {background-color: #b1d053;}
 +
    50% {background-color: #53d091;}
 +
    75% {background-color: #5372d0;}
 +
    100% {background-color: #d05353;}
 +
 +
}
 +
@-webkit-keyframes colours3 {
 +
    0% {color: #d05353;}
 +
    25% {color: #b1d053;}
 +
    50% {color: #53d091;}
 +
    75% {color: #5372d0;}
 +
    100% {color: #d05353;}
 +
 +
}
 +
@-moz-keyframes colours3 {
 +
    0% {color: #d05353;}
 +
    25% {color: #b1d053;}
 +
    50% {color: #53d091;}
 +
    75% {color: #5372d0;}
 +
    100% {color: #d05353;}
 +
 +
}
 +
@-webkit-keyframes colours4 {
 +
    0% {color: #d05353; border: 1px solid #d05353 !important; }
 +
    25% {color: #b1d053; border: 1px solid #b1d053 !important;}
 +
    50% {color: #53d091; border: 1px solid #53d091 !important;}
 +
    75% {color: #5372d0; border: 1px solid #5372d0 !important;}
 +
    100% {color: #d05353; border: 1px solid #d05353 !important;}
 +
 +
}
 +
@-moz-keyframes colours4 {
 +
    0% {color: #d05353; border: 1px solid #d05353 !important;}
 +
    25% {color: #b1d053; border: 1px solid #b1d053 !important;}
 +
    50% {color: #53d091; border: 1px solid #53d091 !important;}
 +
    75% {color: #5372d0; border: 1px solid #5372d0 !important;}
 +
    100% {color: #d05353; border: 1px solid #d05353 !important;}
 +
 +
}
 +
 +
.wholehead {
 +
    -webkit-animation-direction: normal;
 +
    -webkit-animation-duration: 20s;
 +
    -webkit-animation-iteration-count: infinite;
 +
    -webkit-animation-name: colours;
 +
    -webkit-animation-timing-function: ease;
 +
    -moz-animation-direction: normal;
 +
    -moz-animation-duration: 20s;
 +
    -moz-animation-iteration-count: infinite;
 +
    -moz-animation-name: colours;
 +
    -moz-animation-timing-function: ease;
 +
}
 +
 +
.mainfooter {
 +
    -webkit-animation-direction: normal;
 +
    -webkit-animation-duration: 20s;
 +
    -webkit-animation-iteration-count: infinite;
 +
    -webkit-animation-name: colours;
 +
    -webkit-animation-timing-function: ease;
 +
    -moz-animation-direction: normal;
 +
    -moz-animation-duration: 20s;
 +
    -moz-animation-iteration-count: infinite;
 +
    -moz-animation-name: colours;
 +
    -moz-animation-timing-function: ease;
 +
}
 +
 +
 +
.copyrightfooter {background-color: #415fa2 !important;}
 +
@-webkit-keyframes colours2 {
 +
    0% {background-color: #a44141;}
 +
    25% {background-color: #73a441;}
 +
    50% {background-color: #41a4a4;}
 +
    75% {background-color: #7341a4;}
 +
    100% {background-color: #a44141;}
 +
 +
}
 +
@-moz-keyframes colours2 {
 +
    0% {background-color: #a44141;}
 +
    25% {background-color: #73a441;}
 +
    50% {background-color: #41a4a4;}
 +
    75% {background-color: #7341a4;}
 +
    100% {background-color: #a44141;}
 +
 +
}
 +
 +
.copyrightfooter {
 +
    -webkit-animation-direction: normal;
 +
    -webkit-animation-duration: 20s;
 +
    -webkit-animation-iteration-count: infinite;
 +
    -webkit-animation-name: colours2;
 +
    -webkit-animation-timing-function: ease;
 +
    -moz-animation-direction: normal;
 +
    -moz-animation-duration: 20s;
 +
    -moz-animation-iteration-count: infinite;
 +
    -moz-animation-name: colours2;
 +
    -moz-animation-timing-function: ease;
 +
}
 +
</style><link rel="stylesheet" href="https://2016.igem.org/Template:Hong_Kong_UCCKE/tourjs?action=raw&amp;ctype=text/css" type="text/css" />
 
<link rel="stylesheet" href="https://2016.igem.org/Team:Leiden/libraries/font-awesome-4-6-3/css/font-awesome-min?action=raw&amp;ctype=text/css" type="text/css" />
 
<link rel="stylesheet" href="https://2016.igem.org/Team:Leiden/libraries/font-awesome-4-6-3/css/font-awesome-min?action=raw&amp;ctype=text/css" type="text/css" />
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<div class="wholehead">
 
<div class="wholehead">
−
<script>
 
−
function spectrum(t) {
 
−
 
−
      var colours = ["green", "blue", "red"];
 
−
      var time = t && t < colours.length ? t : 0;
 
−
      var hue = colours[time];
 
  
−
      $(".wholehead").animate({
 
−
        backgroundColor: hue
 
−
      }, {
 
−
        easing: "linear",
 
−
        duration: 1000,
 
−
        complete: function() {
 
−
          time += 1;
 
−
          // recursively call `spectrum`,
 
−
          // with `time` as argument
 
−
          spectrum(time);
 
−
        }
 
−
      });
 
−
    };
 
−
    spectrum();
 
−
</div>
 
 
</html>
 
</html>
 
{{Hong_Kong_UCCKE/crazyheader}}
 
{{Hong_Kong_UCCKE/crazyheader}}
Line 35: Line 126:
 
             <div class="col-sm-12 header-text">
 
             <div class="col-sm-12 header-text">
 
                 <div>
 
                 <div>
−
                     <h1>UCCKE Bio Research Team</h1>
+
                     <h1 id="98uy5454g43">UCCKE Bio Research Team</h1>
−
                     <p>offendit malis arbitror appellat o arbitror nisi nam quamquam illustriora do se appellat praetermissum.</p>
+
                     <p style="text-align:left;">Welcome to our wiki! You can learn how to navigate around our wiki by clicking <a href="https://2016.igem.org/Team:Hong_Kong_UCCKE/Tour" style="color:#fff; border-bottom:1px dotter #fff;">here</a></p>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
Line 72: Line 163:
 
             <div class="videocol col-md-12">
 
             <div class="videocol col-md-12">
 
                 <div class="videowrapper">
 
                 <div class="videowrapper">
−
                     <iframe src="https://www.youtube.com/embed/Vvrn4imd5v0" frameborder="0" allowfullscreen></iframe>
+
                     <iframe src="https://static.igem.org/mediawiki/2016/0/0c/T--Hong_Kong_UCCKE--brief.mp4" frameborder="0" allowfullscreen></iframe>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
             <div class="col-md-12" style="height:100%;">
+
             <div id="abs34" class="col-md-12" style="height:100%;">
 
                 <h2>Nematode Biochemical marshal: attractant and repellent</h2>
 
                 <h2>Nematode Biochemical marshal: attractant and repellent</h2>
−
                 <p>Inspired by the ability of horsehair worm modifying the behavior of other organisms, we would like to employ the idea to modify organisms behavior by what available in our laboratory. Nematode is a pest, which will attack the roots of crops. We wish to modify its behavior by engineering bacteria to produce biochemical cues to attract or repel the worm. We identified two potential biochemicals, cinnamaldehyde and phenylpyruvic acid, which are possibly attractant or repellent to the Nematode. We have designed a chemosensation assay to demonstrate the attraction and repulsion ability of the biochemical of interest. The results suggest that cinnamaldehyde is a strong repellent and phenylpyruvic acid is a moderate attractant to the worm. Genetic engineering of bacteria to produce the two biochemicals are working in progress.</p>
+
                 <p style="text-align:left;">Inspired by the ability of horsehair worm modifying the behavior of other organisms, we would like to employ the idea to modify organisms behavior by what available in our laboratory. Nematode is a pest, which will attack the roots of crops. We wish to modify its behavior by engineering bacteria to produce biochemical cues to attract or repel the worm. We identified two potential biochemicals, cinnamaldehyde and phenylpyruvic acid, which are possibly attractant or repellent to the Nematode. We have designed a chemosensation assay to demonstrate the attraction and repulsion ability of the biochemical of interest. The results suggest that cinnamaldehyde is a strong repellent and phenylpyruvic acid is a moderate attractant to the worm. Genetic engineering of bacteria to produce the two biochemicals are working in progress.</p>
−
                 <a href="#" class="proabs-btn">Read More</a></div>
+
                 <a href="https://2016.igem.org/Team:Hong_Kong_UCCKE/Description" class="proabs-btn">Read More</a></div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
Line 89: Line 180:
 
         color: #5379d0;
 
         color: #5379d0;
 
     }
 
     }
 +
    .golinks .col-xs-6 {
 +
        height:300px;
 +
    }
 +
@media screen and (max-width: 475px) {
 +
    .golinks .col-xs-6 {
 +
        height:340px;
 +
    }
 +
}
 
</style>
 
</style>
 
<div class="golinks" id="golinks">
 
<div class="golinks" id="golinks">
Line 94: Line 193:
 
         <div class="row">
 
         <div class="row">
 
             <div class="col-xs-6 col-sm-4 col-md-4">
 
             <div class="col-xs-6 col-sm-4 col-md-4">
−
                 <div class="golinksbox"><i class="golinksicon fa fa-map-signs" aria-hidden="true"></i>
+
                 <div class="golinksbox"><i class="golinksicon fa fa-map-signs" aria-hidden="true" style="color: #7453d0 !important"></i>
 
                     <h4>Tour</h4>
 
                     <h4>Tour</h4>
−
                     <p>Eram singulis expetendis te do aute distinguantur. In enim o legam, o hic nulla summis qui senserit.</p>
+
                     <p style="text-align:left;">This tour aims to tell you how to navigate around our wiki. Please click on the button below and start the tour.</p>
−
                     <div class="golinksbtnbox"><a href="#" class="proabs-btn">Read More</a></div>
+
                     <div class="golinksbtnbox"><a href="https://2016.igem.org/Team:Hong_Kong_UCCKE/Tour" class="proabs-btn tourbbun">Read More</a></div>
 +
<style>
 +
.tourbbun {
 +
border: 1px solid #7453d0 !important;
 +
color: #7453d0 !important;
 +
}
 +
.tourbbun:hover {
 +
border: 1px solid #7453d0 !important;
 +
background-color: #7453d0 !important;
 +
color: #fff !important;
 +
}
 +
</style>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
             <div class="col-xs-6 col-sm-4 col-md-4">
 
             <div class="col-xs-6 col-sm-4 col-md-4">
−
                 <div class="golinksbox"><i class="golinksicon fa fa-pencil" aria-hidden="true"></i>
+
                 <div class="golinksbox"><i class="golinksicon fa fa-users" aria-hidden="true" style="color: #d05353 !important"></i>
−
                     <h4>Our Project</h4>
+
                     <h4>Our team</h4>
−
                     <p>Eram singulis expetendis te do aute distinguantur. In enim o legam, o hic nulla summis qui senserit.</p>
+
                     <p style="text-align:left;">In this page, you will learn about our school, members of our team and our instructors.</p>
−
                     <div class="golinksbtnbox"><a href="#" class="proabs-btn">Read More</a></div>
+
                     <div class="golinksbtnbox"><a href="https://2016.igem.org/Team:Hong_Kong_UCCKE/Team" class="proabs-btn teambun">Read More</a></div>
 +
<style>
 +
.teambun {
 +
border: 1px solid #d05353 !important;
 +
color: #d05353 !important;
 +
}
 +
.teambun:hover {
 +
border: 1px solid #d05353 !important;
 +
background-color: #d05353 !important;
 +
color: #fff !important;
 +
}
 +
</style>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
             <div class="col-xs-6 col-sm-4 col-md-4">
 
             <div class="col-xs-6 col-sm-4 col-md-4">
−
                 <div class="golinksbox"><i class="golinksicon fa fa-book" aria-hidden="true"></i>
+
                 <div class="golinksbox"><i class="golinksicon fa fa-pencil" aria-hidden="true" style="color: #d0b153 !important"></i>
−
                     <h4>Notebook</h4>
+
                     <h4>Our Project</h4>
−
                     <p>Eram singulis expetendis te do aute distinguantur. In enim o legam, o hic nulla summis qui senserit.</p>
+
                     <p style="text-align:left;">In this page, you can get an overall image about our project.</p>
−
                     <div class="golinksbtnbox"><a href="#" class="proabs-btn">Read More</a></div>
+
                     <div class="golinksbtnbox"><a href="https://2016.igem.org/Team:Hong_Kong_UCCKE/Description" class="proabs-btn prooobtn">Read More</a></div>
 +
<style>
 +
.prooobtn {
 +
border: 1px solid #d0b153 !important;
 +
color: #d0b153 !important;
 +
}
 +
.prooobtn:hover {
 +
border: 1px solid #d0b153 !important;
 +
background-color: #d0b153 !important;
 +
color: #fff !important;
 +
}
 +
</style>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
Line 117: Line 249:
 
                 <div class="golinksbox"><i class="golinksicon fa fa-list" aria-hidden="true"></i>
 
                 <div class="golinksbox"><i class="golinksicon fa fa-list" aria-hidden="true"></i>
 
                     <h4>Parts</h4>
 
                     <h4>Parts</h4>
−
                     <p>Eram singulis expetendis te do aute distinguantur. In enim o legam, o hic nulla summis qui senserit.</p>
+
                     <p style="text-align:left;">In this page, you can know about details of parts that we submitted.</p>
−
                     <div class="golinksbtnbox"><a href="#" class="proabs-btn">Read More</a></div>
+
                     <div class="golinksbtnbox"><a href="https://2016.igem.org/Team:Hong_Kong_UCCKE/Parts" class="proabs-btn parrtbtn">Read More</a></div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
             <div class="col-xs-6 col-sm-4 col-md-4">
 
             <div class="col-xs-6 col-sm-4 col-md-4">
−
                 <div class="golinksbox"><i class="golinksicon fa fa-users" aria-hidden="true"></i>
+
                 <div class="golinksbox"><i class="golinksicon fa fa-heartbeat" aria-hidden="true" style="color: #91d053 !important"></i>
−
                     <h4>Our team</h4>
+
                     <h4>Safety</h4>
−
                     <p>Eram singulis expetendis te do aute distinguantur. In enim o legam, o hic nulla summis qui senserit.</p>
+
                     <p style="text-align:left;">In this page, you will learn about what have we done to ensure safety.</p>
−
                     <div class="golinksbtnbox"><a href="#" class="proabs-btn">Read More</a></div>
+
                     <div class="golinksbtnbox"><a href="https://2016.igem.org/Team:Hong_Kong_UCCKE/Safety" class="proabs-btn saffbtn">Read More</a></div>
 +
<style>
 +
.saffbtn {
 +
border: 1px solid #91d053 !important;
 +
color: #d0b153 !important;
 +
}
 +
.saffbtn:hover {
 +
border: 1px solid #91d053 !important;
 +
background-color: #91d053 !important;
 +
color: #fff !important;
 +
}
 +
</style>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
             <div class="col-xs-6 col-sm-4 col-md-4">
 
             <div class="col-xs-6 col-sm-4 col-md-4">
−
                 <div class="golinksbox"><i class="golinksicon fa fa-heartbeat" aria-hidden="true"></i>
+
                 <div class="golinksbox"><i class="golinksicon fa fa-info" aria-hidden="true" style="color: #53d091 !important"></i>
−
                     <h4>Safety</h4>
+
                     <h4>Attributions</h4>
−
                     <p>Eram singulis expetendis te do aute distinguantur. In enim o legam, o hic nulla summis qui senserit.</p>
+
                     <p style="text-align:left;">In this page, you can know about our work division and who did we get help from.</p>
−
                     <div class="golinksbtnbox"><a href="#" class="proabs-btn">Read More</a></div>
+
                     <div class="golinksbtnbox"><a href="https://2016.igem.org/Team:Hong_Kong_UCCKE/Attributions" class="proabs-btn strbtn">Read More</a></div>
 +
<style>
 +
.strbtn {
 +
border: 1px solid #53d091 !important;
 +
color: #53d091 !important;
 +
}
 +
.strbtn:hover {
 +
border: 1px solid #53d091 !important;
 +
background-color: #53d091 !important;
 +
color: #fff !important;
 +
}
 +
</style>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
Line 146: Line 300:
  
  
 +
<style>
 +
.thanks3498 {
 +
width:100%;
 +
}
 +
</style>
 +
                <div class="row">
 +
<div class="col-xs-4">
 +
<img class="thanks3498" src="https://static.igem.org/mediawiki/2016/1/1f/T--Hong_Kong_UCCKE--thank2comp.png">
 +
</div>
 +
<div class="col-xs-4">
 +
<img class="thanks3498" src="https://static.igem.org/mediawiki/2016/0/0a/T--Hong_Kong_UCCKE--thank1comp.png">
 +
</div>
 +
<div class="col-xs-4">
 +
<img class="thanks3498" src="https://static.igem.org/mediawiki/2016/e/e9/T--Hong_Kong_UCCKE--thank3comp.png">
 +
</div>
 +
</div>
  
−
                <div class="jcarousel-wrapper">
 
−
                    <div class="jcarousel">
 
−
                        <ul>
 
−
                            <li><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg" alt="Image 1"></li>
 
−
                            <li><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg" alt="Image 2"></li>
 
−
                            <li><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg" alt="Image 3"></li>
 
−
                            <li><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg" alt="Image 4"></li>
 
−
                            <li><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg" alt="Image 5"></li>
 
−
                            <li><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg" alt="Image 6"></li>
 
−
                        </ul>
 
−
                    </div>
 
  
−
                    <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
 
−
                    <a href="#" class="jcarousel-control-next">&rsaquo;</a>
 
−
 
−
                    <p class="jcarousel-pagination"></p>
 
 
                 </div>
 
                 </div>
  
Line 170: Line 325:
 
     </div>
 
     </div>
 
</div>
 
</div>
−
 
 
</html>
 
</html>
 
{{Hong_Kong_UCCKE/heyfooter}} {{Hong_Kong_UCCKE/illbeback}}
 
{{Hong_Kong_UCCKE/heyfooter}} {{Hong_Kong_UCCKE/illbeback}}
−
<html>
 
−
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
 
−
</script>
 
−
<script src="https://code.jquery.com/color/jquery.color.plus-names-2.1.2.min.js">
 
−
</script>
 
−
</html>
 

Latest revision as of 12:29, 19 October 2016

Nematode Biochemical marshal: attractant and repellent

Inspired by the ability of horsehair worm modifying the behavior of other organisms, we would like to employ the idea to modify organisms behavior by what available in our laboratory. Nematode is a pest, which will attack the roots of crops. We wish to modify its behavior by engineering bacteria to produce biochemical cues to attract or repel the worm. We identified two potential biochemicals, cinnamaldehyde and phenylpyruvic acid, which are possibly attractant or repellent to the Nematode. We have designed a chemosensation assay to demonstrate the attraction and repulsion ability of the biochemical of interest. The results suggest that cinnamaldehyde is a strong repellent and phenylpyruvic acid is a moderate attractant to the worm. Genetic engineering of bacteria to produce the two biochemicals are working in progress.

Read More

Thanks...

We would like to thank the following associations for helping or sponsoring us during our project.