Difference between revisions of "Team:NCTU Formosa"

 
(232 intermediate revisions by 9 users not shown)
Line 2: Line 2:
 
<html>
 
<html>
 
<head>
 
<head>
−
<!--    匯入jQuery    -->
+
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
−
    <script>
+
<script>
−
        $(document).ready(function(){
+
$(document).ready(function(){
−
           
+
 
−
            //根據捲軸的位置改變右方導覽列游標的顏色
+
    if($(".div3").innerHeight()<$(".div3-1").innerHeight()){
−
            $(window).scroll(function(){
+
        $(".div3").css("height",$(".div3-3").innerHeight());
−
                if($(window).scrollTop()>=$(".p01").offset().top && $(window).scrollTop()<$(".p02").offset().top){
+
       
−
                    $(".sidenav li").css("background-color","transparent")//除了被點擊到的游標，其他都恢復成原來的顏色
+
    };
−
                    $(".sidenav li:eq(0)").css("background-color","#ffffff")
+
 
−
                }else if($(window).scrollTop()>=$(".p02").offset().top && $(window).scrollTop()<$(".p03").offset().top){
+
});
−
                    $(".sidenav li").css("background-color","transparent")//除了被點擊到的游標，其他都恢復成原來的顏色
+
</script>
−
                    $(".sidenav li:eq(1)").css("background-color","#ffffff")
+
−
                }else if($(window).scrollTop()>=$(".p03").offset().top && $(window).scrollTop()<$(".p04").offset().top){
+
−
                    $(".sidenav li").css("background-color","transparent")//除了被點擊到的游標，其他都恢復成原來的顏色
+
−
                    $(".sidenav li:eq(2)").css("background-color","#ffffff")
+
−
                }else if($(window).scrollTop()>=$(".p04").offset().top && $(window).scrollTop()<$(".p05").offset().top){
+
−
                    $(".sidenav li").css("background-color","transparent")//除了被點擊到的游標，其他都恢復成原來的顏色
+
−
                    $(".sidenav li:eq(3)").css("background-color","#ffffff")
+
−
                }else if($(window).scrollTop()>=$(".p05").offset().top){
+
−
                    $(".sidenav li").css("background-color","transparent")//除了被點擊到的游標，其他都恢復成原來的顏色
+
−
                    $(".sidenav li:eq(4)").css("background-color","#ffffff")
+
−
                }
+
−
            })
+
−
                   
+
−
            //點選右方導覽列時會到指定圖片
+
−
            var num_li=$("li").length
+
−
            for(i=0;i<=num_li;i++){
+
−
                $(".sidenav li:eq("+i+")").click({id:i},function(e){
+
−
                    $("html,body").stop()
+
−
                    $(".sidenav li").css("background-color","transparent")//除了被點擊到的游標，其他都恢復成原來的顏色
+
−
                    page=e.data.id+1
+
−
                    $("html,body").animate({"scrollTop":$(".p0"+page).offset().top})
+
−
                    $(".sidenav li:eq("+e.data.id+")").css("background-color","#ffffff")//被點擊到的游標變色，前面的selector用this也可以
+
−
                })
+
−
            }
+
−
            //一進入網頁時，將導覽列垂直置中計算導覽列置中的位置
+
−
          center()
+
−
           
+
−
          //縮放網頁時，將導覽列垂直置中
+
−
            $(window).resize(function(){
+
−
                center()
+
−
            })
+
−
           
+
−
            //計算導覽列垂直置中的高度
+
−
            function center(){
+
−
                pos=$(window).height()/2-$(".sidenav").height()/2
+
−
                $(".sidenav").css("top",pos)
+
−
            }
+
−
           
+
−
        })
+
−
    </script>
+
 
<style>
 
<style>
−
body {
+
        body{
−
color:#fff;
+
padding: 0;
−
margin:0;
+
margin: 0;
−
padding:0;
+
}
−
background:#3a4044;
+
.div1{
 +
        background:rgb(42,189,243);
 +
        height:100vh;
 +
        position:relative;
 +
        width:100%;
 +
}
 +
 
 +
        .div2{
 +
        background:#fff;
 +
height:100vh;
 +
        width:100%;
 +
        position:relative;
 +
       
 +
}
 +
        .div3{
 +
        background:#fff;
 +
        width:100%;
 +
height:100vh;
 +
        position:relative;
 +
       
 +
}
 +
.div3-1{
 +
        background:#fff;
 +
        width:28%;
 +
height:18vw;
 +
        position:absolute;
 +
        left:8%;
 +
top:0vh;
 +
        margin-left:0;
 +
}
 +
        .div3-2{
 +
        background:#fff;
 +
        width:28%;
 +
height:18vw;
 +
 +
position:absolute;
 +
        left:36%;
 +
top:0vh;
 +
        margin-left:0;
 +
}
 +
        .div3-3{
 +
        background:#fff;
 +
        width:28%;
 +
height:18vw;
 +
 +
position:absolute;
 +
        left:64%;
 +
top:0vh;
 +
        margin-left:0;
 +
}
 +
        .div4{
 +
        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;
 
}
 
}
−
* {
+
.photocontent1{
−
margin:0;
+
color: #000;
−
padding:0;
+
font-family:Arial;
 +
font-size: 18px;
 +
text-decoration:none;
 +
text-align: justify;
 +
margin-left : 8%;
 +
width:80%;
 
}
 
}
−
/*    插入背景圖片    */
+
−
    .p01{
+
.photo3-2{
−
background-image:url(https://static.igem.org/mediawiki/2015/c/c0/NCTU_Formosa_metal_Style_background.jpg);
+
background-image:url("https://static.igem.org/mediawiki/2015/2/2e/NCTU_Formosa_Homepage_antibody.png");
−
        background-repeat: no-repeat;
+
height:100%;
−
background-position:center;
+
width:100%;
−
background-size:cover;
+
position:relative;
−
        height:100vh;
+
background-size:90%;
−
position:relative
+
background-repeat:no-repeat;
−
    }
+
left:4%;
−
    .p02{
+
top:0%;
−
        background-image:url(images/p02.jpg);
+
−
        background-size:cover;
+
−
        background-repeat: no-repeat;
+
−
        height:100vh;
+
−
    }
+
−
    .p03{
+
−
        background-image:url(images/p03.jpg);
+
−
        background-size:cover;
+
−
        background-repeat: no-repeat;
+
−
        height:100vh;
+
−
    }
+
−
    .p04{
+
−
        background-image:url(images/p04.jpg);
+
−
        background-size:cover;
+
−
        background-repeat: no-repeat;
+
−
        height:100vh;
+
−
    }
+
−
    .p05{
+
−
        background-image:url(images/p05.jpg);
+
−
        background-size:cover;
+
−
        background-repeat: no-repeat;
+
−
        height:100vh;
+
−
    }
+
−
/*    插入導覽列    */
+
−
    .sidenav{
+
−
        position: fixed;
+
−
        top:50%;
+
−
        right:5vw;
+
−
        cursor:pointer;
+
−
    }
+
−
    li.navli{
+
−
        width:15px;
+
−
        height:15px;
+
−
margin: 2.5vh 0vw 0vh 0vw;
+
−
        background-color: transparent;
+
−
        border-radius: 10px;
+
−
        list-style-type: none;
+
−
border: #fff 2px solid;
+
−
line-height:17px;
+
−
    }
+
−
    g1{
+
−
        font-size:7em;
+
−
        color:#fff;
+
−
display:inline;
+
−
    }
+
−
g2{
+
−
font-size:2.6em;
+
−
color:#fff;
+
−
display:inline;
+
 
}
 
}
−
navtext {
 
−
display: block;
 
−
right: 7.4vw;
 
−
top: 0px;
 
−
position: relative;
 
−
font-weight: 100;
 
−
letter-spacing: 2px;
 
−
font-size: 1.9em;
 
−
}
 
−
.upper{
 
−
position:relative;
 
−
font-family: "georgia";
 
−
border-bottom-style:solid;
 
−
border-width:2px;
 
−
height: 20vh;
 
−
line-height:20vh;
 
−
border-color:#fff;
 
−
padding: 0vh 0vw 0vh 7vw;
 
−
}
 
−
.side{
 
−
position:absolute;
 
−
left: 0px;
 
−
width: 6vw;
 
−
height: 79.8vh;
 
−
border-right-style:solid;
 
−
border-width:2px;
 
−
border-color:#fff;
 
−
}
 
−
.textbox{
 
−
position:static;
 
−
margin-left: 8vw;
 
−
padding: 9vh 20vw 10vh 4vw;
 
−
font-family: "Georgia";
 
−
font-size:2.8em;
 
−
color: #fff;
 
−
}
 
−
</style>
 
−
</head>
 
−
<body>
 
−
<div class="container">
 
−
    <div class="sidenav">
 
−
        <ul style=list-style-image: none>
 
−
            <li class="navli" style="background-color:#ffffff"><navtext>Project</navtext></li>
 
−
            <li class="navli"><navtext>Background</navtext></li>
 
−
            <li class="navli"><navtext>Design</navtext></li>
 
−
            <li class="navli"><navtext>Result</navtext></li>
 
−
            <li class="navli"><navtext>Modeling</navtext></li>
 
  
−
         </ul>
+
.photocontent2{
−
    </div>
+
color: #000;
−
     <div class="p01"><g1>PROJECT</g1></div>
+
font-family:Arial;
−
     <div class="p02">
+
font-size: 18px;
−
    <div class="upper"><g1>Background / </g1><g2>Our project focuses on the diagnoses before and after treatment for cancers.</g2>
+
text-decoration:none;
 +
text-align: justify;
 +
position:absolute;
 +
top:50%;
 +
left:8%;
 +
height:50%;
 +
width:80%;
 +
}
 +
.photo3-3{
 +
background-image:url("https://static.igem.org/mediawiki/2015/2/2c/Nctu_formosa_homepage_cell.png");
 +
height:100%;
 +
width:100%;
 +
position:relative;
 +
background-size:50%;
 +
background-repeat:no-repeat;
 +
left:5%;
 +
top:0%;
 +
}
 +
 
 +
.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%;
 +
}
 +
         .p-4{
 +
        background:#FCFCDE;
 +
        height:80vh;
 +
position: relative;
 +
background-image:url(https://static.igem.org/mediawiki/2015/8/8d/NCTU_FORMOSA_HOMEPAGE_ECOTECTOR_nR.png);
 +
background-size:80%;
 +
background-position: center;
 +
background-repeat: no-repeat;
 +
}
 +
.div3 img{
 +
width:85%;
 +
margin-left:7.5%;
 +
}
 +
</style>
 +
  </head>
 +
 
 +
<body>
 +
 
 +
 
 +
<div class="div1">
 +
<div class="div1-1">
 +
<video autoplay id="bgvid" controls="true">
 +
<source src="https://static.igem.org/mediawiki/2015/0/09/Nctu_formosa_homepage_vide5.mp4" type="video/mp4">
 +
</source>
 +
        </video>
 +
</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 class="div3 ">
 +
<div class="div3-1">
 +
 +
          <img src="https://static.igem.org/mediawiki/2015/5/51/2015_NCTU_Formosa_Homepage_21.png" align="center" height=250px>  
 +
      <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 class="div3-2">
 +
    <img src="https://static.igem.org/mediawiki/2015/2/2e/NCTU_Formosa_Homepage_antibody.png" align="middle" height=250px>
 +
      <div class="photocontent1"><h2>What's new</h2>
 +
APOllO E.Cotector:<br> 
 +
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.
 +
      </div> </div>
 +
           
 +
          <div class="div3-3">
 +
    <img src="https://static.igem.org/mediawiki/2015/7/77/Nctu_formosa_homepage_photo3.jpg" align="middle" height=250px>
 +
           
 +
        <div class="photocontent1"><h2>What we care about</h2>
 +
       
 +
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>
 +
            </div>
 +
      </div>
 +
</div>
 +
   
 +
        <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>
 
         </div>
 
         </div>
−
        <div class="side">
+
</div>
−
        </div>
+
−
        <div class="textbox">Our project focuses on the diagnoses before and after treatment for cancers. Two systems are constructed for our project. The first system displays scFv on the surface of E.coli while the second one displays gold binding peptide (GBP). 
+
−
Before treatment, by using the fluorescent E.coli with scFv displayed on the surface, IHC procedure can be simplified because secondary antibodies is omitted and solves the problem of non-specific binding of secondary antibodies.
+
−
  A dual system involving E.coli displaying scFv and GBP can solve random orientation of antibodies coating on gold chip to attain an accurate measurement. Therefore, the dual system can also offer a quantitative and accurate diagnosis for after treatment of cancer.
+
−
Our project not only improves the diagnoses of the cancer types before treatment easily but also helps track the patient's condition after treatment by multifaceted measurement technology with more accurate quantitative results!
+
−
        </div>
+
−
    </div>
+
−
    <div class="p03">
+
−
        <div class="upper"><g1>Design / </g1><g2>To display scfv on the E.coli's surface we used a transmembrance fusion protein.</g2>
+
−
        </div>
+
−
        <div class="side">
+
−
        </div>
+
−
        <div class="textbox">ScFv is a single chain variable fragment the binding site for antigen. Comparing to the entire antibody, scFv is smaller for E.coli to display it.To display scfv on the E.coli’s surface we used a transmembrance fusion protein. This fusion protein is composed of Lipoprotein and a small part of outermembrane protein A (OmpA). Its C terminal will connect with the scFv and display it onto the membrane surface of the E.coli.
+
−
        </div>
+
−
    </div>
+
−
    <div class="p04">
+
−
            <div class="upper"><g1>Result / </g1><g2>Sucessfully present our E.cotector</g2>
+
−
        </div>
+
−
        <div class="side">
+
−
        </div>
+
−
        <div class="textbox">testestetsetsetset
+
−
        </div>
+
−
    </div>
+
−
    <div class="p05">
+
−
    <div class="upper"><g1>Modeling / </g1><g2>Find out the best condition of our E.cotector</g2>
+
−
        </div>
+
−
        <div class="side">
+
−
        </div>
+
−
        <div class="textbox">testestetsetsetset
+
−
        </div>
+
−
    </div>
+
−
</div>
+
  
 +
 
 
</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.