Difference between revisions of "Team:NCTU Formosa"

 
(200 intermediate revisions by 9 users not shown)
Line 2: Line 2:
 
<html>
 
<html>
 
<head>
 
<head>
−
<link href='https://2015.igem.org/Team:NCTU_Formosa/wiki_reset?action=raw&ctype=text/css' rel="stylesheet">
+
<link href="https://2015.igem.org/Team:NCTU_Formosa/wiki_reset?action=raw&ctype=text/css" rel="stylesheet">
−
<script type="text/javascript" src="https://2015.igem.org/Team:NCTU_Formosa/source/project_side_nav?
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
−
action=raw&ctype=text/javascript"></script>
+
<script>
 +
$(document).ready(function(){
 +
 
 +
    if($(".div3").innerHeight()<$(".div3-1").innerHeight()){
 +
        $(".div3").css("height",$(".div3-3").innerHeight());
 +
       
 +
    };
  
−
<style type="text/css">
+
});
−
body {
+
</script>
−
color:#000;
+
<style>
−
margin:0;
+
        body{
−
padding:0;
+
padding: 0;
−
background:#fff;
+
margin: 0;
−
font-family:Myriad Pro;
+
}
−
}
+
.div1{
−
/*    插入導覽列    */
+
        background:rgb(42,189,243);
−
div.p01 {
+
−
height:100vh;
+
−
}
+
−
    .p02{
+
−
background-image:url(https://static.igem.org/mediawiki/2015/8/8f/NCTU_Formosa_homepage_arrow_all.png);
+
−
background-size:101% 101%;
+
 
         height:100vh;
 
         height:100vh;
−
position: relative;
+
        position:relative;
−
    }
+
        width:100%;
−
    .p03{
+
}
−
         background:#01C1A1;
+
 
−
        height:100vh;
+
        .div2{
−
position: relative;
+
         background:#fff;
−
background-image:url(https://static.igem.org/mediawiki/2015/d/d5/NCTU_Formosa_Homepage_Get_ready_to_explore.png);
+
height:100vh;
−
background-size:120% 170%;
+
        width:100%;
−
background-position: center;
+
         position:relative;
−
cursor:pointer;
+
          
−
    }
+
}
−
/*    插入導覽列    */
+
        .div3{
−
    .sidenav{
+
         background:#fff;
−
         position: fixed;
+
        width:100%;
−
top:35vh;
+
height:100vh;
−
         left:1vw;
+
        position:relative;
−
        cursor:pointer;
+
       
−
z-index:3;
+
−
    }
+
−
    li.navli{
+
−
        width:17px;
+
−
        height:17px;
+
−
margin: 2.5vh 0vw 0vh 0vw;
+
−
         background-color: transparent;
+
−
        border-radius: 13px;
+
−
        list-style-type: none;
+
−
border: #fff 2px solid;
+
−
line-height:17px;
+
−
    }
+
−
video#bgvid{
+
−
position: absolute;
+
−
    min-width: 100%;
+
−
    min-height: 100%;
+
−
    width: 100%;
+
−
height: auto;
+
 
}
 
}
−
#spin-it{
+
.div3-1{
−
position: absolute;
+
        background:#fff;
−
text-align:center;
+
        width:28%;
−
width: 33vw;
+
height:18vw;
−
top: 8vh;
+
        position:absolute;
−
}
+
        left:8%;
−
#spin-it2{
+
top:0vh;
−
position: absolute;
+
        margin-left:0;  
−
text-align:center;
+
}
−
width: 33vw;
+
        .div3-2{
−
top: 40vh;
+
        background:#fff;
−
}
+
        width:28%;
−
#spin-it3{
+
height:18vw;
−
position: absolute;
+
−
text-align:center;
+
−
width: 33vw;
+
−
bottom: 8vh;
+
−
}
+
−
#arrow1{
+
−
width:45vw;
+
−
height:29vh;
+
 
position:absolute;
 
position:absolute;
−
right: 0;
+
        left:36%;
−
top:-2vh;
+
top:0vh;
−
color: #fff;
+
        margin-left:0;  
−
padding: 5vh 3vw 3vh 10vw;
+
}
−
font-size: 2.2em;
+
        .div3-3{
−
opacity: 0;
+
        background:#fff;
−
}
+
        width:28%;
−
#arrow2{
+
height:18vw;
−
width:45vw;
+
−
height:29vh;
+
 
position:absolute;
 
position:absolute;
−
right: 0;
+
        left:64%;
−
top: 30vh;
+
top:0vh;
−
color: #fff;
+
        margin-left:0;
−
padding: 5vh 3vw 3vh 10vw;
+
}
−
font-size: 2.2em;
+
        .div4{
−
opacity: 0;
+
        background:#FCFCDE;
 +
        height:80%;
 +
width:100%;
 +
        position:relative;
 +
        top:0vh;
 +
margin-left:0;
 +
}
 +
 
 +
/*圖案*/
 +
 
 +
        video#bgvid{
 +
position:relative;
 +
top:80px;
 +
        min-width: 72%;
 +
        min-height: 72%;
 +
        width: 72%;
 +
    height: auto;
 +
margin:0px auto;
 +
padding-left:13vw;
 +
       
 +
}
 +
        .p-2{
 +
    background-image:url("https://static.igem.org/mediawiki/2015/8/8f/Apollo_no_background.png");
 +
    position:relative;
 +
height:90vh;
 +
    width:90%;
 +
background-position:center;
 +
    background-size:50%;
 +
    background-repeat:no-repeat;
 +
    left:3%;
 +
}
 +
.photo3-1{
 +
background-image:url("https://static.igem.org/mediawiki/2015/5/51/2015_NCTU_Formosa_Homepage_21.png");
 +
width:100%;
 +
height:100%;
 +
position:relative;
 +
top:0%;
 +
left:5%;
 +
background-size:90%;
 +
background-repeat:no-repeat;
 
}
 
}
−
#arrow3{
+
.photocontent1{
−
width:45vw;
+
color: #000;
−
height:29vh;
+
font-family:Arial;
−
position:absolute;
+
font-size: 18px;
−
right: 0;
+
text-decoration:none;
−
bottom:-1vh;
+
text-align: justify;
−
color: #fff;
+
margin-left : 8%;
−
padding: 5vh 3vw 3vh 10vw;
+
width:80%;
−
font-size: 2.2em;
+
−
opacity: 0;
+
 
}
 
}
−
#fade-it{
+
−
position: absolute;
+
.photo3-2{
−
top: 11vh;
+
background-image:url("https://static.igem.org/mediawiki/2015/2/2e/NCTU_Formosa_Homepage_antibody.png");
−
left:24vw;
+
height:100%;
−
font-size:2.5em;
+
width:100%;
−
}
+
position:relative;
−
#fade-it2{
+
background-size:90%;
−
position: absolute;
+
background-repeat:no-repeat;
−
top: 43vh;
+
left:4%;
−
left:24vw;
+
top:0%;
−
font-size:2.5em;
+
−
}
+
−
#fade-it3{
+
−
position: absolute;
+
−
bottom: 17vh;
+
−
left:24vw;
+
−
font-size:2.5em;
+
−
}
+
−
#fade-it4{
+
−
padding: 8px 35px;
+
−
position:absolute;
+
−
left: 24vw;
+
−
top:18vh;
+
−
cursor:pointer;
+
−
border:1px solid #000;
+
−
border-radius: 5px;
+
−
text-align: center;
+
−
-webkit-transition: background-color 0.3s, color 0.3s;
+
−
    -moz-transition: background-color 0.3s, color 0.3s;
+
 
}
 
}
−
#fade-it4:hover{
 
−
background-color:#000;
 
−
color:#fff;
 
  
 +
.photocontent2{
 +
color: #000;
 +
font-family:Arial;
 +
font-size: 18px;
 +
text-decoration:none;
 +
text-align: justify;
 +
position:absolute;
 +
top:50%;
 +
left:8%;
 +
height:50%;
 +
width:80%;
 
}
 
}
−
#fade-it5{
+
.photo3-3{
−
padding: 8px 35px;
+
background-image:url("https://static.igem.org/mediawiki/2015/2/2c/Nctu_formosa_homepage_cell.png");
−
position:absolute;
+
height:100%;
−
left: 24vw;
+
width:100%;
−
top:50vh;
+
position:relative;
−
cursor:pointer;
+
background-size:50%;
−
border:1px solid #000;
+
background-repeat:no-repeat;
−
border-radius: 5px;
+
left:5%;
−
text-align: center;
+
top:0%;
−
-webkit-transition: background-color 0.3s, color 0.3s;
+
−
    -moz-transition: background-color 0.3s, color 0.3s;
+
 
}
 
}
−
#fade-it5:hover{
 
−
background-color:#000;
 
−
color:#fff;
 
  
 +
.photocontent3{
 +
color: #000;
 +
font-family:Arial;
 +
font-size: 18px;
 +
text-decoration:none;
 +
text-align: justify;
 +
position:absolute;
 +
top:50%;
 +
left:8%;
 +
height:50%;
 +
width:80%;
 
}
 
}
−
#fade-it6{
+
        .p-4{
−
padding: 8px 35px;
+
        background:#FCFCDE;
−
position:absolute;
+
        height:80vh;
−
left: 24vw;
+
position: relative;
−
top:85vh;
+
background-image:url(https://static.igem.org/mediawiki/2015/8/8d/NCTU_FORMOSA_HOMEPAGE_ECOTECTOR_nR.png);
−
cursor:pointer;
+
background-size:80%;
−
border:1px solid #000;
+
background-position: center;
−
border-radius: 5px;
+
background-repeat: no-repeat;
−
text-align: center;
+
}
−
-webkit-transition: background-color 0.3s, color 0.3s;
+
.div3 img{
−
    -moz-transition: background-color 0.3s, color 0.3s;
+
width:85%;
−
}
+
margin-left:7.5%;
−
#fade-it6:hover{
+
}
−
background-color:#000;
+
</style>
−
color:#fff;
+
  </head>
 +
 
 +
<body>
  
−
}
 
−
#move-it{
 
−
background-image:url(https://static.igem.org/mediawiki/2015/1/1a/NCTU_Formosa_homepage_point.png);
 
−
background-size:100% 100%;
 
−
width:9vw;
 
−
height:18vh;
 
−
position:absolute;
 
−
left: 30vw;
 
−
bottom:30vh;
 
−
}
 
−
</style>
 
  
−
</head>
+
<div class="div1">
−
 
+
<div class="div1-1">
−
<body>
+
<video autoplay id="bgvid" controls="true">
−
<div class="container">
+
<source src="https://static.igem.org/mediawiki/2015/0/09/Nctu_formosa_homepage_vide5.mp4" type="video/mp4">
−
<div class="sidenav">
+
</source>
−
        <ul style="list-style-image: none; color: #fff;">
+
         </video>
−
            <li class="navli" style="background-color:#ffffff"></li>
+
</div>
−
            <li class="navli"></li>
+
</div>
−
            <li class="navli"></li>
+
−
 
+
−
        </ul>
+
−
    </div>
+
−
<div class="p01">
+
−
    <video autoplay id="bgvid">
+
−
<source src="1" type="video/mp4">
+
−
</video>
+
−
    </div>
+
−
    <div class="p02">
+
−
    <div id="spin-it"><img src=https://static.igem.org/mediawiki/2015/a/a5/NCTU-Formosa-homepage_icon1.png width=150vw></div>
+
−
        <div id="fade-it">Who we are</div><div id=fade-it4>SEE MORE</div>
+
−
        <div id="arrow1">In 2015, NCTU_Formosa created an APOllO organization, which stands for Almighty probe of scFv organization, to
+
−
develop a new product.</div>
+
−
        <div id="spin-it2"><img src=https://static.igem.org/mediawiki/2015/c/c5/NCTU_formosa_Homepage_icon2.png width=150vw></div>
+
−
        <div id="fade-it2">What we did</div><div id=fade-it5>SEE MORE</div>
+
−
        <div id="arrow2">
+
−
                    We want to help doctor to select the candidates for targeted
+
−
            drug therapies and determine what kinds of targeted drugs
+
−
            can be used in a cheaper way. If the diagnosis cost become
+
−
            inexpensive, there will be more people can afford, therefore
+
−
            more people can be prescribe and treated, decreasing the
+
−
            mortality rate.
+
−
</div>
+
−
         <div id="spin-it3"><img src=https://static.igem.org/mediawiki/2015/d/d5/NCTU_formosa_Homepage_icon3.png width=150vw></div>
+
−
        <div id="fade-it3">How we make it</div><div id=fade-it6>SEE MORE</div>
+
−
        <div id="arrow3">
+
−
                APOllO E.Cotector :  stain the tissue biopsies by antibody-antigen interaction and perform fluorescence. Then it can help doctor determine the targeted drug therapy.<BR>
+
−
        APOllO E.Cotector Plus : test the concentration of specific antigens in serum and to give more information about the patients' condition.
+
−
        </div>
+
−
    </div>
+
−
    <div class="p03" onclick="location.href='https://2015.igem.org/Team:NCTU_Formosa/Project';"><div id="move-it"></div></div>
+
 
      
 
      
 +
    <div class="div2">
 +
<div class="p-2"></div>
 +
        <div style="position:absolute;bottom:30%;width:100%;text-align:center;font-size:18pt;letter-spacing:5px;">The only thing we can detect is everything.</div>
 +
</div>
 
      
 
      
−
     <div>
+
     <div class="div3 ">
−
    <div style="width:29vw;height:5vh;float:left;background-color:#00171F;color:#fff;font-family:Myriad Pro;font-size:2em;padding:7vh 0vw 7vh 5vw;">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>
+
<div class="div3-1">
−
        <div style="width:58.85vw;height:5vh;float:left;background-color:#263A40;color:#fff;font-family:Myriad Pro;font-size:2em;padding:7vh 0vw 7vh 6vw;">
+
−
        <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>
+
          <img src="https://static.igem.org/mediawiki/2015/5/51/2015_NCTU_Formosa_Homepage_21.png" align="center" height=250px>  
−
            &nbsp;&nbsp;Engineering Building 6 EF455, 1001 University Road, Hsinchu 300, Taiwan, ROC. </div>
+
      <div class="photocontent1"><h2>Who we are</h2>
−
     
+
      NCTU_Formosa created an organization—APOllO, which stands for Almighty Probe of scFv Organization. APOllO is devoted to developing detection technology by utilizing antibodies. In 2015, we cooperated with iGEM to create a brand new detection platform using synthetic biology.</div>
−
    </div>
+
    </div>
−
</div>
+
           
−
  <script src="https://2015.igem.org/Team:NCTU_Formosa/source/superscrollorama.js?
+
        <div class="div3-2">
−
action=raw&ctype=text/javascript"></script>
+
    <img src="https://static.igem.org/mediawiki/2015/2/2e/NCTU_Formosa_Homepage_antibody.png" align="middle" height=250px>  
−
    <script src="https://2015.igem.org/Team:NCTU_Formosa/source/TweenMax.min.js?
+
      <div class="photocontent1"><h2>What's new</h2>
−
action=raw&ctype=text/javascript"></script>
+
APOllO E.Cotector:<br> 
−
<script>
+
Our organization creates a customized scFv detection platform by co-transforming any desired plasmid in to <i>E. coli</i>. ScFv utilizes antigen-antibody interaction to act as probes. Therefore, our E.Cotector has the function of a detector.
−
$(document).ready(function() {
+
      </div> </div>
−
var controller = $.superscrollorama();
+
           
−
// individual element tween examples
+
          <div class="div3-3">
−
controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), .5, {css:{opacity: 0}}));
+
    <img src="https://static.igem.org/mediawiki/2015/7/77/Nctu_formosa_homepage_photo3.jpg" align="middle" height=250px>
−
controller.addTween('#fade-it2', TweenMax.from( $('#fade-it2'), .5, {css:{opacity: 0}}));
+
           
−
controller.addTween('#fade-it3', TweenMax.from( $('#fade-it3'), .5, {css:{opacity: 0}}));
+
        <div class="photocontent1"><h2>What we care about</h2>
−
controller.addTween('#fade-it4', TweenMax.from( $('#fade-it4'), .5, {css:{opacity: 0}}));
+
       
−
controller.addTween('#fade-it5', TweenMax.from( $('#fade-it5'), .5, {css:{opacity: 0}}));
+
In 2015, we focused on helping doctors select appropriate candidates for monoclonal-antibody targeted drug treatments—reducing the price of patients' treatment. If the cost for diagnosis decreases, more patients can afford it. Therefore lowering the mortality rate of cancer. <br>
−
controller.addTween('#fade-it6', TweenMax.from( $('#fade-it6'), .5, {css:{opacity: 0}}));
+
            </div>
−
controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), .25, {css:{opacity:0, rotation: 360}, ease:Quad.easeOut}));
+
      </div>
−
controller.addTween('#spin-it2', TweenMax.from( $('#spin-it2'), .25, {css:{opacity:0, rotation: 360}, ease:Quad.easeOut}));
+
</div>
−
controller.addTween('#spin-it3', TweenMax.from( $('#spin-it3'), .25, {css:{opacity:0, rotation: 360}, ease:Quad.easeOut}));
+
      
−
controller.addTween('#move-it', TweenMax.from( $('#move-it'), .8, {css:{left:0, bottom:0}, ease:Quad.easeOut}));
+
         <div class="p-4">
−
})
+
        <div style="position:absolute;bottom:17vh;right:20vw;font-size:20pt;"><a href="https://2015.igem.org/Team:NCTU_Formosa/Project" style="color:#000;"><u>Get Ready to Explore</a></U></div>
−
</script>
+
         </div>
−
    <script type="text/javascript">
+
</div>
−
/* 淡入淡出*/
+
 
−
$(document).ready(function (){
+
 
−
     $("#fade-it4").click(function(){               
+
−
         var div = $("#arrow1");
+
−
        div.css("opacity") == 0 ? div.fadeTo("fast", 1.0) : div.fadeTo("fast", 0.0);
+
−
    });
+
−
$("#fade-it5").click(function(){               
+
−
        var div = $("#arrow2");
+
−
        div.css("opacity") == 0 ? div.fadeTo("fast", 1.0) : div.fadeTo("fast", 0.0);
+
−
    });
+
−
$("#fade-it6").click(function(){               
+
−
        var div = $("#arrow3");
+
−
         div.css("opacity") == 0 ? div.fadeTo("fast", 1.0) : div.fadeTo("fast", 0.0);
+
−
    });
+
−
});
+
−
</script>
+
 
</body>
 
</body>
−
</html>
+
</html>{{Team:NCTU_Formosa/footer}}

Latest revision as of 02:41, 19 September 2015

The only thing we can detect is everything.

Who we are

NCTU_Formosa created an organization—APOllO, which stands for Almighty Probe of scFv Organization. APOllO is devoted to developing detection technology by utilizing antibodies. In 2015, we cooperated with iGEM to create a brand new detection platform using synthetic biology.

What's new

APOllO E.Cotector:
Our organization creates a customized scFv detection platform by co-transforming any desired plasmid in to E. coli. ScFv utilizes antigen-antibody interaction to act as probes. Therefore, our E.Cotector has the function of a detector.

What we care about

In 2015, we focused on helping doctors select appropriate candidates for monoclonal-antibody targeted drug treatments—reducing the price of patients' treatment. If the cost for diagnosis decreases, more patients can afford it. Therefore lowering the mortality rate of cancer.