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

Line 1: Line 1:
 
{{Team:NCTU_Formosa/navigation}}
 
{{Team:NCTU_Formosa/navigation}}
 +
 
<html>
 
<html>
 
<head>
 
<head>
−
<link href='https://2015.igem.org/Team:NCTU_Formosa/wiki_reset?action=raw&amp;ctype=text/css' rel="stylesheet">
+
<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 -->
 
<link rel="stylesheet" href="https://2015.igem.org/Team:NCTU_Formosa/reset.css?action=raw&ctype=text/css"> <!-- CSS reset -->
−
<link rel="stylesheet" href="https://2015.igem.org/Team:NCTU_Formosa/style.css?action=raw&ctype=text/css"> <!-- Resource style -->
+
 
 
<script src="https://2015.igem.org/Team:NCTU_Formosa/mordernizr.js?action=raw&ctype=text/javascript"></script> <!-- Modernizr -->
 
<script src="https://2015.igem.org/Team:NCTU_Formosa/mordernizr.js?action=raw&ctype=text/javascript"></script> <!-- Modernizr -->
  
 +
<style tpe=text/css>
  
 +
body {
 +
  font-size: 100%;
 +
  font-family: "Ubuntu", sans-serif;
 +
  color: #f35535;
 +
  background-color: #2e313d;
 +
}
  
−
<head>
+
 
−
<style tpe=text/css>
+
a {
−
body{
+
  text-decoration: none;
−
        background-color:#fff;
+
 
}
 
}
  
−
.title1{
+
 
−
background-color:#fff;
+
/* --------------------------------  
−
position:relative;
+
 
−
height:115vh;
+
Modules - reusable parts of our design
−
width:98vw;
+
 
−
top:-5vh;
+
-------------------------------- */
−
left:0vw;
+
 
−
background-repeat:no-repeat;
+
.cd-container {
−
background-size:100%;
+
  /* 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 */
−
background-image:url("https://static.igem.org/mediawiki/2015/7/7a/2015_NCTU_Formosa_%E5%A4%A7%E6%A8%992.png");
+
 
−
}
+
  width: 90%;
−
.photo{
+
  max-width: 768px;
−
background-image:url("https://static.igem.org/mediawiki/2015/6/6e/2015_NCTU_Formosa_S.png");
+
  margin: 0 auto;
−
position:relative;
+
}
−
height:90vh;
+
.cd-container::after {
−
width:100vw;
+
  /* clearfix */
−
top:5vh;
+
  content: '';
−
left:0vw;
+
  display: table;
−
        background-position:center;
+
  clear: both;
−
background-repeat:no-repeat;
+
−
background-size:100%;
+
−
z-index:-20;
+
−
}
+
−
.photo2{
+
−
background-image:url("https://static.igem.org/mediawiki/2015/8/8b/2015_NCTU_Formosa_Overveiw2.png");
+
−
position:relative;
+
−
height:125vh;
+
−
width:100vw;
+
−
top:5vh;
+
−
left:0vw;
+
−
background-repeat:no-repeat;
+
−
background-size:100%;
+
 
}
 
}
−
.content1{
 
−
font-family:Nexa Light;
 
−
font-size:16pt;
 
−
color:#fff;
 
−
text-align:left;
 
−
position:relative;
 
−
height:15vh;
 
−
width:45vw;
 
−
left:5vw;
 
−
top:60vh;
 
−
}
 
−
.content2{
 
−
font-family:Nexa Light;
 
−
font-size:16pt;
 
−
color:#fff;
 
−
text-align:left;
 
−
position:absolute;
 
−
height:15vh;
 
−
width:40vw;
 
−
left:60vw;
 
−
top:60vh;
 
−
}
 
−
.photo3{
 
−
background-image:url("https://static.igem.org/mediawiki/2015/1/1f/2015_NCTU_Formosa_What%27s_specical.png");
 
−
position:relative;
 
−
height:60vh;
 
−
width:93vw;
 
−
top:0vh;
 
−
left:3vw;
 
−
background-repeat:no-repeat;
 
−
background-position:center;
 
−
background-size:80%;
 
−
}
 
−
.photo4{
 
−
background-image:url("https://static.igem.org/mediawiki/2015/8/8b/2015_NCTU_Formosa_Ecotecotr1.png");
 
−
position:absolute;
 
−
height:50vh;
 
−
width:50vw;
 
−
top:90vh;
 
−
left:45vw;
 
−
background-repeat:no-repeat;
 
−
background-position:center;
 
−
background-size:35%;
 
−
z-index:999;
 
−
}
 
−
.content3{
 
−
font-family:Nexa Bold;
 
−
font-size:33pt;
 
−
color:#000;
 
−
text-align:left;
 
−
position:relative;
 
−
height:8vh;
 
−
width:100vw;
 
−
left:0vw;
 
−
top:5vh;
 
−
}
 
  
−
</style>
+
/* --------------------------------  
−
</head>
+
−
<body>
+
−
<div class="side"></div>
+
−
<div class="title1"></div>
+
−
<div class="content3">The Brand-New Diagnosis Era</div>
+
−
<div class="photo"></div>
+
−
+
−
<div class="icon1"></a><a href="https://2015.igem.org/Team:NCTU_Formosa/Project>" </div>
+
−
<div class="icon2"></a></div>
+
  
−
   
+
Main components
−
<div class="photo4"></div>
+
−
<div class="photo3"></div>
+
−
<div class="photo2">
+
−
<div class="content1">
+
−
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 physicians the prescription of combination and personalised therapy.</div>
+
−
<div class="content2">
+
−
To provide an alternative method of pre-diagnosis, APOllO E.Cotector Plus can not only display scFv but also able immobilize on gold surface. It can be applied on high-tech measurement machine which uses gold as signal transducer. Via the combination of various microbalances, APOllO E.Cotector Plus can truly determine the quantity of cancer antigens in serum.<br>It can provide a cross comparison with tissue biopsies and provide doctors more details about cancer patients' condition.</div>
+
−
</div>
+
−
           
+
  
 +
-------------------------------- */
 +
.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;
 +
  }
 +
}
  
−
    <div style="position:relative;">
+
#cd-intro {
−
    <div style="width:30vw;height:5vh;position:absolute;left:0vw;float:left;background-color:#00171F;color:#fff;font-family:Myriad Pro;font-size:12pt;padding:7vh 0vw 7vh 6vw;">contact us<BR> NCTU_Formosa APOllO &nbsp;&nbsp;<a href="https://www.facebook.com/pages/NCTU_Formosa-IGEM-team/267841893250331?fref=ts" target="_blank"><img src=https://static.igem.org/mediawiki/2015/a/ab/NCTU_FORMOSA_Facebook_LINK.png width=40vw></a> </div>
+
  position: relative;
−
        <div style="width:64vw;height:5vh;position:relative;left:30vw;float:left;background-color:#263A40;color:#fff;font-family:Myriad Pro;font-size:12pt;padding:7vh 0vw 7vh 6vw;">
+
  height: 300px;
−
        <a href="https://goo.gl/maps/nqUy6" target="_blank"><img src=https://static.igem.org/mediawiki/2015/1/10/NCTU_Formosa_footer_location.png width=40vw></a>
+
  margin-top: 50px;
−
            &nbsp;&nbsp;Engineering Building 6 EF455, 1001 University Road, Hsinchu 300, Taiwan, ROC. </div>
+
  z-index: 1;
−
    </div>
+
}
 +
#cd-intro #cd-intro-background {
 +
  height: 100%;
 +
  width: 100%;
 +
  background: url("https://static.igem.org/mediawiki/2015/7/7a/2015_NCTU_Formosa_%E5%A4%A7%E6%A8%992.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>
 +
</head>
 +
<body>
 +
  
−
 
+
<section id="cd-intro">
−
  </body>
+
<div id="cd-intro-background"></div>
−
 
+
<div id="cd-intro-tagline">
 +
</div> <!-- cd-intro-tagline -->
 +
</section> <!-- #cd-intro -->
  
 +
<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>
 
</html>
 
</html>

Revision as of 12:29, 4 September 2015

APOllO E.Cotector

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