Difference between revisions of "Team:NCTU Formosa"

Line 1: Line 1:
−
{{Team:NCTU_Formosa/navigation}}
 
 
<html>
 
<html>
 
<head>
 
<head>
−
<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/fullpage.css?action=raw&ctype=text/css">
 +
  <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:NCTU_Formosa/example.css?action=raw&ctype=text/css">
 +
 
  
 +
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  
−
<!doctype html>
+
<!-- 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". -->
−
<html>
+
<script src="https://2015.igem.org/Team:NCTU_Formosa/easings.js?action=raw&ctype=text/javascript"></script>
−
<head>
+
 
−
<style type="text/css">
+
 
−
body {
+
<!-- This following line is only necessary in the case of using the plugin option `scrollOverflow:true` -->
−
color:#000;
+
<script type="text/javascript" src="https://2015.igem.org/Team:NCTU_Formosa/slimscroll.js?action=raw&ctype=text/javascript"></script>
 +
 
 +
<script src="https://2015.igem.org/Team:NCTU_Formosa/fullpage.js?action=raw&ctype=text/javascript"></script>
 +
<script src="https://2015.igem.org/Team:NCTU_Formosa/fullpage.min?action=raw&ctype=text/javascript"></script>
 +
<script src="https://2015.igem.org/Team:NCTU_Formosa/example.js?action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2015.igem.org/Team:NCTU_Formosa/slimscroll.js?action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript">
 +
$(document).ready(function() {
 +
$('#fullpage').fullpage({
 +
anchors: ['firstPage', 'secondPage', '3rdPage'],
 +
sectionsColor: ['#8FB98B', '#fff', '#EAE1C0'],
 +
slidesNavigation: true,
 +
scrollingSpeed: 1500
 +
});
 +
});
 +
</script>
 +
<style>
 +
        /* Style for our header texts
 +
* --------------------------------------- */
 +
h1{
 +
font-size: 5em;
 +
font-family: arial,helvetica;
 +
color: #fff;
 
margin:0;
 
margin:0;
−
padding-top:4vh;
 
−
background:#fff;
 
−
font-family:Myriad Pro;
 
 
}
 
}
−
/*    插入導覽列    */
+
.intro p{
−
div.p01 {
+
color: #fff;
−
height:120vh;
+
}
−
position:relative;
+
−
background-image:url("https://static.igem.org/mediawiki/2015/3/33/2015_NCTU_Formosa_%E9%A6%96%E9%A0%81%E5%A4%A7%E5%9C%96.png");
+
−
                background-size:100%;
+
−
                background-repeat:no-repeat;
+
−
                top:-15vh;
+
  
−
               
+
/* Centered texts in each section
 +
* --------------------------------------- */
 +
.section{
 +
text-align:center;
 
}
 
}
−
    .p02{
+
 
−
position: relative;
+
 
−
height:280vh;
+
/* Overwriting styles for the navigation dots (to place it where we want)
−
    }
+
* --------------------------------------- */
−
    .p03{
+
.fp-slidesNav.bottom{
−
        background:#01C1A1;
+
bottom: 25px;
−
        height:100vh;
+
−
position: relative;
+
−
background-image:url(https://static.igem.org/mediawiki/2015/d/d5/NCTU_Formosa_Homepage_Get_ready_to_explore.png);
+
−
background-size:120% 170%;
+
−
background-position: center;
+
−
cursor:pointer;
+
−
    }
+
−
video#bgvid{
+
−
position: absolute;
+
−
    min-width: 100%;
+
−
    min-height: 100%;
+
−
    width: 100%;
+
−
height: auto;
+
−
    z-index: -100;
+
−
}
+
−
#fade-it{
+
−
position: absolute;
+
−
top: 11vh;
+
−
left:24vw;
+
−
font-size:2.5em;
+
 
}
 
}
−
#move-it{
+
 
−
background-image:url(https://static.igem.org/mediawiki/2015/1/1a/NCTU_Formosa_homepage_point.png);
+
/* Bottom menu
−
background-size:100% 100%;
+
* --------------------------------------- */
−
width:9vw;
+
#infoMenu li a {
−
height:18vh;
+
color: #fff;
−
position:absolute;
+
−
left: 30vw;
+
−
bottom:30vh;
+
 
}
 
}
−
.apollo{
+
 
−
background-image:url("https://static.igem.org/mediawiki/2015/5/53/2015_NCTU_Formosa_11897155_889492047791513_1100794190_n.jpg");
+
#section2 h1{
−
position:relative;
+
color: #333;
−
height:17vh;
+
−
width:16vw;
+
−
left:82vw;
+
−
top:1vh;
+
−
background-size:90%;
+
−
background-repeat:no-repeat;
+
−
}
+
−
.photo1{
+
−
background-image:url("https://static.igem.org/mediawiki/2015/5/51/2015_NCTU_Formosa_Homepage_21.png");
+
−
height:100vh;
+
−
width:60vw;
+
−
position:relative;
+
−
background-size:100%;
+
−
background-repeat:no-repeat;
+
−
}
+
−
.photo11{
+
−
    background-image:url("https://static.igem.org/mediawiki/2015/7/7e/2015_NCTU_Formosa_Homepage_212.png");
+
−
height:105vh;
+
−
width:40vw;
+
−
top:20vh;
+
−
position:absolute;
+
−
background-size:90%;
+
−
background-repeat:no-repeat;
+
−
left:62vw;
+
−
        }
+
−
.photocontent{
+
−
color: #000;
+
−
font-family:Nexa Light;
+
−
font-size: 24px;
+
−
text-decoration:none;
+
−
text-align:left;
+
−
position:absolute;
+
−
top:50vh;
+
−
left:65vw;
+
−
height:20vh;
+
−
width:32vw;
+
−
}
+
−
.photo2{
+
−
background-image:url("https://static.igem.org/mediawiki/2015/f/fe/2015_NCTU_Formosa_Homepage_222.png");
+
−
height:70vh;
+
−
width:40vw;
+
−
position:relative;
+
−
background-size:80%;
+
−
background-repeat:no-repeat;
+
−
left:2vw;
+
−
padding-top:0vh;
+
−
}
+
−
.photo22{
+
−
background-image:url("https://static.igem.org/mediawiki/2015/archive/3/36/20150828090421%212015_NCTU_Formosa_Homepage_22.png");
+
−
height:105vh;
+
−
width:55vw;
+
−
top:105vh;
+
−
position:absolute;
+
−
background-size:100%;
+
−
background-repeat:no-repeat;
+
−
left:44vw;
+
−
}
+
−
.photo23{
+
−
background-image:url("https://static.igem.org/mediawiki/2015/e/ec/2015_NCTU_Formosa_Homepage_223.png");
+
−
height:105vh;
+
−
width:60vw;
+
−
top:130vh;
+
−
position:absolute;
+
−
background-size:60% 50%;
+
−
background-repeat:no-repeat;
+
−
left:3vw;
+
−
}
+
−
.photocontent2{
+
−
color: #000;
+
−
font-family:Nexa Light;
+
−
font-size: 24px;
+
−
text-decoration:none;
+
−
text-align:left;
+
−
position:absolute;
+
−
top:144vh;
+
−
left:4vw;
+
−
height:20vh;
+
−
width:35vw;
+
−
}
+
−
.photo3{
+
−
background-image:url("https://static.igem.org/mediawiki/2015/a/a8/2015_NCTU_Formosa_Homepage_23.png");
+
−
height:80vh;
+
−
width:60vw;
+
−
top:5vh;
+
−
position:relative;
+
−
background-size:100%;
+
−
background-repeat:no-repeat;
+
−
}
+
−
.photo31{
+
−
background-image:url("https://static.igem.org/mediawiki/2015/e/ee/2015_NCTU_Formosa_Homepage_232.png");
+
−
height:105vh;
+
−
width:40vw;
+
−
position:absolute;
+
−
background-size:90%;
+
−
background-repeat:no-repeat;
+
−
left:62vw;
+
−
top:190vh;
+
−
}
+
−
.photo32{
+
−
background-image:url("https://static.igem.org/mediawiki/2015/e/e3/2015_NCTU_Formosa_Homepage_233.png");
+
−
height:110vh;
+
−
width:40vw;
+
−
top:20vh;
+
−
position:absolute;
+
−
background-size:90% 50%;
+
−
background-repeat:no-repeat;
+
−
left:62vw;
+
−
top:210vh;
+
−
}
+
−
.photocontent3{
+
−
color: #000;
+
−
font-family:Nexa Light;
+
−
font-size: 23px;
+
−
text-decoration:none;
+
−
text-align:left;
+
−
position:absolute;
+
−
top:220vh;
+
−
left:65vw;
+
−
height:20vh;
+
−
width:30vw;
+
 
}
 
}
 +
 +
 +
.fp-tableCell {
 +
          display: table-cell;
 +
          vertical-align: middle;
 +
          width: 100%;
 +
          height:40%;
 +
}
 +
/* 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 p{
 +
width: 50%;
 +
margin: 0 auto;
 +
font-size: 1.5em;
 +
}
  
−
</style>
+
</style>
 +
  </head>
 +
 
 +
<body>
  
−
</head>
+
<div id="fullpage">
  
−
<body>
+
<div class="section " id="section0">
−
<div class="container">
+
<div class="intro">
 +
<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"/>
 +
 +
</div>
 +
</div>
 +
<div class="section" id="section1">
 +
    <div class="slide" id="slide1" data-anchor="slide1">
 +
<img src="https://static.igem.org/mediawiki/2015/e/e3/Homepageside1.png" >
 +
</div>
  
−
<div class="p01">
+
    <div class="slide" id="slide2" data-anchor="slide2">
−
    <video autoplay id="bgvid">
+
<img src="https://static.igem.org/mediawiki/2015/2/2e/Homepageside2.png" >
−
<source src="1" type="video/mp4">
+
</div>
−
</video>
+
 
−
    </div>
+
<div class="slide" id="slide3" data-anchor="slide3">
−
    <div class="p02">
+
<img src="https://static.igem.org/mediawiki/2015/e/ef/Homepageside3.png" >
−
                    <div class="apollo"></div>
+
</div>
−
<div class="photo1"></div>
+
 
−
        <div class="photo11"></div>
+
</div>
−
<div class="photocontent">
+
<div class="section" id="section2">
−
        NCTU_Formosa created an organization-APOllO, which stands for Almighty Probe of scFv Organization. APOllO   
+
<div class="intro">
−
        devoted to developing detection technology by utilizing antibodies. In 2015, We cooperated with iGEM with Synthetic 
+
<h1>Enjoy it</h1>
−
        Biology to develop a brand new detection platform. </div>
+
</div>
−
<div class="photo2"></div>
+
</div>
−
<div class="photo22"></div>
+
−
<div class="photo23"></div>
+
−
<div class="photocontent2">
+
−
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 class="photo3"></div>
+
−
<div class="photo31"></div>
+
−
<div class="photo32"></div>
+
−
<div class="photocontent3">
+
−
<font ="Nexa Bold">APOllO E.Cotector:</font><br>
+
−
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:<br>
+
−
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 style="position:relative;">
+
−
    <div style="width:40vw;height:5vh;position:absolute;left:0;float:left;background-color:#00171F;color:#fff;font-family:Myriad Pro;font-size:2em;padding:4vh 0vw 7vh 7vw;">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 style="width:60vw;height:5vh;position:absolute;right:0;float:left;background-color:#263A40;color:#fff;font-family:Myriad Pro;font-size:2em;padding:4vh 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>
+
−
            &nbsp;&nbsp;Engineering Building 6 EF455, 1001 University Road, Hsinchu 300, Taiwan, ROC. </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>

Revision as of 08:38, 4 September 2015

1

Enjoy it