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

 
(48 intermediate revisions by 4 users not shown)
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'>
 
−
<link rel="stylesheet" href="https://2015.igem.org/Team:NCTU_Formosa/reset.css?action=raw&ctype=text/css"> <!-- CSS reset -->
 
−
 
−
<script src="https://2015.igem.org/Team:NCTU_Formosa/mordernizr.js?action=raw&ctype=text/javascript"></script> <!-- Modernizr -->
 
−
 
 
<style type=text/css>
 
<style type=text/css>
 +
/* v1.0 | 20080212 */
  
 +
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;
+
 
}
 
}
−
 
+
ol, ul {
−
 
+
    list-style: none;
−
a {
+
−
  text-decoration: none;
+
 
}
 
}
−
 
+
blockquote, q {
−
 
+
    quotes: none;
−
/* --------------------------------
+
−
 
+
−
Modules - reusable parts of our design
+
−
 
+
−
-------------------------------- */
+
−
 
+
−
.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 {
+
blockquote:before, blockquote:after,
−
  /* clearfix */
+
q:before, q:after {
−
  content: '';
+
    content: '';
−
  display: table;
+
    content: none;
−
  clear: both;
+
 
}
 
}
  
−
/* --------------------------------
+
/* remember to define focus styles! */
 +
:focus {
 +
    outline: 0;
 +
}
  
−
Main components
+
/* remember to highlight inserts somehow! */
 +
ins {
 +
    text-decoration: none;
 +
}
  
−
-------------------------------- */
+
del {
−
.cd-header {
+
    text-decoration: line-through;
−
  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 {
+
/* tables still need 'cellspacing="0"' in the markup */
−
  float: right;
+
table {
−
  margin-right: 5%;
+
    border-collapse: collapse;
−
  width: 44px;
+
     border-spacing: 0;
−
  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;
+
−
  }
+
 
}
 
}
 +
.p01{
 +
background-color:#1599EA;
 +
position:relative;
 +
height:70vh;
 +
width:100%;
 +
left:0vw;
 +
}
 +
.p02{
 +
background-color:#FCFCDE;
 +
position:relative;
 +
width:100%;
 +
}
 +
.background1{
 +
background-image:url("https://static.igem.org/mediawiki/2015/d/d7/NCTU_Formosa_Overview_Ecotector.png");
 +
background-repeat:no-repeat;
 +
background-position:center;
 +
position:relative;
 +
height:70vh;
 +
width:40vw;
 +
background-size:90%;
 +
top:0vh;
 +
left:10vw;
 +
opacity:0.9;
 +
float:left;
 +
}
 +
.title{
 +
font-family:Arial;
 +
font-size:33pt;
 +
position:relative;
 +
right:20vw;
 +
top:20vh;
 +
color:#fff;
 +
z-index:100;
 +
float:right;
 +
text-align:center;
 +
}
  
−
#cd-intro {
+
.content{
−
  position: relative;
+
font-family:Arial;
−
  height: 300px;
+
font-size:20pt;
−
  margin-top: 20px;
+
width:60vw;
−
  z-index: 1;
+
margin:0 auto;
 +
left:20vw;
 +
right:20vw;
 +
top:9vh;
 +
color:#000;
 +
text-align: justify;
 +
padding-top:6vh;
 +
padding-bottom:8vh;
 
}
 
}
−
#cd-intro #cd-intro-background {
+
.goto{
−
  height: 100%;
+
position:relative;
−
  width: 100%;
+
padding-left:20vw;
−
  background: url("https://static.igem.org/mediawiki/2015/7/7a/2015_NCTU_Formosa_%E5%A4%A7%E6%A8%992.png") no-repeat center center;
+
padding-top:3vh;
−
  background-size: cover;
+
float:left;
−
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
+
z-index:100;
−
}
+
}
−
#cd-intro #cd-intro-tagline {
+
.goto a{
−
  position: absolute;
+
text-decoration:none;
−
  width: 90%;
+
color:#000;
−
  max-width: 1170px;
+
}
−
  left: 50%;
+
.goto1{
−
  top: 50%;
+
position:relative;
−
  bottom: auto;
+
padding-left:76vw;
−
  right: auto;
+
padding-top:3vh;
−
  -webkit-transform: translateX(-50%) translateY(-50%);
+
}
−
  -moz-transform: translateX(-50%) translateY(-50%);
+
.goto1 a{
−
  -ms-transform: translateX(-50%) translateY(-50%);
+
text-decoration:none;
−
  -o-transform: translateX(-50%) translateY(-50%);
+
color:#000;
−
  transform: translateX(-50%) translateY(-50%);
+
}
−
}
+
p{
−
#cd-intro h1 {
+
text-indent: 40px;
−
  text-transform: uppercase;
+
font-family:Arial;
−
  font-size: 24px;
+
font-size:14pt;
−
  font-size: 1.5rem;
+
position:relative;
−
  text-align: center;
+
color:#000;
−
  color: #FFF;
+
text-align: justify;
−
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+
LINE-HEIGHT:25pt;
−
}
+
}
−
@media only screen and (min-width: 768px) {
+
h1{
−
  #cd-intro {
+
font-size:25pt;
−
    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;
+
−
  }
+
 
}
 
}
 +
h2{
 +
font-size:20pt;
 +
padding-top:2vh;}
  
−
.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>
 +
<div class="title">Overview</div>
 +
</div>
 +
<div class="p02">
 +
 
 +
 
 +
<div class="content"><h1>Customized Detection Platform</h1>
 +
<p>This year, APOllO, introduce a revolutionary product, a customized detecting platform. We call it the E.Cotector.</p>
 +
<p>In our product, we built three individual biobrick libraries of scFv probes and color signal and Gold Binding Polypeptide (GBP). Probes detect the target we want. Fluorescence protein or chromoprotein expresses signal for observation. GBP acts as a bridge to connect our product to gold, which enables our product to be applied to biosensors. Our customers can spontaneously choose from our libraries, pair up any biobricks. Next, comes the most crucial part of our project. Our team will then co-transform the plasmids into E. coli. Our customized detecting platform, The APOllO E.Cotector, is therefore born.  By co-transforming plasmids, it not only helps us customize our product every which way for our customers but also brings us a major advantage in our manufacturing procedure. We no longer have to build lengthy biobricks, which tremendously increases our manufacturing efficiency.</P>
 +
</div>
 +
 
 +
<div class="content"><h1>Health and Medical Detection Platform</h1>
 +
  <p>With our hit product, E.Cotector, we can focus on health and medical dimension. We want to provide a convenient and efficient diagnosis for prescribing personalized targeted drug therapy via tissue biopsies. Therefore, we chose single chain variable fragments (scFv), which are directly from monoclonal antibody, targeted drugs. ScFv acts as our probe to detect specific biomarkers. Our customer can pair up any scFv with any color signal. By changing various kinds of scFv on the surfaces of E.Cotector, it can identify multimarkers and suggest appropriate different kinds of targeted drugs.</P>
 +
  <p> Our E.Cotector can consequently bind to various targeted antigen also simultaneously express color as signal for instant observation. We provide another plasmid of Gold Binding Polypeptide for customers to pair up. Pairing up scFv and GBP can achieve quantitative detection as a biosensor. In conclusion, the customized APOllO E.Cotector will bring a brand new era for pre-diagnosis target drugs treatment.</P>
  
−
<section id="cd-intro">
+
</div>
−
<div id="cd-intro-background"></div>
+
<div class="goto">
−
<div id="cd-intro-tagline">
+
<a href="https://2015.igem.org/Team:NCTU_Formosa/Project"><img src="https://static.igem.org/mediawiki/2015/3/3c/%E7%AE%AD%E9%A0%AD1.png"; width=50vw;><br><br>Back to project</a>
−
</div> <!-- cd-intro-tagline -->
+
</div>
−
</section> <!-- #cd-intro -->
+
<div class="goto1">
 +
<a href="https://2015.igem.org/Team:NCTU_Formosa/Description"><img src="https://static.igem.org/mediawiki/2015/c/c2/%E7%AE%AD%E9%A0%AD2.png"; width=50vw;><br><br>Go to Background</a>
 +
</div>
  
−
<main class="cd-content">
 
−
<div class="cd-container">
 
−
<h2>APOllO E.Cotector</h2>
 
−
<P>With our hit product, we provide the convenient and efficient diagnosis for prescribing personalized targeted drug therapy via tissue biopsies. To achieve this promising goal, the APOllO E.Cotector not only displays single chain variable fragment (scFv) which are directly from monoclonal antibody targeted drugs as probes to detect specific biomarkers, but also simultaneously expresses the florescent protein as signal for instant observation. Furthermore, by changing various kinds of scFv on the surfaces of E.Cotectors, it can identify multimarker and suggest
 
−
</div>
 
−
 
−
</main> <!-- cd-content -->
 
−
<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>{{Team:NCTU_Formosa/footer}}

Latest revision as of 10:33, 11 September 2015

Overview

Customized Detection Platform

This year, APOllO, introduce a revolutionary product, a customized detecting platform. We call it the E.Cotector.

In our product, we built three individual biobrick libraries of scFv probes and color signal and Gold Binding Polypeptide (GBP). Probes detect the target we want. Fluorescence protein or chromoprotein expresses signal for observation. GBP acts as a bridge to connect our product to gold, which enables our product to be applied to biosensors. Our customers can spontaneously choose from our libraries, pair up any biobricks. Next, comes the most crucial part of our project. Our team will then co-transform the plasmids into E. coli. Our customized detecting platform, The APOllO E.Cotector, is therefore born. By co-transforming plasmids, it not only helps us customize our product every which way for our customers but also brings us a major advantage in our manufacturing procedure. We no longer have to build lengthy biobricks, which tremendously increases our manufacturing efficiency.

Health and Medical Detection Platform

With our hit product, E.Cotector, we can focus on health and medical dimension. We want to provide a convenient and efficient diagnosis for prescribing personalized targeted drug therapy via tissue biopsies. Therefore, we chose single chain variable fragments (scFv), which are directly from monoclonal antibody, targeted drugs. ScFv acts as our probe to detect specific biomarkers. Our customer can pair up any scFv with any color signal. By changing various kinds of scFv on the surfaces of E.Cotector, it can identify multimarkers and suggest appropriate different kinds of targeted drugs.

Our E.Cotector can consequently bind to various targeted antigen also simultaneously express color as signal for instant observation. We provide another plasmid of Gold Binding Polypeptide for customers to pair up. Pairing up scFv and GBP can achieve quantitative detection as a biosensor. In conclusion, the customized APOllO E.Cotector will bring a brand new era for pre-diagnosis target drugs treatment.



Back to project


Go to Background