Difference between revisions of "Team:NCTU Formosa/Acheivement"

Line 3: Line 3:
 
<html>
 
<html>
 
<head>
 
<head>
−
<link href='https://2015.igem.org/Team:NCTU_Formosa/Ubntu.css?action=raw&ctype=text/css' rel='stylesheet' type='text/css'>
+
<style type=text/css>
−
<link rel="stylesheet" href="https://2015.igem.org/Team:NCTU_Formosa/reset.css?action=raw&ctype=text/css"> <!-- CSS reset -->
+
/* v1.0 | 20080212 */
−
 
+
−
<script src="https://2015.igem.org/Team:NCTU_Formosa/mordernizr.js?action=raw&ctype=text/javascript"></script> <!-- Modernizr -->
+
−
 
+
−
<style tpe=text/css>
+
  
 +
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, sup, 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;
 +
    vertical-align: baseline;
 +
    background: transparent;
 +
}
 
body {
 
body {
−
  font-size: 100%;
+
    line-height: 1;
−
  font-family: "Ubuntu", sans-serif;
+
−
  color: #f35535;
+
−
  background-color: #2e313d;
+
 
}
 
}
  
 +
blockquote, q {
 +
    quotes: none;
 +
}
 +
blockquote:before, blockquote:after,
 +
q:before, q:after {
 +
    content: '';
 +
    content: none;
 +
}
  
−
a {
+
/* remember to define focus styles! */
−
  text-decoration: none;
+
:focus {
 +
    outline: 0;
 
}
 
}
  
 +
/* remember to highlight inserts somehow! */
 +
ins {
 +
    text-decoration: none;
 +
}
 +
del {
 +
    text-decoration: line-through;
 +
}
  
−
/* --------------------------------
+
/* tables still need 'cellspacing="0"' in the markup */
−
 
+
table {
−
Modules - reusable parts of our design
+
    border-collapse: collapse;
−
 
+
    border-spacing: 0;
−
-------------------------------- */
+
−
 
+
−
.cd-container {
+
−
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
+
−
 
+
−
  width: 90%;
+
−
  max-width: 768px;
+
−
  margin: 0 auto;
+
 
}
 
}
−
.cd-container::after {
+
.p01{
−
  /* clearfix */
+
background-color:#25439C;
−
  content: '';
+
position:relative;
−
  display: table;
+
height:75vh;
−
  clear: both;
+
width:98.5vw;
 +
padding-top:0vh;
 +
left:0vw;
 +
}
 +
.p02{
 +
background-color:#FCFCDE;
 +
position:relative;
 +
width:98.5vw;
 +
height:500vh;
 +
}
 +
.background1{
 +
background-image:url("1111.png");
 +
background-repeat:no-repeat;
 +
position:reltive;
 +
height:75vh;
 +
width:70vw;
 +
background-size:101%;
 +
top:-1vh;
 +
left:0vw;
 +
opacity:0.9;
 +
float:left;
 +
}
 +
.title{
 +
font-family:Yu Gothic UI;
 +
font-size:33pt;
 +
position:relative;
 +
height:20vh;
 +
width:20vw;
 +
left:-5vw;
 +
top:20vh;
 +
color:#fff;
 +
z-index:100;
 +
float:right;
 +
text-align:center;
 +
}
 +
.contentitle{
 +
font-family:Calibri;
 +
font-size:22pt;
 +
position:relative;
 +
width:50vw;
 +
left:20vw;
 +
right:25vw;
 +
top:20vh;
 +
color:#000;
 +
text-align:left;
 +
z-index:100;
 +
padding-bottom:5vh;
 +
}
 +
.content{
 +
font-family:Calibri Light;
 +
font-size:14pt;
 +
position:relative;
 +
width:60vw;
 +
left:20vw;
 +
right:25vw;
 +
top:8vh;
 +
color:#000;
 +
text-align: justify;
 +
LINE-HEIGHT:30pt;
 +
padding-bottom:15vh;
 
}
 
}
  
−
/* --------------------------------
 
  
−
Main components
 
  
−
-------------------------------- */
 
−
.cd-header {
 
−
  position: fixed;
 
−
  top: 0;
 
−
  left: 0;
 
−
  width: 100%;
 
−
  height: 50px;
 
−
  background: #f35535;
 
−
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 
−
  z-index: 3;
 
−
}
 
−
.cd-header:after {
 
−
  content: "";
 
−
  display: table;
 
−
  clear: both;
 
−
}
 
−
.cd-header #cd-logo {
 
−
  float: left;
 
−
  margin: 13px 0 0 5%;
 
−
}
 
−
.cd-header #cd-logo img {
 
−
  display: block;
 
−
}
 
−
@media only screen and (min-width: 768px) {
 
−
  .cd-header {
 
−
    height: 70px;
 
−
  }
 
−
  .cd-header #cd-logo {
 
−
    margin: 23px 0 0 5%;
 
−
  }
 
−
}
 
  
−
.cd-main-nav {
 
−
  float: right;
 
−
  margin-right: 5%;
 
−
  width: 44px;
 
−
  height: 100%;
 
−
  background: url("../img/cd-icon-menu.svg") no-repeat center center;
 
−
  background-size: 44px 44px;
 
−
  cursor: pointer;
 
−
}
 
−
.cd-main-nav ul {
 
−
  position: absolute;
 
−
  top: 0;
 
−
  left: 0;
 
−
  width: 100%;
 
−
  -webkit-transform: translateY(-100%);
 
−
  -moz-transform: translateY(-100%);
 
−
  -ms-transform: translateY(-100%);
 
−
  -o-transform: translateY(-100%);
 
−
  transform: translateY(-100%);
 
−
}
 
−
.cd-main-nav ul.is-visible {
 
−
  -webkit-transform: translateY(50px);
 
−
  -moz-transform: translateY(50px);
 
−
  -ms-transform: translateY(50px);
 
−
  -o-transform: translateY(50px);
 
−
  transform: translateY(50px);
 
−
}
 
−
.cd-main-nav a {
 
−
  display: block;
 
−
  height: 50px;
 
−
  line-height: 50px;
 
−
  padding-left: 5%;
 
−
  background: #2e313d;
 
−
  border-top: 1px solid #353846;
 
−
  color: #FFF;
 
−
}
 
−
@media only screen and (min-width: 768px) {
 
−
  .cd-main-nav {
 
−
    width: auto;
 
−
    height: auto;
 
−
    background: none;
 
−
    cursor: auto;
 
−
  }
 
−
  .cd-main-nav ul {
 
−
    position: static;
 
−
    width: auto;
 
−
    -webkit-transform: translateY(0);
 
−
    -moz-transform: translateY(0);
 
−
    -ms-transform: translateY(0);
 
−
    -o-transform: translateY(0);
 
−
    transform: translateY(0);
 
−
    line-height: 70px;
 
−
  }
 
−
  .cd-main-nav ul.is-visible {
 
−
    -webkit-transform: translateY(0);
 
−
    -moz-transform: translateY(0);
 
−
    -ms-transform: translateY(0);
 
−
    -o-transform: translateY(0);
 
−
    transform: translateY(0);
 
−
  }
 
−
  .cd-main-nav li {
 
−
    display: inline-block;
 
−
    margin-left: 1em;
 
−
  }
 
−
  .cd-main-nav a {
 
−
    display: inline-block;
 
−
    height: auto;
 
−
    line-height: normal;
 
−
    background: transparent;
 
−
    padding: .6em 1em;
 
−
    border-top: none;
 
−
    font-size: 13px;
 
−
    font-size: 0.8125rem;
 
−
    font-weight: bold;
 
−
    text-transform: uppercase;
 
−
  }
 
−
}
 
  
−
#cd-intro {
 
−
  position: relative;
 
−
  height: 300px;
 
−
  margin-top: 50px;
 
−
  z-index: 1;
 
−
}
 
−
#cd-intro #cd-intro-background {
 
−
  height: 100%;
 
−
  width: 100%;
 
−
  background: url("https://static.igem.org/mediawiki/2015/d/dc/2015_NCTU_Formosa_%E5%A4%A7%E6%A8%993.png") no-repeat center center;
 
−
  background-size: cover;
 
−
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
 
−
}
 
−
#cd-intro #cd-intro-tagline {
 
−
  position: absolute;
 
−
  width: 90%;
 
−
  max-width: 1170px;
 
−
  left: 50%;
 
−
  top: 50%;
 
−
  bottom: auto;
 
−
  right: auto;
 
−
  -webkit-transform: translateX(-50%) translateY(-50%);
 
−
  -moz-transform: translateX(-50%) translateY(-50%);
 
−
  -ms-transform: translateX(-50%) translateY(-50%);
 
−
  -o-transform: translateX(-50%) translateY(-50%);
 
−
  transform: translateX(-50%) translateY(-50%);
 
−
}
 
−
#cd-intro h1 {
 
−
  text-transform: uppercase;
 
−
  font-size: 24px;
 
−
  font-size: 1.5rem;
 
−
  text-align: center;
 
−
  color: #FFF;
 
−
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 
−
}
 
−
@media only screen and (min-width: 768px) {
 
−
  #cd-intro {
 
−
    height: 400px;
 
−
    margin-top: 70px;
 
−
  }
 
−
  #cd-intro h1 {
 
−
    font-size: 30px;
 
−
    font-size: 1.875rem;
 
−
  }
 
−
}
 
−
@media only screen and (min-width: 1170px) {
 
−
  #cd-intro {
 
−
    position: fixed;
 
−
    /* do not overlap the header */
 
−
    top: 70px;
 
−
    left: 0;
 
−
    width: 100%;
 
−
    height: 500px;
 
−
    margin-top: 0;
 
−
  }
 
−
  #cd-intro h1 {
 
−
    font-size: 32px;
 
−
    font-size: 2rem;
 
−
  }
 
−
}
 
  
−
.cd-content {
+
 
−
  position: relative;
+
−
  padding: 2em 0;
+
−
  line-height: 1.6;
+
−
  color: #65676f;
+
−
  background-color: #f0f1e7;
+
−
  z-index: 2;
+
−
}
+
−
.cd-content::before {
+
−
  /* subtle gradient right above the main content */
+
−
  content: '';
+
−
  position: absolute;
+
−
  bottom: 100%;
+
−
  left: 0;
+
−
  width: 100%;
+
−
  height: 50px;
+
−
  background: -webkit-linear-gradient( bottom , rgba(46, 49, 61, 0.5), rgba(46, 49, 61, 0));
+
−
  background: linear-gradient(to top, rgba(46, 49, 61, 0.5), rgba(46, 49, 61, 0));
+
−
}
+
−
.no-cssgradients .cd-content::before {
+
−
  /* use Modernizr to detect whether the browser supports or not css gradients */
+
−
  display: none;
+
−
}
+
−
.cd-content h2 {
+
−
  font-size: 20px;
+
−
  font-size: 1.25rem;
+
−
}
+
−
.cd-content p {
+
−
  margin: 1em 0;
+
−
}
+
−
@media only screen and (min-width: 768px) {
+
−
  .cd-content {
+
−
    line-height: 1.8;
+
−
  }
+
−
  .cd-content h2 {
+
−
    font-size: 30px;
+
−
    font-size: 1.875rem;
+
−
  }
+
−
}
+
−
@media only screen and (min-width: 1170px) {
+
−
  .cd-content {
+
−
    padding: 4em 0;
+
−
    margin-top: 570px;
+
−
  }
+
−
  .cd-content p {
+
−
    font-size: 20px;
+
−
    font-size: 1.25rem;
+
−
  }
+
−
} 
+
 
</style>
 
</style>
 
</head>
 
</head>
 
<body>
 
<body>
−
+
<div class="p01">
−
 
+
<div class="background1"></div>
−
<section id="cd-intro">
+
<div class="title">Acheivement</div>
−
<div id="cd-intro-background"></div>
+
</div>
−
<div id="cd-intro-tagline">
+
<div class="p02">
−
</div> <!-- cd-intro-tagline -->
+
<br>
−
</section> <!-- #cd-intro -->
+
−
 
+
−
<main class="cd-content">
+
−
 
+
 
<img src="https://static.igem.org/mediawiki/2015/2/2f/NCTU_Formosa_team.png">
 
<img src="https://static.igem.org/mediawiki/2015/2/2f/NCTU_Formosa_team.png">
−
<div class="cd-container">
+
<div class="content">
−
<p></p>
+
    <ul type=disc  style="text-align:justify;" >
−
<ul type=disc  style="text-align:justify;" >
+
 
<li>We created the fluorescent E.Cotectors with the single chain variable fragment (scFv) of monoclonal antibody used on targeted therapies on its outer membrane.
 
<li>We created the fluorescent E.Cotectors with the single chain variable fragment (scFv) of monoclonal antibody used on targeted therapies on its outer membrane.
 
<li>We created our E.Cotectors with the gold binding peptide (GBP) on its outer membrane.  
 
<li>We created our E.Cotectors with the gold binding peptide (GBP) on its outer membrane.  
Line 294: Line 147:
 
<br>
 
<br>
 
</div>
 
</div>
−
<img src="https://static.igem.org/mediawiki/2015/f/f2/NCTU_Formosa_Ach2.png">
+
<img src="https://static.igem.org/mediawiki/2015/f/f2/NCTU_Formosa_Ach2.png">
−
<div class="cd-container">
+
<div class="content">
 
<p></p>
 
<p></p>
 
<ul type=disc  style="text-align:justify;" >
 
<ul type=disc  style="text-align:justify;" >
Line 305: Line 158:
 
<br>
 
<br>
 
</div>
 
</div>
−
 
+
<img src="https://static.igem.org/mediawiki/2015/6/6d/NCTU_Formosa_Ach3.png">
−
<img src="https://static.igem.org/mediawiki/2015/6/6d/NCTU_Formosa_Ach3.png">
+
−
<div class="cd-container">
+
 
<p></p>
 
<p></p>
 +
<div class="content">
 
<ul type=disc  style="text-align:justify;" >
 
<ul type=disc  style="text-align:justify;" >
 
<li>Simultaneously detected the multiple antigens.
 
<li>Simultaneously detected the multiple antigens.
Line 318: Line 170:
 
<br>
 
<br>
 
</div>
 
</div>
−
<img src="https://static.igem.org/mediawiki/2015/8/85/NCTU_Formosa_Ach4.png">
+
<img src="https://static.igem.org/mediawiki/2015/8/85/NCTU_Formosa_Ach4.png">
−
<div class="cd-container">
+
<div class="content">
 
<p></p>
 
<p></p>
 
<ul type=disc  style="text-align:justify;" >
 
<ul type=disc  style="text-align:justify;" >
Line 329: Line 181:
 
<br>
 
<br>
  
−
</div>
+
 
−
+
 
−
</main> <!-- cd-content -->
+
</div>
−
<script src="https://2015.igem.org/Team:NCTU_Formosa/jquery1.110.min.js?action=raw&ctype=text/javascript"></script>
+
−
<script src="https://2015.igem.org/Team:NCTU_Formosa/main.js?action=raw&ctype=text/javascript"></script>
+
−
<!-- Resource jQuery -->
+
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 07:49, 9 September 2015

Acheivement

  • We created the fluorescent E.Cotectors with the single chain variable fragment (scFv) of monoclonal antibody used on targeted therapies on its outer membrane.
  • We created our E.Cotectors with the gold binding peptide (GBP) on its outer membrane.
  • We created the different colors of fluorescent E.Cotectors with different scFv of monoclonal antibodies.
  • We proved that the scFv have binding specificity and our E.Cotectors can bind to antigens to distinguish antigens overexpressed in cells.
  • We proved that our E.Cotectors can apply on different techniques of cell staining.
  • We proved that the GBP can let our E.Cotectors adhere to the gold surface.
  • We combined the Quartz crystal microbalance (QCM) technique with our E.Cotectors to measure the concentration of antigens.

  • We constructed 25 biobricks and conducted a series of experiments to verify their functions.
  • We constructed the models to calculate the optimized environment for the highest binding affinity.
  • We designed the mechanism to guarantee the safety on the gene level and the microorganism level.
  • We promoted the communication and the cooperation among various professional fields such as synthetic biology, measurement technology, immunology, and medical science via the participation in iGEM and the accomplishment of the project.

  • Simultaneously detected the multiple antigens.
  • Enlarged the signal of targeted antigens.
  • Combined the antigen measurement technique with others technique, enhanced the precision, and expanded its application.
  • Enhanced the process yield in immobilization of antibodies on the medium gold surface.
  • The cost of using our E.cotectors is lower than using monoclonal antibodies targeted drugs directly on measuring antigens.

  • Offer a new way to let doctors have more selections to make diagnosis.
  • Directly used the antibody fragment of monoclonal antibody used on targeted therapy to distinguish antigens overexpressed in cells. Provided prescription of combination, personalized, and effective targeted drugs.
  • Prepared for the new era of medical digitalization.