Difference between revisions of "Team:NCTU Formosa"

 
(139 intermediate revisions by 8 users not shown)
Line 2: Line 2:
 
<html>
 
<html>
 
<head>
 
<head>
−
  <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:NCTU_Formosa/fullpage.css?action=raw&ctype=text/css">
+
<link href="https://2015.igem.org/Team:NCTU_Formosa/wiki_reset?action=raw&ctype=text/css" rel="stylesheet">
−
  <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:NCTU_Formosa/example.css?action=raw&ctype=text/css">
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 +
<script>
 +
$(document).ready(function(){
 
    
 
    
 +
    if($(".div3").innerHeight()<$(".div3-1").innerHeight()){
 +
        $(".div3").css("height",$(".div3-3").innerHeight());
 +
       
 +
    };
  
−
 
+
});
 +
</script>
 +
<style>
 +
        body{
 +
padding: 0;
 +
margin: 0;
 +
}
 +
.div1{
 +
        background:rgb(42,189,243);
 +
        height:100vh;
 +
        position:relative;
 +
        width:100%;
 +
}
  
−
<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
+
        .div2{
−
<script src="https://2015.igem.org/Team:NCTU_Formosa/easings.js?action=raw&ctype=text/javascript"></script>
+
        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;
 +
}
  
 +
/*圖案*/
  
−
<!-- This following line is only necessary in the case of using the plugin option `scrollOverflow:true` -->
+
        video#bgvid{
−
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+
position:relative;
−
 
+
top:80px;
−
<script src="https://2015.igem.org/Team:NCTU_Formosa/fullpage.js?action=raw&ctype=text/javascript"></script>
+
        min-width: 72%;
−
<script src="https://2015.igem.org/Team:NCTU_Formosa/fullpage.min?action=raw&ctype=text/javascript"></script>
+
        min-height: 72%;
−
<script src="https://2015.igem.org/Team:NCTU_Formosa/example.js?action=raw&ctype=text/javascript"></script>
+
        width: 72%;
−
<script type="text/javascript" src="https://2015.igem.org/Team:NCTU_Formosa/slimscroll.js?action=raw&ctype=text/javascript"></script>
+
    height: auto;
−
<script type="text/javascript">
+
margin:0px auto;
−
$(document).ready(function() {
+
padding-left:13vw;
−
$('#fullpage').fullpage({
+
       
−
anchors: ['firstPage', 'secondPage', '3rdPage'],
+
}
−
sectionsColor: ['#8FB98B', '#fff', '#EAE1C0'],
+
        .p-2{
−
slidesNavigation: true,
+
    background-image:url("https://static.igem.org/mediawiki/2015/8/8f/Apollo_no_background.png");
−
scrollingSpeed: 1000
+
    position:relative;
−
});
+
height:90vh;
−
});
+
    width:90%;
−
</script>
+
background-position:center;
−
<style>
+
    background-size:50%;
−
        /* Style for our header texts
+
    background-repeat:no-repeat;
−
* --------------------------------------- */
+
    left:3%;
−
h1{
+
}
−
font-size: 5em;
+
.photo3-1{
−
font-family: arial,helvetica;
+
background-image:url("https://static.igem.org/mediawiki/2015/5/51/2015_NCTU_Formosa_Homepage_21.png");
−
color: #fff;
+
width:100%;
−
margin:0;
+
height:100%;
 +
position:relative;
 +
top:0%;
 +
left:5%;
 +
background-size:90%;
 +
background-repeat:no-repeat;
 
}
 
}
−
.intro p{
+
.photocontent1{
−
color: #fff;
+
color: #000;
 +
font-family:Arial;
 +
font-size: 18px;
 +
text-decoration:none;
 +
text-align: justify;
 +
margin-left : 8%;
 +
width:80%;
 
}
 
}
−
 
+
−
/* Centered texts in each section
+
.photo3-2{
−
* --------------------------------------- */
+
background-image:url("https://static.igem.org/mediawiki/2015/2/2e/NCTU_Formosa_Homepage_antibody.png");
−
.section{
+
height:100%;
−
text-align:center;
+
width:100%;
 +
position:relative;
 +
background-size:90%;
 +
background-repeat:no-repeat;
 +
left:4%;
 +
top:0%;
 
}
 
}
  
−
 
+
.photocontent2{
−
/* Overwriting styles for the navigation dots (to place it where we want)
+
color: #000;
−
* --------------------------------------- */
+
font-family:Arial;
−
.fp-slidesNav.bottom{
+
font-size: 18px;
−
bottom: 25px;
+
text-decoration:none;
 +
text-align: justify;
 +
position:absolute;
 +
top:50%;
 +
left:8%;
 +
height:50%;
 +
width:80%;
 
}
 
}
−
 
+
.photo3-3{
−
/* Bottom menu
+
background-image:url("https://static.igem.org/mediawiki/2015/2/2c/Nctu_formosa_homepage_cell.png");
−
* --------------------------------------- */
+
height:100%;
−
#infoMenu li a {
+
width:100%;
−
color: #fff;
+
position:relative;
 +
background-size:50%;
 +
background-repeat:no-repeat;
 +
left:5%;
 +
top:0%;
 
}
 
}
  
−
#section2 h1{
+
.photocontent3{
−
color: #333;
+
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;
−
/* Sections
+
−
* --------------------------------------- */
+
−
#section0 img{
+
−
    margin: 0px 0px 0px 0px;
+
−
}
+
−
#section1 img{
+
−
margin: 0px 0 0 0;
+
−
}
+
−
#section2 img{
+
−
margin: 0px 0 0 52px;
+
−
}
+
−
#section3 img{
+
−
bottom: 0px;
+
−
position: absolute;
+
−
margin-left: -420px;
+
−
}
+
−
.intro{
+
−
         background:#01C1A1;
+
−
         height:100vh;
+
 
position: relative;
 
position: relative;
−
background-image:url(https://static.igem.org/mediawiki/2015/d/d5/NCTU_Formosa_Homepage_Get_ready_to_explore.png);
+
background-image:url(https://static.igem.org/mediawiki/2015/8/8d/NCTU_FORMOSA_HOMEPAGE_ECOTECTOR_nR.png);
−
background-size:120% 170%;
+
background-size:80%;
 
background-position: center;
 
background-position: center;
−
cursor:pointer;
+
background-repeat: no-repeat;  
−
}
+
}
 +
.div3 img{
 +
width:85%;
 +
margin-left:7.5%;
 +
}
 
</style>
 
</style>
 
   </head>
 
   </head>
Line 97: Line 185:
 
  <body>
 
  <body>
  
−
<div id="fullpage">
 
  
−
<div class="section " id="section0">
+
<div class="div1">
−
<div class="intro">
+
<div class="div1-1">
−
<img src="https://static.igem.org/mediawiki/2015/3/33/2015_NCTU_Formosa_%E9%A6%96%E9%A0%81%E5%A4%A7%E5%9C%96.png" alt="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">
−
</div>
+
</source>
 +
        </video>
 +
</div>
 
</div>
 
</div>
−
<div class="section" id="section1">
+
   
−
    <div class="slide" id="slide1" data-anchor="slide1">
+
    <div class="div2">
−
<img src="https://static.igem.org/mediawiki/2015/e/e3/Homepageside1.png" >
+
<div class="p-2"></div>
−
</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 class="slide" id="slide2" data-anchor="slide2">
+
−
<img src="https://static.igem.org/mediawiki/2015/2/2e/Homepageside2.png" >
+
−
</div>
+
−
 
+
−
<div class="slide" id="slide3" data-anchor="slide3">
+
−
<img src="https://static.igem.org/mediawiki/2015/e/ef/Homepageside3.png" >
+
−
</div>
+
−
 
+
 
</div>
 
</div>
−
<div class="section" id="section2">
+
   
−
<div class="intro" onclick="location.href='https://2015.igem.org/Team:NCTU_Formosa/Project';"><div id="move-it"></div>
+
    <div class="div3 ">
−
</div>
+
<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>
 +
   
 +
        <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>
−
</div>
 
−
 
−
<script src="https://2015.igem.org/Team:NCTU_Formosa/source/superscrollorama.js?
 
−
action=raw&ctype=text/javascript"></script>
 
−
    <script src="https://2015.igem.org/Team:NCTU_Formosa/source/TweenMax.min.js?
 
−
action=raw&ctype=text/javascript"></script>
 
−
<script>
 
−
$(document).ready(function() {
 
−
var controller = $.superscrollorama();
 
−
// individual element tween examples
 
−
controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), .5, {css:{opacity: 0}}));
 
−
 
−
controller.addTween('#move-it', TweenMax.from( $('#move-it'), .8, {css:{left:0, bottom:0}, ease:Quad.easeOut}));
 
−
})
 
−
</script>
 
−
    <script type="text/javascript">
 
−
/* 淡入淡出*/
 
−
$(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.