Difference between revisions of "Team:NCTU Formosa/Composite Part"

(Blanked the page)
 
(97 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 +
{{Team:NCTU_Formosa}}
 +
<html>
 +
<head>
 +
<meta charset="UTF-8">
  
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 +
 +
<link href="https://2016.igem.org/Team:NCTU_Formosa/wiki_reset?action=raw&ctype=text/css" rel="stylesheet">
 +
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
 +
 +
 +
<style type="text/css">
 +
#sideMenu, #top_title {display:none;}
 +
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
 +
body {background-color:white; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
#top_menu_inside {margin-left: 20px; margin-bottom: 0px;}
 +
 +
 +
html, body, div, span, applet, object, iframe,
 +
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 +
a, abbr, acronym, address, big, cite, code,
 +
del, dfn, em, font, img, ins, kbd, q, s, samp,
 +
small, strike, strong, sub, tt, var,
 +
b, u, i, center,
 +
dl, dt, dd, ol, ul, li,
 +
fieldset, form, label, legend,
 +
table, caption, tbody, tfoot, thead, tr, th, td {
 +
    margin: 0;
 +
    padding: 0;
 +
    border: 0;
 +
    outline: 0;
 +
 +
}
 +
 +
 +
* {
 +
  font-family: 'Open Sans', sans-serif;
 +
    font-weight: 300;
 +
}
 +
body{
 +
    background-color:rgb(51,51,51) !important;
 +
    line-height:1;
 +
}
 +
/*大圖*/
 +
@media screen and (min-width: 768px) {
 +
  .img-container{
 +
    height:100vh ;
 +
    overflow:hidden ;
 +
    width:100%;
 +
  }
 +
  .main-img{
 +
    top: 0;
 +
    bottom: 0;
 +
    left: 0;
 +
    right: 0;
 +
    width: 100%;
 +
    margin: auto;
 +
    z-index:999;
 +
    }
 +
}
 +
@media screen and (orientation: portrait) {
 +
    .img-container{
 +
        height:auto;
 +
        overflow:none;
 +
        width:100%;
 +
    }
 +
    .main-img{
 +
        top: 0;
 +
        bottom: 0;
 +
        left: 0;
 +
        right: 0;
 +
        width: 100%;
 +
        margin: auto;
 +
        z-index:999;
 +
    }
 +
}
 +
 +
/*scroll navigaiton*/
 +
nav {
 +
  padding: 18px;
 +
  position: fixed;
 +
  height: auto;
 +
  left:0.5vw;
 +
  width: auto;
 +
  z-index: 9999;
 +
  top:25%;
 +
  margin: auto;
 +
}
 +
 +
nav .wrapper {
 +
  padding: 0;
 +
  width:100%;
 +
  height: 785px;
 +
}
 +
 +
nav .nodes {
 +
  position: relative;
 +
  margin-top: 1px;
 +
  margin-left: 1px;
 +
 +
}
 +
 +
.line {
 +
  position: absolute;
 +
  width:1px;
 +
  height:705px;
 +
  top: 13px;
 +
}
 +
.line .red {
 +
  width:1px;    /*調line長度*/
 +
  height:47%; /*line寬度*/
 +
  position:relative;
 +
 +
}
 +
 +
.line .blue {
 +
  width: 1px;  /*line寬度*/
 +
  height: 20%;  /*調line長度*/
 +
  position:relative;
 +
  left:51px;
 +
 +
}
 +
.line .red-container {
 +
  position:relative;
 +
  width: 4px;
 +
}
 +
.line .red {
 +
  background-color:#00D6FF;/*cover line color*/
 +
  *zoom: 1;
 +
  background-size: 100%;
 +
}
 +
.line .blue {
 +
  background-color: white;/*line color*/
 +
  *zoom: 1;
 +
  background-size: 100%;
 +
 +
}
 +
 +
.node {
 +
  margin-left: 40px;/*調node間距*/
 +
  width: 20px;
 +
  height: 20px;
 +
  margin-top: 30px;
 +
  position: relative;
 +
}
 +
.node .splash {
 +
  box-shadow: 0px 0px 8px 2px rgba(69, 174, 233, 0.53);
 +
  transform: translateZ(0px) scale(1);
 +
  position: absolute;
 +
  width: 20px;
 +
  height: 20px;
 +
  border-radius: 100%;
 +
  pointer-events: none;
 +
  opacity: 1;
 +
}
 +
.node.active .active-circle {
 +
  transform: scale(1);
 +
  opacity: 1;
 +
  background:white;/*active circle color*/
 +
  left:1.6px; 
 +
}
 +
.node.active .splash {
 +
  transition: transform 1200ms, opacity 1500ms;
 +
  transform: translateZ(0px) scale(2.5);
 +
  opacity: 0 !important;
 +
 +
}
 +
.node.active .inactive-circle {
 +
  transition: opacity 200ms;
 +
  opacity: 0;
 +
}
 +
.node .active-circle {
 +
  transition: all 300ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  transform: scale(0.7);
 +
  position: absolute;
 +
  opacity: 0;
 +
  width: 20px;
 +
  height: 20px;
 +
  border-radius: 100%;
 +
  background-color: #4b1202;
 +
  *zoom: 1;
 +
  background-size: 100%;
 +
 +
}
 +
.node .active-circle .cover {
 +
  transform: translateZ(0px);
 +
  width: 16px;
 +
  height: 16px;
 +
  background:#00D6FF;/*active circle color */
 +
  border-radius: 100%;
 +
  position: absolute;
 +
  top: 2px;
 +
  left: 2px;
 +
}
 +
 +
.node .inactive-circle {
 +
  transition: all 300ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  width: 14px;
 +
  height: 14px;
 +
  display: block;
 +
  background: #000;
 +
  position: absolute;
 +
  border-radius: 100%;
 +
  border: 2px solid white;
 +
  top: 3px;
 +
  left: 3px;
 +
}
 +
.node:hover {
 +
  cursor: pointer;
 +
}
 +
.node:hover .active-circle {
 +
  transition: all 200ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  transform: scale(0.84);
 +
}
 +
 +
.node:hover .inactive-circle {
 +
  transition: all 200ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  transform: scale(0.85);
 +
}
 +
 +
/*left-topic*/
 +
 +
.topic{
 +
    position:relative;
 +
    margin-top:0vh !important;
 +
    width:200px;
 +
    height:auto;
 +
    left:210px;
 +
    float:right;
 +
    color:#F3F7F7;
 +
}
 +
.text_color{
 +
    color:#F3F7F7;
 +
    font-size:12pt !important;
 +
}
 +
/*content*/
 +
.content_container{
 +
    position:relative;
 +
    left:6.5vw;
 +
    right:6.5vw;
 +
    margin:0 auto;
 +
    width:60vw;
 +
    height:auto;
 +
 +
}
 +
.title{
 +
    font-size:25pt !important;
 +
    border-left:3px solid rgb(0, 206, 255);
 +
    padding-left:10px !important;
 +
    color:rgb(0, 206, 255);
 +
    text-shadow:1px 1px 10px rgb(0, 206, 255);
 +
    margin-top:40px;
 +
    margin-bottom:30px;
 +
    font-weight:400;
 +
}
 +
 +
.content{
 +
    font-size:15pt !important;
 +
    text-align:justify !important;
 +
    text-indent:2em;
 +
    color:#F3F7F7;
 +
    padding-top:15px;
 +
    padding-bottom:15px;
 +
}
 +
/*second title*/
 +
.content-1{
 +
    font-size:20pt !important;
 +
    text-align:justify;
 +
    color:#44E287;
 +
    font-weight: bold !important;
 +
    padding-top:5px;
 +
    padding-bottom:10px
 +
}
 +
 +
.content-image{
 +
    text-align:center !important;
 +
    color:#F3F7F7 !important;
 +
    font-size:12pt !important;
 +
    padding-top:10px;
 +
    padding-bottom:50px;
 +
}
 +
 +
 +
.appear{
 +
    display:none;
 +
   
 +
}
 +
.list{
 +
    font-size:15pt !important;
 +
    text-align:justify;
 +
    text-align:justify;
 +
    color:#F3F7F7;
 +
}
 +
.quote{
 +
    font-size:17pt !important;
 +
    text-align:justify;
 +
    color:#F3F7F7;
 +
    text-indent:2em !important;
 +
   
 +
}
 +
 +
 +
/*image*/
 +
.web{
 +
    position:fixed !important;
 +
    left:0%;
 +
    bottom:0%;
 +
    display:block;
 +
    margin: auto;
 +
}
 +
.right{
 +
    position:fixed !important;
 +
    bottom:-15px;
 +
    right:0vw;
 +
    margin: auto;
 +
}
 +
 +
 +
 +
 +
.img-position{
 +
    position:absolute;
 +
    z-index:-1;
 +
}
 +
.box{
 +
    width:auto;
 +
    padding-top:10px;
 +
    padding-bottom:10px;
 +
}
 +
.picture{
 +
    position:relative;
 +
 +
    width:70%;
 +
}
 +
 +
.picture-1{
 +
    position:relative;
 +
    left:15vw;
 +
    width:50%;
 +
}
 +
 +
.biobrick{
 +
    color:rgb(0, 206, 255)!important;
 +
    text-decoration:none !important;
 +
 +
}
 +
</style>
 +
</head>
 +
<body>
 +
 +
<nav id="scroll">
 +
    <div class="wrapper">
 +
     
 +
  <div class="nodes">
 +
            <div class="line">
 +
                <div class="blue">
 +
                    <div class="red-container">
 +
                        <div class="red"></div>
 +
                    </div>
 +
                </div>
 +
          </div>
 +
 
 +
          <div class="node">
 +
          <div class="topic"><p class="text_color">Composite Parts</p></div>
 +
            <div class="active-circle">
 +
              <div class="splash"></div>
 +
              <div class="cover">   
 +
              </div>
 +
            </div>
 +
            <div class="inactive-circle">
 +
              <div class="small-cover">
 +
              </div>
 +
            </div>
 +
          </div>
 +
 
 +
          <div class="node">
 +
          <div class="topic"><p class="text_color">PANTIDE without Lectin</p></div>
 +
            <div class="active-circle">
 +
              <div class="splash"></div>
 +
              <div class="cover">   
 +
              </div>
 +
            </div>
 +
            <div class="inactive-circle">
 +
              <div class="small-cover">
 +
              </div>
 +
            </div>
 +
          </div>
 +
 
 +
         
 +
          <div class="node">
 +
          <div class="topic"><p class="text_color">PANTIDE with Lectin</p></div>
 +
            <div class="active-circle">
 +
              <div class="splash"></div>
 +
              <div class="cover">   
 +
              </div>
 +
            </div>
 +
            <div class="inactive-circle">
 +
              <div class="small-cover">
 +
              </div>
 +
            </div>
 +
          </div>
 +
 +
 +
          <div class="node">
 +
          <div class="topic"><p class="text_color">PANTIDE with GS Linker</p></div>
 +
            <div class="active-circle">
 +
              <div class="splash"></div>
 +
              <div class="cover">   
 +
              </div>
 +
            </div>
 +
            <div class="inactive-circle">
 +
              <div class="small-cover">
 +
              </div>
 +
            </div>
 +
          </div>
 +
         
 +
 
 +
 +
    </nav>
 +
 +
<!--圖片-->
 +
  <div class="img-container">
 +
        <img src="https://static.igem.org/mediawiki/2016/9/98/NCTU_COMPOSITE_BIG_PICTURE.png
 +
" class="main-img" width="100%">
 +
  </div>
 +
  <div>
 +
    <img src='https://static.igem.org/mediawiki/2016/f/f8/Web.png' class="web img-position" height="200px" id="web">
 +
  </div>
 +
  <div>
 +
    <img src="https://static.igem.org/mediawiki/2016/6/65/Right_%281%29.png" class="right img-position" id="right" height="600px">
 +
  </div>
 +
 +
 +
<!--------------------wiki content----------------------->
 +
<section class="content_container">
 +
<div>
 +
<p class="title">Composite Parts</p>
 +
<p class="content">We have known the function of the three toxic peptides of PANTIDE, Omega-hexatoxin-Hv1a, µ-segestritoxin-Sf1a, and Orally Active Insecticidal Peptide(OAIP) respectively and they are easy to express with the help of the bacteria <i>E. coli</i> BL21 Rosetta Gami strain. So, we then start to create BioBricks of these three toxins which we have obtained the nucleotide sequences. We use a strong T7 promoter that is suitable with the strain of <i>E. coli</i> we chose and also powerful at expressing proteins with multiple disulfide bonds, and we add His-tag for protein purification.</p>
 +
 +
<p class="title">PANTIDE without Lectin</p>
 +
<p class="content"> PANTIDE can be a single toxic peptide of the three toxins we chose, Hv1a, Sf1a, and OAIP respectively, which derive from the natural predators spiders. </p>
 +
 +
<!----------Hv1a-------->
 +
<a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K1974011" class="biobrick"><p class="content-1">BBa_K1974011</p></a>
 +
 +
<div>
 +
      <img src="https://static.igem.org/mediawiki/2016/f/f7/NCTU_FORMOSA_H1.png" class="picture">
 +
</div>
 +
 +
<p class="content">
 +
T7 promoter+RBS+Hv1a+linker+His-tag+terminator
 +
<br>PANTIDE that contains the gene coding for Hv1a linked with His-tag.
 +
</p>
 +
 +
<!---------Sf1a----------->
 +
<a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K1974012" class="biobrick"><p class="content-1">BBa_K1974012</p></a>
 +
 +
<div>
 +
      <img src="https://static.igem.org/mediawiki/2016/a/ad/NCTU_FORMOSA_S1.png" class="picture">
 +
</div>
 +
 +
<p class="content">
 +
T7 promoter+RBS+Sf1a+linker+His-tag+terminator
 +
<br>PANTIDE that contains the gene coding for Sf1a linked with His-tag.
 +
</p>
 +
 +
<!-------OAIP------------->
 +
<a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K1974013" class="biobrick"><p class="content-1">BBa_K1974013</p></a>
 +
 +
<div>
 +
      <img src="https://static.igem.org/mediawiki/2016/2/21/NCTU_FORMOSA_O.png" class="picture">
 +
</div>
 +
 +
<p class="content">
 +
T7 promoter+RBS+OAIP+linker+His-tag+terminator
 +
<br>PANTIDE that contains the gene coding for OAIP linked with His-tag.
 +
</p>
 +
 +
 +
 +
<!---------------lectin---------------->
 +
 +
 +
 +
<p class="title">PANTIDE with Lectin</p>
 +
<p class="content"> PANTIDE can be a single toxic peptide of the three toxins we chose, Hv1a, Sf1a, and OAIP respectively with the addition of Galanthus nivalis agglutinin (GNA), for GNA has the function of acting as a carrier of PANTIDE from insect gut to the haemolymph and finally PANTIDE can transmit to the action site. </p>
 +
 +
<!----------Hv1a lectin----------->
 +
<a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K1974021" class="biobrick"><p class="content-1">BBa_K1974021</p></a>
 +
 +
<div>
 +
      <img src="https://static.igem.org/mediawiki/2016/b/b6/NCTU_FORMOSA_HL.png" class="picture">
 +
</div>
 +
 +
<p class="content">
 +
T7 promoter+RBS+Hv1a+linker+lectin+linker+His-tag+terminator
 +
<br>PANTIDE that contains the gene coding for Hv1a and the snowdrop lectin linked with His-tag.
 +
 +
</p>
 +
 +
<!---------Sf1a lectin---------->
 +
<a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K1974022" class="biobrick"><p class="content-1">BBa_K1974022</p></a>
 +
 +
<div>
 +
      <img src="https://static.igem.org/mediawiki/2016/c/c3/NCTU_FORMOSA_SL.png" class="picture">
 +
</div>
 +
 +
<p class="content">
 +
T7 promoter+RBS+Sf1a+linker+lectin+linker+His-tag+terminator
 +
<br>PANTIDE that contains the gene coding for Sf1a and the snowdrop lectin linked with His-tag.
 +
 +
</p>
 +
 +
<!--------OAIP lectin------>
 +
<a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K1974023" class="biobrick"><p class="content-1">BBa_K1974023</p></a>
 +
 +
<div>
 +
      <img src="https://static.igem.org/mediawiki/2016/2/27/NCTU_FORMOSA_OL.png" class="picture">
 +
</div>
 +
 +
<p class="content">
 +
T7 promoter+RBS+OAIP+linker+lectin+linker+His-tag+terminator
 +
<br>PANTIDE that contains the gene coding for OAIP and the snowdrop lectin linked with His-tag.
 +
 +
</p>
 +
 +
<!---------------GS linker----------------->
 +
 +
<p class="title">PANTIDE with GS Linker</p>
 +
<p class="content"> In this part, to facilitate the expression of PANTIDE, we extended the linker with the substitution of GS linker that is even better than the original linker for the more correcter folding of the proteins structure.</p>
 +
 +
<!-----------OAIP GS linker--------------->
 +
<a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K1974033" class="biobrick"><p class="content-1">BBa_K1974033</p></a>
 +
 +
<div>
 +
      <img src="https://static.igem.org/mediawiki/2016/d/d6/NCTU_FORMOSA_GS1.png" class="picture">
 +
</div>
 +
 +
<p class="content">
 +
T7 promoter+RBS+Hv1a+GS linker+lectin+linker+His-tag+terminator
 +
<br>PANTIDE that contains the gene coding for Hv1a and the snowdrop lectin. And improve the correct folding of PANTIDE by substituting with GS linker linked with His-tag.
 +
 +
 +
</p>
 +
 +
 +
 +
</div>
 +
</section>
 +
 +
 +
 +
 +
 +
 +
<!--JS-->
 +
 +
<script>
 +
 +
var $document = $( document.body );
 +
var $revealBar = $( '.red-container' );
 +
var wrapperHeight = $document.height();
 +
var stepDistance = 101;
 +
var documentHeight = window.innerHeight;
 +
var positions = [];
 +
var heights = [];
 +
var elements = $( '.title' );
 +
 +
// Cache heights and positions
 +
for( var i = 0; i < elements.length; i++ ) {
 +
  var $element = $(elements[i]);
 +
  var height = $element.offset().top + documentHeight;
 +
  if (height > wrapperHeight) {
 +
    height = wrapperHeight;
 +
  }
 +
  positions.push(height);
 +
  heights.push($element.height());
 +
}
 +
 +
var $nodes =  $( '.node' );
 +
 +
// Should totally be debounced /w animation frame. I know,
 +
// this whole thing is slightly inefficient.
 +
// And magic numbers too!
 +
$( document ).scroll( function() {
 +
 +
  nodeTop = $document.scrollTop() + documentHeight + 1;
 +
  var current = 0;
 +
 
 +
  // Active/non active states
 +
  for( var i = 0; i < positions.length; i++ ) {
 +
    if(nodeTop >= positions[i]-80) {
 +
      current = i;
 +
      $nodes.eq( i ).addClass( 'active' );
 +
    } else {
 +
      $nodes.eq( i ).removeClass( 'active' );
 +
    }
 +
  }
 +
 
 +
 
 +
  if ( current < elements.length ) {
 +
    var nextStep = (nodeTop - positions[current]) / (positions[current + 1] - positions[current]);
 +
    var totalWidth = ( current * stepDistance ) + (nextStep * stepDistance);
 +
$revealBar.height( totalWidth+25 );
 +
  }
 +
 +
})
 +
 +
// Clicking the nodes... again, nothing special ;)
 +
$nodes.each( function( index ) {
 +
  var $node = $( this );
 +
  $node.click( function() {
 +
    $('html, body').animate({ scrollTop: (positions[ index ]-documentHeight)-70}, 1000 );
 +
  });
 +
})
 +
//scroll_relocate
 +
function sticky_relocate() {
 +
    var window_top = $(window).scrollTop();
 +
    var div_top = $('.main-img').offset().top;;
 +
    if (window_top > div_top+500) {
 +
        $('#scroll').removeClass('appear');
 +
    } else {
 +
        $('#scroll').addClass('appear');
 +
    };
 +
    if(window_top > div_top+500) {
 +
        $('#web').fadeIn(200);
 +
        $('#right').fadeIn(200);
 +
    } else {
 +
        $('#web').fadeOut(200);
 +
        $('#right').fadeOut(200);
 +
    }
 +
}
 +
 +
$(function () {
 +
    $(window).scroll(sticky_relocate);
 +
    sticky_relocate();
 +
});
 +
 +
 +
 +
$(document).ready(function(
 +
 +
){})
 +
 +
</script>
 +
 +
 +
 +
</body>
 +
</html>
 +
{{Team:NCTU_Formosa/footer}}

Latest revision as of 03:13, 4 November 2016

Composite Parts

We have known the function of the three toxic peptides of PANTIDE, Omega-hexatoxin-Hv1a, µ-segestritoxin-Sf1a, and Orally Active Insecticidal Peptide(OAIP) respectively and they are easy to express with the help of the bacteria E. coli BL21 Rosetta Gami strain. So, we then start to create BioBricks of these three toxins which we have obtained the nucleotide sequences. We use a strong T7 promoter that is suitable with the strain of E. coli we chose and also powerful at expressing proteins with multiple disulfide bonds, and we add His-tag for protein purification.

PANTIDE without Lectin

PANTIDE can be a single toxic peptide of the three toxins we chose, Hv1a, Sf1a, and OAIP respectively, which derive from the natural predators spiders.

BBa_K1974011

T7 promoter+RBS+Hv1a+linker+His-tag+terminator
PANTIDE that contains the gene coding for Hv1a linked with His-tag.

BBa_K1974012

T7 promoter+RBS+Sf1a+linker+His-tag+terminator
PANTIDE that contains the gene coding for Sf1a linked with His-tag.

BBa_K1974013

T7 promoter+RBS+OAIP+linker+His-tag+terminator
PANTIDE that contains the gene coding for OAIP linked with His-tag.

PANTIDE with Lectin

PANTIDE can be a single toxic peptide of the three toxins we chose, Hv1a, Sf1a, and OAIP respectively with the addition of Galanthus nivalis agglutinin (GNA), for GNA has the function of acting as a carrier of PANTIDE from insect gut to the haemolymph and finally PANTIDE can transmit to the action site.

BBa_K1974021

T7 promoter+RBS+Hv1a+linker+lectin+linker+His-tag+terminator
PANTIDE that contains the gene coding for Hv1a and the snowdrop lectin linked with His-tag.

BBa_K1974022

T7 promoter+RBS+Sf1a+linker+lectin+linker+His-tag+terminator
PANTIDE that contains the gene coding for Sf1a and the snowdrop lectin linked with His-tag.

BBa_K1974023

T7 promoter+RBS+OAIP+linker+lectin+linker+His-tag+terminator
PANTIDE that contains the gene coding for OAIP and the snowdrop lectin linked with His-tag.

PANTIDE with GS Linker

In this part, to facilitate the expression of PANTIDE, we extended the linker with the substitution of GS linker that is even better than the original linker for the more correcter folding of the proteins structure.

BBa_K1974033

T7 promoter+RBS+Hv1a+GS linker+lectin+linker+His-tag+terminator
PANTIDE that contains the gene coding for Hv1a and the snowdrop lectin. And improve the correct folding of PANTIDE by substituting with GS linker linked with His-tag.