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

(Prototype team page)
 
Line 1: Line 1:
−
{{NCTU_Formosa}}
+
{{Team:NCTU_Formosa}}
 
<html>
 
<html>
 +
<head>
 +
<meta charset="UTF-8">
  
−
<div class="column full_size judges-will-not-evaluate">
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
−
<h3>★  ALERT! </h3>
+
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2016.igem.org/Judging/Awards#Special_Prizes">basic part special prize</a>. </p>
+
  
 +
<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" rel="stylesheet">
  
  
−
<p> Delete this box in order to be evaluated for this medal. See more information at <a href="https://2016.igem.org/Judging/Pages_for_Awards/Instructions"> Instructions for Pages for awards</a>.</p>
+
<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;
 +
}
 +
 
 +
.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;
 +
    left:7vw;
 +
    width:80%;
 +
}
 +
 
 +
.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 part</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/b/be/NCTU_composite_parts.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">Basic part</p>
 +
<p class="content">We have known the function of the three toxic peptides of Pantide, ω-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 BL21 Rosetta Gami strain</i>. So, we then start to create BioBricks of these three toxins which we have obtained the nucleotide sequences. We provide the four basic parts with the single genes of Hv1a, Sf1a, OAIP, and snowdrop lectin. </p>
 +
 
 +
 
 +
 
 +
<!----------basic-hv1a-------->
 +
<a href="#" class="biobrick"><p class="content-1">BBa_K1974001</p></a>
 +
 
 +
<div>
 +
      <img src="#" class="picture">
 
</div>
 
</div>
  
 +
<p class="content">
 +
Hv1a
 +
</p>
 +
<p class="content">Pantide that contains the gene coding for Hv1a. </p>
  
  
  
−
<div class="column full_width">
+
<!--------basic-sf1a----------->
 +
<a href="#" class="biobrick"><p class="content-1">BBa_........</p></a>
  
 +
<div>
 +
      <img src="#" class="picture">
 +
</div>
  
 +
<p class="content">
 +
Sf1a
 +
</p>
 +
<p class="content">Pantide that contains the gene coding for Sf1a.</p>
  
  
−
<p>
+
 
−
A <b>basic part</b> is a functional unit of DNA that cannot be subdivided into smaller component parts. <a href="http://parts.igem.org/wiki/index.php/Part:BBa_R0051">BBa_R0051</a> is an example of a basic part, a promoter regulated by lambda cl.
+
<!-------basic-OAIP------------->
 +
<a href="#" class="biobrick"><p class="content-1">BBa_........</p></a>
 +
 
 +
<div>
 +
      <img src="#" class="picture">
 +
</div>
 +
 
 +
<p class="content">OAIP</p>
 +
<p class="content">Pantide that contains the gene coding for OAIP. </p>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<!---------------Snowdrop lectin---------------->
 +
 
 +
<a href="#" class="biobrick"><p class="content-1">BBa_........</p></a>
 +
 
 +
<div>
 +
      <img src="#" class="picture">
 +
</div>
 +
 
 +
<p class="content">
 +
Snowdrop lectin
 
</p>
 
</p>
 +
<p class="content">Pantide that contains the gene coding for snowdrop lectin.</p>
  
−
<p>Most genetically-encoded functions have not yet been converted to BioBrick parts. Thus, there are <b>many</b> opportunities to find new, cool, and important genetically encoded functions, and refine and convert the DNA encoding these functions into BioBrick standard biological parts. </p>
 
  
  
 +
<!---------Gs linker---------->
 +
<a href="#" class="biobrick"><p class="content-1">BBa_........</p></a>
  
 +
<div>
 +
      <img src="#" class="picture">
 +
</div>
 +
 +
<p class="content">
 +
Gs linker
 +
</p>
 +
 +
 +
<p class="content">
 +
Pantide that contains the gene coding for Gs linker.
 +
 +
</p>
  
  
−
<div class="highlight">
 
−
<h4>Note</h4>
 
−
<p>This page should list all the basic parts your team has made during your project. You must add all characterization information for your parts on the Registry. You should not put characterization information on this page.</p>
 
  
  
 
</div>
 
</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>
 
</html>
 +
{{Team:NCTU_Formosa/footer}}

Revision as of 14:42, 12 October 2016

Basic part

We have known the function of the three toxic peptides of Pantide, ω-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 provide the four basic parts with the single genes of Hv1a, Sf1a, OAIP, and snowdrop lectin.

BBa_K1974001

Hv1a

Pantide that contains the gene coding for Hv1a.

BBa_........

Sf1a

Pantide that contains the gene coding for Sf1a.

BBa_........

OAIP

Pantide that contains the gene coding for OAIP.

BBa_........

Snowdrop lectin

Pantide that contains the gene coding for snowdrop lectin.

BBa_........

Gs linker

Pantide that contains the gene coding for Gs linker.