Difference between revisions of "Team:NAU-CHINA"

 
(98 intermediate revisions by the same user not shown)
Line 2: Line 2:
  
 
<head>
 
<head>
−
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
+
<meta charset="UTF-8" />
 +
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 +
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
                <link rel="stylesheet" type="text/css"
 +
href="https://2016.igem.org/Template:NAU-CHINA/texiao?action=raw&ctype=text/css" />
 +
<link rel="stylesheet" type="text/css"
 +
href="https://2016.igem.org/Template:NAU-CHINA/component?action=raw&ctype=text/css" />
 
<style type="text/css">
 
<style type="text/css">
−
<!--
 
 
/* Hide top title */
 
/* Hide top title */
 
#top_title, #sideMenu {
 
#top_title, #sideMenu {
Line 14: Line 19:
 
display: none;
 
display: none;
 
}
 
}
−
/* Visited hyperlinks */
+
 
−
                        a:visited{
+
−
                                color: #393d31;
+
−
                        }
+
  
 
/*-- Remove borders, float content left and remove padding/margin */
 
/*-- Remove borders, float content left and remove padding/margin */
Line 50: Line 52:
 
  vertical-align: middle;
 
  vertical-align: middle;
 
}
 
}
 +
                        #top_menu_inside .submenu{min-height:250px;}
  
−
/*start*/
+
 
−
.nav{
+
#abstract{
 +
background-color: rgba(147,251,152,0.9);
 
position: fixed;
 
position: fixed;
−
                        margin:0 auto;
+
margin: 1.25em 20em 0 20em;
−
                        left:10%;
+
height: 90%;
−
                         right:0;
+
                         z-index:-1;
−
}
+
                        font-family:'Comic Sans MS','Arial Black';
−
.menu, .menu ul {
+
display: none;
−
    list-style: none;
+
                        border:solid 1px white;
−
width:95%;
+
−
    margin: 0 auto;
+
−
    text-shadow:2px 3px 2px #000;
+
  
 
}
 
}
−
.menu {
+
#scroll_to_bottom{
−
    height: 58px;
+
position: fixed;
−
}
+
text-align: center;
−
.menu li {
+
color: #ffffff;
−
    background-color: rgba(0,0,0,0.3);
+
font-weight: bold;
−
    border-bottom: 2px solid #737373;
+
bottom: 10%;
−
    border-top: 2px solid #737373;
+
left: 40%;
−
    min-width:70px;
+
−
   
+
 
}
 
}
  
−
.menu li img{
+
@media screen and (max-width: 1170px) {
−
display:block;
+
−
width:50px;
+
−
height:54px;
+
−
margin:auto;
+
−
}
+
−
.menu > li {
+
−
    display: block;
+
−
    float: left;
+
−
    position: relative;
+
−
}
+
−
.menu a {
+
−
    border-left: 3px solid rgba(0, 0, 0, 0);
+
−
    color: #FFF;
+
−
    display: block;
+
−
    font-family:Arial, Helvetica, sans-serif;
+
−
    font-size: 15px;
+
−
font-weight:bold;
+
−
    line-height: 54px;
+
−
    padding: 0 20px;
+
−
    text-decoration: none;
+
−
}
+
  
−
/* onhover styles */
+
    .menu{
−
.menu li:hover {
+
        display: none;
−
    background-color: rgba(0,0,0,0.5);
+
    }
−
    border-bottom: 2px solid #ffffff;
+
−
    border-top: 2px solid #ffffff;
+
−
}
+
−
.menu li:hover > a {
+
−
    border-radius: 5px 0 0 0;
+
−
    border-left: 3px solid #369;
+
−
    color:#f7fbfc;
+
−
}
+
  
−
/* submenu styles */
+
    .container {
−
.submenu {
+
        display: block;
−
    left: 0;
+
    }
−
    max-height: 0;
+
−
    position: absolute;
+
−
    top: 100%;
+
−
    z-index: 10;
+
−
min-width:170px;
+
−
    -webkit-perspective: 170px;
+
−
    -moz-perspective: 170px;
+
−
    -ms-perspective: 170px;
+
−
    -o-perspective: 170px;
+
−
    perspective:170px;
+
−
+
−
}
+
−
.submenu li {
+
−
    opacity: 0;
+
−
    -webkit-transform: rotateY(90deg);
+
−
    -moz-transform: rotateY(90deg);
+
−
    -ms-transform: rotateY(90deg);
+
−
    -o-transform: rotateY(90deg);
+
−
    transform: rotateY(90deg);
+
  
−
    -webkit-transition: opacity .4s, -webkit-transform .5s;
 
−
    -moz-transition: opacity .4s, -moz-transform .5s;
 
−
    -ms-transition: opacity .4s, -ms-transform .5s;
 
−
    -o-transition: opacity .4s, -o-transform .5s;
 
−
    transition: opacity .4s, transform .5s;
 
 
}
 
}
−
.menu .submenu li:hover a {
+
@media screen and (max-width: 980px){
−
    border-left: 3px solid #ffffff;
+
#ClickBack{
−
    border-radius: 0;
+
display: none;
−
    color: #69F;
+
 
}
 
}
−
.menu > li:hover .submenu, .menu > li:focus .submenu {
+
#abstract{
−
    max-height: 2000px;
+
background-color: rgba(147,251,152,0.9);
−
    z-index: 10;
+
position: fixed;
 +
margin: 45% auto 0 auto;
 +
min-height: 40em;
 +
            height:auto;
 +
            z-index:-1;
 +
            font-family:'Comic Sans MS','Arial Black';
 +
            border:solid 1px white;
 +
            display: block;
 +
            overflow:hidden;
 
}
 
}
−
.menu > li:hover .submenu li, .menu > li:focus .submenu li {
+
#scroll_to_bottom{
−
    opacity: 1;
+
display: none;
−
    -webkit-transform: none;
+
−
    -moz-transform: none;
+
−
    -ms-transform: none;
+
−
    -o-transform: none;
+
−
    transform: none;
+
 
}
 
}
 +
body{
 +
background-color: white;
 +
}
 +
    .menu{
 +
        display: none;
 +
    }
 +
 +
    .container {
 +
        display: block;
 +
    }
 +
}
 +
@media screen and (min-width: 1170px) {
 +
 +
    .menu{
 +
        display: block;
 +
    }
 +
 +
    .container {
 +
        display: none;
 +
    }
  
−
/* CSS3 delays for transition effects */
 
−
.menu li:hover .submenu li:nth-child(1) {
 
−
    -webkit-transition-delay: 0s;
 
−
    -moz-transition-delay: 0s;
 
−
    -ms-transition-delay: 0s;
 
−
    -o-transition-delay: 0s;
 
−
    transition-delay: 0s;
 
−
}
 
−
.menu li:hover .submenu li:nth-child(2) {
 
−
    -webkit-transition-delay: 50ms;
 
−
    -moz-transition-delay: 50ms;
 
−
    -ms-transition-delay: 50ms;
 
−
    -o-transition-delay: 50ms;
 
−
    transition-delay: 50ms;
 
−
}
 
−
.menu li:hover .submenu li:nth-child(3) {
 
−
    -webkit-transition-delay: 100ms;
 
−
    -moz-transition-delay: 100ms;
 
−
    -ms-transition-delay: 100ms;
 
−
    -o-transition-delay: 100ms;
 
−
    transition-delay: 100ms;
 
−
}
 
−
.menu li:hover .submenu li:nth-child(4) {
 
−
    -webkit-transition-delay: 150ms;
 
−
    -moz-transition-delay: 150ms;
 
−
    -ms-transition-delay: 150ms;
 
−
    -o-transition-delay: 150ms;
 
−
    transition-delay: 150ms;
 
−
}
 
−
.menu li:hover .submenu li:nth-child(5) {
 
−
    -webkit-transition-delay: 200ms;
 
−
    -moz-transition-delay: 200ms;
 
−
    -ms-transition-delay: 200ms;
 
−
    -o-transition-delay: 200ms;
 
−
    transition-delay: 200ms;
 
−
}
 
−
.menu li:hover .submenu li:nth-child(6) {
 
−
    -webkit-transition-delay: 250ms;
 
−
    -moz-transition-delay: 250ms;
 
−
    -ms-transition-delay: 250ms;
 
−
    -o-transition-delay: 250ms;
 
−
    transition-delay: 250ms;
 
−
}
 
−
.menu li:hover .submenu li:nth-child(7) {
 
−
    -webkit-transition-delay: 300ms;
 
−
    -moz-transition-delay: 300ms;
 
−
    -ms-transition-delay: 300ms;
 
−
    -o-transition-delay: 300ms;
 
−
    transition-delay: 300ms;
 
−
}
 
−
.menu li:hover .submenu li:nth-child(8) {
 
−
    -webkit-transition-delay: 350ms;
 
−
    -moz-transition-delay: 350ms;
 
−
    -ms-transition-delay: 350ms;
 
−
    -o-transition-delay: 350ms;
 
−
    transition-delay: 350ms;
 
−
}
 
−
.menu li:hover .submenu li:nth-child(9) {
 
−
    -webkit-transition-delay: 350ms;
 
−
    -moz-transition-delay: 350ms;
 
−
    -ms-transition-delay: 350ms;
 
−
    -o-transition-delay: 350ms;
 
−
    transition-delay: 350ms;
 
 
}
 
}
  
−
.submenu li:nth-child(1) {
+
                #abstract #guanjian {margin-left:7em;font-family:'Comic Sans MS','Arial Black';font-size:16px;}
−
    -webkit-transition-delay: 350ms;
+
p{
−
    -moz-transition-delay: 350ms;
+
margin-left: 5em;
−
    -ms-transition-delay: 350ms;
+
margin-right: 5em;
−
    -o-transition-delay: 350ms;
+
                        font-family:'Comic Sans MS','Arial Black';
−
    transition-delay: 350ms;
+
 
}
 
}
−
.submenu li:nth-child(2) {
+
h1{
−
    -webkit-transition-delay: 300ms;
+
margin-left: 4.5em;
−
    -moz-transition-delay: 300ms;
+
margin-right: 5em;
−
    -ms-transition-delay: 300ms;
+
margin-top: 3.5em;
−
    -o-transition-delay: 300ms;
+
                        font-family:'Comic Sans MS','Arial Black';
−
    transition-delay: 300ms;
+
 
}
 
}
−
.submenu li:nth-child(3) {
+
#ClickBack{
−
    -webkit-transition-delay: 250ms;
+
text-align: center;
−
    -moz-transition-delay: 250ms;
+
position: fixed;
−
    -ms-transition-delay: 250ms;
+
bottom: 3em;
−
    -o-transition-delay: 250ms;
+
right: 18em;
−
    transition-delay: 250ms;
+
                        display:none;
−
}
+
                        font-family:'Comic Sans MS','Arial Black';
−
.submenu li:nth-child(4) {
+
−
    -webkit-transition-delay: 200ms;
+
−
    -moz-transition-delay: 200ms;
+
−
    -ms-transition-delay: 200ms;
+
−
    -o-transition-delay: 200ms;
+
−
    transition-delay: 200ms;
+
−
}
+
−
.submenu li:nth-child(5) {
+
−
    -webkit-transition-delay: 150ms;
+
−
    -moz-transition-delay: 150ms;
+
−
    -ms-transition-delay: 150ms;
+
−
    -o-transition-delay: 150ms;
+
−
    transition-delay: 150ms;
+
−
}
+
−
.submenu li:nth-child(6) {
+
−
    -webkit-transition-delay: 100ms;
+
−
    -moz-transition-delay: 100ms;
+
−
    -ms-transition-delay: 100ms;
+
−
    -o-transition-delay: 100ms;
+
−
    transition-delay: 100ms;
+
−
}
+
−
.submenu li:nth-child(7) {
+
−
    -webkit-transition-delay: 50ms;
+
−
    -moz-transition-delay: 50ms;
+
−
    -ms-transition-delay: 50ms;
+
−
    -o-transition-delay: 50ms;
+
−
    transition-delay: 50ms;
+
−
}
+
−
.submenu li:nth-child(8) {
+
−
    -webkit-transition-delay: 0s;
+
−
    -moz-transition-delay: 0s;
+
−
    -ms-transition-delay: 0s;
+
−
    -o-transition-delay: 0s;
+
−
    transition-delay: 0s;
+
−
}
+
−
.submenu li:nth-child(9) {
+
−
    -webkit-transition-delay: 0s;
+
−
    -moz-transition-delay: 0s;
+
−
    -ms-transition-delay: 0s;
+
−
    -o-transition-delay: 0s;
+
−
    transition-delay: 0s;
+
 
}
 
}
  
−
#abstract{
+
#ClickBack img{
−
background-color: rgba(0,0,0,0.4);
+
width: 6em;
−
margin:800px 500px;
+
−
position: absolute;
+
 
}
 
}
−
#scroll_to_bottom{
 
−
margin: 400px 500px;
 
−
position: absolute;
 
−
float: left;
 
−
}
 
−
 
−
 
  
 
</style>
 
</style>
Line 315: Line 168:
 
ThisPic.height=TrueHeight/Multiple;
 
ThisPic.height=TrueHeight/Multiple;
 
}
 
}
−
</script>
 
  
 +
$(document).ready(function(){
 +
 +
  $("#scroll_to_bottom").click(function(){
 +
  $("#abstract").slideToggle();
 +
  $("#ClickBack").slideToggle();
 +
  $("#scroll_to_bottom").slideToggle();
 +
  });
 +
 +
  $("#ClickBack").click(function(){
 +
    $("#abstract").fadeOut("slow");
 +
    $("#ClickBack").fadeOut("slow");
 +
    $("#scroll_to_bottom").fadeIn("slow");
 +
  });
 +
});
 +
 +
</script>
  
 
</head>
 
</head>
 +
 +
<body>
 +
 +
<!-- small screen menu -->
 +
 +
<div class="container" >
 +
<ul id="gn-menu" class="gn-menu-main" >
 +
<li class="gn-trigger">
 +
<a class="gn-icon gn-icon-menu">
 +
</a>
 +
<nav class="gn-menu-wrapper">
 +
<div class="gn-scroller">
 +
<ul class="gn-menu">
 +
<li>
 +
<a href="https://2016.igem.org/Team:NAU-CHINA"><span> HOME</span></a>
 +
</li>
 +
<li>
 +
<a href="https://2016.igem.org/Team:NAU-CHINA/Participator"> TEAM</a>
 +
</li>
 +
<li>
 +
<a href="https://2016.igem.org/Team:NAU-CHINA/Description"> PROJECT</a>
 +
</li>
 +
<li>
 +
<a href="https://2016.igem.org/Team:NAU-CHINA/Part_Collection"> PARTS</a>
 +
</li>
 +
 +
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Safety"> SAFETY</a></li>
 +
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Attributions"> ATTRIBUTION</a></li>
 +
<li>
 +
<a href="https://2016.igem.org/Team:NAU-CHINA/Human_Practices"> HP</a>
 +
</li>
 +
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Conclusion">CONCLUSION</a></li>
 +
</ul>
 +
</div><!-- /gn-scroller -->
 +
</nav>
 +
</li>
 +
</ul>
 +
 +
</div><!-- /container -->
  
−
<body >
+
 +
 
 +
<nav>
 +
<!-- big screen menu-->
 
<div class="nav" id="main" role="main">
 
<div class="nav" id="main" role="main">
 
<ul class="menu">
 
<ul class="menu">
−
<li >
 
−
<a ><img name=img1 src="https://static.igem.org/mediawiki/2016/e/ec/NAU_CHINA_TEAM_LOGO.gif"/></a>
 
−
</li>
 
 
<li><a href="https://2016.igem.org/Team:NAU-CHINA">HOME</a></li>
 
<li><a href="https://2016.igem.org/Team:NAU-CHINA">HOME</a></li>
 
<li><a>TEAM</a>
 
<li><a>TEAM</a>
 
<ul class="submenu">
 
<ul class="submenu">
−
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Team">Team</a></li>
+
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Participator">Participator</a></li>
−
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Member">Member</a></li>
+
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Collaborations">Collaboration</a></li>
 
</ul>
 
</ul>
 
</li>
 
</li>
Line 336: Line 243:
 
<ul class="submenu">
 
<ul class="submenu">
 
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Description">Description</a></li>
 
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Description">Description</a></li>
−
                                <li><a href="https://2016.igem.org/Team:NAU-CHINA/Design">Design</a></li>
+
                                <li><a href="https://2016.igem.org/Team:NAU-CHINA/Design">Applied Design</a></li>
−
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Modeling">Modeling</a></li>
+
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Experiment">Experiment</a></li>
−
                                <li><a href="https://2016.igem.org/Team:NAU-CHINA/Experiments">Experiments</a></li>
+
                                <li><a href="https://2016.igem.org/Team:NAU-CHINA/Proof">Proof of Concept</a></li>
−
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Parts">Team Parts</a></li>
+
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Demonstrate">Demonstrate </a></li>
 +
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Model">Model </a></li>
 +
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Notebook">Notebook </a></li>
 
</ul>
 
</ul>
 
</li>
 
</li>
−
<li><a>MODELING</a></li>
+
<li><a>PARTS</a>
−
<li class="active"><a>HUMAN PRACTICES</a>
+
 
<ul class="submenu">
 
<ul class="submenu">
−
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Practices">Human Practices</a></li>
+
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Part_List">Part List</a></li>
−
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Collaborations">Collaborations</a></li>
+
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Basic_Part">Basic Part</a></li>
−
+
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Composite_Part">Composite Part</a></li>
 +
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Part_Collection">Collection</a></li>
 
</ul>
 
</ul>
 
</li>
 
</li>
 
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Safety">SAFETY</a></li>
 
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Safety">SAFETY</a></li>
−
+
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Attributions">ATTRIBUTION</a></li>
−
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Judging">JUDGING</a></li>
+
<li><a>HUMAN PRACTICE</a>
−
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Notebook">NOTEBOOK</a></li>
+
<ul class="submenu">
 +
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Human_Practices">Human Practices</a></li>
 +
<li><a href="https://2016.igem.org/Team:NAU-CHINA/HP/Silver">Silver</a></li>
 +
<li><a href="https://2016.igem.org/Team:NAU-CHINA/HP/Gold">Gold</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Conclusion">CONCLUSION</a></li>
 
</ul>
 
</ul>
 
</div>
 
</div>
−
<img src="https://static.igem.org/mediawiki/2016/b/bf/NAU_CHINA_2016WIKI_TEST2.jpeg"  onload="ChangeImg(this)" style="z-index:-100;position:absolute;left:0;top:0px"><!--backgroundimg-->
+
</nav>
−
 
+
<img src="https://static.igem.org/mediawiki/2016/e/e8/NAU_CHINA_2016WIKI_HOME.jpeg"  onload="ChangeImg(this)" style="z-index:-60;position:absolute;left:0;top:0px"><!--backgroundimg-->
 +
<div>
 
<div name="abstract" id="abstract">
 
<div name="abstract" id="abstract">
−
<h1>BACKGROUND</h>
+
<br><br>
−
<p>This is backgroundld.</p>
+
<h1 style="font-family:'Comic Sans MS','Arial Black';font-size:20px;">The Birth of Healer & A Story of Us</h1>
 +
<p style="font-family:'Comic Sans MS','Arial Black';font-size:17px;">Several ideas were created and several ideas were denied. Our eyes were blocked by <b style="font-weight: bold;color:blue;">3-phenoxybenzoate acid(3-PBA)</b>, the main intermediate product of pyrethroids. But what is 3-PBA and what are pyrethroids? Why we need to degrade 3-PBA thoroughly and how to degrade it through employing microbial biodegradation techniques? Once our Healer (the engineered bacteria) were born, how to put it into practice? From knowing to deep knowing, our efforts made it real.</p><br>
 +
<ul id="guanjian">Key words:
 +
<li>Cause <span>(what is 3-PBA and what are pyrethroids? Why we need to degrade 3-PBA thoroughly?)</span></li>
 +
<li>Method <span>(How to degrade it through employing microbial biodegradation techniques?)</span></li>
 +
<li>Extention <span>(How to put it into practice?)</span></li>
 +
</ul>
 +
<br><br>
 
</div>
 
</div>
 +
<br style="clear:both;"></div>
 +
<div  id="ClickBack">
 +
<img src="https://static.igem.org/mediawiki/2016/e/e9/NAU_CHINA_2016_ClickToBack.gif">
 +
<p>Click Me Back</p>
 +
</div>
  
 
<div id="scroll_to_bottom">
 
<div id="scroll_to_bottom">
−
<a href="#abstract"><img src="https://static.igem.org/mediawiki/2016/3/35/NAU_CHINA_BOTTOM%28SAMPLE%29.gif"></a>
+
<p>Click here to see more</p>
 +
<img src="https://static.igem.org/mediawiki/2016/6/60/NAU_CHINA_2016_scrollBottom.gif">
 
</div>
 
</div>
−
 
+
<script type="text/javascript" src="https://2016.igem.org/Template:NAU-CHINA/modernizr_custom?
−
+
action=raw&ctype=text/javascript"></script>
−
+
<script type="text/javascript" src="https://2016.igem.org/Template:NAU-CHINA/gnmenu?
 +
action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2016.igem.org/Template:NAU-CHINA/classie?
 +
action=raw&ctype=text/javascript"></script>
 +
<script>
 +
new gnMenu( document.getElementById( 'gn-menu' ) );
 +
</script>
 
</body>
 
</body>
  

Latest revision as of 18:17, 19 October 2016



The Birth of Healer & A Story of Us

Several ideas were created and several ideas were denied. Our eyes were blocked by 3-phenoxybenzoate acid(3-PBA), the main intermediate product of pyrethroids. But what is 3-PBA and what are pyrethroids? Why we need to degrade 3-PBA thoroughly and how to degrade it through employing microbial biodegradation techniques? Once our Healer (the engineered bacteria) were born, how to put it into practice? From knowing to deep knowing, our efforts made it real.


    Key words:
  • Cause (what is 3-PBA and what are pyrethroids? Why we need to degrade 3-PBA thoroughly?)
  • Method (How to degrade it through employing microbial biodegradation techniques?)
  • Extention (How to put it into practice?)



Click Me Back

Click here to see more